top of page

OSP Design System

Establishing a unified design language for Online Student Portal as the first designer on the team

The Online Student Portal is a web platform for applicants to submit undergraduate admissions applications. So far, the team consisted only of a project manager and engineers. With no involvement of design in the development lifecycle, there was a severe lack of visual and interaction coherence in the portal. The resulting cluttered and inconsistent interface created a negative user experience for the applicants using the portal. 


Faculty of Applied Science & Engineering, UofT


UX/UI Designer


Project Manager

Development Manager

2 Engineers


6 weeks

The Need

Why was there a need for a Design System?

1. Inconsistency in UI elements

By conducting a thor

Exploring product idea

Ideation & Brainstorming

I began the project with market research to identify an area of opportunity. I analyzed current big players in the market Alpha Progression - Gym Logger [100k+ downloads], Fitify: Fitness Home Workouts [10M downloads], [10M+ downloads] and Freelectics [10M+ downloads]. I looked at their features offered and gaps in their current offerings. I used this information for ideation and brainstorming core product features. 

Defining app structure

Information Architecture

The next step was to map out the structure of the whole app with the core features

Fleshing out the features

Task Flows

Based on the core features offer by this app, I identified the three primary task flows:

1. Create a custom exercise routine.

2. Using the exercise routine to do a workout.

3. Inviting friends to join in a workout. 

Setting a visual language

Task Flows

I built the design system and component library so ensure a consistent and coherent design across all screens. Adhering to the Google Material Design guidelines, this design system can be extended as new features are developed.

Final Designs

Select exercise routine
& invite friends

Users can select a custom routine they created, view the exercise and set details. They can either workout alone or invite friends to join them.

Working out with the selected routine & performance tracking

The interval timer takes the user through all the exercise and rest intervals tracking their performance in each set. The workout summary screen also shows how their performance compares with previous, personal best as well as their friend's performance.

Light mode

Light mode.png
bottom of page