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.
Client
Faculty of Applied Science & Engineering, UofT
Role
UX/UI Designer
Team
Project Manager
Development Manager
2 Engineers
Duration
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], Cult.fit [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
