I led the research, design and testing effort to realign the app on a user experience design system in order to simplify and streamline the app as new functionality was being added.
Modumate
UX Design System
Product Design, UX ResearchFoundation for a new era
Users struggled with a variety of small UI issues across the app from input fields looking disabled, text being too small or rendered blurry, and general overload for new users. This data collected from over 6,000 user sessions and 150+ demos, trainings, and interviews was synthesized into key goals for the project.
Version 3 introduced a beta version of the app’s Figma-esque redesign as it transitioned from unreal to the web. I took over the beta and revisited the design system as we began to add a number of large features to cater to a larger and more diverse user base.
We took a thorough approach to designing a component library for Modumate - starting with research, customer interviews, and collaboration from engineering.
Goals:
Principles and Approach
We started with accessibility in mind - how can Modumate be more intuitive. Help guides, keyboard shortcuts, and a consistent pattern for buttons, inputs, cursors, and iconography were all designed with flexibility in mind.
We revisited the tool and property panels and introduced new share, schedule, and drawing designer features that match in design patterns to help users learn as they work.
Testing and Iteration
Since our client for this project was both the users and our engineering team, we took an iterative approach so that we would end up with a foundation we could build on for years. As design and prototyping was done in a collaborative process, we relied heavily on feedback from users for our design system guidelines.
We relied on A/B testing and user research to ensure the changes improved usability. Given many of the changes were small CSS changes, it was quick to put designs in front of users and iterate based on feedback and user behavior. This also helped us decide where too put attention in new or custom components for frequently used features such as the rendering tools and quick views.