top of page
tutormelogo-adventblue.png

TutorMe

Building a Scalable

Design System

Deliverables

Research, Component Licrary, Guidebook

Platforms

Web

Process

Role

Product Designer

Tools

Figma Library

Components

Design Kit

Project Timeline

PROJECT OVERVIEW

As a Product Designer at Tutor.Me, an AI-powered study helper and essay tool tailored for IB students, I’ve been deeply involved in shaping the foundational user experience of a product with immense potential. Tutor.Me, a pre-seed startup in the Techstars accelerator program, offers me the unique opportunity to work closely with the Head Designer. Together, we’re crafting a comprehensive design system and user flows that not only address current needs but also establish a scalable framework for future growth.

October 2024 - November 2024

PROBLEM

To enhance Tutor.Me’s initial product and improve user satisfaction, we set out to build a design system from the ground up. Our goal was to create a user-centered, cohesive system that would streamline the interface and align closely with the needs of our diverse audience, including students, educators, and parents.

RESEARCH APPROACH

We conducted interviews with IB students, educators, and accessibility experts to understand their preferences and challenges. Questions focused on ideal color schemes, typography legibility, and navigation patterns. These interviews uncovered specific user pain points and preferences

COLORS

Promoted focus and calmness.

Used sparingly to draw attention without

inducing anxiety.

Students found traditional academic interfaces uninspiring and sought visually engaging elements​​

BLUE AND GREEN               

MINIMAL RED USE

HIGH CONTRAST

Ensured readability and accessibility, particularly for students with visual impairments or dyslexia.

Results

SOLUTION  COLOR PALETTE

Primary Palette Optimized for clarity and focus, with blues and greens forming the core elements.

Secondary Palette Introduced additional hues to create visual hierarchy and support user engagement.

Alert Colors Designed distinct colors for success, warning, and error states, carefully balanced to avoid overwhelming users.

Dark mode compatibility was a fundamental consideration that will be in production in future months

SOLUTION TYPOGRAPHY

We developed a scalable type system featuring responsive, readable fonts. Variable weights allowed seamless adaptation across devices and contexts, ensuring clarity in both instructional text and UI elements.

Results

OUTCOMES

As an early-stage product, TutorMe has successfully completed the Techstars accelerator program, where we built a solid foundation for a scalable and user-focused tool tailored to IB students. While our design system and user interface have been developed, we are eager to enter the next phase of growth with rigorous user testing and iterative improvements.

  • LinkedIn
bottom of page