Project Timeline: January 2021 - April 2021
Designing a Fitness Portal
Camp Gladiator Internship
Background
Camp Gladiator is a fitness company that creates fun and challenging workout programs led by certified personal trainers. They offer both outdoor and online workouts with different types of membership plans.
-
Challenge
The Spring Challenge was a NEW 1 month fitness program that we were integrating into our system for the spring season that was planned to release in April 2021. We had to design an intuitive and engaging user portal for the spring challenge where users could track their weekly stats and celebrate their progress.
-
My Role
I was a product design intern working closely with 3 product designers on my team. My main responsibility was geared more towards the UI design in terms of creating mockups of the user portal on all breakpoints. I was also responsible for gathering user feedback to identify key patterns for improving the concept design. I was actively engaged and contributed design ideas in weekly design review and design critique meetings for this project.
Who are we designing for?
Current Camp Gladiator members could add this spring challenge program to their current workout program or new members who wanted to sign up for a workout program in addition to the spring challenge. The registration flow would be different for these two personas, so we had to consider both cases in order to create a seamless experience for both existing and new customers.
Our Goal
Our goal was to create an MVP that included three workstreams: registration, user portal, and confirmation. I was mainly working on the user portal alongside another designer, which is the main platform where the user checks in and views their progress throughout their journey.
Ideation
We ran through several different potential ideas and iterations in this process. Through frequent design review and critique sessions that involved the product designers, product manager, and art director, we kept improving our initial concept. I helped create mockups during this phase.
User Testing
For key iterations, we conducted user testing through the UserTesting.com platform. People that represented our target customers interacted with the prototype. I watched their recordings of them and dissected key patterns on how to improve our design. I presented the findings to the team, and we would evaluate them based on priority and technical constraints to decide which pain points to tackle for the MVP.
Visual Design
The visual design was integral for the user portal as this is where the user comes to feel good about their progress or see how they can improve in their journey. We wanted to evoke feelings of accomplishment and motivation. We wanted to depict the personal statistics in bright CG red boxes that would immediately attract the user’s attention. Red symbolizes strength and energy and gives users the motivation to continue through the spring challenge. We utilized balance by distributing the elements evenly to provide stability and used white space effectively to make the portal not overwhelming.
Translating on all breakpoints
Once the design for the web was finalized, I translated the design for tablet and mobile in Figma. Throughout this process, I improved my technical design skills in Figma by working with auto layout and components.
Takeaways
As my first real-world project, I learned how to collaborate with product teams iteratively. I got to experience the product life cycle and how the ideation phase plays out in a real-world setting.
I learned how to tie back user testing, analytics tracking, and internal feedback to improve designs
I gained more in-depth design technical knowledge by working with Figma’s more complex features and designing using a design system based on atomic design methodology