Socialize the shopping experience for customizable jewelry.
MAY - DEC, 2019
1 PM + 1 Interaction Designer(Me) + 1 Visual Designer + 1 Frontend Eng
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:
Jewelry customization is a very complex e-commerce scenario because...
Texts are blurred. Exclusively designed for Chinese language and Wechat Mini App.
I spent two months as a full-time, onsite designer and the later five months as a part-time, remote designer
We conducted a thorough Competitive Analysis of competitor solutions, I also facilitated a Workshop to engage everyone in the office to brainstorm emerging scenarios.
Considering factors including interaction model, purchase decision-making process, and technical implementation, we identified two major scenarios:
Then, we created distinguish user flow for each scenario:
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.
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.
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:
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:
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.
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.
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.
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.
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:
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.
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:
Also, I’ve observed that Taobao uses this pattern everywhere, so I believe our user will have less friction accepting it.
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.
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.