WeMakeGift

A UX/UI DESIGN CASE STUDY

of a e-commerce website for art & craft DIY kits

Service

UI/UX Design

Client

WeMakeGift Limited

Year

2021

WMG_Banner-v2.png

Overview

Background

WeMakeGift (Hong Kong) is looking to expand its online store to the North American market. The new online store is aiming to focus on S.T.E.A.M. DIY kits for children.

Even though the current website has been available for years, most customers in Hong Kong tend to only use the online store for informative purposes and would place their orders in-store, or by WhatsApp. While foreign (USA & Canada) customers will have to rely on the online store to make purchases, the company would like to improve the user experience and take the opportunity to increase conversion from browse to completion of checkout.

Problem

The current website is mainly for informative purposes and is a mixture of a portfolio showcasing WeMakeGift’s professional bespoke event services and an online store promoting arts & craft workshops.

While WeMakeGift is looking to launch an online store selling DIY kits, they would also like to be able to include a professional portfolio for corporate clients who are looking for event services.

Solution

We will redesign the current website as an online store that sells STEAM DIY kits for children, and redirect event clients to a portfolio website in order to cater to two different groups of audiences.

In this project, we decided to focus on the e-commerce website.

Approach

Research: Competitive Analysis, User flows
Design: Brainstorming, Sketching, Wireframes, Hi-Fi Design, and Interactive Prototype
Evaluate: Usability Testing, and Design Iterations

My Role

  • Competitive Research

  • Ideation

  • User flows

  • Wireframing

  • High-Fidelity UI design

  • Prototyping

  • Usability test

Time Restraint

  • 90 Hours
     

  • Research - 8 hours

  • Research Summary - 4 hours

  • Ideation - 10 hours

  • Sketch - 12 hours

  • 1st usability test - 6 hours

  • Wireframing - 12 hours

  • 2nd usability test - 6 hours

  • Iterate - 6 hours

  • High Fidelity Mockup - 10 hours

  • 3rd usability test - 6 hours

  • Iterate - 6 hours

Tools

  • Figma

  • Mockup (iOS app)

Research

Competitive Research

We started the project with competitive research to gather possible solutions and things that we should avoid.
For this research, we have selected the following companies:

  • Amazon

  • Kiwi Co.

  • Little Passport


Amazon was chosen for this competitive research as the industry leader for e-commerce.
And, the second and third companies offer the greatest competition to WeMakeGift since they offer similar products.

These websites have been analyzed in 5 criteria:

  • Navigation

  • Visibility

  • Consistency

  • Constraints

  • Aesthetic

Key Takeaways, we will

  • categorize products by AGE GROUP/INTERESTS/PRICE/SUBSCRIPTION

  • set dstinctive colors for products/categories

  • take their button placement as reference

  • include a checkout step indicator

Client’s Request

  • Include a guest checkout option, and MUST collect email address

  • Provide a product comparison function

 

Design

User Flow

I provided three user flows, each dedicated to the most important functions for the e-commerce website with the following legends.

FLOW 1 - Finding a DIY kit
FLOW 2 - Placing an order
FLOW 3 - Creating account, and managing orders and profile

(Green arrow indicates YES decisions; Red arrow indicates NO decisions)

 

Usability Test Findings & Suggestions

  • Need to be able to link previous orders to an account

  • Radio buttons are kind of hard to notice (switch to checkbox)

  • Question: What will be personalized? (add images and captions)

  • Allow users to set quantity for products

Client’s Feedback

  • Allow customers to ship products to different addresses in the same order

Sketches

A round of guerilla usability testing has been conducted using the sketches with 5 participants (parents of kids from 4-10). The test was completed in-person with sketches created on an ipad (app: Mockup) by manually navigating the screens based on the interactions.

With the findings from this round of test, the design has been iterated while creating the wireframe.

Wireframes

This wireframe was created based on the findings from the first round of usability testing and feedback from the WeMakeGift team.

FLOW 1 - Finding a DIY kit

FLOW 2 - Placing an order

FLOW 3 - Managing + keeping track of account, orders, and profile

Usability Test Findings & Suggestions

  • Fix text placements

  • All users were able to complete the tasks smoothly

WeMakeGift is a gift factory that promotes the gifting culture for everyone to share his/her joy. The company hosts various workshops to make gifts with guests (kids & adults), bring arts & crafts into everyone’s lifestyle, and generate smiles and positive energy anywhere!

WeMakeGift already has their style guide and would like to keep the current branding, but agrees on integrating new elements that are more appealing to children.

Modification has been made to the current style guideline to a more colorful theme while portraying WeMakeGift’s brand personality.

A UI style guide has also been created to keep consistency throughout the web journey.
 

Style Guide

High Fidelity Prototype

FLOW 1 & 2 - Finding a DIY kit + Placing an order

FLOW 3 - Managing account, keeping track of orders, and profile

Usability Test Findings & Suggestions

  • Some texts over the banner are hard to read

  • Comparison chart looks a little overwhelmed (Add ratings and simplify lines)

  • Filling in similar information multiple times

 

Usability Testing & Iterations

​Minor iterations after the third round of usability testing:

Solid background for text and call to action button

Adjusted length to section titles and added star rating system to make it easier to read

Allowed provided information to be auto-filled at checkout page (avoid entering the same info for multiple times)

Conclusion

WeMakeGift will be developing a new online store based on this design.