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.

Background

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.

Research

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.

resource:

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.

Competitive analysis

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.

Information Architecture

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.

Information Architecture

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.

Wireframes

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.

Visual Design

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:

Mobile & desktop 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
  • Footer

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.

Also, special thanks to my friends Neeraj Chauhan, Sumeet, Manav Suspal, and Ansh Tyagi for their constant feedback & suggestions.

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.

Connect with me on LinkedIn & Twitter if you have any questions, discussions, or any future collaborations for me.

See you somewhere on the internet! ;)

--

--

--

A 17 y/o artist, freelance graphic designer turned UI/UX designer. @10kdesigners alumni

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

I Made a Thing Now What? (Paint Stick Project)

Design or be designed

Web-app developer’s essential workflow to create amazing UIs

Creative Conversations: Charles Burdett — The Sideman Designer Podcast Transcript (Episode 015)

Redesign H&M Mobile App — a UX Case Study

Why is Responsive Web Design so important?

Thoughts on the Future of Digital Architecture and Interior Design

First steps in UI Design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aryan Vatsa

Aryan Vatsa

A 17 y/o artist, freelance graphic designer turned UI/UX designer. @10kdesigners alumni

More from Medium

Case study: Creating a seamless compensation experience

UX Case study — Unleash App

Billie A Personal Budgeting App — A short UI/UX case study

UX/UI Case Study: Skoach