Role Digital product designer
Team Cross-functional product team, Researcher
Goal Optimise MOO’s design tool for new customers on mobile
Summary
I was part of a cross-functional team working on MOO’s create and upload application, enabling customers to create bespoke printed designs from a range of templates and tools. I was tasked with improving the mobile experience to increase customer conversion. Using iterative user interviews and prototypes, I explored both large and small design solutions to enhance the user experience.
Context
The application was previously desktop only, but was recently made responsive to fit on mobile devices in order to reach the growing mobile market. However, no user testing was involved in the process of reducing the application to a small screen. With no previous insights, my initial goal was to understand how users created a business card and what problems they were having, this would help me to identify quick wins to improve the experience as well as uncover blockers that needed to be redesigned.
User insights
Some of the key user issues we discovered in user testing:
- Error messages were more hindrance than help. Users who triggered error messages and warnings found they could not easily solve them, either because they did not have sufficient information or the notification itself blocked the tools needed to fix the problem.
- Notifications blocked the canvas. Other notifications have similar usability issues to the error notifications, appearing in the same location in the same style, and blocking areas of the screen.
- Editing text is laborious. Text boxes are very small making it very difficult for users to select and edit. While users on smaller devices the keyboard covered the canvas entirely.
- Images are difficult to control. Users found it difficult to position and change their images, quickly making mistakes and triggering bleed error warnings.
- Project name was unclear. The project name function at the top of the screen was almost always misunderstood by users.
- Loading times are slow. Slow loading times and lack of system feedback caused users to drop off.
Error notifications stopped users from progressing in the test because they could not correct or close them.
Editing text is made difficult by the lack of visibilty on screen and very small touch areas.
Lean user research. Each post-it note represents a specific user problem identified in testing, to be prioritised, designed and built.
Iterative user-testing
I set up user interviews to understand how users created a business card on moo.com. I ran these interviews weekly, allowing the rest of the team to observe and help collect notes. These weekly sessions allowed me to adjust the tasks depending on what I was looking into that week. This set-up enabled me to quickly test prototypes for new designs and conduct competitor comparison interviews, enabling me to test various design solutions for the same tools and refine my designs.
To keep it lean, user problems were collected on post-it notes and prioritised with the team using effort/value mapping, enabling us to have a positive impact on the user experience from the start.
Solutions
- Notifications redesigned. In order to declutter and make these notifications clearer, I assessed each notification individually, what was its importance on the page, was there any action needed from the users, was it associated with a specific action. I then provided new design solutions based on these criteria and the MOO design system.
Aditional insights and mental models gathered from user interviews.
Examples of notifications before and after.
- Improvements to perceived performance. To overcome slow loading times, we performed a critical css analysis, to ensure we were only loading what was necessary to start designing, reduced the size of all the assets, including updates in-line with the MOO Design System, and added feedback to screens where loading times could not be optimised, for example, if a user uploads a large file.
- Increasing the visibility of image slots. Setting the hover state as the default was a quick way to highlight the image slots on small devices with minimal effort.
- Project name flow. Saving a project is a vital part of designing on-the-go, but the project name function was not clear. To make this clear, we made some visual changes to the project name bar and its functionality, including the addition of an edit symbol and new placeholder text.
Errors redesigned
Error notifications and warnings were causing more usability issues than they helped to fix, and stopped users from proceeding in the test. We needed a solution to allow users the control and freedom to correct or dismiss the errors.
Remove the error banner. Errors and warnings consisted of a banner at the top of the page and a tooltip over the canvas. In testing users did not associate these two messages, especially on mobile where they were not visible at the same time. Therefore, we removed the top banner notification to focus on the tooltip.
Keep the tooltip in the viewport. The new tooltip notification floats at the bottom of the screen so that it is always visible, allowing users to access their design behind it or close the notification in order to correct the problem.
Provide more information at the review stage. Errors in the review stage did not provide users with any information. I designed a new solution that summarises each error warning at the top of the page, with buttons to explain the next steps to fix.
An updated project name bar with visible image slots.
New error notifications appear at the bottom of the screen.
Example of an warning notification with actions.
Review stage notifications provide more information about the error.
Outcomes and next steps
- All designs that were released or tested as a prototype had positive feedback from users, and performed well compared to their previous versions.
- Remaining designs are to be implemented, monitored and iterated.
- Work continues to look at other areas of improvement such as the toolbars, exploring mobile-first ways to make the application more usable, whilst ensuring there is space to add new features expected by users, such as undo or delete.
Learnings
How to run user interviews. Prior to this project I had only conducted unmoderated user testing, this was my first experience conducting moderated tests and speaking directly with users. This was a great learning experience and will be a valuable tool in the future.
Increase empathy with user testing. Throughout the process I involved other team members, engineers and project managers, inviting them to observe interviews and debriefs, as well as using their vast knowledge of the site to help prioritise issues, creating a living effort / value map. I regularly received positive feedback from the team and noticed a shift in the way they talked about the product, considering the user’s perspective.
Keeping track of insights. Because this was such a lean research project with new insights coming every week and fast turnarounds, I relied heavily on post-it notes. In order to keep a record of all the work that was being done and what was coming up next I created a spreadsheet listing all the issues and linked to JIRA tickets and video clips where possible.
Before and after toolbar exploration work. Making use of touch screen gestures and space.
User quote captured during an interview.
hello@daniellelast.com
© Danielle Last 2020