Role: UI/UX Designer
Duration: August 18, 23 - November 2, 23
Tools: Adobe XD
Project Type: Full creation of UI/UX(School Project)
Objective
Motivate people into an exercise routine that suits their level, schedule, and interests.
The Challenge for the project was situated around implementing UI practices with the UX process. The following case study illustrates my design process.
USER PERSONA
User Stories
The following user stories were provided in the documentation aiding in the process of solving users' problems.
● As a new user, I want to learn about different exercises to figure out what is best for me.
● As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
● As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
● As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
● As a frequent user, I want to complete daily challenges, so I can have an additional way to stay motivated.
● As a frequent user, I want to track progression and record what I’ve done to see my progress over time.
● As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier
User Flows
The following flows were chosen based on our user Rebecca's Primary Goals
LOW-FI WIREFRAMES
Keeping in mind what our user wants to accomplish, I set out with the basic wireframe below. This allowed me to start the process of bringing our solution to life.
MID-FI WIREFRAMES
With the low-fidelity wireframes completed, I moved on to the mid-fidelity wireframes, allowing me to flesh out visual hierarchy and design patterns to see if the design worked well and what needed improvement.
MOODBOARDS
Before moving on to my high-fidelity wireframe I needed to put together my mood board. This allows me to have a reference for the tone and inspiration of the product.
STYLE GUIDES
I compiled my style guide for handoff as I understand this will be used to aid the development on the backend. This document can also be used in the presentation process for stakeholders.
HI-Fi Wireframes
Once a direction and agreement were finalized on the foundational elements that would shape the concept, I produced the Hi-Fidelity version of the application.
Prototype
The final task for the high-fidelity wireframe was to bring it to life with the prototype. Check it out with the button below.
Breakpoints
Once the Hi-Fidelity wireframes were complete, I then designed for breakpoints (tablet and desktop)
Conclusion
Physical activity and overall health are important to a fulfilling and energized life which gives users a sense of control as well as encouragement. I found that communication is key with everyone involved in the process; You need to be able to iterate based on feedback from all involved, but keep your users in mind as they are pivotal to the overall success of the product and in turn the company.