top of page
Top of page
wkr main image.jpg


UI Case Study 

This project was completed as part of the CareerFoundry UI for UX Designers Program

Project Overview


This project was based upon a chosen project brief provided by CareerFoundry, which included: project context, user persona and corresponding information and high level requirements. The goal was to design an experience that would "motivate people into an exercise routine that suits their level, schedule & interests"

Role: UI Designer 

Duration: 2 months

Tools: Pen & Paper, Sketch, Figma, InVision

Problem Statement

While there are many fitness app options on the market, many are too complicated, have high up front costs or provide routines with little to no guidance. Users of the WRK App should feel engaged with the content to learn new workouts, motivated to reach their fitness goals and have the tools necessary to stay accountable. 


My solution was to design an app that is simple to use, feels approachable and provides support along the way. With the goal of helping end users feel successful on their workout journeys, wherever they may be starting from or trying to get to. Key features for the app are the ability to add routines to a calendar, sync up calendars as needed, and hold oneself accountable through reminders and goal trackers. 

Project Phases


PHASE 1: Concepting

User Persona

The primary user persona for this project is Rebecca. She works in tech as an engineer and needs an app that works with her lifestyle. Based upon the project brief, her goals are: 

  • Rebecca wants to lose weight and get in shape, as her sedentary job doesn't allow a lot of time for exercising 

  • To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule

  • As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise

  • Rebecca wants help finding routines she can enjoy 

"I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise."

User Flows

Three key user stories were chosen from the project brief as the focus for user flow development: 

  • As a new user, I want to learn about different exercises, so that I can figure out what is best for me

  • As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits 

  • As a frequent user, I want to track progression and record what I've done, so that I Can see my progress over time

For each story, a task analysis was completed and then optimized to identify the critical steps that would make up the user flow and lead to success. 

WRK User Flow_new user.jpg
WRK User Flow_Returning User.jpg
Mood Boards

When thinking about what style and visuals this experience should express, the initial mood board on the right was created to feel very light, fun and friendly, including lots of vibrant colors. The overall mood being one that invites you learn new workouts and celebrate your journey. 

After further consideration of all end users, and not placing so much focus on one persona, I created the board on the left, which was the ultimate winner. This mood board captures the feeling of accomplishment and progress, but also incorporates expressions of routine, planning and accountability.

Mood Board 1.jpg
Mood Board 2.png

PHASE 2: Prototyping

Wireframes & Mock-ups 

Lo fi wireframes were created as a first step in the prototyping process, using pen and paper to detail out the critical tasks based upon the previously developed user flows.

From there, mid fi wireframes were built out using a 12 column grid layout in Sketch to bring the sketches to life digitally. The overall focus of these wireframes was on placement of functional elements to successfully complete the user flows. 

As the last step in this phase, hi fi wireframes were designed in Figma building off the mid fi wireframes and adding more detail through visual hierarchy and UI design patterns to enhance the experience. 

  • Pagination to indicate progress during onboarding screens

  • Input feedback added as part of account creation and navigation flows

  • Standardizing UI elements such as modal pop-ups and buttons 

  • Creating macro & micro space to balance content and specific elements

  • Opportunities for user to engage with content through share, feedback and calendar icons

  • Adding hierarchy through text weight and alignment, and utilizing white space to improve legibility

wrk design process slides.jpg

PHASE 3: Design Handoff

Style Guide & Pattern Library

To effectively communicate and maintain the integrity of the design, a style guide & pattern library were created to document app typography, color palette, UI elements, Images, Icons and copy standards.

Overall the fonts were chosen to be not too formal, but also not whimsical in any way. It was important the Logo had a handwritten feel—something you might write down in your planner. And for the body text, a complimentary sans serif font, to ensure all text was readable. 

The colors were chosen to bring about feelings of enthusiasm and determination (orange) along with imagination and trust (blue). 

Final Mockup & Interactive Prototype

Colors and typography were added to the final mockups to be able to better envision the final product and end user might experience. Also, designs were created for additional breakpoints to showcase the experience across different devices. 

Completing this design process included multiple iterations of the WRK App and culminated in final mockups and interactive prototype below.

onboarding screens
Iphone 11 Screen_homepage
iPhone 12 Pro Mockups
iPhone X Mockup_workout selection
3 screen_dashboard
Iphone 11 Screen Mockup
iPhone 12 Pro Mockups_calendar
Macbook Mockup v2

Closing Thoughts

Future Enhancements


I believe that by building out the design and functionality for a community board for the app would provide added value and significantly increase enjoyment of the app. It would provide a way for people to find connection, even if they are experiencing their workout journey digitally, and not at in person classes/events. 

Hypothesis Validation

Through continued iteration, wireframing & prorotyping, I could design this experience and expand upon the functionality already designed on the homepage and dashboard. And continue honing the visual elements of the experience overall. 

Let's work together!

bottom of page