WIZ handicarfts
Matching platform

Website design

A platform for users to bring their design ideas to life

WIZ is a customized handicrafts platform which focuses on matching users with craftsmen to create products, and showcase first-hand design works from craftsmen.

Design
process

User research & Analysis
Concept development
Prototyping & Testing
Iteration

Goal &
Challenge

🌟

Easily craft 0-1 products based on user's requirements
Provide unique products and customization services

🧐

How might we help users clearly convey their requirement and build trust in craftsmen?

What is the problem?

Customized products does not fully meet user’s requirements.

To fulfill user's need, there are increasing number of e-commerce platforms offering customization services. However, most services only provide limited options such as embossing, color changes, photo printing, and etc. In this situation, a part of users that always struggle to find a suitable customization service online.

What if!

A platform accomplishes user's ideas from sketch to reality, like this ⬇️

Insights from user research

Users like uniqueness &
high quality

4

Interview

Prefer to buy delicate crafts as gifts

Value the durability and distinctiveness of products

Struggle to pick a product right on needs

Persona

The users would be like...

Connie

Female, 26-year-old

Office worker

Dislike troubles

Motivation

Recommendations from friends

Uniqueness of product design

High-quality of product

Frustration

Only can utilize preset customization options

Cannot communicate specific design details with designer

Hard to find a proper size that perfectly matches the requests

Goals & Needs

Craft items according to own preferences

Find technical expertise to bring the design ideas to fruition.

A reliable platform to shop

User journey map

Figure out user's shopping process & find some opportunities

Match user with craftsman to craft 0-1 product

Entry point

Less competitors

A fully customized service spends time communicating between users and craftsmen, which elevates cost of communication. This may be one of the reasons why most competitor products only provide predefined options to users, and haven’t launched a customization service of 0-1 product.

Let's...

Break down communication costs!

Before the communication stage, there is a pre-survey concretizing user’s design idea to let craftsman know user’s requirement more accurate. The communication cost would be reduced.

Come out

Craft My Own Service

Information Architecture

Let's organize this website!

Problem finding in the usability test

Craft My Own Page was completed & confusing

After finishing the wireframe, I tested the prototype with 5 users. The objective of this test is to evaluate the usability, user experience, and functionality of the Craft My Own Service to ensure it meets the needs and expectations of users.

The tasks I gave to the users were:
1. Get a quote from a craftsman with the design idea you already have.
2. Customize a gift for your friend without any idea.

In the test, everything went smoothly until users reached the "Craft My Own Page" section. At that point, they started asking questions and hesitated to perform the tasks. Afterwards, I analyzed their behavior and used a Feedback Grid to identify where the problems were. I found 2 main causes that need iteration:

1. Redesign the instruction for Craft My Own Service

Before

Lack of visual signs

Based on the mentor’s feedback, it’s better to put some visual content since most people feel easier to absorb visual information.

Misleading

During testing, users misunderstood these step items as prompts that could provide some information to guide them.

Completed CTA

CTA is not obvious enough and has too much information.

After

Simplify the hero section

Provide instruction within the information icon to help users focus more
on CTA when they’re moving to the Craft My Own Page.

Add onboarding design

Add signs and concise descriptions to each step.

2. Reconfigure the structure of the Craft My Own Page

Before

Change to

After

Product cards are changed to craftsman cards

Based on feedback, users expect to browse craftsman list on the Craft My Own Page.

Section of customized products is moved

Upon user’s behavior in testing, users went to the Product Catalog to find the products with customized service, rather than going straight to the Craft My Own Page to find customized products.

UI

Design system

Typography

Brand Color

Logo

Iconography

Buttons

Headers

Cards

Grid system

Tablet

Container 744px

Margin 16px

Gutter 24px

Column 12

Desktop

Container 1440px

Margin 120px

Gutter 24px

Column 12

Mobile

Container 375px

Margin 16px

Gutter 10px

Column 4

Final design