Role: End-to-End UX/UI Design (sole designer)
Client: CareerFoundry
Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop, Paper, Pencil and Pen.
Preliminary Ideas
One area of exercise I wanted to focus on was strength training using body-weight, dumbbells, and kettlebells. Improved strength has many benefits to overall health and by focusing on exercises using smaller or no extra equipment will make it easier for a user to commit to a daily habit of strength training. I also want to have a day-of-the-week scheduling feature where users can save videos to a certain day of the week that they want to perform that exercise and can also act as a library of saved videos so they have them where they can easily get to them. I hope that by using the app, users will learn to perform the exercises correctly and to get into a daily habit of improving their overall strength, mobility and to feel better both physically and mentally.
Discovery and UX Groundwork
We live in a world where it can be hard to find the time to simply move around like humans were meant to do. Designing an app like this could be a great way for users to take control of their health and wellbeing and help to create daily habits of exercise. To better understand who could be using and benefit from this design, I created a Persona for "Rebecca' with information provided from the project brief. I also developed a User Flow to help me to chart a course I would need to help Rebecca, and other users, reach their fitness goals.
Getting Ideas onto Paper
I began to sketch and workout (pun intended) my ideas and designs on paper. These are based on the User Flows from the previous step and what I learned from the goals and needs of the user.
From Paper to Digital
I next translated my ideas from paper to digital and created low-fidelity wireframes using Adobe XD.
Iterating the Wireframes
I continued to refine and improve the design of the wireframes. Going from a low-fidelity to a more mid-fidelity, always keeping the user goals and needs top-of-mind while also adding familiar UI design patterns and developing stronger visual hierarchy as I progressed in the overall design.
Setting the Design Mood
For someone with a background in graphic design, this is were I could begin to take my past experience and inspiration from the world around me and start to mold a feel to the design and bring out a human connection to something digital. I wanted the moodboard to depict both the natural world and the individual. Even though you can work out with a friend or among strangers at a gym, the goal of the app is to help each individual user to learn new exercises and build healthy habits on an individual basis.
Adding Some Style
Once I found a "mood" for the direction I wanted to take my design, I created a Style Guide that would bring to my wireframes to life. Not only give the app a professional look but also bring a personality to the app that would provide a unique Brand.
Solution - Presenting getFitted
I set out to design a web app using UX and UI practices and skills to reach an objective to motive people into an exercise routine that suits their level, schedule, and interest. I feel my solution can help in solving this problem by designing an app that can search and filter exercise videos based on type of exercise, length of time for a video, and a users current fitness level. Users can then add any videos they like to their weekly schedule and help to build heathy fitness habits. All while providing a UI that is joyful to use and experience.
Below are selected screens of the high-fidelity wireframes, the prototype of the getFitted app design, and mockups for desktop and tablet breakpoints.
Click to view prototype
