Tianyi Shi

Customized Jewelry Service


LA BELLE is a web app that allow customers to create their own jewelry design by following a series of simple steps. The app showcases diamonds and other jewelry inventories form the store and promotes in-store sales. It is designed to make customization process easy to use for customers from all background.

The client approached to us with an intention to have this app used specifically in store. Ordering customized ring and jewelry online is a daunting task where the issue of security and confusion arise. The absence of physical model/product and customer support further creates a lack of trust on the customer end.

LA BELLE aims to simplify the customization process with on site customer support, improving interaction between sales and customers.


Research, competitive analysis, sketching, prototyping, user testing, content creation, project management  


Figma, Sketch, InVision


Guiding Questions

  • What kind of service does the platform offer?

  • How to utilize this platform to showcase the availability, variety and diversity of jewelry and designs in store?

  • How to deliver a believable, promising design solution to make customer comfortable and safe?

  • How to keep customer engaged throughout the whole process?

  • How to simplify the process of multiple payment options for b2b? (EX. default of COD & prepay when logging in)


Understand User

LA BELLE users fell into two main demographics : in store salesman and vendor, predominantly male (80%) and 25-35, customer who want to purchase a ring, predominantly male (95%). I conducted a user research to understand individual’s behavior, mindset and tasks. Targeting the two demographics allow me to apply content strategy more effectively.



The first prototype I presented contains all the key features, including sorting and collapsible filter bar on the left side. Customers can apply all filter on one page. The resulting product list are displayed in standard grid layout, with description under each photo. It provides a quick overview of all the possible options.

wireframe v1.png

The feedback I got back from client is to further simplify the process with step by step procedure. I removed the collapsible filter bar so that the customer will be not overwhelmed by the amount of choices they need to make. To allow better navigation back and forth between steps, I incorporated CTA on top navigation. Highlighted state informs user where they are in the process, with the option to see drop down preview.

wireframe v2.png

Style Guide

The app focuses on action flow and content display. The brand is designed for viewing, selecting and customizing products. Minimal aesthetics prioritizes the ease-of-use and flexible quality over UI elements. It provides a variety of filters to customize content, presenting users with relevant and ample options in a direct and uncluttered way.

style guied.png

Final Product

Based on feedback, I incorporated a neutral palette to wireframe. The interface emphasizes photo with reduced text. Cards are used to store key information such as order summary and product specs.


  • An in-store sales tool - POS system

  • Simple, one step log in process for admin

  • Vendor Ranks Incentive

  • Customer order option

  • Add on tab: personal touch, sophisticated level of customization

  • Seamless user flow with minimal distraction

  • Multi featured shopping cart = prepay and transactions options to pay in shopping cart

  • Sophisticated customization and add on features for one of a kind jewelry


Landing and Log In

This web app is designed for in-store jewelry sale/vendor to demonstrate their products to customers. Two CTA indicates the two types of services :“design your own ring” and “upload”. They have same color and style as navigation flow bar.


Link Payment


New vendor is required to register and link their payment method, which will be processed in back end when customer place an order. Multiple payment methods are integrated into the system, and camera function is enabled for a quick scan.



Upload Pictures

Upload function allows vendors to select reference photos they received from customer or internet. Vendors can upload multiple files at once, and incorrect file type will be highlighted as a state of warning. Once done uploading, vendor can choose to write a note to back end support for clarification of the design needs.



Choose Diamond

Choose a Diamond is the very first step of designing a whole set of engagement ring. By emphasizing the CTA button of this stage on navigation bar, user immediately gain a sense of where they are during the process.
Each style is shown individually within a box, which invite user to click and select. Once the selection is made, user can proceed upon clicking the enlarged NEXT arrow. 360 degree view is enabled on diamond page to realistically render diamond’s beauty.



Choose Setting

After user selects a diamond the page leads them to select a setting. Incompatible settings with selected ring are shown in disabled state, in greyed out color.
Preview function is incorporated inside each CTA button. This allows users to access their selection with one click.
Each style is accompanied with a short description on top.



Add Personal Touch

The last task is to add any personalization. All options are presented upfront, with options to skip or choose. User can click onto the service for a detailed explanation.
Price is directly shown based on selection.



Review Order

Before formally submitting the order, user can the option to modify and review their selection. They can make adjustments on the selections by choosing from three categories on left. Text is enlarged and displays cards that contains the summary of the products.



Submit Order

During submission stage, vendor can apply any coupons or discount. The app is to showcase the variety of jewelry and possible combinations, therefore is it not designed to function a e-commerce site. Majority of the sales happen offline / in-store.



After presenting the prototype to users, I found out that vendors tend to be more vague about showing price upfront, whereas customer want to see it during every stage. The visibility and flexibility of changing price become the main concern here.

To tackle that issue, I need to prioritize the task and user who spend most time on the app. Next step would be showing price of individual selection at every stage and see how vendor and customer respond to that, and if it is helpful to increase sales performance.