Yes.Fit Mobile App - 2020

About the Project

My largest project to date (as of 2021). The task at hand was to completely redesign the existing mobile application from the ground up. To be beautiful on both iOS and Android. The structure and foundation was already in place within React Native code but a lot needed to be tweaked and improved from both an aesthetic and functionality standpoint.

The goal was to make the app much easier for users to stay motivated and healthy through a more intuitive UX and a brightened, engaging interface. We have around 44,000 active monthly users within the app so it was important to stay true to what they were accustomed to while also providing new features and enhancements to the core functionality.

I was, and currently am, the only UI/UX designer in house, so the entire concept, flow, and creation rested on my shoulders. I began searching for inspiration from both a color palette and overall exercise UI standpoint.

Assessing the Current Landscape

The current state of the app was very dark, modern, and masculine. It didn’t fit the demographic of our user base and needed to be seriously re-evaluated.

I also realized, through questionnaires and polls online, that our user base were not entirely in love with the models represented in our artwork throughout the app. They were wanting a body type that aligned more with the average physique and one that was realistically obtainable.

User Research & Feedback

User research and feedback played a pivotal role in shaping our product decisions and ensuring we were building an experience that truly resonated with our audience. I led multiple rounds of user interviews, surveys, and usability tests to better understand the motivations, pain points, and behaviors of our diverse user base—ranging from competitive athletes to casual fitness seekers. These insights informed everything from onboarding flows to challenge design and reward structures.

One of the key outcomes of this research was a complete rethinking of our onboarding experience, which many users had found confusing and overwhelming. Based on direct feedback, I streamlined the process to be more guided and goal-oriented, resulting in increased completion rates and better first-week retention. Additionally, user testing revealed specific frustrations around progress tracking and goal visibility, which led us to redesign our dashboard to be more visual, personalized, and motivating. These changes not only improved user satisfaction but also directly contributed to higher engagement and longer session durations. By keeping users at the center of our process, we were able to build a product that supported real, lasting fitness habits—and felt fun to use along the way.

Target.

I needed to analyze pain points and hurdles current users were finding with the app.

Plan.

Researching led to organizing a new user flow and layout for the platform.

Design.

Time to develop mock-ups that showcased this new direction and improved UI/UX.

Ship.

After testing and user feedback, it was time to release the new update.

User Flows

It was extremely important to nail down the customer flow from initial sign up/sign in, to joining a race, and adding a workout. The 3 key areas of our platform that users perform the most.

These flows were useful in our first release, as they were consistent from one task to another and helped me generate concepts for page designs.

The main design inspiration came from the graphic above. I loved the fluidity of the elements that were seemingly randomized and unique.

Our brand only had one main color for all branding items which was “lime green”. I wanted to introduce something to capture the essence of our demographic better. Since our main demographic is middle aged women, the subtle purples and pinks seemed obvious and very appropriate.
The idea of flowing shapes with a gradient overlay really allowed for a playful and inviting aesthetic that would lend itself very well in many marketing materials and print forms.

Step 1: Wireframing

The first large phase in the process was to sketch out some general content blocks and layouts via wireframes. This would allow the stakeholders and developers to focus on core components and flow and not be distracted by actual photos or branding. My intent was to highlight new areas, relocation of current items, and showcase all new features we had discussed on implementing in the next large release.

I wanted to implement the popular new “lane” approach to showcase our content in a horizontal scrolling row. This would allow us to categorize our Races to help users filter out the events they were interested in.

I also felt like our bread a butter (Virtual Races) had boring landing pages that needed more pop and a cleaner layout. Adding an informative introduction video would prove to be extremely useful in conversions and Race joins.

Step 2: Sketch Mood board

After establishing a solid layout for popular screens, I began with designing a mood board for the CEO and developers. I ran with the new established color palette and chose a clean font to allow us to showcase the disparity between parent and child copy. I also wanted to highlight some imagery examples and charts to convey a simple way for our users to consume their exercise progress. Choosing a friendly color palette was essential to carrying the feeling of fun, motivating fitness that our brand strives for.

Step 3: Sketch High-Fidelity Mockups

Next, I began high-fidelity mockups for our onboarding process for new user registrations. The old app was very simple (Name, Email, and Password), and I wanted to capture more user specific info. I added in weight loss goals, sleeping habits, exercise intensity level specification and more. I really desired to capture user specific data so we could target more tailored Races, Exercise and Challenges for each individual and leverage our machine learning tool through AWS Personalize.

I then moved on to designing our core screens that athletes would visit including initial Virtual Race lists, race landing screens, syncing fitness trackers to their events, as well as adding rewards and purchasing the race.

It was a complete revamp and major improvement from the UX patterns that were established in the past.

Step 4: Migration to Figma

A few weeks after the Sketch mockups began, we hired a new CPO. He was seeking a large role in the collaboration process of designing our new mobile app and entire future platform. We decided moving over to Figma was a no brainer. It allowed our twice a week design sessions to be extremely productive and would ultimately sell the idea of our concepts to the executives. I built out custom components and leveraged states with variants that in turn allowed our developers to quickly grasp the new concepts and UX patterns.

To this day, I continue to LIVE in Figma to mockup new landing page designs, all-new mobile app features and fully leverage all the tools it has to offer to speed up the development process.

Step 5: Engineer Collaboration

Once we had all the pieces in place from a interface and experience standpoint, I began working heavily with our developers to establish a design system with styled components. It was extremely important to implement common components and styles that would be used globally in the native app and website.

I wanted to be as hands on in the process as possible to ensure the engineers understood and could apply the styles and layouts I created inside Figma. I thoroughly enjoyed the process from start to finish.

The Results

After the release of the new app, we interacted with users via social media and received overwhelmingly positive feedback. Some users of course are resistant to change but our existing user base raved of the simplicity of navigating around, the aesthetics, and the overall improvement from the previous version. Paired with a solid marketing scheme, we saw a large uptick in user registrations and Race involvement dramatically improve.