top of page

Tickle Your Senses

This project is a proposed redesign for an e-Commerce website of a local business that specialises in play, learning through stories and sensory play. The goal is to optimise the browsing experience and prevent cart abandonment by influencing users to complete the check-out process.

Role

UX Research, Design, Usability Testing

Timeline

2 weeks

Year

Platform

2020

Desktop

Introduction

Background

 

Our fictitious client is proud to be a part of a local dynamic community with customers ranging from local residents to small businesses.

The business model is based on customer service, reasonable pricing, and keeping it local.

Unlike eCommerce retailers such as Shopee and Lazada, they offer a highly curated inventory focusing on hand-picked quality over quantity. 

animation_300_kkmqrc6e.gif
logo.png

The Brief

A year ago, the client saw an opportunity to allow people to order some products online.

They built the website but were not pleased with the results. There were plenty of website visitors yet few completed purchases.

Through an improved eCommerce website, they want to showcase their products while maintaining their brand image: "small shop" appeal and great customer service.

A snapshot of the current and redesigned website

Benchmarks and Analysis

I conducted interviews and online research to glean insights on the mental models of the users as well as to develop a deeper understanding of the direct competitors.  It was also important to understand what the top notch e-commerce sites are doing so I can draw inspiration and implement on a smaller scale

Findings From Competition

Only 1 out of 3 competitors uses comprehensive search filters, includes a review section for users in the product page and offers a loyalty programme. 2 out of 3 includes a 'Recommendation' section in the product page and all 3 competitors incorporate categories in their global navigation

competitive.png

Playhao

Good

  • Allow users to create and display reviews

  • Comprehensive product details

  • Suggests similar products

  • Offers multiple payment mode

  • Has incentive program

Bad

  • Messy global navigation - uses ‘More’ to collapse links

  • Site layout not visually pleasing

  • Filters only by tags

  • Can only check out if you are signed in

Barefoot Toys

Good

  • Clean layout using grids

  • Clean global navigation

  • Product filter is visible in every product listing page

  • Comprehensive product details

  • Auto zoom in image carousel

Bad

  • Categories are only based on ‘Types of Play’ and brands

  • No reviews on product

  • Only offers a few payment modes

  • No loyalty program

Sensational Play

Good

  • Categories broken down by ‘age’, ‘type’, ‘goal’ and ‘brand’

  • Homepage facilitates visual browsing of ‘type’ and ‘brand’

  • Suggests similar products

  • Offers multiple payment mode

Bad

  • Basic product information in product page

  • No reviews on product

  • Allows only basic filtering

  • No loyalty program

Insights From Best-In-Class Examples

ASOS and Love, Bonito are both established e-commerce sites with powerful brand voices. Analysing their sites will help me understand what are the common and best practices

comparative.png

ASOS

Navigation

Clear, multi-column layout for its categories comprising of text and imagery

Check-out Process

Involves moving items to a different section under ‘Saved Items’ to facilitate users who habitually organizes purchases using the cart, but has no intention to buy immediately

ASOS_checkout.png
ASOS.png
LB.png
LB_checkout.png

Love, Bonito

Navigation

Clean, organized layout that uses large imagery and visuals wherever possible

Check-out Process

Allows users to see the option of promo code, gift card and store credits at one view so that users can make informed decision. Also recommends other items to add to cart

Information Architecture

To validate my assumptions that the global navigation bar is not effective as its intended, I invited 16 participants to group products of similar nature together so we can see as how subcategories are grouped based on the users' understanding. 

COGNITIVE

EDUCATIONAL

ABC & 123

Interestingly, new clusters of categories emerged from the group exercise which suggest that users were inclined to include developmental skills as one of their key goals during product discovery.

User Research

I conducted 10 interviews and identified who these relevant users are and their mental models before coming up with their goals, needs and motivations.

Interview Insights

  • An average of 2 hours is spent in a week shopping for toys online

  • Users shifted their shopping online during the pandemic

  • Users identify themselves as product-focused or browser shoppers

  • All the users shares the practice of adding items to cart with the intention of comparing prices or wait for the prices to drop

Meet the personas

persona1.jpeg

Frida

Bio

Age: 40

Occupation: Business Manager

Marital Status: Married with 1 child

Archetype:

Product-focused, Researcher

Scenario

Frida is a busy first-time parent so she only has limited time for shopping between working and caring for her child. She prefers to buy toys that has educational purposes - often shops with a specific product in mind and wastes no time browsing. Frida does research extensively as safety and hygiene are her top priority so reviews and detailed product descriptions are important to her. 

Needs and Goals

  • Save time by getting to her purchase within the shortest time possible

  • Able to navigate to options easily

  • Access to data such as user reviews, product descriptions and origins to have quality assurance

Frustrations

  • Researching on products can either be overwhelming, or lacking in details

  • Finds it difficult to seek assistance when she wants to troubleshoot payment or delivery issues

  • Loading time is too slow on some sites

  • Unresponsive sellers wastes her time!

