The Challenge: Design an app that motivates and engages users to integrate health and fitness into their everyday lives.

The Solution: An app that puts the user in control of their health and challenges them to do more: Fitted.


From UX to UI

Applying UX to UI

In my previous projects, with brief in hand, I started by researching the competition and conducting user interviews in order to form an image and resume of the user. In this case, I was focusing on strengthening my UI skills, and was given a brief that included a persona, user stories, and a list of feature requirements.

Meet Rebecca, Fitted’s user persona!

The provided persona was Rebecca. As a UX designer, I paid close attention to this persona, as I wanted to make sure the ultimate UI of the app was both beautiful to look at as well as being perfectly functional for the user.

beautiful-beauty-female-972217.jpg

Rebecca

  • 26 years old

  • Software developer living in the Bay Area

  • Wants to get in shape and lose weight, which her sedentary job makes difficult

  • Wants to incorporate healthy habits into her daily life

  • Wants to stay motivated during her crazy schedule.

  • In a relationship, very tech-savvy, and has a 3-year-old daughter.

Based on this persona, I knew I wanted my app to be clean and somewhat minimalistic while incorporating energizing colors, aspirational images, and a casual, motivating tone. As a tech savvy and busy millennial, Rebecca will appreciate an uncluttered web app. Because of the minimalistic design, the few bright colors will be eye catching and the aspirational images will motivate her to log in and use the app to achieve her goals.

A User Flow

While I could have jumped in and started designing screens, I remembered my UX roots and made a user flow for Rebecca so that I could make sure I wasn’t missing anything from my list of screens to design. This process made it easy once I moved on to low-fidelity wireframes to free up my design-mind to simply create.

Starting Low to Work out the Kinks

Starting with low-fidelity wireframes allowed me to play with different sized grids, block in elements without too much committment, and test out various user flows by quickly creating and testing a prototype on InVision. In the below examples, I had moved on slightly to adding copy and playing with fonts. You’ll see as the project progresses, though, that this layout worked well for me, and didn’t need to change much as I continued refining the UI.

Colors and Fonts and Icons, oh my!

Setting the Mood

When it came to deciding on the visual language of Fitted, I had similar but diverging ideas about how to present the information. As the UI designer for the project, I loved the sunset colors of the second moodboard as well as the idea of using doodle-style illustrations and focusing on whole-body wellness. As a UX designer, though, I knew that the first moodboard with its vibrant colors, cheerful feeling and modern typography would grab a larger swath of users’ attention and could still incorporate the whole-body wellness that I enjoyed in the second mood board.

moodboard 2.png

Pixel Perfection

The journey towards actually digging into Sketch and making my grayscale wireframes come to life felt long in coming, but once I was there I was grateful to my UX experience for forcing me to tick some boxes before jumping in whole-hog. As a result, I was able to quickly lay out and add color to my wireframes and make Fitted start looking like a real app.

Animation

This was my first project implementing animation into the design. While the below animation (created using Principle) is not perfect, it did whet my appetite to learn more about animation softwares and continue reflecting the dynamic interactions I picture for my users.

home-page-scroll-compressor.gif

Style Guide

As part of the project, I naturally made a style guide for Fitted. Below you’ll see an example of the iconography I created for the app, and you can click on the button to download a PDF of the full guide.

Final Mockups

I’m proud and happy with out my mockups for Fitted came out. I think they hit the mark on the project brief to be easy, informative, and fun. As you can see, I also expanded my design to include several other breakpoints, making Fitted a responsive app.

Prototype & Landing Page

I created a working prototype, a video walkthrough, and landing page for Fitted, all of which you can find below! I think the landing page does a particularly good job of showcasing the design aspects and marriage of UX to UI in this project.