UI/UX case study: Designing a fitness event landing page for Ultrahuman.
In this case study, I’ll take you through my process of how I designed a fitness landing page for Ultrahuman.
This was an assigned task given by the 10kdesigners folks as an assignment to design a landing page for an upcoming event in the niche assigned to us (for me, it was fitness), for a pre-existing or a made-up brand.
And since my niche was fitness, I explored many fitness-related companies and decided to design it for the Ultrahuman.
What is Ultrahuman?
Ultrahuman is a fitness platform that helps people meditate, work out efficiently, and optimize their sleep with the help of athletes, neuroscientists, artists, and psychologists — all in one place.
Why did I pick Ultrahuman?
- Ultrahuman is one of the most trusted and fastest-growing brands. Ultrahuman touts “thousands” of people are signed up and waiting to get their hands on the glucose tracker service — and says it’s seeing 60% week over week growth in sign-ups, with wider availability of the product slated for “early 2022.”
- Used and approved by many big creators and influencers.
- Their strategy and ideologies are quite different than many other fitness and health companies. The core differentiator of the Ultrahuman app is bringing the best athletes, fitness coaches, and psychologists in the world on one platform. Partners include leading athletes and celebrities like Crossfit world champion Kara Saunders, fitness celebrity Amanda Cerny, coach Johannes Bartl, hybrid athlete, and coach Kris Gethin, MindSize CEO Christian Straka, UCLA Mindfulness Director Diana Winston, to name a few.
Before getting into the research process, Let’s have a clear understanding of the event and why I chose to go with Ultrahuman.
I chose the fitness Bootcamp since it’s a landing page for an upcoming fitness event.
Which is a fitness Bootcamp event?
A fitness boot camp is a type of group physical training program that may be conducted by gyms, personal trainers, or other organizations. These programs are designed to build strength and fitness through a variety of types of exercise. This Bootcamp is for someone who is a beginner and wants to get fit.
Why did I choose Bootcamp as an event?
Based on my research I decided to go with Bootcamp because it is:
- Efficient: You can often get cardio and whole-body strength workouts in each one-hour session.
- Motivational: When you exercise with a group of people there is built-in motivation.
- Short time period: Since Bootcamp is for a short period of time, they don’t lose motivation.
- Lower Cost: Cheaper than a personal trainer.
- A faster way to boost fitness: Bootcamp is a great place to start your weight loss and fitness journey which provides a whole-body workout.
- A good place to build bonds: It’s a good place to make relationships with people who are into fitness.
History of Boot Camps
Introduction Modern fitness boot camps (also known as outdoor fitness, bootcamps and military fitness) have only been…
Know more. Be healthier.
Verywell Fit is your trusted source for information on eating well and exercising. Let our expert advice, creative…
Who is this event for?
For beginners who want to get mentally and physically fit.
I also took care of user concerns to understand their mindset properly:
- Does the website have all the important details about the event?
- What can I expect in the Bootcamp event?
- Why Ultrahuman? Is the company trustworthy?
- What are the instructor’s qualifications?
- As a beginner, is joining a Bootcamp event going to help me?
I browsed the internet and found some competitor websites (allevents, fitnessevents, Conquest Events, Townscript, HDOR) and noted all the valid design patterns present in the websites.
Also, some of the common ideas that I got after viewing these websites were:
- Using videos to showcase the previous events: Using videos might be the best way to give viewers an idea about the event.
- Name and price of the event to be given more attention: I’ve noticed in many events cards that event name & price are given the primary hierarchy even more than the timing and location because many users focus on this information the most.
I also compared each section from websites to websites to understand the design patterns and where I can go creative and find solutions to the problems a landing page face.
This part became easy for me since I already had a good understanding of different websites (thanks to the information trials I made earlier). I also gathered the information from each website put the important part here.
I also tried answering some questions like what information to be shown on the page, how to set the hierarchy, What are possible info points about an event that you shouldn’t miss out on, etc.
Now that I know what to include and what not to (thanks to brief IA and research), it’s time for me to make wireframes of the website.
I started with wireframing on paper as it saves a lot of time and gives a rough idea of how the website would look. Then I moved to low-fidelity wireframes to get a clear idea of how my visualization will look on screen.
Now comes the most important & creative part, Visual design. Since I had my wireframes, I could work on the final designs with more clarity now. Also, I chose to follow the same font style and color palette that Ultrahuman is using on their website.
But before explaining each section, let have a look at the final desktop version & mobile version:
For now, I’ll be only explaining the desktop version to not make it too complicated for the readers. Let’s, Deep dive!
The website is divided into 6 important sections:
- Hero section
- Event details
- Bootcamp events details
- FAQs section
- Previous events
My learnings and takeaways
- Since it was my first case study, I realized how important it is to document the process. It helped me recall the decisions I made while designing the landing page.
- If research, wireframes, and IA are done right, visual design becomes easier. And of course, do as many iterations as you can.
- Get as many reviews/feedback as you can! The more perspective you’ll have, the better designs you will end up creating.
What I could have done better?
- I could have iterated more and tried different ideas If only I had more time.
- If I was aware of the analytics and business goals of the company, I would have come up with better design decisions.
- I would have interviewed and asked users for feedback to come up with better solutions.
It’s a wrap!
Thank you so much for giving it a read and let me know if you have any feedback, It would really help me a lot.
Firstly, I would like to express my gratitude to the 10kdesigners folks for giving me the opportunity to work on this assignment.
Also, I would also like to thank my mentors Shruti Shah, Vanshika Nagpal, Swapnil Borkar, Janardhan Massar, Jash Valia, and Abhishek Bindal, for taking out time & answering all my doubts and despite being extremely busy with work.
And if you are a health-conscious person, then you should definetly check out Ultrahuman. It’s a fitness platform that helps you improve your diet and exercise based on glucose biomarkers. The platform also has elite athletes, neuroscientists, artists, and psychologists to help you meditate, work out efficiently, and optimize your sleep.