CLIENT
Wizlab Design Team
ROLES
UX Designer
COLLABORATORS
Wizlab Design Team
TIMELINE
12 months
OVERVIEW
The purpose of Wizlab is to be your time-saving educational AI assistant. This case study is a story and reflection of how a consistent design system can be used to drive retention, efficiency, and user delight.
APPROACH & STRATEGY
The Wizlab design system was a natural product of the entire PDC of Wizlab. Starting in the product’s infancy, I believed that it would be less of a hassle in terms of documentation and establishing governances.
BUSINESS PROBLEM
How can we ensure that the quality of our product is maintained in the long term?
HYPOTHESIS
We believe that establishing a comprehensive design system early will ensure quality and consistency in Wizlab's user experience.
USER PROBLEM
Although user feedback indicate that Wizlab is doing what users need, implementation of new features from the roadmap could change that.
HYPOTHESIS
We believe that creating a design system will lower or eliminate risks of user experience degradation or inconsistency, in the long term.
DESIGN APPROACH
Core needs: varying needs, varying progress, and time costs
These are the main needs that Wizlab set out to solve for language learners. They also helped form the guiding principles that guided Wizlab's development and design system.
Efficient
Consistent
Easy to Use
We believed that following all these principles would result in a faster tool for teachers.
PROBLEM SOLVING
Use Case | Editor Page
An example of the design system in action was in the Editor Page. Specifically the side bar, which saw several iterations to achieve those core principles.
Old Editor - Expanded
Old Editor - Collapsed
Old Side Bar
Editor Bar
Proportions of buttons, labels, and icons were inconsistent and misaligned with other components.
Iteration 2
Iteration 3
Experimenting with tab locations and thinner buttons. Matching the 56px height of the editor bar and keeping tabs in one pill was more consistent.
SOLUTION
Editor Page Final
Applying the design system created a more uniform / consistent layout that eliminates surprises for our users. By establishing patterns in the design, we achieved a more efficient, consistent, and usable editor that sped the process up.
Editor Page Animated
Impacts + Outcomes
Circling back to our original user problems, business goals, and communicating impact.
BUSINESS PROBLEM
How can we ensure that the quality of our product is maintained in the long term?
HYPOTHESIS
We believe that establishing a comprehensive design system early will ensure quality and consistency in Wizlab's user experience.
IMPACT
Since establishing our design system 90% of first designs utilized components from our library and our team continues to contribute to the library. From this utilization, we can conclude that the value this design system brings is comprehensive help that allows our designers to maintain consistent quality throughout the product.
USER PROBLEM
Although user feedback indicate that Wizlab is doing what users need, implementation of new features from the roadmap could change that.
HYPOTHESIS
We believe that creating a design system will lower or eliminate risks of user experience degradation or inconsistency, in the long term.
IMPACT
From the day we released this to teachers, we have been receiving positive user feedback on our new features.
This is great time saver
Everyone should be using this instead of planning manually
Making lessons was a time-sink, so being able to simplify that process is game-changing
TEAM
Although there were no issues working with our founders / engineer / design team, this project had huge effects on how we collaborate.
IMPACT
Efficiency and trust skyrocketed by involving engineering in the early stages of the design process. Discussing technical limitations and options gave me a wide perspective on pros and cons. By working collaboratively, our explorations became more comprehensive and the team was more energized to tackling the next scenario.
DESIGN ACROSS WIZLAB
Owning the design system / practice across our team was a daunting and new challenge. Prior to that, I was the one that followed established design systems rather than the one establishing them.
IMPACT
By taking on ownership of the design system, our findings and designs helped influence all experiences across Wizlab. I was able to influence design practices and governance that encouraged richer components and consistent AI experiences based on our learnings.
For work inquiries or to chat with me, email me at anthonywudesign@gmail.com
Thanks for reading~
