Fitted
UI Design of a responsive web app
Timeline: May-July 2021
Role: UI Designer
Software used: Balsamiq, Sketch, InVision, Illustrator, Photoshop
Introduction
Fitted’s main objective is to motivate people into an exercise routine that suits their level, schedule, and interests.
It is aimed in particular at users who are new or returning to fitness and might need some guidance in regards to the type of routines that would help them achieve their personal goals.
In addition to this, Fitted wants to make it easy for users to include physical exercise into their schedule by providing a wide range of workouts by duration and type.
The process
From Concept to Mockups
A bit of UX Design
My role as UI Designer overlapped with UX Design as I was provided with the main Persona, User stories, and a Feature Requirements list.
From the delivery of these materials, I was tasked to elaborate user flow diagrams. These not only helped clarify the primary product features and their placement in the user journey, but also to define the core functionalities of Fitted that were then developed as part of this UI project.
The key product features that were defined in this phase were:
-
Log In / Sign Up
-
Profile Set-Up
-
Daily Challenge search
-
Workout search
-
Workout flow
-
Rewards system
-
Adding a workout to your schedule
User Flow Diagram (tap to zoom)
Wireframing
Using the user flow diagram as a starting point and adopting a mobile-first approach, I sketched ideas for low-fidelity mobile wireframes with pen and paper. These were then digitalised and tidied up with Balsamiq.
Overview of the low fidelity wireframes.
The low-fidelity wireframes functioned as the starting point for the development of the product's user interface.
The next step involved setting up a responsive grid, which would help in the adaptation of the design for different breakpoints later on - and the implementation of visual design principles - such as spacing, visual hierarchy, and the inclusion of visual design patterns.
Developing the Style
The mid-fidelity wireframes defined the information architecture of each screen, but it was necessary to give a visual identity to Fitted’s brand before moving on to the next wireframing stage.
Fitted is an inclusive, welcoming product. It is targeted to people who don’t yet have a workout routine, who are just getting into exercising or are coming back to it.
Fitted’s users were kept at the centre of the brand development, as it was essential to create a product with a friendly, trustworthy, but also exciting character.
This process started with the development of two moodboards, with the intention of identifying the style that would fit best with Fitted’s users and its own personality.
The two palettes presented two different images of exercise and workout. Option 1 presented a more dynamic nature, with higher contrast images, a black and white palette with slight colour accents. Option 2, on the other hand, showed a more relaxed, friendly, and natural approach to fitness and workout.
Keeping Fitted's users and goals at the centre of the discussion, option 2 was an easy winner. Not only it helps Fitted stand out ourselves from its competitors, but it also delivers a feeling of trust and friendliness which attracts fitness newbies who might be intimidated or worried about starting a new fitness routine.
Once the final moodboard was chosen, I had a visual guideline in the definition of Fitted's style and character. This functioned as the basis for other visual style decisions, such as color palette and typography.
The Fitted colour palette was designed with colour psychology in mind. The blue and green tones inspire tranquillity and trust, while the bright and saturated hues help convey excitement and action. The orange colour was chosen to signal errors and important messages as it draws immediately the user's attention.
For the typography, I considered several options of sans-serif fonts with rounded shapes and smooth edges. The goal was to convey friendliness and empathy also through typography. The final choice fell on the font Raleway, which presents all the mentioned characteristics, while also being widely available as a web font.
The Fitted colour palette and typography were implemented in the mid-fidelity wireframes.
Including the brand colours, typography, and imagery in the wireframes allowed me to define the looks of UI elements such as buttons, navigation items, dashboard, and icons.
After some tweaks determined by technical requirements and implementation of visual design principles, I obtained a set of high-fidelity wireframes - then turned into a prototype through InVision.
All visual elements looks, descriptions, and use cases were compiled in a style guide which can be downloaded below.
Responsive design
Adapting the design to different devices.
Once defined the mobile designs, it was time to put the responsive grid to use and develop the tablet and desktop versions of the app.
This was done by defining the tablet and desktop breakpoints and adapting the 12-column responsive grid for each device. Then, it was necessary to adapt the layout of the elements on-screen to guarantee visibility, usability, spacing, but also to fill the extra space given by larger screens with relevant content.
The bottom buttons in the mobile Homepage were expanded into content sections in the Tablet and Desktop version.
The Workout page contains video content, follows the structure of known video platforms (e.g. YouTube) to encourage usability due to familiarity.
Reflection and next steps
What I learned and Fitted's next steps.
Learnings
I enjoyed working on Fitted, and the project was a great occasion to learn more about UI design.
Previously, my approach to UI design lacked some technical considerations and relied mostly - if not only - on creative decisions. With Fitted, I was able to apply the analytical approach typical of UX Design to the design of the user interface, by considering the product users at all times and building the product identity around it.
I am looking forward to solidifying my UI Design approach and process with the next project!
Next Steps
The current status of the project provides a good starting point for the development of Fitted from concept to product. However, as in the nature of iterative design, there is potential for improvement and further development.
While I would like to develop additional features - such as calendar function, and user progression monitoring and stats - I think that the next immediate steps should focus on refining the current features. In particular:
- Polishing the icon design, and creating a full, branded icon set
- Expanding on the current scheduling function
- Developing a more sophisticated UI for the calendar, including an option for synchronisation with Google Calendar/ iCal