FITTED
A responsive web app that motivates people to start and maintain an exercise routine that suits their fitness level, schedule, and interests.
2
3
1
4
5
OVERVIEW
PROBLEM
People who workout want to get into a good routine and find activities they enjoy, but have trouble fitting exercise into their schedule.
SOLUTION
Develop a responsive web app that provides users with exercise routines that fit their schedule and fitness level.
THE PLAN
2
3
6
DESIGN CRITERIA
Users want to:
-
Learn about different exercises to determine what routine will work best
-
See how exercises are done to make sure they’re done correctly
-
Schedule exercise routines to build positive habits
-
Earn achievements to stay motivated
-
Keep track of completed workouts to see progress over time
-
Share routines with friends to encourage them to become healthier
FEATURE REQUIREMENTS
-
Searching and filtering exercise videos based on type, difficulty, and duration
-
A calendar to schedule and add sessions to
-
A way to create a personalized user account
-
Graphs to track and chart progress over time
-
A game layer with individual daily challenges, achievements, and/or rewards
-
Social sharing for routines or favorite exercises
1
LOW FIDELITY WIREFRAMES
GOAL: Effectively communicate the app's functionality and analyze how users navigate through user flows.
USER FLOWS
User personas, user stories, and functional requirements were already completed before I was brought onto the project. With this information in hand, I used pen and paper to sketch out user flows for the key features of the app. These diagrams helped me determine what screens I needed to include in order for my users to achieve their goals. They also helped me make sure each feature requirements was accounted for.
WIREFRAMES
Once I knew what content needed to be included on each screen, I needed to figure out the best way to present the content. I sketched out the layout for each screen in more detail and showed how the different screens would be connected.These designs illustrated the high-level aspects of the user experience.
INTERACTIVE PROTOTYPE
To effectively communicate the app's functionality I used InVision to make my wireframes interactive. This interactive prototype demonstrated the core functions and specific interactions of the app within a browser. Now I could put this MVP in front of users to get feedback on the usability of the app and its features.
USABILITY TESTING
I recruited three participants to complete tasks using my interactive prototype on their mobile phone. I also asked them questions about their experiences using the product. I observed, listened, and recorded the speed, efficiency, and ease, with which participants completed the tasks. Through this behavioral observation I was able to pinpoint usability problems and gain insight into participants' satisfaction with the prototype.
1
2
MOOD BOARD
GOAL: Gather elements of inspiration and use them to communicate the mood and visual direction of the product to stakeholders.
To better present my ideas to stakeholders, I decided to create a mood board to clarify the style and visual direction of the app. I searched the web for UI elements, colors, typography, photos, and quotes, making sure they were in alignment with the functional requirements and branding guidelines.
Going to the gym or learning how to exercise can be intimidating for a beginner, so I wanted incorporate more inviting colors like orange and green which are playful and refreshing. The color green also helped promote the idea of renewal and growth, which went well with the app’s overall theme of personal transformation through exercise.
I was also trying to decide between using imagery that was set is in an environment versus imagery that was staged against a white backdrop. I opted to move forward with the images set in a natural environment because they more closely resembled the environment a user would be in.
3
MID-FIDELITY WIREFRAMES
GOAL: Illustrate the specifics and placement of UI elements
I opted to take a mobile first approach for this design since most users are accessing apps from mobile devices. This particular web app needed to be responsive, so I implemented a fluid, 12 column grid (375px wide with 5px gutters and 26px wide columns), when designing my mid-fidelity wireframes. This grid brought structure to my initial sketches, and ensured the layout would stay consistent when viewed on different types of devices.
Using Sketch, I translated my designs from sketches into basic greyscale visuals. These designs better illustrated the specifics and placement of UI elements, conveying form and function instead of only high-level aspects of the user experience. I used a handful of reusable components and glyphs, but also used Sketch to create customized icons from scratch.
4
STYLE GUIDE
GOAL: Document the visual and UI elements of the brand to ensure a consistent visual experience across different devices.
In order to make the app feel more professional and consistent I created a visual style guide. This document provided guidelines for things like logo usage, color, typography, iconography, imagery, and UI elements. Now, if anyone else wanted to work on products related to the app, they'd have instructions on how to provide a consistent visual experience.
As I started to incorporate my original color palette of orange and green into my wireframes I realized the tones were too saturated and lacked harmony. I went back and experimented until I found a color palette that had hues and saturation levels that were more balanced. I also noticed that the design was a bit flat and needed more depth. To fix this, I added gradients and overlays to several of the screens to create more contrast and interest.
5
HIGH-FIDELITY WIREFRAMES
GOAL: Polish the design of the prototype so it can be released for further testing.
After finalizing my design drafts, I used Sketch to create high-fidelity wireframes which showed how the polished app would look and function. These designs included more detail and provided a preview of how the real UI elements would look and be placed (making it easier to create a mockup).
BREAKPOINTS
Up until now I had only been focusing on the mobile breakpoint (375px) but in order to create a fully responsive set of wireframes I needed to select the right breakpoints to ensure the screens looked correct regardless of the device. Using the lower end of the Bootstrap range, I modified the design to 768px for the tablet breakpoint resolution, and 992px for the desktop. Now the layout, navigation, and images would scale correctly if the size of the screen changed.
6
MOCKUPS
GOAL: Help stakeholders visualize how the user interface design will look on actual devices.
Using Magic Mirror I created presentation mockups to illustrate how the user interface design would look like on multiple screens. This way a user could see how a particular screen would appear across devices, and also help me make sure the important parts of the design were still visible.