top of page
工作區域 2_3x.png
Responsive design-emfitness.png
Top

Female Fitness Website

UX/UI Designer

Participants observation, interviewing, synthesis, precedents research, design experiments, prototyping, usability test, and graphic design

Duration: July-August 2022

Tools: Adobe XD, Adobe Illustrator, Google Docs, Miro

Course: Google UX Design Professional Certificate

Overview

An easy-to-understand fitness website that helps people subscribe a fitness class.

​

Problems:

Recently, a non-subscription fitness program popular in the fitness industry - the point mechanism, is that consumers buy points to attend classes, for example, 4 points can be exchanged for a fitness class. But I found this system to be unsound. Because this is a newly emerging class mechanism in the fitness market, many people do not understand the principle of fitness class purchases. Plus, the information on the website is not very clear, people are confused when purchasing course credits to register for the courses they want to attend.

​

Solution:

A guided web design from purchasing course points to register for fitness. I place a strong emphasis on designing effective call-to-action buttons that provide users with clear and concise directions for the next steps. By optimizing the call-to-action button design, I aim to ensure that users have a seamless and intuitive experience when registering for their desired fitness courses.

Design Concept

Career women usually have to perform a balancing act between work and family. Besides, working overtime is normal in Taiwan, and the inflexible schedules became one of the main obstacles to their inability to enjoy the workout.
As an office worker who has often goes to the gym in the past two years, I found that Taiwanese women want to join a fitness club because of the catchy course names, but are discouraged because the website doesn't show detailed class content. Based on the above understanding of Taiwanese society, I established a female fitness website, making it easy and fast for Taiwanese women to sign up for fitness. Last but not least, let them enjoy a workout with confidence.

Design Concept

Define User Problems

To define users' need and problems, I conducted in-depth interviews and user research.

The research encompassed:

  • Pain points

  • Personas

  • Competitive Audits

Problem

Pain points

Pain point 1 (1).png

Financial pain point

Customers spend a lot of money to sign up for monthly fitness memberships, but rarely go to the gym due to inflexible schedules.

Pain point 2 (1).png

Productivity pain point

Customers spend a lot of time understanding a website's products and services.

Pain point 3 (1).png

Support pain point

Customers rarely find online real-time customer service on the fitness website.

Persona

Based on empathizing with users, I concluded 3 types of persona and each user journey map. These personas represent, respectively, the need for product and service detail, the need for clear instructions, and the need for a smooth online booking system.

Emfitness-persona.png

Competitive Audits

The research focuses on analyzing fitness websites for women in Taiwan. 3 direct competitors offer professionally coached fitness classes for women, and 1 indirect competitor markets its fitness classes primarily through the use of hydraulic machines and technical tool support.

Competitors: Good time fitness, DW yoga, Finfinte, Curves

截圖 2022-08-21 下午9.39.54.png

Value Proposition

Emfitness is an easy-to-understand fitness website that helps you find the best workout                  and schedule class as you wish.

Sitemap

My proposed redesign aims to address user pain points by creating a sitemap that facilitates easy navigation for customers who are interested in subscribing to a fitness plan and booking a fitness class. To achieve this, I developed an information architecture that prioritizes certain pages, indicated by the orange boxes, for wireframing and prototyping. My primary objective is to ensure that users can quickly and easily comprehend our offerings and services.

Sitemap
Group 118.png

Ideate Design Solutions

Emfitness aims to be a beginner-friendly site. Therefore, each operation process is designed with guidance as the main principle, guiding users to meet their goals.

​

Wireframing to solve users' essential pain points

The solution designs included:

  • Home page with intuitive product & service guidelines: Let users understand what we provide at a glance.

  • Flexible fitness plan- Points Mechanism: Users can schedule classes at any time without a monthly subscription membership.

  • Detailed product and services information: Save time for users to ask customer service for help.

  • Online real-time customer support

Emfitness-wireframe (1).png