persona2.png

Stacy

Bio

Age: 37

Occupation: HR Manager

Marital Status: Married with 2 children 

Archetype:

Browser, Bargain Hunter

Scenario

Stacy devotes herself to spending quality time with her children and buying them toys that she knows they will love. She is conscious of her spendings and enjoys the thrill of bagging good deals using coupons and vouchers. Stacy loves browsing online and tracking discounts, be it in-store or in-app - often adding everything to her cart before deciding which items gives her the best bang for her buck!

Needs and Goals

  • To discover new products through app recommendations

  • To be able to see vouchers and coupons and vouchers while browsing

  • Ease of applying discounts at check out

Frustrations

  • Often has to change her mind on purchase due to hidden delivery costs and T&Cs in many vouchers, marring her shopping experience

  • Too many items accumulated in shopping cart over time, and unsure if the prices have changed

shapes4.png
shapes1.png

The Problem

The users of Tickle Your Senses (TYS) needs an easier way to access the products on the site and identify potential incentives before making informed decisions about the cost of their purchase during their

check-out journey.

The Solution

By reorganizing the site’s information architecture and detailing their product data, Tickle Your Senses will be able to improve the browsing experience for their users. They can also boost purchase intent during the browsing and the checkout process 

Areas of Focus

Based on the proposed solution, I decided to focus on two key areas in the website that will make the most significant impact on users' experience which is the global navigation and the check-out process and ideate on some possibilities.

globalnav.png

Global Navigation

  • Reduce the number of buttons in the global navigation so there is less clutter

  • Break down the product categories into multi-columns using a mixture of text and imagery so the information is visually more structured 

  • Include a new category to allow users to search by developmental goals of child

Check-out Process

  • Provide a ‘Saved Items’ section for user to add items he/she chooses to purchase later, while waiting for price reduction or promo vouchers

  • Streamline the check out process, reduce the number of pages the user needs to click through to purchase item successfully

checkout.png

Ideation & Design

Based on the benchmarks and analysis, there were some insights that were going to help me set the direction for the redesign of the website. I sketched out some of the ideas and was able to find a common ground for some of the most important features to include in the prototype.

Global Navigation Structure

wireframes_nav.jpg
wireframes_checkout.jpg

Check-out Process 

Rapid Prototype

A mid-fidelity prototype was developed using Axure and I conducted usability tests to see what feedback I could receive. Using the the insights from the first round of tests, I was able to create the high-fidelity version of the experience.

hero2.jpg

Design Iterations

Using the insights from the first round of tests, I created the high fidelity version of the prototype so that I can validate what works and what doesn't, and what further refinements were to be made

Usability Test

I invited 5 participants who are all either parents or primary caregivers and are familiar with the online shopping experience to undergo the usability tests. They were ask to perform a series of tasks and I observed how they navigate through the prototype to complete the tasks given.

Task 1: Locate the menu to product categories

4 out of 5 users were able to scan and click on the navigation tab within 2 mins with less than 2 errors. However, it was observed that users tend to focus on the Sales tab first before they spot the 'Shop Now' menu.

Task 2: Add product to cart and make payment

All the users were able to arrive at the product details page and add item to cart. However, only 2 out of 5 had issues interpreting the order summary page as there was an additional 'Saved' tab on the page. This issue was fixed in the hi-fidelity prototype so that the prices were reflected accurately while user was performing the action.  

Task 3: Save item for purchase at a later time

4 out of 5 users able to explain how the ‘Save for Later’ feature works with less than 2 errors. But due to the lack of colour contrast in the mid-fidelity prototype, the button was not very visible. I corrected the button style to have a more prominent colour so it is easily scannable in the updated prototype.

Conclusion

The Good...

  • The majority of shoppers were pleased with the ‘Saved Items’ section that emcompasses a price comparison feature as well as allow them to use as an organizational tool

  • The clear visibility of the delivery fee / refund / loyalty points that were present in both the product page and check out process were helpful to the shoppers in influencing their decision to purchase an item

  • The layout of the product page allowed users to scan and find the information easily, thus allowing them to be more effective in their shopping

The Bad...

  • Information on cost in the breakdown section needs to be clearly reflected in the payment breakdown as there is currently no visual feedback

  • The section title ‘Shop’ confused some users as the name seems to suggest a shop location

  • The ‘Rate Item’ and ‘Recommend Similar’ functions under the ‘Saved Items’ appears to be less relevant than expected

Recommendations

  • Consider highlighting the loyalty program in the form of modal pop ups for users to receive discount codes 

  • Include recommendations such as "Customers also bought item B to go along with this purchase. Buy together now”. This step can be optimized using a live chat bot

  • Improve browsing experience by analysing shopping habits and over time push out items suited to the users’ preferences

  • Consider implement voice search for better accessibility and experience

Thank you!

© 2021 BY AIRENE TAN

bottom of page