Spark's landing page
Renee Moore-Adams
UX designer
Spark
responsive fitness web app
Access a variety of workouts, at your convenience, and stay motivated with others
UI Case Study
Project Details
Motivate people into an exercise routine that suits their level, schedule, and interests
Stakeholders
CareerFoundry
UI Specialization Course
Project Time
3 months
Tools
Figma
Google Drawings
My role
UX Designer
UI Designer
Problem
Busy schedule, not knowing where to start, and continuing to conquer goals over time are areas that make getting and staying in shape difficult.
Solution
Provide users with a simple organization of video workouts targeting different areas of the body that they can schedule into a calendar as it works for them. maintain motivation amongst users by providing challenges, progress visuals, and an ability to connect with others on their fitness journeys.
The inspiration for Spark, Rebecca
Persona
Based on the information provided from a project brief, a persona was formed from their goals, tasks, and environment and was referred to throughout the entire product development process. The user's stories were used to create a flow to guide building the layout of Spark.
Rebecca, 26
Master's, software development
Currently works remotely as a software developer
Lives in apartment with boyfriend and 3 year-old
Wants to lose weight, get in shape, and stay motivated
Sedentary with job, needs forms of exercise that she can do multiple times throughout her day
Needs a routine to continue workouts
User’s Story #1
As a new user, I want to learn about different exercises, so I can figure out what is best for me.
Entry Point: User opens the application
End Point: User explores workouts and/or does a workout to see if she likes a particular exercise video.
User’s Story #2
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
Entry Point: User opens calendar/schedule
End Point: User saves input of exercises with days/times scheduled
User’s Story #3
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.
Entry Point: User opens calendar/schedule or clicks “share” icon from workout video
End Point: User clicks submit for friend’s information in order to share
User Flow
From my persona's needs and stories, I designed a flow that would easily connect her with her priorities and create a navigation that would feel natural to move through her workout choices and community connections.
Features to meet the persona's needs were initially laid out in paper sketches.
Sketches
I started my process with low-fidelity sketches to work through options quickly.
Brainstorming ideas of what the main features (landing page, dashboard, workout selections, and progress feedback) would look like were important for this step. I created at least 3 versions within the rapid prototyping period.
Originally, I did not include a responsive design so in later rounds of designing, I moved to a responsive set-up with a menu that slid out with options contained in the box as opposed to a bottom navigation bar.
I wanted my users to have their main needs meant with minimal clicks within flows so I designed my screens with the most important features from my user's goals into sections on their dashboard screen.
As workouts were explored, since my user wants a variety of quick workouts, I wanted to lay out simple categories based on the area of the body being worked. Once a body area was chosen, an explanation of that workout's purpose was shown with a carousel of workouts beneath it. This layout chains the user's needs together and ultimately gets them to their goal of workout out.
-
-
-
-
Click through for more sketches
-
-
Specific workout category screen
Mid-Fidelity Wireframes
To advance designs and prepare for testing purposes, I created mid-fidelity wireframes.
Using Figma, I created versions of specific exercise pages, challenge notification/invites, confirmation pop-ups for workouts and invites, and how to share workouts with the community
Increasing the fidelity helped me better visualize my layouts and adjust for white space.
UI Design
The style guide was designed based off of requirements of the project with user intentions at the forefront.
Direction for this project was to have the brand based around black and orange. To evoke a feeling of energy and a time of year when the air is fresh, I added in colors associated with autumn and created shade variations to complement backgrounds and UI elements.
The logo was created to symbolize the "spark" that one uses to get motivated complete achievements, and overall sense of being fired up to do great things for yourself.
Icons from FontAwesome were used for their bold, yet professional and simple design.
Montserrat and Lato were used to maintain professionalism and clarity of text.
Imagery includes positive, diverse, and inspiring people in settings without many visuals of large gym facilities as this is geared to convenience of working out anywhere
Landing Screen with UI added
High-Fidelity Wireframes
Screens evolved with style guide and branding.
Once I landed in a good spot with the style guide I went through four versions of wireframes to adapt the coloring and typography for the feel of Spark.
I had played around with color to make the hierarchy stand out more. At first I had every title in black and input I received showed me that I wasn't making the most of the branding colors and guiding the users to the important features. Everything had looked too similar and sections were not standing out from one another.
I learned to appreciate what color can bring and what it can take away during this phase of the project. At first I didn't spread color out enough so I tried to work within my specific features and have the color support my call to actions.
Responsive Design
Below is the responsive design for the dashboard screen. My first approach at responsiveness did not go so well. Feedback showed me that I went too large with both images and font on my first run at it and it was quite overwhelming . I took into account more appreciation of the space that I was able to work within the tablet and desktop frames to have a layout that optimized expanding areas across my screen while balancing the size of the contents.
Spark's responsive design
Final Thoughts
This was my first UI focused project. I took away an appreciation for simplicity and crispness as this design evolved. I started off with more busyness on my screens and learning to respect the white space was a great lesson on this for me. Working through the typography portion of this project was my biggest nemesis. I didn't realize what a process developing that would be. Finding that sweet spot of professional and inviting was my goal and through trial and error of pairing fonts into my screens, I believe I found that. Overall, this project expanded my clarity on developing a style that stays true to your users. I also took the opportunity to explore Figma for this project since I had used Adobe XD previously. It was an additional step in expanding my use of software for my design ventures so I'm glad I stepped out of my Adobe XD comfort zone.
Thank you for your time in exploring Spark!