JETSWEAT
UX Design Internship - Summer 2021
My Role: UX Design Intern
My Team: 1 Designer, 2 SWEs, CEO
Design Tools: Figma, Adobe Photoshop
Timeline: June - August 2021
Overview
JETSWEAT is an on-demand, customizable fitness platform that provides users with exclusive access to boutique studio classes and programs catered to individual fitness needs. In the midst of the pandemic, the platform saw an upsurge of over 28,000 active monthly users and studio partnerships.
In summer 2021, I joined the team as a UX Design Intern alongside 3 other student interns. Throughout the summer, I was responsible for redesigning the profile page feature on the platform’s iOS app and revamping the programs experience on the desktop version to tackle current usability concerns and boost user engagement.
Final Prototype ✨
Below is a sneak peek at my final deliverable of the revamped profile page interaction:
Now, let’s dive into how I actually got there…
Understanding Why Users Don’t Engage
As a platform, JETSWEAT aims to offer a personalized exercise experience to its users. However, users were reporting feeling an overall lack of clarity in the process of scheduling programs (a set of multiple workouts) and keeping track of their progress via the profile and dashboard pages.
After analyzing user research, I identified the following pain points in the programs and profile page experiences:
Users find it difficult to schedule a program when the steps to do so aren’t clear.
“I felt confused when trying to schedule a program since I didn’t realize it would automatically add every classes to my calendar.” 😕
Users feel unmotivated to complete a program since they can’t see how they’re progressing in it.
“I don’t feel like finishing a program when there’s no real accountability to keep track of how far into it I am.” 😥
Users value viewing their overall workout progress in a clear, simple way.
“I care a lot about getting to see my progress and how I’ve improved over time, but I feel like this info isn’t that clearly laid out for me.” 🤷🏻♀️
Users Seek Simplicity and Personalization ✔️
The findings from the user research were very telling about what users found most important in their exercise experience on the platform. To help address these issues, the CEO and I agreed on the following solutions of enabling users to:
Schedule a program with clearer instructions and clarifying modals.
When a user chooses to schedule a program, they enter the necessary data related to dates and times, but will be better led through this process via clearer and cleaner modals.
Keep track of their progress in programs they’re currently completing.
Users will be able to see how many exercises from a program they’ve finished so far through a new programs progress bar in their dashboard page.
View all their overall workout progress with a cleaner, simplified design.
Users will easily toggle from their weekly and monthly workout progress with a new “All Time Stats” feature and redesigned overview sections to better respond to an iOS platform.
With these key insights in mind, I began designing to first improve the programs experience.
Part I: Reinvigorating the Programs Experience
Simplifying the Programs User Flow
The original user flow for scheduling a program included just one modal that asked users to input one time to schedule their initial class with an “Add to Calendar” button, then ended the experience there.
Original User Flow
Users were confused regarding how the other classes were added to the calendar and if anything was even added in the first place. I restructured the user flow to explain how to schedule program times given its non-obviousness and added an explanatory modal that would direct users to their calendar page, minimizing confusion for users.
To bring this user flow to life, I then tackled designing the new clarifying modal. ⤵️
Crafting Visually Consistent Modals
I decided to continue with exploration B as the location of the explanatory text below the main title was fitting with the platform’s other modals (unlike exploration C) and also emphasized the action of navigating to the calendar while also clearly offering users an alternate option of exiting the modal “for now” – making it clear that it is expected that they should ultimately go to their calendar once they wish to start the program.
Final Program Scheduling Interaction
Final User Flow
Though I did introduce another step in this final interaction with the addition of the new clarifying modal, this step is vital to allowing users to clearly go about this process with minimal confusion and ambiguity.
Explorations for Encouraging User Engagement
Along with a progress bar that keeps track of a user’s place in an open program, our team also decided to implement a completion indicator for when a user completes a program. This gives users accountability to finish a program they’ve started, as previously there was neither a progress bar or any indication to celebrate users when they’ve successfully completed a program.
I ultimately decided to pursue exploration B as it was clearly distinct from the programs progress bar (which exploration A was almost identical to) while also remaining visually consistent with the rest of the platform’s UI. Meanwhile, while explorations C and D both offered strong positive reinforcement for program completion with their noticeable banner design, these designs were visually inconsistent with the programs progress section’s alignment and color scheme.
Part II: Personalizing the Profile Page
While designing for the programs experience, I was simultaneously working on redesigning the platform’s profile page. As seen below, the original profile page design had readability and usability concerns with small text and unclear section divisions.
The new design I made aimed to tackle these issues while also embedding more personalization for the user through new features like “All Time Stats” and redesigned user interactions that aligned more with the platform’s branding.
Customizing the Workout Experience
For the creation of the “All Time Stats” feature, which would tackle the user problem of not being able to clearly see their workout progress by offering a visual display of the user’s current stats, I explored the following designs.
I decided on exploration A since it was not only on-brand with JETSWEAT’s UI, but also offered a clearly distinct card visual of the user’s current sweat equity that draws instant attention to this section. The other explorations had potential issues with appearing too cluttered or being visually unaligned with the platform’s branding.
Redesigning the Profile Editing Process
In conjunction with these new features, I also designed for the editing process users go through to change their profile to better fit the brand’s rebranding goals. Following feedback from fellow designers, I chose exploration D as it was not only most on-brand but also offered users “double” confirmation of adding a new item via both a green overlay and checkmark.
Revamped Profile Page Interaction
The final profile page interaction reveals new features and a consolidated process for toggling from a monthly to weekly overview, as well as an overall redesign for the page to be more on brand with the rest of the platform. The prototype below also reveals the updated screens for the profile editing process.
Final Prototype ⤵️
Designing Within a Visual System
Throughout the design process, I made sure to design within and consistently update the platform’s UI Kit.
What I Learned 🧘🏻♀️
During my time at JETSWEAT, I grew so much as both a designer and a team worker. My first time working at a start-up, I enjoyed the hustle and bustle of tirelessly designing for a platform that I could visibly see rapidly growing and evolving. With each weekly stand-up, I also grew much more comfortable giving and receiving design critique. I learned how to become more purposeful in every design decision I make to better discuss my designs with greater confidence and meaning.
Early on during my internship, I became the sole designer on the team. Through that experience, I learned so much about the importance of clear, consistent communication with developers and PMs. With our team working remotely, I saw how even a quick 5-minute Zoom call or Slack back-and-forth did wonders to bring everybody on the same page so that we could create work that aligned with our goals and project mission. If given more time, I would love to have explored how to tackle accessibility concerns I noted across the platform, namely color contrast issues and inconsistencies in text sizes.
My time at JETSWEAT was no doubt demanding yet highly rewarding, and I’m grateful for the growth I experienced here! ✨
🖋 Interested in exploring more of my work? Check this out.