top of page
Gradient Strip

Revamped
Navigation Experience 🧭

When studying the success rate of consumers finding services via navigating Toby’s app in the past 3 months, only 18.15% of consumers (~7200 people) converted from the Home page to Service Page. Upon our user research, we found that there was room for improvement to boost the overall conversion rate.

Toby's services are categorised into 3 levels: Grandparent (1st), Parent (2nd) & Child (3rd).

Home page shows existing grandparents the platform has. (e.g. 日常家務)

Under each grandparent page, navigation tabs show parent groups. (e.g. 深層清潔)

ac clean.jpeg

Under each parent group, there are multiple child services. (e.g. 冷氣清洗)

Background

As a leading service marketplace in Hong Kong, Toby runs 4 business models.

1. Direct Booking: Match cleaners with consumers, primarily for home services.
 

2. Store: Offer a wide variety of stores for consumers to book services, primarily for beauty services.

3. Assistant Matching: Match individual needs with different vendors, primarily for home renovation services.

4. Quotation: Share a list of qualified suppliers based on consumers’ inputs on question forms.

Reading with Magnifying Glass

​Problem

Among all users who found services on Toby, our user survey showed that a majority of them (13/17 users) clicked icons on the Home page to browse services. During user interviews, some reflected that they struggled to find which grandparent or parent grouping their desired services fell into so they bounced off. We hypothesized that these are the potential blockers:

  1. The naming of some grandparents isn’t directly relevant to its child services. For example, 物理治療 service sits under 保姆/陪護 grandparent. We see 物理治療 has a 0.12% lower conversion than 私家看護. It might be unclear for users that they can find 物理治療 service under 保姆/陪護 grandparent.
     

  2. Showing similar service types under different business models separately is confusing. For example, we have grandparents called “裝修/設計” and “維修” respectively. Both services are related to home renovation. The former runs the Assistant Matching model and the latter runs the Quotation model. People may not know which one to click to find home renovation services at first glimpse.
     

  3. The model photo at the top occupied many spaces, which deters consumers from viewing more services on a screen.

Image by Towfiqu barbhuiya

Solution

  1. Readjusted the grouping definition and displayed sequence to ensure relevant services are displayed as per user interest.

    • We regrouped similar service type into 1 grandparent (e.g. 家居&清潔>日常家務; 裝修/設計&維修>家居裝修)

    • We redefined the parent level more granularly

    • We arranged the order of grandparents by no. of total page views in the past 3 months
       

  2. Showed service with different models under 1 grandparent. (e.g. Consumers can click different tabs to book beauty services from stores or get quotations from suppliers.)
     

  3. Removed model photos so consumers see more services on the go.
     

We ran an A/B test for 3 months to ensure the result genuinely reflected the effects of the revamped navigation on the conversion rate. Group A saw the old grouping and Group B saw the new grouping.

The Changes

Before_Home.jpg

Before

home page demo.gif

After

Home Page​
 

• Adjusted the grouping, display sequence and naming of sub-verticals

• Removed model photo

• Changed the position of the search bar

Grandparent Page with Quotation Model

• Removed model photo

• Added “顯示全部服務” menu for users to navigate between sub-verticals

• Adjusted the grouping, display sequence and naming of parent & child group

Before

Home demo.gif

After

Before

store x ppl demo.gif

After

Grandparent Page with Store & Quotation Model

Grouped Store & Quotation services to the same grandparent page
• Resized store cards

• Removed model photo

Grandparent Page with Assisted Matching & Quotation Model


• Grouped 2 types of services on the same page

• Showed icons from 5 to 4 

• Resized the banners

• Showed related case type for relevant grandparent (e.g. home case for 家居裝修, office case for 商業裝修)

HRIDxppl demo.gif

Before

After

Result

3 months after the revamp, we concluded that the new navigation performed better than the old one. We found that
 

  1. The total page conversion from Home page> Grandparent page> Child page is 11% more in the new template over the old template. (+1190 traffic).
     

  2. The conversion of total page views from grandparent to child page in Group B (48%) is 6% more than Group A (42%)
     

  3. The overall conversion of queries or booking of top performing grandparents (Home, Beauty & Home Renovation) in Group B (5.79%) is 2.22% more than in Group A (3.57%).
     

It revealed that the revamped navigation not only allows consumers to find the right services more successfully but also triggers their intention to learn more. It is a win-win situation for businesses and consumers.

Challenges & Mitigation

  1. A large discrepancy between frontend and backend grouping consumed a huge maintenance effort. While it is not a must to align both, it provoked us to think about how to manage categories more sustainably. Our plan was to define the fundamental grouping and rules for the backend in this revamp. It allows the front-end to adopt and iterate accordingly. As a result, we can centralise the management of categories and integrate the backend with front-end grouping to save unnecessary effort for configuration given that grouping of services is more static.
     

  2. There’s a risk for consumers in Group B to see materials in the old grouping. As the links of the grandparent page on communication channels (e.g. email, SMS & push notification) and search results were fetched from the old grandparent ids, having a separate grouping definition may lead consumers in Group B to see materials in the old grouping. We tackled the concern by keeping the old unique id for Group A & B, as well as creating new ones based on the additional grandparents.

Capture.PNG
White and Pink Balloon

Future Iteration

To ensure the sequence of displaying grouping caters to user interest, we can allow the backend to calculate, refresh and display categories based on different rules (e.g. no. of page views, clickthrough rate etc.) upon backend integration. It enables the platform to be more responsive to market needs, which is better than hardcoding or configuring categories.

bottom of page