Skills and Thrills

UX research x UI Design

Redesign a website to improve the user experience of Skills and Thrills's activity booking system

Summary

Skills and Thrills is an online platform, helping parents and carers to find and book holiday classes and programs in their local area. Based on the analytic report, some main pages had a relatively high bounce rate.

Existing site > Provide a quick fix on the current skillsandthrills.com.au site in order to increase the booking rate as well as the sales;

How might we improve the user experience of Skills and Thrills website to increase its online revenue?

My role

I was the sole UX/UI designer on this project, working closely with the developer leads, company founders and business development manager. Due to the limit timeframe and a tight budget, this project focused on basic UX research and interface designs for both mobile and desktop site.

Results

Design Process

This website redesign comes with loads of benefits, which are proved by our usability testings:

Increased visit duration and decreased bounce rate with clear and hierarchical website navigation;
Easier to search, find and book kids activities e.g.categories and filters etc.;
Easier to pay for the activities with an optimized checkout process;
A more responsive & mobile-friendly interface;

Current Website

Client interview | Secondary research

“A fresh new brand inspired by their old site - easypeazy.com.au"

Rebrand and launch a new website in a short time

The first part of this project was to understand clients requirements, clarify the key issues of the current website and the pain points of users. Then, I interviewed founders and managers to get their perspective on the old website. I noticed that clients are more likely to meet goals:

Be more Competitive in the Marketplace;
A more clear searching, booking and purchasing process;
Build consistent, cohesive visual experiences across devices and platforms;

Understanding users & their needs

Persona

The three types of users are:

Parents (primary)
Corporates (secondary)
Kids activity providers (secondary)

Due to very tight timelines, I've been asked to only focus on the parents. It is extremely important to understand their goals, needs, pain and gains. Therefore, we can prioritize features and contents accordingly.

Based on the collected information, I've generated a persona: Amber. Amber is a mum with a full-time job who love to keep her kids busy with all the fun activities. More likely, a clear and simple activity book system is what she wants.

Personas - Amber Poole

Understand the competitors

Competitor Analysis

Instead of conducting general marketing research, I analyzed three main competitors website with their website layout, content and features lists. Based on these findings, I gave some suggestions to clients and briefly discuss with their founder and developer leads if those features would fit their budget and agenda.

Content Ideas

Feature Ideas

Ideation and prioritization

Feature Prioritization (MSCW)

After collecting all the data, I created a draft of possible feature lists, which are listed in order of priority. Then, I used it as a reference to identify opportunities to create the website category and layout website pages.

Feature Ideas

Feature Ideas

Findings

Unclear content structure

A clear content hierarchy can benefit users to find the information to accomplish their task.

Observation

Information on the webpages is not layout as the instruction of content hierarchy, which was putting the most important things at the top of the page and the least important at the bottom.

Therefore, it had caused a lot of problems, such as:

Uncleared CTA buttons;
overwhelmed information - Unnecessary Repetition;
hard to maintaining user attention;
slower decision-making process etc.

Solution

Re-layout pages according to the needs and importance of information
Creat visual relationships between pieces of content;
Reconsider the CTA button design

Cluttered UIs & bad design language

Users could easily feel confused about the inconsistent user interface design, which would also slow or fail to complete their purchase decision-making process

Observation

The function and appearance of some UI elements were not matched. For example, there were UI elements designed as text field but it works as a list button.

There was more than one design language system on this website, including the button design, colour usage etc.

Solution

Create a design system guideline of typography, colours, space, grid, size, positions etc.
Use familiar patterns - UI elements

Confusing flow & missing features

A smooth user flows is very important for a website, which can get a significant improvement in revenue and conversions. Additionally, Users' needs needed to be considered while designing the user flow.

Observation

There are some features that were missing. For example, after clicking the "add to cart" button, users needed to enter the kids' information to make the reservation. Without the prefilled/autosaved function, parents were not able to go through the payment process in a short time.

Solution

Restructure the website;
Have additional features, such as login/register, review (star system), order history etc.

Solutions

Information architecture

Based on the findings above, I created a few new pages to create a website structure diagrams for the new website. With the new structure, users can easily access any prefilled information, including their order history, contact details and kids profile etc.

Moodboard & Style Guide

We found couples of inspiration images and used them to create a moodboard. Based on that, we generated a style guide to ensure a consistent feel look, feel and tone across the whole new website.