“Get Fit! is a responsive web application that encourages users to create an exercise routine that fits their busy lives, preferences, and goals.”
Role: UX/UI Designer, Graphic Designer, Information Architect
Software Used: Sketch, Invision (prototyping), Flinto (loading screen animation), and Adobe Illustrator.
Client: CareerFoundry UI Design Certificate Program
Duration: July 2020 - September 2020 I 3 months
Mobile Prototype: link
1. Research and Brainstorming
Initial Goals: Integrate project brief goals and guidelines into the development and brainstorming stage of Get Fit!’s development.
Project Brief
Objective: Motivate people into an exercise routine that suits their level, schedule, and interests.
Personas: People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Get Fit!
Where: When on the go or when practicing exercise routines at home, in the park, on the street, etc. Users can stay fit anywhere, as long as they’re logged in on a device.
Design Rationale: Mood board B
While Moodboard A features a friendly and accessible style, I chose Moodboard B to emphasize the simplicity in making time for easy, quick, and accessible workouts.
In moving forward with the moodboard B’s direction, I hope to find the balance between the friendly nature of warm tones, while embracing the modern and cool aesthetic of neon lights, modern architecture, and minimalistic design.
2. User Persona
Focusing on the User Persona allowed myself as a designer to have a specific target audience in mind when making design decisions.
User Persona
Name: Rebecca
Job Title and Experience: Software Developer
Demographics:
Age: 26
Gender: Female
Education: Master’s in Software Development
Marital Status: In a relationship
Goals:
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wanted something that will help her learn how to properly exercise.
Rebecca wants help finding routines she can enjoy.
Rebecca is very tech savvy, living a busy life as a Software developer with her boyfriend and 3-year old daughter. (Image courtesy of Google Images.)
3. Wireframing and Prototyping
Highlighting a Mobile-First approach, I went through the iterative design process with the needs of the on-the-go customer in mind.
4. Interactions and Animations
Brainstorming ways to create a more the engaging, accessible, and responsive design, I chose interactions and subtle animations that felt familiar to users.
5. Design Style Guide
In order to maintain brand identity, I created a design document to feature the styles and guidelines of the application’s design.
6. Retrospective
What went well?
I learned to use industry standard software to create a mobile app from start to finish!
Skills: Ui Design, Wireframing, Rapid Prototyping, Iterative Design, Responsive Web Design
Process: Learning through experience, accepting and implementing feedback
Solution: Practice and personal projects!
Exploring the industry standard Sketch software for this project, I saw myself getting quicker with the shortcut keys and completing deliverables more efficiently. Although there are countless tools and features I have yet to discover, I am grateful for the wealth of resources available online to gain more experience.
What didn’t go well?
I found myself needing to pause to brainstorm ideas to find the best version, before moving forward.
Skills: Timing, Shortcuts, Accepting Feedback
Process: Learning through experience
Solution: Allowing time to brainstorm, with the goal to find the best option of many choices.
I had to balance my eagerness to move forward in the iterative design process with the desire to pause and find multiple solutions. Although I was excited with the first few ideas I developed, I need to practice reflecting on ways to push the design to the next level, beyond what I initially thought could achieve the project goals.
What can be improved?
I still have a lot to learn in using UX and UI design software, increasing my experience and efficiency in industry standard products.
Skills: Visual Design, Shortcuts
Process: Learning through experience, Research design trends and procedures
Solution: Take on personal projects to expand my skills and portfolio
Thankfully there are many ways I can independently improve my design skills, from watching tutorials online to experimenting with personal projects. I can also take on rebranding challenges to create mockup projects and apply new skills and tricks. With a wealth of knowledge and resources available to anyone who seeks to improve themselves, I am confident that my strengths will build as I grow in my new career!