Create a low-fidelity prototype

​

  • Homepage: Users can easily and directly understand the products and services offered by Emfitness on the homepage.

A "Chat Now" button floating on each main page allows users to find customer service immediately if they need any assistance.

Group 120 (1).png

  • 3 main pages: Locations, Classes, and Pricing pages provide users with clear information. Users can quickly learn about Emfitness, such as how many classrooms there are, which fitness classes are offered, and which fitness programs users can purchase.

Users can easily find the courses they want to take through the filters on the left search bar.

Group 119 (2).png

  • Checkout page: The checkout process can be seen below the header, users know exactly what they need to do to complete a purchase, filling in forms becomes much less tedious.

Group 118 (1).png
Solution

Prototype Design

Based on previous findings while designing wireframes and low-fidelity prototypes, conducting research including user research and usability study, I validated what users value when taking action on the Emfitness website. Also, I made some layout adjustments accordingly.

​

  • Intuitive user guidelines: a clear user flow integrates each product and service, such as integrating the user flow from plan subscription to course booking, guiding the user to the final goals.

  • Organized and hierarchical layout design: Feature the important informations to avoid confusion for users.

  • Usable and user-friendly: Providing detailed information and  a consistent experience.

  • Security design: Use visual cues for the credit card fields to instill confidence that this sensitive information will be treated seriously and with extra care. (See below)

Prototype
Group 114.png

1. Layout adjustments

  • Classes page: Consider mobile accessibility and intuitive user experience,  I divided the latest class news and class schedule into 2 page within the classes page. A hierarchical system layout could provide a more organized look and a better user experience.

Emfitness-layout-classes page (1).png

  • Checkout review page: Consider consistency to drive coherence and create a harmonious uniformity. I modified the position of checkout button at the checkout review page.

Emfitness-layout-checkout page.png

2. Build design system 

While prototyping, I built a design system to keep the web design consistent.

I chose vibrant flame orange and cadet blue as the Emfitness color brand guideline. The flame orange represents passion and ambition for sports. On the other hand, cadet blue is associated with clarity of thinking and mental concentration. The neutralization of the two colors embodies the energy and inner peace that sports bring to people.

Design system.png

3. Interactive Prototyping,

from plan subscription to class booking

The high-fidelity mockup presents the user path from subscribing a fitness plan to booking a fitness class.

​

  1. First row: Homepage → Pricing page → Checkout review page 

  2. Second row: Checkout page→ Fill out the checkout information → Payment confirmed 

  3. Third row: Classes page→ Booking a class → View booked class details and select number of participants → Your booked class page

Group 2.png

4. Responsive mobile design-mobile screen size

For a user-friendly experience, I designed a responsive website with various screen sizes so that users can easily browse the Emfitness website on different devices.

Group 3.png

4. High-Fidelity Prototype 

Take Away & Next Steps

Impact​

  • The clear and intuitive user path allows users who are unfamiliar with the fitness field to subscribe to a plan and book a class easily and efficiently.

  • Detail information of product and service provide a consistent user experience.

  • Online real-time customer support allows users to solve their problem efficiently.

​​

What I learned

  • How to Design a Subscription Process: I've learned how to establish a fluent user path. From subscribing a fitness plan to booking a class, users also place a high value on checkout security. Therefore, it is very important to design a website that users can use with confidence.

  • The Importance of User Accessibility: Considering that people use various devices to browse websites nowadays, designing a responsive website design for different screen sizes can give users a better user experience.

  • Build a Design System: Organizing a design system not only keeps the web design consistent, but it also helps me prototype efficiently.

​​

Next Steps

  • Measure effectiveness: Analyze the conversion rate for plan subscriptions and class booking to test the effectiveness of the Emfitness website.

  • Increase the interaction with users: When customers accumulate a certain amount, I plan to create a class reviews section to bring brands closer to customers.

Next Steps
bottom of page