JewelWe app.

Socialize the shopping experience for customizable jewelry.

DURATION

MAY - DEC, 2019

(7 months)

MY ROLE

Interaction Designer

TEAM

1 PM + 1 Interaction Designer(Me) + 1 Visual Designer + 1 Frontend Eng

Understand the business

Our investor (jewelry supplier who has factories in both China and the US) is looking for an end-to-end customizable jewelry retail solution across the whole supply chain, which includes:

1. A WeChat mini-app for Chinese customers. (I led the design from zero to one)
2. An ERP order managing system for platforms, retailers, and suppliers. (I helped other designers iterating it.)
3. A jewelry customization website for US customers.

Understand the challenge

Jewelry customization is a very complex e-commerce scenario because...

1. Components are interdependent.
2. Different customizable parts require unique user input.
3. The choices scope ranges from a few to thousands.

final user flow.

Texts are blurred. Exclusively designed for Chinese language and Wechat Mini App.

SCENARIO#1

Wedding Ring

• 20+ choices for base , 1000+ choices for diamonds.
• Diamond and base are inter-dependent

SCENARIO#2

Pendant Necklace

• 100+ choices for pendant, 20+ choices for base
• Add multiple pendant to one base

SCENARIO#3

Family Ring

• Around 5 customizable parts, each has some choices
• On mock: material, gem, engrave, size
  

How I collaborated with the team.

I spent two months as a full-time, onsite designer and the later five months as a part-time, remote designer

A holistic research from 3 perspectives

1. User: We did face-to-face interviews with customers and analyzed posts from social platforms.
2. Industry: We investigated the supply chain of the jewelry industry, the selling strategy, and read industry research reports.
3. Platform: We did desktop research on marketing strategies in WeChat and existing restrictions of the WeChat platform.

3 major insights that had impact design decisions

Click to view details

Based on these insights we distilled from background research, we were able to frame our problem using HMW method:

1. How might we support all kinds of customizable jewelry?
2. How might we socialize but not viralize WeChat shopping experience?

Do a blanket search for jewelry customization scenarios

We conducted a thorough Competitive Analysis of competitor solutions, I also facilitated a Workshop to engage everyone in the office to brainstorm emerging scenarios.

Result: big series and small series

Considering factors including interaction model, purchase decision-making process, and technical implementation, we identified two major scenarios:

• Big series: those with hundreds of pendant and charms, like Pandora, user can choose which pendant goes to which spot.
• Small series: those with a fixed model, like a family ring, on which the user can only change gem colors, engraving, and base metal. 

Then, we created distinguish user flow for each scenario:

Approach: modularization

We approach the user-system interaction from the view of user input. Frequent user input is a single option, multiple options, and keyboard input. Other less frequent but still possible inputs are audio, location, translation and etc.

Consideration: competitor patterns

For the preview and an action button, we followed the common pattern that most of the Chinese e-commerce apps use.

For the customizable modules, we used the horizontal tab that is commonly used by selfie-editing apps. Since our target users are capable of editing selfies and upload to social media, we believe they’ll have little friction using it.

Challenge#1: Include Wedding Ring

Later in this project, our investor required to integrate diamond into the solution. However, diamond is a very different industry. we found that there are two specific pain points in that flow:

• Too many choices: Due to the well-known marketing strategy, diamonds are sold individually, each has its own certificate. Customers have to choose between the exact same thing.
• Only 1.5 out of 4 variables are discernible in the 3D model: cut(shape) and carat are discernible and cut(proportions), clarity, color are indiscernible.

Solution: use the visualization to narrow down options

The solution is to bring the visualization part forward. The customer will choose the base and try different sizes and shapes of diamonds. After they are satisfied with the look of the ring and click into the next step, the system will narrow down the diamond based on the customer's previous setting.

In other cases, customers use the visualization to validate their decision. In the diamond case, the visualization is used to narrow down the options:

Challenge#2 When Experience and Data Structure Collide.

In our backend system, the gem is an SPU while each color of the gem is stored as an SKU. If our design align with how the data is stored, it will have a flat hierarchy as the left:

However, this flat hierarchy makes the horizontal tab extremely long and as a result, users can spend a long time looking for a certain tab.

Solution: add hierachy to tab

To make the navigation experience less bulky, I added hierarchy to the tab: for things like gems and engraving, we show the category(SPU) in the tab, and the user will choose the specific item(SKU) after they choose the location.

Helping engineer to abstract the logic

However, our engineers questioned the scalability of this solution: they have to manually label whether to show the SKU or the SPU, and they can't do this to every item.

As a result of that, we worked together to abstract the logic of displaying SKU or SPU: the category must have more than one item, and each of these items has a unique location value. Only under that condition will it display items in an SPU way.

Viral marketing -- the critical path for Wechat e-commerce

Unlike Taobao, where the user finds items mainly by searching, most of Wechat purchase traffic is from social content. The product link is embedded in the articles or Wechat mini-programs, and then shared in text flow and moments(like the timeline of Facebook)

Using the social relationship in Wechat to promote business is called ‘fission marketing’, one successful example is Pinduoduo, the fastest-growing App in the history of the Chinese Internet, ever.

The ‘Pick for me’ feature

In the previous research, we found that the customer almost always needs other’s opinion before she makes the decision, so we transferred that need into this ‘pick for me’ feature:

The customer can share the customized jewelry link with close friends, and friends can vote for this jewelry. 

The rationales for this design are:

1. Customers have a lot of hesitation before purchasing non-returnable customized jewelry. As a result, they turn to friends for opinions.
2. These 'opinion providers'  often share similar income and tastes as our customers. By making the shopping experience sociable, we can promote our platform more precisely.
3. When discussing purchase decisions in Wechat through sending pictures, users always need to clarify which items they're referring to, as the sequence of pictures depends on internet connection. Our system does the clarification for users by providing a number for each item.
   
4. Unlike most of the viral marketing, our sharing feature isn't compulsory, and that minimizes the social stress of that process.
   

Challenge: cart or wishlist?

However, our design team had disagreement in where to put this feature: part of us think it should go with the wishlist, since, while others worries that few customer has the habit of using the wishlist.

So we asked our friends how they use cart and wishlist, the result was (as we expected) surprising: the behaviour of using cart varies greatly.

solution: two entries

After tried a few solution, I decided to add a shortcut to wishlist in the cart page: when user swipe to the bottom of the cart, there will be a divider indicate the end of cart items and show items in the wishlist in a different layout. Rationales for this design are:

• When browsing items, clicking the 'Like' icon is the easiet way to mark a item, however, wishlist are often hided in the very last tab. 
• As our user research indicated, the usage of wishlist and cart varies a lot. This design is trying to reach a balance point between the two behaviour patterns.

Also, I’ve observed that Taobao uses this pattern everywhere, so I believe our user will have less friction accepting it.

It's not 100% about the the user

Besides user experience, there are many other things impacting the product -- In the first version, we prioritized the platform before the brand homepage. However, to attract customers, we have to invite big brands to join our platform, however, they're unwilling to join us as one of many merchants. Rather, they would like us to make a mini-program, especially for their Wechat official account.

In response to that request, we have to re-prioritize the MVP version. In the later version, we prioritized the brand homepage before the platform.

This experience pulled me out of the vacuum and throw me into the real world: where I have to answer questions that are never covered in design thinking courses.

Looping everyone in

I report to my PM every one or two weeks. At first, I only report my progress and discuss the next steps. Later, I started to ask what is other designers and engineers working on and see if I can help them. 

That makes me feel connected with the team and can see my design from more angles.

Thanks for scrolling! next project ->

UI Design Showreel.

back to homepage