Modumate - UI Library Overhaul
A new UI component library helped Modumate mature with expanded functionality and the customer need for a consistent user experience.
Other Modumate projects: Onboarding | UI Library | Schedules | Snapshot | Marketplace
My Role
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.
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.
UI Component Library
We took a thorough approach to designing a component library for Modumate - starting with research, customer interviews, and collaboration from engineering.
We took a thorough approach to designing a component library for Modumate - starting with research, customer interviews, and collaboration from engineering.
Problem Statement
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.
Before and After - As Modumate added complexity and feature depth, a new UI design system was required.
Design Principles
Provide engineering with a comprehensive library of UI components that would speed up development while improving usability with help affordances were the primary goals. The UI should be a guide in helping users be better modelers, not a hurdle to overcome.
Design Tokens
The team solicited a team to design a visual language and brand for the app as we transitioned from closed beta to a market ready modeler. We used these tokens as a cornerstone for the visual langage of the company as well as the foundation for the design system.
UI Components
We started with accessibility in mind. Help guides, keyboard shortcuts, and a consistent pattern for buttons, inputs, cursors, and iconography was 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.
Collaboration
What made the UI library a successful project was not the design but the implementation. We worked with engineering as partners in the design and actively collaborated to define what the system should be based on what was possible with code already written.
An example was the properties panel - working with engineering helped us understand how properties are organized and we harnessed that to make a more flexible, organized, and standardized component.
Testing and Iteration
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.
Next Steps
The UI library was also part of a roadmap exercise where most requested features were collected and creative solutions were submitted for development. One feature was a command bar function to replace the tool search. Collecting content into a single context-aware search interface presented unique opportunities for the app to grow.
Other Modumate projects: Onboarding | UI Library | Schedules | Snapshot | Marketplace