Zammad

Zammad is a web-based open source helpdesk/customer support system with many features to manage customer communication via several channels.

The folks over Zammad have requested my help in their ongoing effort to make the best CRM system in the business. They were not looking for a completely new redesign neither it was their intention to break some of the flows that their current user-base grew with. Thus the goal was to simplify what it could be simplified while emphasizing the main user stories using nothing else than open source software.

Zammad logo

My analysis started with reading the Zammad websites, Git repository, and their user forum. I also used the Zammad system for my own customers. Due to time and financial constraints we decided to focus solely on the main navigation. Here are a couple of screencasts documenting possible flaws, missing states or convoluted elements in the current application.

zammad screencast of its mainnavigation
Click to see the animated GIF

zammad screencast of firststeps tab

 

 

 

 

 

 

 

Normally I would sketch a few UID. However and due to this project’s scope I instead asked for any existent information on user stories, user flows or even comments and jumped right into low fidelity prototype (LFP). Here is a demonstration of UID using Inkscape.
User Interface Diagram for Zammad

Customize Screen from Zammad LFP
Click to open prototype

I end up doing many iterations on the LFP, as I normally do. It’s a fantastic opportunity to test with users right the place they expect to see the end product: web-browser.

 

In here the interaction is key, stripped from any aesthetic concerns we concentrated on user flow, states, and clicks. I used Pencil Evolvus for that, mainly because of its options when it comes to exporting.

With the navigation tackled down, we proceed with the next phase, the user interface. Even though mobile was not in the scope I tried to don’t be dismissive of small desktop screens, especially because the current app doesn’t work well in such screen sizes.

An interesting customary from their users is the side panel. They are used to have many tickets open on the left and thus it was really important to simplify the number of actions and how they are communicated, by adding labels and redesigning the whole navigation.

Screenshot from design workflow in the Zammad project

Zammad new design by Pedro SilvaZammad dashboard#Activity screen from the new design by Pedro Silva