UX/UI | March 2022

Boosting business value through web re-design

Mischief Makers is a facilitation agency with lots of focus on bringing energy and enjoyment to working, meetings and learning. They also offer trainings in facilitation for individuals and businesses.

Overview

This project is about discovering the usability issues in the current website, understanding the problem behind high bounce rates and create a new solution for this problem with a website redesign.

Client

Mischief Makers

Design

Web Design

My Role

UX/UI Designer

The brief

Help reduce bounce rates and increase conversions

Mischief Makers website was experiencing high bounce rates. It appears that most visitors get lost pretty quickly and can’t seem to find the information they are looking for to make decisions on the website, especially with users attemting to find info about their flagship course and register for it. This often leads to users leaving the website without fulfilling their purpose of visit.

The course detail page is one of the focus of the project because that's where most of the conversions are expected to happen.

User and business goals

The goal of the project is to reduce the bounce rates occurring on the website, especially the course pages. Therefore, we need to find the issues with the website and answer questions about what were the reasons users leave the website before actually getting anything done.

The solution should offer simplicity, straightforward and be aligned with the mischievous brand.

Impact

By solving this problem, users can spend more time on the website, understand the content and achieve their goals for visiting the website. This will also help boost conversion rates and help grow the mischief makers brand.

Discovery

Defining the problem

Competitive analysis

I did some research to understand what was wrong with the current website. To wrap my head around facilitation as a business and how other facilitation agencies have presented their services, I looked into companies such as Abracademy and Limelights.

Expert review

I analysed the current situation of the website and what can be potentially improved based on common web design practices.

I color coded the severity of issues found,
- Red is high severity
- Orange is mild
- Green for idea’s i’d like to iterate on, and maybe implement in the new website.

Google Analytics Data

I also looked into the Google analytics data from the website to see where most visitors are dropping off, how much time they are spending and the bounce rates for each page.

User interviews

To understand what the potential users needs to understand about the facilitation courses, the important information they seek to help them decide if a course is for them or not, I interviewed 5 people that fits the persona that had been created by Mischief Makers.

Customer journey

With all the data gathered, I mapped out a customer journey to help me visualise what was really wrong and also to get stake holders to understand the research I’ve done. This made it easy to define the problems that needed to be solved, and shaped the direction my design would take.

The problems discovered

After measuring potential effort and impact, I chose to focus on these 3 problems to solve.

It began clear that visitors can’t find the information they need to sign up. Since this project is mainly focused on reducing bounce rates and increasing conversions, my primary focus was on the ‘course details page’ where courses are sold.

- No hierarchy on information on the page: Visitors want to find the right information they need on time, without guessing what they’re looking at. Users are bouncing because finding information is not user friendly and tedious.

- Current website has usability issues, including poor information architecture. It violates usability heuristics - Consistency & standards and multiple UX laws, including hicks law. There are often too many CTAs in view at same time, which leads to confusion.

- Not much trust and credibility offered: Users need to see testimonial and case studies to feel secured in making purchases. Adding an FAQ section to training pages will make it easier for visitors to find answers they need in order to sign up for a course.

Ideation & prototyping

Userflow and site map

I began by mapping out a user flow for the ‘course details page’ to highlight important user touchpoint. I rough sketched several flows user might take to reach their goals. I also created a site map from this flow, then color coded each sections based on answers most users want answered. The colors made it easy to see where different kind of information is located across the site and how to navigate there. Also made it easy to explain my progress to stakeholders.

The Solution #1

Information hierarchy

I restructured the pages to display information according to relevance and importance. The page structure guides users to where they need to be, including new navigation designed to help users find what they're looking for quicker.

The Solution #2

Reduced amount of CTAs

Instead of having multiple CTAs placed across the page, I designed a modal that scrolls with the page. This modal has all the important information needed for users to sign up for a course. Users can navigate to anywhere on the website within reach of the modal.

The Solution #3

Homepage Hero Section

Hero section is the best opportunity to engage users. The current content on the homepage is aligned with the brand, the hero section can be used to communicate the company’s “what?”, faster.

The Solution #4

Boosting trust and credibility

To gain trust and credibility, I redesigned the case study section to feature several case studies with a navigation feature and filter options that helps users quickly find which case study they find most interesting.

Usability Testing

The tests were carried out in small tasks. I invited a combination of new users and existing users to gather insights. Apart from the metrics shown below, I paid attention to the hotspots, the misclicks and hints for information architecture issues and potential cause for bounce rates.

Tasks and results

Post launch results

Comparing Google Analytics 4 months data of Oct 2021 - Jan 2022 before the launch with data from Feb -May 2022, the results shows that the new design is effective in reaching the user and business goals.