Fitify
Conceptual fitness app for those looking to fit in exercising with their schedule.
Based on the UX research provided in the design brief, I created a proto-persona which helped to establish empathy with our users and better understand their needs, motivations and pain points.
The proto-persona was used to ensure the user flows and consequent wireframes were aligned to the stakeholder’s requirements and to what we thought potential users are like.
With the help of the user stories provided in the project brief, I created user flow diagrams to understand and visualise what steps are required for the user to achieve their goals using the app. From this I could then recognise what pages will be needed.
Based on the project brief, the proto-personas and the users flows created previously, I started sketching the main functionalities of the app. These sketches helped me understand the basic layout of the app without spending too much time focusing on the details.
For a more detailed view of the low fidelity wireframes, click the button below.
Following this, mid-fidelity wireframes were developed with the purpose of conveying form, function, and specifics of the UI, rather than merely high-level details about the user experience.
As this was the second iteration of wireframes, I was able to pick up on quite a few things that I missed in the low fidelity sketches. For example, I learnt more about what information the user would need to input in the onboarding process.
For a more detailed view of the mid fidelity wireframes, click the button below.
Based on the key words from the project brief, I created a two different moodboards with distinct visual directions. I decided to move forward with the moodboard below as I believe it was a better embodiment of the key message of our app, “Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule”.
To learn more about my decision making regarding the moodboards, click the button below.
This visual direction was then applied to the mid-fidelity wireframes in order to create the high fidelity prototype. After conducting a small round of preference testing, I was surprised to find that users’ felt the bottom navigation bar was more suited to a native app, and rather a hamburger menu could be used instead.
I also created animations to help provide feedback to the users, make transitions easier and to improve the overall experience.
The loading animation notifies the user that information that they inputted in the set up is being used to create a personalised experience. This will also be useful if a long load time is required when first signing up for Fitify.
This animation enables the functionality of the hamburger menu as the navigation items slide in from the left, allowing users to choose what page they would like to visit.
This animation enables the functionality of the hamburger menu as the navigation items slide in from the left, allowing users to choose what page they would like to visit.
When a user clicks on a text field, this small animation shows that they will now be able to enter the required information.
To document all of the visual and UI elements of the brand, I created a style guide.
For a more detailed view of the visual style guide, click the button below.
Below you can view the interactive prototype of the Fitify web app created in Figma.
The final outcome displays the responsive design with mobile, tablet and desktop mock ups below.
This project has been a great opportunity to learn more about visual design and UI principles. One of the main areas in which I’ve grown is by developing my understanding of composition, spacing, colour, contrast and sizing to help effectively convey a message through my design.
Throughout the project I have made an effort to document my process to help show my decision-making when creating the design solution. Through meetings with my mentor, I understand that this is a key skill to develop in order to convey my ideas to others.
From the onset, the goal of the project has been to design a responsive web app that aims to motivate people into an exercise routine that suits their schedule. I believe I have met this brief through my design solutions which provide guides, information and interactive examples to users; however I do think that this would need to be validated through usability testing in the future.
From my background in UX, I understand the testing is key to understanding if the design solution works as expected. Therefore, given more time I would like to validate my design decisions through usability tests and iterate the product based on the feedback received.
