Overview
Deliverables
Visual competitive analysis
Moodboards
Style tiles
Logo
Prototype walkthrough
Marketing website
Presentation deck
UI kit
Style guide
Tools - Sketch, Principle, After Effects, InVision, Keynote
Timeframe - 5 weeks
Stride 360 is a low-impact fitness flexible 2 in 1 bicycle/elliptical home exercise machine for just about anyone looking to benefit from cross-training. As part of a team, I analyzed the UX team’s research, assets, and artifacts, including the annotated wireframes that represent the MVP solution for Stride 360.
I looked into the development of a digital screen experience that would simulate a cross-fit run/ride through the potential use of video, audio, computer simulation, map positioning as well as the Stride 360 being able to drive the users’ progress through feedback from sensor data.
Client Vision
Joseph Prosnitz, the creator of Stride 360, comes from a software development and fitness enthusiast background. His goal is to create an amazing product that integrates with a digital interface to provide users with a personalized, community-oriented and goals based experience.
The Challenge
Create an engaging interface for the Stride 360 elliptical bike that offers user - generated content and motivates the user to adopt a sustainable fitness routine.
Domain Research
Demand for better fitness is rising.
Mothers wield $2.4 billion in buying power, Influencing 85% of purchasing decisions.
“The suburban mom has a mom’s group, she wants to try the hot new fitness trend. If you win her you win the market. …There’s a lot of money in this environment but not a lot of rewards. Their connectivity can seek to focus on inspiration.”
The Suburban Mom
Sarah Jensen
Married mother of two children living in the suburbs
“Technically if I stop, no one is there to watch and tell me to keep going”
GOAL / Keeping up exercise more regularly
MOTIVATION / Care for children and maintain weight
FRUSTRATION / Overwhelmed and not tech savvy
Competitive Analysis
Takeaways
Data Driven
Data driven content can be difficult to understand for the user, so strong use of visual graphics can help translate what this means to their fitness. Putting data in context and what that means to the user and what it potentially means to the user’s fitness journey.
Ease-of-Use
A simple interface with clear and easy to understand UI elements allows the user to focus on the activity at hand without taking anything away from the experience:
- Contrasting colors
- San Serif fonts
- Big UI elements (toggles/controls/etc)
- Minimal UI elements with clear intent
Motivating Coach
Friendly and welcoming UI design elements makes a more engaging design aesthetic that fosters not just connectivity between the user and the bike but user to user for community engagement.
- Illustrations
- Microinteractions
- Social profiles
Design Principles
Data That Sparks Change
With data visualization - we will show users what they’re doing now and going next.
Pep in User’s Steps
Keep users upbeat with vibrant colors, delightful illustrations, and micro-interactions.
Less Noise, More Focus
Use large buttons and CTAs that make our intentions obvious, clear and digestible.
Representing Real People
Display imagery of people that are relatable, diverse, and realistic in expectations.
Design Directions
Female Fuel
The moodboard is based on the idea of empowerment with movement and Inspired by real women experiencing real exercise. The gradient transitions of orange, pinks, and magenta have an energizing feeling. The unique personality of Josefin Sans paired with the straightforward Open Sans make it a fun but legible font pairing.
Moodboard
Style Tile
Core of Celebration
Inspired by feeling a sense of celebration post working out, the concept evokes users to feel energetic and young at heart. The color palette pokes fun at 80’s fashion without crossing towards neon hues from purple, aqua, pink, and yellow. The fun and whimsical graphics stand out against solid colors and the legible font pairing, Work Sans and DIN.
Moodboard
Style Tile
Physical Connection
This concept is inspired by the relationship of Stride 360 with users and how it promotes social connectivity in physical fitness. It plays on the two spaces and how tactile the interface can be with shadow, duotone, and masking in graphics. Users feel engaged and connected with a community of other users who want a better and healthier life.
Moodboard
Style Tile
Logo Concept
Digitizing Logo Options
After ideating logo options, I picked the six most receptive options based on feedback to narrow down possible logo designs. All designs encompass the brand values of Stride 360, design principles, and intended user experience.
Styling Exploration
When digitizing the approved logos, I explored possible color options based on the style tiles. In tandem, I started exploring possible mobile app icon in association with the product.
User Approved Direction
Wireframe Analysis
Milestones
- Designed the top header bar with more motivating visuals that can gauge user's workout goals.
- Removed the text and instead use the space for the workout gauge. Use space to highlight the user's total weekly workout time input.
- Changed the workout timeline to be more tactile friendly when browsing. Users can shuffle through entries with better information architecture of workout time, content, and details.
- Revise bottom navigation vocabulary to better fit the expectations of each screen.
Completed Workout Summary
- Revised composition of video without information blocking the content imagery. The workout title and like button moved below the video.
- Kept the workout machine and time description as key information when looking up workouts. Separated intensity from the description as it was not definitive of a label to suburban moms. Instructor information was added into a separate section.
- Workout output graph is not understandable and needs revision to give more context to visuals.
- CTA revised as a floating button for quick and easy accessibility to workouts.
- Remove or revise workout structure information better in details. Solved with a workout grid that gives users a notion of workout structure and then time frame afterwards.
In-Workout Video
- Content needs more controls without adding too much noise that distracts users from a focused workout. Relooked at how the user pauses or exits the video by tapping anywhere on the screen.
- Give users the option to hide specific metrics and not an all or nothing option only.
- Further pushing the principle of reducing the amount of noise to keep users focused, the metric bars can be optimized from user to user. If our user Sarah only cared about calories, then she can hide other metrics that don’t matter to their lifestyle and keep that as her own custom workout layout.
Monthly Insights
- Make the top header more accessible to other years and months besides a back toggle. Users can shuffle through years and month separately for a more in depth and easy search.
- Changed the checkmark button to be a more obvious of an interaction on dates. Whole calendar has a square fill that gives users the option to look in depth from day to day information.
- Move the monthly total amount of workouts above the calendar as it makes better sense to users to see summary attached to the time (month/year).
- Revised the summary dropdown tabs to be buttons that slide to the left. Made better sense as a transition to a new page than to display a drop down.
Workout Insight Graphs
- Revise dropdown to be new summary pages.
- Bar graphs lack insightful units and labeling to give more context. Key information was added to give users an understanding of their average rates and where their goals are met.
- Revised details by framing content above and within the graphs, highlighting an average of time per week.
- Give users the option to view more details within the weight graph. Users can select by day to see their average weight fluctuation rate.
- Monthly graphs need to show more indication of dates instead of weeks. Data points also show users the starting and goal weight as weight loss motivation.m
App Map
Prototype
The prototype walkthrough shows how Sarah can exercise on the bike, monitor her fitness, and connect with other users. Try the clickable prototype or link blow to open in InVision.
- Sarah signs into her account
- She checks her current weekly progress and fitness timeline
- Views the past workout event ‘Light Interval Training’ and is motivated to beat her personal best
- She repeats workout which transitions to a countdown prior to the video workout content
- Sarah cares about her calorie burn and hides other metrics
- Pause to exit video and see her fulfill weekly progress bar
- Checks past workout entries in the ‘Calendar’ on the bottom nav
- Checks her daily workout summary for October 9th
- She views more in visualized graphs for time, calories, or weight.