RightOn! is a web platform that helps students embrace math mistakes as learning opportunities by encouraging discussion around misconceptions and supporting social-emotional and cognitive growth.
As a startup, RightOn!’s early design system was inconsistent—featuring mismatched colors, icon sizes, padding, and unstandardized components. Poor organization and unclear naming also made onboarding difficult. We set out to redesign the system for consistency, reusability, and ease of use across teams and apps.
Streamlined the Figma file
Removed redundancies and enforced consistent visual patterns.
Improved Usability
Created well-organized, clearly named components for easier navigation
Enhanced Collaboration
Built reusable components that simplified handoff between designers and developers.
We began the redesign by clarifying why the update was necessary—aligning on the core problems to ensure our efforts stayed focused and purposeful.
Lack of visual consistency across apps led to a fragmented brand identity and unpolished user experience.
Inefficient design process due to reinventing components for each prototype, slowing down iteration.
Poor Figma setup with missing or non-scalable components made design-to-dev handoff difficult and error-prone.
With The Why clarified, we individually audited the existing design system—grouping components by type and identifying inconsistencies and gaps. Below is my audit.
We then regrouped and solidified our audits into one, ensuring we had covered all bases.
Auditing the system revealed scattered, unorganized components and major gaps—like missing interactive states, inconsistent typography, duplicates, and unclear layout guidelines. This helped us identify and prioritize the most critical areas for improvement.
With the audit complete, we divided component ideation across the team—I focused on buttons, navigation, assets, and dropdowns, while my teammate handled cards. We also held collaborative sessions to share ideas and gather feedback.
The start of my button ideation looked quite different to the end result.
Here you can see my navigation ideation.
Although we each focused on different components of the design system, collaboration remained central to our process. We worked closely not only within the team but also with the CEO and lead developer. Regular check-ins, updates, and workshops ensured everyone was aligned and that our work was progressing in the right direction.
Given RightOn’s small team, we wanted to make sure the CEO and lead developer felt included in the process. We facilitated this through design studios, where we presented our before-and-after designs, shared our recommendations, and actively sought their feedback to ensure the system reflected the company’s vision.
Below is what I presented.
After presenting our proposed updates and receiving feedback from our stakeholders, we moved to a vote on the color scheme.
We presented some of the ideas we came up with during a UX Team working session, but hadn't made a final decision on the color as we felt the CEO would want to have a say.
The final steps included making final UI decisions which were WCAG 2.0 compliant and writing up documentation for a smooth handoff to dev.
Improved visual consistency and accessibility across the platform, reducing UI-related QA feedback by 40%.
Streamlined handoff between design and development, decreasing implementation time by approximately 30%.
Enabled faster onboarding and more scalable feature development through reusable components and clear documentation.
