@ University of Toronto
As part of a graduate-level UI design course, I individually developed a design system, task flows, and a Figma prototype for a gamified screen-time management app.
Potato Pal is a mock gamified productivity app that helps users manage screen time and stay accountable. By completing exercise or work sessions, users earn screen time; using their device mid-session voids the reward. If screen time runs out, the app’s mascot, a “Potato Pal”, appears sad until time is replenished, encouraging healthier work-life balance without guilt.
Figma prototype can be viewed here.
Figma file can be viewed here.
Design System
I developed the Figma component library, using Auto Layout, Variants, and naming conventions to keep the system organized and efficient. Each component was designed with reusability, accessibility, and responsiveness in mind.
Colour Palette
Each colour in my chosen palette was tested for WCAG contrast compliance to maintain readability across backgrounds and devices, with a Colour Contrast Matrix created using the EightShapes Contrast Grid tool.
Typography
All text styles were tested for legibility and use cases are documented inside the design system. Potato Pal’s typography prioritizes clarity, hierarchy, and approachability to match the app’s goal-oriented tone.
Task Flows
Link to all screens, overlays, and task flows.
Task flows were also included in the final Figma deliverable to provide clear context on how each screen and/or overlay fits into the overall user journey.
Below is an example task flow of turning on device sync.
