Magotes
User Research and Visual Design Case Study
Platforms: Web App
Team/Role: UX Designer — Magotes Special Project
TL;DR
I led discovery, user research, and design to ship a major visual and functional update to the Chatbooks internal enterprise software. I worked alongside a junior designer and a QA engineer who had been maintaining Magotes for a few years.
Magotes
This software was created in the early days of Chatbooks when there were only a few employees and was bootstrapped together using a $20 website template to provide customer support a way to directly manipulate data in the backend, such as changing customers account information or helping them fix their books.
Problems
The software was built for pure functionality without any design consideration, so while our customer support reps who had been around for a few years could easily navigate and use Magotes, it took a really long time for new reps to learn to use. On top of that, we had released a couple new subscription products recently that weren’t supported very well by the current Magotes framework.
While there were so many things we could have focused on for this redesign, given the narrow timeline for this special project, we chose to focus on two objectives.
- Update the functionality of the tool to better handle our new subscription products.
- Provide a visual update to make Magotes more usable as an enterprise tool and bring it in accordance with the Chatbooks “Breakfast” Design System.
Discovery
User Interviews
In order to understand how the tool was currently being used and what painpoints customer support reps were running into, I conducted user interviews with lead customer support reps who had been collecting complaints about Magotes from their teams.
In each interview, the main talking point was the following prompt:
Walk us through how you interact with subscription products. Why do you interact with them? What tasks do you most often work on?
We followed up with more questions when we noticed an interaction or flow that seemed particularly complicated. Each interview also contained conversations about the following questions:
What about Magotes do you think works really well? What would you like to keep as it currently is? What are the support teams biggest frustrations with Magotes? In your opinion, what are the problem areas that really need to be fixed?
In these interviews, we discovered these key points:
- There was a lot of information displayed in an order header, but the most important information was listed at nearly the same hierarchy as the rest making it difficult to quickly find and interact with.
- There are only two button types; primary and destructive. There is no consistency with how they are used and both act as secondary buttons in different places in the app.
- In the details section, the most frequently used functionality was positioned out of order and there was a lot of real estate dedicated to rarely used functionality.
- The volumes table was cluttered with icons, information, and interactions but there was an enormous amount of inconsistency and most of the actions that users took were buried within submenus while actions rarely used were surfaced on the table.
- There are a lot of missing features and information for subscriptions that customer support needs access to.
- A million other little, intricate details.
Ideation
Because our problems were so well identified through discovery and user research, the solutions to these problems were very clear and identifiable.
- Improve the hierarchy in the order header.
- Improve layout and organization of the details menu.
- Improve the table by increasing consistency with icons and interactions. Surface most frequently used actions on the table itself.
- Overall visual design updates for color, padding, margins, improved labels, and use of improved button types.
Design
The following are the side-by-sides for each section.
In the page header, the majority of the information remained the same with some slight restructuring.
In the order header, I reorganized some of the information based on what gets used most frequently. Infrequently used features and information now take up much less real estate in the header. I also added an order history button which was previously buried under the label, “Active.”
In the tables, we fixed inconsistencies with icons. Previously, icons were used both as buttons and non-interactive indicators with zero differentiating factors. Now icons that are tappable exist next to the row label and indicating icons are below with less hierarchy.
Cover previews are now displayed in-line because support reps were having to open a completely new tab to see the preview, but they only really need to see a small thumbnail.
Actions were moved into a grid on the right of the table and some new actions were surfaced. Additional actions were added that can be applied to multiple selected rows.
Next Steps
This iteration was intentionally a small baby-step in the right direction. We added functionality to handle subscriptions, fixed the visual style, and made many improvements to layout and hierarchy. That being said, there is still so much work needed on Magotes. If I were to limit next steps to the next improvement upon this feature, I’d say more studies need to be conducted to see how customer support reps are using this version and where there are still painpoints. I think the tables and other containers take up significantly more vertical space, which I think could be improved to move more information into view for reps.
One of my favorite pastimes is connecting with other humans! Please reach out and connect with me via LinkedIn or email.
Check out more of my work and don’t hesitate to provide feedback.
Thanks,
— Jackson
