WRK App
UI Case Study
This project was completed as part of the CareerFoundry UI for UX Designers Program
Project Overview
Objective
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.
Solution/Outcome
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.
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.
Winner
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
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.
 |  |  |  |  |
|---|---|---|---|---|
 |  |  |
Closing Thoughts
Future Enhancements
Hypothesis
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.