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

Spark

Spark's landing page

Image alt tag

Image alt tag

Spark

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.

Spark

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

Spark

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.

Spark

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.

Spark

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.

Spark

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

Spark

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

Spark's responsive design

View Spark's Prototype

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!