PROJECTS

DESIGN SYSTEMS AND EXPANDING SCREEN ADAPTIVITY

DESIGN SYSTEMS AND EXPANDING SCREEN ADAPTIVITY

Client

Innovare

Sector

Education, Adminstration, Software

Project Time

3 months

OVerView

Innovare is a start-up Edtech company building a personalized application to make educators' and administrators' lives easier by organizing school and student standardized test data, attendance, and performance in a comprehensive all-in-one tool.  

With the discontinuation of their main prototyping and design tool Adobe XD, I was hired as a Junior Product Design to lead the migration from XD to Figma. I was tasked with developing a cohesive design system that would define Innovare’s product identity and ensure a seamless, adaptive user experience across devices

Book Content

About the APP

User Persona

RISA (20)

A musical enthusiast living in Japan, eager to learn more about the Leopold and Loeb case after watching the musical

Primary KNOWLEDGE

The globalized musical takes out the names and locations of the case to make it universal. It only focuses on Leopold and Loeb.

CULTURAL KNOWLEDGE

Risa is fluent in both Japanese and English

Reading Habits

Often deep reads or close reads any content she is enthusiastic about.

Most FamilIar With

iPad

iPhone

  • Uses iPad to take notes & read

  • Utilizes dark mode

View on THe Case

Critical

Empathetic

Learning Habit

Reading

Visual

Research Desire

Specific

Generalized

Reading Scenario

Watches the Thrill me Japanese musical

Scans the barcode on the ticket of the musical

The ticket takes her to access the app

Uses app to compare the musical to the case and close read the text

Compares between Leopold and Loeb’s analysis to gain further understanding of their relationship

User Persona

RISA (20)

A musical enthusiast living in Japan, eager to learn more about the Leopold and Loeb case after watching the musical

CULTURAL KNOWLEDGE

The globalized musical takes out the names and locations of the case to make it universal. It only focuses on Leopold and Loeb.

Risa is fluent in both Japanese and English

Primary KNOWLEDGE

Reading Habits

Often deep reads or close reads any content she is enthusiastic about.

  • Uses iPad to take notes & read

  • Utilizes dark mode

iPad

iPhone

Most FamilIar With

View on THe Case

Critical

Empathetic

Learning Habit

Reading

Visual

Research Desire

Specific

Generalized

Watches the Thrill me Japanese musical

Scans the barcode on the ticket of the musical

The ticket takes her to access the app

Compares between Leopold and Loeb’s analysis to gain further understanding of their relationship

Uses app to compare the musical to the case and close read the text

READING SCENARIO

IMMERSE
yourself in a vibrant Qing Dynasty world, where every decision shapes your path to mastery.

CRAFT
your strategy and explore endless ways to succeed in a world inspired by the wisdom of Traditional Chinese Medicine.

LEARN


the art of Chinese Medicine and cultural splendor of Qing Dynasty China.

TASK IMPLEMENTATION

Design System

Design System

DESIGN
SYSTEM AUDIT
DESIGN
SYSTEM AUDIT

RESPONSIVE DESIGN

RESPONSIVE DESIGN

Feedback

Feedback

Design System

Design System

Design System

  • Established standards and guidelines for the application of design system components and elements to ensure a consistent and harmonious visual identity for the project.

  • Defined the appearance, behavior, and structure of the core components of the design system, considering user needs and product requirements.

  • Created documentation and guides for using the design system to facilitate its adoption by teams and ensure consistent usage.

Design System Audit

Design System Audit

Design System Audit

  • Established user flows to ensure the design component’s purpose and visualize the product’s usability.

  • Diligently documented all UI updates for developers to implement.

Responsive Design

Responsive Design

Responsive Design

Understanding the limitations of Mobile and Tablet devices, and designing display compositions for landscape and portrait orientations.

Feedback (for all aspects)

Feedback (for all aspects)

Feedback (for all aspects)

Collaborated with the development and management teams through weekly discussions, resulting in idea exchanges and feedback.

Landing Page

Topic Page

Collections Page

Settings Page

Low-Fi Iteration

#1

  • We conceptualized 3 key screens and 1 settings screen that encase the project.

  • The Landing Page holds the three main theme groups for the two figures.

Landing Page

Topic Page

Collections Page

Low-Fi Iteration

#2

  • We changed navigational icons to ones that mirrored the pages themselves more.

  • We redesigned Collections in Performances so it no longer serves as a bookmarking archive but rather a collection of the Thrill Me musical scenes.

  • We enhanced visual differences by changing Leopold's text to look different than Loeb's.

Landing Page

Topic Page

Collections Page

High-Fi Iteration

#3

  • We compiled visual aesthetics by adding all the necessary information and images.

  • First design system variables like overall colors and text are set.

Landing Page

Collections Page

Topic Page

Final Iteration

#4

  • We refined the visual aesthetics to look more formal and less natural, including dramatizing the theme pages and changing the performance page to look more welcoming.

  • We added colors and double-sided navigation tabs for the Information page to help the user identify the different possible interactions.

Landing Page

Topic Page

Collections Page

Settings Page

Low-Fi Iteration

#1

  • We conceptualized 3 key screens and 1 settings screen that encase the project.

  • The Landing Page holds the three main theme groups for the two figures.

Landing Page

Topic Page

Performance Page

Topic Page

Low-Fi Iteration

#2

  • We changed navigational icons to ones that mirrored the pages themselves more.

  • We redesigned Collections in Performances so it no longer serves as a bookmarking archive but rather a collection of the Thrill Me musical scenes.

  • We enhanced visual differences by changing Leopold's text to look different than Loeb's.

Landing Page

Topic Page

Performance Page

Topic Page

High-Fi Iteration

#3

  • We compiled visual aesthetics by adding all the necessary information and images.

  • First design system variables like overall colors and text are set.

Landing Page

Topic Page

Performance Page

Topic Page

Final Iteration

#4

  • We refined the visual aesthetics to look more formal and less natural, including dramatizing the theme pages and changing the performance page to look more welcoming.

  • We added colors and double-sided navigation tabs for the Information page to help the user identify the different possible interactions.

Impact

There have been several significant improvements resulting from the implementation of the design system to which I contributed: the adoption of the design system has driven higher productivity, shortened development timelines, and elevated the user experience, underscoring its value and contributing to the company’s ongoing growth and success.

+88%

+88%

Team Engagement

Team Engagement

+40%

+40%

Meeting EfficIency

Meeting EfficIency

+95%

+95%

Project Delivery

Project Delivery

Lets Connect!

Follow me

© Lin Li 2025. All Rights Reserved.

Lets Connect!

Follow me

© Lin Li 2025. All Rights Reserved.

Lets Connect!

Follow me

© Lin Li 2025. All Rights Reserved.