Mission Weight Loss

WEBSITE REDESIGN

Project Duration
4 Weeks

My Role
Product Designer, UX/UI Designer User Researcher

Tools
Figma, Optimal Sort, Adobe Illustrator

Overview

MWL is an existing weight loss service from a nutritionist. The goal of the project was to analyse the user experience of the current website and provide solutions which increase the conversions of the website and can make the experience easier for users to follow.

Design Process

As this was a client-based project, I started out by writing a design brief with the stakeholders involved where I mentioned the business goals, major design deliverables and metrics that will track the outcomes.

I started out by performing a Heuristic audit of the existing website and then through competitive research to understand the market in depth followed by User interviews, re-looked at information architecture, Hi-fi prototypes and then testing, concluding with priority iterations and hand-off notes for developers.

Let’s Talk about the Problem

Mission Weight loss as a business wants to increase its conversions and overall sales. The current website is not professional looking and it is not able to show the users the different services it offers to the users. In order to make the process of booking a call and convert users into buying a health program, the effort is to make the experience smoother and more professional.

Problem Statement

While enrolling for a fitness program, users often face issues like a lack of detail and spend a lot of time understanding if the programme will be customised according to their body needs.
This is a problem as fitness is an intimate issue for a user, and a lack of detail to make the user feel assured can result in fewer conversions, affecting the business directly.

Proposed Solution

To redesign the website focusing on highlighting important information, working on navigation and giving users an easy-to-follow experience for booking an appointment.

To work on the UI and branding to make the website look modern and professional so that the user is able to trust the company.

Sneak Peek at the proposed solutions

Before

1.UI UPLIFT & CONTENT REVAMP

Improved the UI and brought consistent branding to the whole website.

After

Before

After

REVAMPED HEALTH PROGRAM PAGE

ADDED A LANDING PAGE FOR ‘HOW TO JOIN’

COMPETITIVE ANALYSIS

DIRECT COMPETITORS USED A MOTIVATING YET HELPFUL TONE AND ALSO USED A LOT OF TESTIMONIALS FOR USERS TO BE ABLE TO TRUST THE BRAND.

Key Takeaways :

  • Clear, Simple UI.

  • Less but apt content

  • Highlighted CTA

  • Motivated, helpful tone

  • Testimonials are king

  • Free consultations

Things to avoid :

  • Information overload

  • No detailed information of programs

  • Confusing Navigation

  • Lack of Human Touch

  • Using Jargons

HEURISTIC EVALUATION

A heuristic evaluation was conducted to find out the inconsistencies and other fallouts in the usability of the website.

USER RESEARCH

Research Goal :

We want to learn how the users currently navigate through the MWL website and figure out the process to register for the plans. We also want to understand users' motivations and concerns while selecting a plan. This will help in tailoring an easier experience to encourage more conversions. 

USERS WANT THE ABILITY TO BOOK APPOINTMENTS EASILY. THEY WANT TO FEEL SAFE & SUPPORTED WHILE ENROLLING AND HAVE REGULAR CHECK-INS FROM A WELL-READ COACH

INTERVIEWED A MIX OF 5 USERS - WHO WERE FOLLOWING A FITNESS ROUTINE, ENROLLED ON A PROGRAM OR ARE NEW TO THE FITNESS. Questions were asked to understand the overall experience of users already enrolled with a competitive brand, and identify the pain points and barriers in selecting a plan for themselves. The data were synthesised through thematic analysis and then grouped by needs, pain points want and motivations.

TAKEAWAY FROM THE RESEARCH

“I am desperate for help but I need a constant mentor who is well-read and can understand my body and then provide a plan” - Anita Singh

PROBLEM STATEMENT

After learning about the user's pain points, motivations and overall experience expectation, I consolidated problem statement which help guide the rest of the design process

While enrolling for a fitness program, users often face issues with a lack of details and spend a lot of time understanding if the programme will be customised according to their body needs.
This is a problem as fitness is an intimate issue for a user, and a lack of details to make the user feel assured can result in fewer conversions, affecting the business directly.


USER PERSONA

Meet Pallavi Kumar, a working mother who is interested in enrolling in a health program that will help her change her lifestyle to be more healthy.

To further empathise with the user and deeply understand what are the experiences the user is going through I used empathy Mapping where I captured what the user is doing, thinking, listening and seeing.

INFORMATION ARCHITECTURE

Using CARD SORT to reimagine the information architecture of the site.

One of the key areas of improvement which could help in improving the user experience found in user research and competitive analysis was how the content (information) is made on the website. In the current MWL experience, the information was not distributed well and that was hindering a smooth experience.

I conducted a hybrid card sort to determine the categories and had about 20 cards. I asked a group of 7 participants to sort them according to their preferences.

Used optimal sort to help conduct the Card sort.

The categories given to the users were:

How to join

About Us

Health Plans

Success Stories

Contact Us

In the card sort, two new categories were coined by the user - MWL community and videos, and both these categories were discussed with the stakeholders. As a business goal, it was decided that this content should be directed at social media and we can let go of it on the website.

This will also help in prioritising only important information on the website.

CART SORT OBSERVATIONS

SITE MAP

After a content audit and card sort exercise, I went ahead to plan out a revamped site Map for MWL

HAPPY FLOW

After mapping out the site map I went ahead to structure the happy flow for the key user persona.

Brainstorming Design Solutions

I started the design process by brainstorming design solutions with the help of sketches and browsing through different UI patterns. Some of the examples are below -

STYLE KIT

As I also wanted to work on improving the branding so that the user can trust the brand and there is UI consistency I worked on it with the help of the stakeholder to decide on a font which is more modern and clean and a logo which is minimal and captures the essence of the brand.

FINAL SCREENS & MAJOR IMPROVEMENTS

The hi-fi was made for the homepage, Health plans & How to join landing page for both desktop and m-site. A questionnaire of a mix of basic information that the coaches generally need before suggesting a programme was also added.

After the Hi-fi prototype, I wanted to test the flow with the users first-hand. A test plan for the same was made with a number of tasks which the users were instructed to perform on a video call while sharing the screen.

Some of the Sample questions can be seen here

THE HOMEPAGE

  1. Added a hero banner to give out concise information about MWL with a CTA - to book a free call.

  2. After testing it was found that the user wanted to see the different benefits of MWL, hence a strip with benefits was added just below the hero banner

  3. Highlighted Testimonials

  4. Added a secondary button to the UI KIT to differentiate between primary actions.

THE HEALTH PLAN PAGE

  1. Added a hero banner with an actionable CTA and also an offer tag

  2. Reduced content further

  3. Moved whats inside the package in the first fold page itself so that it is easier to find.

BOOK A CALL QUESTIONNAIRE

  1. Added a line just above the CTA- this will only take a min so that users don’t close the screen thinking that this might take a long time

  2. Added question numbers

  3. Added skip this question button so that if the user is not comfortable sharing intimate details they should still be able to fill the form.

Actionable Steps

  • Continue iterating based on the data collected from usability tests

  • Design other pages like about us, contact us etc

  • Ideate on coming up with a live chatbot

  • Help with dev handover

Learnings

  • Meeting with stakeholders and aligning the business goals with the designs.

  • Conducting heuristic evaluation and other important methods and making the stakeholder understand that these processes are important.

  • Be very consistent with keeping meetings with stakeholders and sharing your progress with them for feedback.