Creating a Design System to build a cohesive product at Simbi
Team
1x designer
My Role
Creation and maintainence of design system
Overseeing implementation in production
Impact
Redesign facilitated 15x DAU growth over 2 year period
About the Company
Simbi is an ed-tech web platform used by teachers and K-12 students.
Simbi provides a library of books, and reading and narration capabilities for schools and students.
As students read and narrate these books, they improve their reading skills.
Teachers use Simbi to create and review assignments and track their students' progress.
Problem area
Simbi's user interface was outdated and incoherent.
Over a 2 year period, most of Simbi's features were redesigned.
The company was new and did not have a design system. Each new release would include UI elements that looked and worked differently from the last.
This leads to poor usability and low trust in the platform.
Many UI elements were also not designed with accessibility in mind.
Before the Design System was implemented, different parts of the UI might have different looking elements, like these text input fields and buttons.
Overall Goals
How might we align each designer's and developer's output to create a cohesive product together?
Specific Goals
Ensure all designers use the design system for future design work
Oversee the redesign of all product features to ensure implementation of the design system
Provide engineering team with a library to implement
Key Contributions
I created and maintained a design system that supported all new and redesign projects.
This included standard, accessibility-focused styling for UI elements, like:
Form elements
Buttons
Accessible text styling
Icons
Accessible color scheme
Responsive popup layouts
Book cover specs
Notifications
Process
Creating the design system involved collaborating with product, engineering and marketing teams.
I maintained a library on Figma used by designers and developers to build UI.
One challenge was coordinating with developers to release the Design System across multiple feature updates.
One feature might include buttons, and the next feature might include updated form elements, but no updates on buttons.
These updates required careful tracking and revision over time.
A section of the Simbi Design System Figma library
The design system was implemented in Simbi's UI through several new and redesigned features.
These included registration and onboarding, LMS features like group management and assignment creation, profile pages, and various menus and popups throughout the Simbi UI.
Sign in and Registration flows were updated to support a new subscription model for the product.
Previous registration UI
New registration UI
Teachers use Simbi to create and manage reading assignments for their classrooms. We redesigned Assignments to be more usable.
Previous assignment creation UI
New assignment creation UI
Teachers also use Simbi to keep track of their students' reading progress. We redesigned how they access and review their classroom groups.
Previous Group management UI
New Group management UI
Teachers and students look for books on Simbi's Library. The feature was updated to support book cover images in various shapes and sizes.
Previous book library UI
New book library UI
New student-facing profile page
We also created new ways for students to track their own learning progress, through their profile page.
I worked alongside the marketing team to enable consistent design across marketing channels.
This included setting up design guidelines for the team, reviewing designs as they're ready for publishing, and giving presentations on how to effectively use the system.
Guidelines for the team for using typography
Guidelines for the team for using colors
Finished work by marketing, with elements, colors and typography following the design system
