UrbanFit is a responsive web app in which users can search and view work outs, do daily challenges, and keep a schedule by adding sessions to their personal calendar. The app is aimed at people with a busy schedule and not much time to exercise.
The persona’s and user stories were created for me, so I started my process by creating a user flow. This user flow follows a user’s progression through the web app. For the creation of the flow, I used Lucidchart.
Wireframes (part 1)
After creating the user flow, I made low-fidelity wireframes. These wireframes allowed me to start working on the basic layout for each screen. This made it possible to rapidly understand how the web app would function and how the content would (roughly) be presented. I created the wireframes with Balsamiq.
Wireframes (part 2)
Based on the low-fi wireframes and best practice UI patterns, I created mid-fidelity wireframes. In this phase, I defined the grid and composition and, looked at how the elements on the pages should be arranged to create an optimal user-centered design.
Mood board, color palette and font
In order to establish a visual style for UrbanFit, I made a mood board. Based on color psychology I first choose blue a primary color (calmness & trust) and the feeling of being outside (sky and ocean). In combination with a san serif font. However, the app is designed to be used inside, so I also looked at a pink and black as a combination with a serif font. These colors were inspired by “fitgirls” to give a trendy and feminine look and feel,
In the end, I combined both color palettes into a pink, purple and dark blue color palette. I choose a sans serif thin font, to create a modern look and feel.
Visual Style Guide
After establishing the visual style I created high-fidelity mock ups for the web app. The app was created with a mobile-first perspective in mind. Therefore I also created mock ups for different breakpoints.
UrbanFit was created as part of the ‘UI for UX designers’ course by CareerFoundry. This means that UrbanFit is not going to developed and tested or optimized.