2 weeks
UX/UI Design
Sketching, User Flows, Wireframing, Prototyping, Style Guide
Figma, Photoshop
It is a project I decided to design as part of the UI Specialisation course at Careerfoundry. The objective for this project was to create a platform that would help motivate people into being more active by allowing them to find and learn exercises that suited their lifestyle.
Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing convenient guides. Secondly, finding routines that fit into your schedule is not easy. The web app needs to be designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
When I saw the brief, I got excited about the possibility of developing a platform that fills in the gaps from all my experiences with other fitness apps. Fitted needed to be a supportive platform that accommodated users with different fitness levels and in turn helped them feel empowered to stick to their workout routine. This web app should also provide the flexibility for users to plan and schedule routines that fit into the lifestyle. When working out, users can also follow guides and informational videos to make sure they are performing the exercise correctly.
After analysing the UX deliverables provided in the brief, I was ready to start focussing on designing the web app interface. During this process, I went through several design stages to create an end product that would ensure optimal user experience and seamless visual design.
Rebecca is a user persona that represents a constant problem that full time workers often have. They don't have enough time in their schedule to workout, as they are always busy with work and family but would like to lead a healthier and more active life. By analysing Rebecca’s goals and needs, this provided great direction on who I was going to create the web app for.
Based on the user stories, I outlined the features and requirements that needed to be implemented so that the user would be able to complete their goals.
SEARCH WORKOUTS
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
DAILY CHALLENGES
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
TRACK PROGRESS
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress overtime.
SCHEDULE WORKOUTS
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
Using 3 key features, I mapped out the user flow to establish the necessary screens users must interact with to access each product feature. The user flow was streamlined as much as possible to ensure that the user didn’t have to go through any unnecessary pages.
Drawing out the user flow helped to visualise the structure I was going to implement for the web app. I started sketching out the basic details for each screen on paper, focussing on how each element will be laid out. Through this process, I undertook a mobile first approach so that I could concentrate on the core elements of the page. This will provide a strong foundation for when I eventually decide to build up to larger screen sizes
The low fidelity frames were then converted to digital frames using Figma. I started defining the grid spacing, gutters and margins to ensure the layout is organised and structured within a single screen. I utilised a 4 column grid for mobile screens, as content can be distributed equally for each breakpoint without a need to resize content.
As I started adding in more details to the low fidelity wireframes by filling in the sample copy and basic UI elements, the frames turned into mid-fidelity wireframes. In order to optimise visual design and user experience, I needed to apply recognised design patterns. By incorporating these patterns, users will be able to familiarise themselves with the systems quicker and in turn gain better confidence as they navigate through the web app. I started off by identifying the problem areas and coming up with solutions where the design pattern could be applied to the mid fidelity wireframes
From there, I followed visual hierarchy and spacing principles to ensure a consistent layout throughout the web app. For each page, I considered the key action I wanted the user to take and the prioritised content based on its level of importance.I also set in place strict spacing guidelines for every UI element so that when it comes to reiterating my design, the layout will be consistent across all screens.
• 34 dp margin
• 29 dp padding
• 8 dp text and element padding
To establish the visual direction of the Fitted web app, I developed 2 mood boards with distinguished themes that would appeal to the user. After analysing the brief and user persona again, I have chosen to go with the second moodboard as this will help new and frequent users to get excited about working out and motivate them to reach their goals. I believe that this will be in line with the key brand message which states that “ Getting back into exercise doesn’t have to be an ordeal”
Based on the chosen mood board, purple was a primary colour that I wanted to go with. This colour evokes feelings of strength and transformation, which went well with the brand messaging that I am trying to convey to users.
Colour contrasts were also checked against each other to confirm readability, the minimum contrast ratio requirement is 4.5:1. This includes buttons, paragraph and image text.
I have chosen 2 main typefaces for this project. Monument extended (all caps) will be used primarily for headings and all body text will be using Kollektif in different font sizes and weights.
Appropriate imagery for the Fitted web app utilises action shots of real people working out and having fun. This will help motivate users to ‘get in their zone’. Most importantly we want to display diversity and empowerment, so there should be a priority in representing a wide range of demographics.
Now that I have established a clear and consistent visual direction, I started applying these elements to the mid fidelity wireframes and transformed them into high fidelity wireframes.Let’s take a look back on how some of these screens have progressed overtime
I wanted to provide a central place for users to oversee and track their activity on the web app. So it was a real challenge trying to condense all of the information onto the page. To assist with this, I utilised card slideshows to help keep information in smaller containers.
Initially users would need to scroll down the page to start their workout, where they would find the ‘start workout’ button. To create greater emphasis on the call to action, this button was repositioned higher on the page.
A progress bar was added later in the mid fidelity stage to help relate back to what was presented in the planner section of the dashboard screen and ensure consistency within the app.
I compiled all the design elements and components into a style guide, so that guidelines are set in place to preserve the visual identity of the Fitted web app. Check out the full style guide here.
Since this is a responsive web app, users have the benefit of being able to access Fitted on any web browser. Screens were created to represent the different breakpoints for tablet and desktop. When designing these screens, I took into account common responsive patterns that occur when users change between these breakpoints. This will help to create a sense of familiarity for the user and ensure a harmonious visual flow whenever the design shifts
Taking on this project has allowed me to focus on the intricate details of creating a polished user interface by utilising grids, spacing guidelines and visual hierarchy principles. Although these methods took up a lot of time, I was able to develop a more responsive design because I could adapt these screens for different breakpoints.
Moving forward, I would like to implement some form of user testing so that I can gather constructive feedback on my prototype. Especially after updating my designs with common design patterns, these decisions could have been supported through a usability test.
When I plan on developing a second reiteration of the Fitted web app, I think more user interactivity should also be incorporated such as adding in responsive gestures, video content or animation to help draw in the user.
