UI & UX Design for Echelon Fitness
August 2020 - April 2022
Disclaimer that some information/images will not be shown due to the confidentiality of some topics.
What is Echelon?
Echelon Fitness is a company that helps users to live a healthy lifestyle. They do this by offering a variety of workout equipment with 80+ world class instructors that host live and on demand video you can stream on the equipment. You can track your progress and workout with friends or family all within the app.
I was brought on board the Echelon crew to redesign & build hundreds of screens that expanded, structured, & built a resizable design aesthetic for the Echelon Fitness brand.
This included a complete overhaul of the design systems and 600+ pages within Mobile, Tablet, Reflect(Mirror), web, and TV applications which helped to improve member retention massively with over half a million active fitness users.
The redesign also allowed the company to build out existing/new features users had been requesting on Echelon Forums up until that point.
Position:
UI Designer, Using Adobe Xd & Figma
UX Experience in Maze
Application Use:
Zeplin for Dev Handoff
Confluence Experience for Ticketing & Sprints
Project
Redesigning Echelon's Workout Badges
Echelon Fitness approached me with a task to reinvent an alternative to their badges. Echelon Fitness is a workout streaming company that sells a variety of equipment and hosts trainers to help people all over the world stay or get in shape!
The Goal: Create unique badges that make users want to run, bike, or row 2,000 classes for. These will need to be fun and engaging while also maintaining their status as real amazing achievements.
​
Check out the link below to see the breakdown on this!
75 Unique Equipment Badges
Project
Designing a new way to look at your workouts!
One of my projects while working with Echelon was to design a UI improvement to the existing workout details page where you can find things like the play button, like/dislikes, music that will be played, what equipment you might need and much more!
​
The slider below shows the mobile version & a screen I can show you on the tablet (mounted) version. These are the same version as I was not able to find an old version of these designs sadly. There is an updated version to the tablet screen but am unable to show it due to confidentiality of a product.
This UI update offered a lot of benefits for the user, some subtle and other not so much. First off, most all the buttons used were very hard to read and be determined not to be buttons by users at all! Obviously, those had to go. Switched them out for large padding buttons that are in easy to see spots, these are obviously actionable items on the page.
​
Next the previous design's layout was pretty lackluster. Icons were not very accessible to some viewers due to contrast, it felt like a large collection of separate items. My task was to bring the page together and give a cohesive experience. On the tablet view you can see that everything that you might need for a basic "Press play and rate" experience is within the video preview box. Mobile view shows how this experience was designed to be scalable across multiple equipment types.
Project
Admin Graphics
The Admin Portal team reached out to me about designing some fun new stylized graphics. They wanted something to spice up their new update that allowed for a better optimized path through their app through some tappable pictures.
​
If you want to see all 17 images, I have another page on my website located below that will take you to the full gallery on a new page! Had a blast with these, hope you enjoy!
Project
Updating Progress Page
The progress page is an area within Echelon that tracks your workout metrics into an easy to read and understand area! Super helpful for tons of riders and a staple of most workout apps.
​
I was not able to find an image of the version before I arrived at Echelon for you sadly but, I have the first redesign that I did on this page marked as V1 below.
V1 Design!
This design was actually redesigned by me when I first joined the company funny enough.
This design upgrade featured a way to select your classes taken and view stats for that class from the previous version. This also lets you view badges and total classes for badge progress! The main ask with this design was the right hand side view letting you see all stats in one area. The previous had you scroll a LOT to see these.
V2 Design!
The previous version had focused on seeing stats above the fold, easier use of clicking on a class you have taken to see stats, and badge viewing features.
​
The V2 focused on yet another UI update for ease of viewing badges (Top left), Showing weekly stats and goals for achieving users, with the addition of the activity meter with date picker.
​
This new feature was planned to be able to be swappable to other various trackers but did not proceed into the sprint while I was with Echelon.
User Experience & Usability Testing
What is UX & usability testing? "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. Basically it can be described as "How much of a joy is it to use this product?".
Usability testing is an end user test that lets users walk through flows, either in moderated session or on a web app that moderates for you such as Maze. Then ask a variety of questions to back your design choices with facts, or disprove and redesign.
What is Maze?
Maze is a web program that lets you usability test flows utilzing a link to the figma prototype of your choice. Then design questions around your design for a variety of objectives!
Project
Spearheading Usability
Testing at Echelon
After about a year into working at Echelon, we started to really expand the user testing we were doing. Top users were brought in from the community, these members were from all over the world and some were even working at tech giants and giving us support in any way they could.
I was super eager to try my hand at conducting and building out tests for our team's prototypes and got the green light! Chris, a UX wiz, was brought in and together we set up sessions with teams across Echelon to let them know about user testing and the benefits that it provided for the teams.
Not long after we had tons of submissions that were being tested by our beta users in the Maze web application, Chris set up the “Echelon Champions” beta testers group and it now has 80+ members in over 6 countries!
Conflicting Results...
Below are some Images of one of many tests that I designed in Maze in my time with Echelon! The questions are on the left-hand side while the respective user answers are on the right. You might find that there are some negative comments, these are because we were testing something that our UI team was certain users would like but ended up being widely disliked.
Disclaimer that some information will not be shown due to the confidentiality of some topics.
You can now see how something like this could be pushed to development and would take many more months to develop again wasting valuable time.
UX Experience
Each flow that we tested required a portion of the flow to be taken from our design files and fleshed out further in Figma so users could have the most authentic experience to give feedback on. This often meant that I was working closely with every designer on our team and had a broad understanding of each design system that teams were working on allowing me to give solid feedback across every design.
We also conducted live ‘user testing’ sessions with ~5 lead community members each session that helped to underline key areas users had frustrations in. This in turn led to a multitude of new designs and feature implementations for our team which the Echelon community absolutely loved! Our team turned to Aha to let our community provide us with knowledge about bugs their community members were facing, requesting feature ideas, or just complaining about their day.
< Home Page
