Designing a mobile app for HappyFox helpdesk
HappyFox helpdesk mobile app has been used by 12,000 companies in 70+ countries. Lot of agents & users rely on mobile app to easily respond to their customers on the go. The problem - Agents were having trouble using list view because a). navigating between subject is hard because of inconsistent user interface pattern b). context is missing without showing latest customer reply in the list view
Agents were having trouble using list view because a)navigating between subject is hard because of inconsistent user interface pattern b)context is missing without showing latest customer reply in the list view
What the design looked like before
Users can only view a small amount of content at a time because of poor information architecture & white space
Too many action button inside list items is unnecessary & making the content less scan friendly
Without supporting visuals list view looks less appealing aesthetically & UI feels more content heavy
By default the app opens queues page - Why do users always have to select a queue instead of seeing the latest updates at first?
Exploring possible solutions 🔮
I started exploring different options based on following pointers
List view prevents over scrolling by providing more information in a visible area.
Remove any unnecessary items from the list e.g. more options
List view should follows a natural reading patterns like the F-shaped pattern
Tap affordance for the ‘list items’ should be improved
All list items should have consistent dimension
Picture conveys a thousand words and lists are meant to be scannable. So it makes sense to introduce supporting visuals
Here are some early ideas that I sketched out.
My initial explorations
List of possible options I tried for list view. There are lot information we should convey to our user at first glance and It forced me to come up with four line list UI design which is not recommended though. For a presentation purpose I created those designs.
Our final pick
I have organized all required information logically and ordered them intuitively
This design was user tested via prototype that I created using figma. After testing this prototype with internal support agents, we found out
Visual design is easily scannable, informative and easy on the eyes.
Agents gets better context about the ticket with latest update/message below subject
Misclick rate is completely off table because of removing web app like action buttons
A coded prototype helped us test more realistic interactions with live data. After rolling out the new list page to the internal team, we had an ⬆️ 26% increase in daily active mobile users.