Rosemary Diamond E-commerce Store

Role:

Research
Design

Tools:

Figma
Adobe Suite

Duration:

Planning & Research: 8 weeks
Ideate & Design: 4 weeks

Highlight

Collaboration

2 stakeholders & 1 developer

Front-end development

Material UI Library

Overview

Rosemary is a dynamic diamond brand targeting women aged 30-50. By offering lab-grown diamonds, customization, and transparent pricing, it caters to those valuing value over brand.

Challenge

How can a new brand gain consumer trust?

The overarching goals of this project is to:

Increase the sales: convert the online traffic to make a purchase or book an appointment and visit the actual store.
Build up Trust: optimize the user experience so customers know the brand is trustworthy
Retain Customers: utilize the acquisition funnel, make clients come back next time and spread the reputation.

Key Features

Aside from the basic checkout and booking appointments functionality, I explored with stakeholders and the developer several potential features that would set Rosemary apart from other E-commerce websites.

1. Virtual Try On

Allow users to virtually try on jewelry using camera feature. By overlaying the selected product on images of their hand, customers can visualize how items look before purchasing, enhancing the online shopping experience with a tangible preview.

2. Custom Your Ring

Empower users to personalize their jewelry by selecting ring setting, diamond, and engraving. A user-friendly stepper guides them through the process, resulting in a unique piece tailored to their preferences, reflecting Rosemary’s commitment to individuality and innovation.

3. Add Own Design

Enable users to submit their custom design sketches or ideas for a bespoke piece. This feature emphasizes Rosemary’s dedication to creativity and collaboration, as skilled artisans bring customers’ visions to life, turning concepts into tangible, one-of-a-kind jewelry creations.

Research

User Interviews:

I conducted 1-on-1 interviews with 6 targeted users of this project and asked them questions about their experiences with E-commerce websites and uncover their goals, needs, motivations and frustrations.

Insights

Try On & Brand Reputation

Trying on products and the brand’s reputation contribute significantly to building trust in a purchase decision.

Product Certificate

For luxurious items, users seek a combination of a lifetime warranty and a product certificate to ensure product quality and authenticity.

Reviews & Decision-Making Process

Reviews hold a paramount influence, accounting for around 90% of the decision-making process.

More Images =
More Trust

Users feel more confident about product quality when multiple images (around 6) are available, as the quantity of images often reflects the seller’s confidence in the product.

Budget Consideration

Users generally prefer to see the actual product before making a purchase decision, and budget consideration follows the assessment of style, design, and quality.

User Stories

as a customer…

1. I want to try on the product before I purchase it so that I can know if the product looks good on me.

2. I want to submit my own design as I cannot find the ring setting I like so that I can create my ideal customized ring.

3. I want to customize a diamond ring which only belongs to me so that it is unique and I am delighted.

User Persona

Identify key user needs

User Flow

Our main goal was to entice clients to schedule a visit to the physical store, though incorporating online payment with the virtual try-on feature also proved crucial for capturing our clients’ instinctive buying drive and broadening purchase avenues.

Sitemap

Integrating information to create a web layout.

Design

Wireframe

In designing the wireframes for the project, I focused on enhancing the user experience through the visual hierarchy. Employing information architecture aided in creating intuitive menu navigation. Additionally, I ensured cross-device functionality by designing for both phone and desktop views.

UI Design

We used this Material UI kit because there already are built-up components, which will make the development process faster and less expensive. I customized these elements with a change in brand color and created self-made icons.

Iterations

Usability Testing

The best way to validate the experience’s usability was to test the tasks with actual users. I conducted 3 user testing in a moderated setting.

Design Critiques

To validate my design decision, I asked for opinions from some senior product designers.

1. Relocate confusing pop-up

When customers encounter a pop-up, they might incorrectly assume the process is complete. As a result, I chose to relocate the pop-up to the last stage. In this instance, buyers can better complete the entire design submission and deposit process.

2. Visual aid in the process explanation

People are visual creatures. Long paragraphs may appear difficult to follow, but with some visuals demonstrating the procedure, consumers will be able to grasp the process more easily. Customers, for example, may readily grasp the meaning of the paragraphs with the deposit graphic and so understand the feature better.

3. Change of product display layouts

Since the brand has limited products, I drew inspiration from Apple’s product display, so the website will be less rigid and more modern.

Delivery

Design Handoff

The redlining is done entirely by hand. I made an effort to meet with stakeholders and engineers to ensure a better understanding of the prototype and its necessary interactions and functionality.

Takeaways

Localization

We started in English and had to translate it into traditional Chinese. In the localization phase, we had to pay meticulous attention to present content correctly. Precise translation and skillful UX writing were paramount to ensure cultural accuracy and user engagement. By valuing linguistic nuances, we ensured that the website’s essence resonated seamlessly across languages, offering an inclusive and user-centric experience.

Adapt to an existing design system

It’s a challenge because I can’t simply copy and paste the entire UI kit to the new brand. To fit in with the brand’s style, I had to pick which parts to adapt and twist. I had to make sure that the icons I created for the website aligned with the new design system.

Project Showcase