Team
Andrew YIP (designer)
Jack FAN (developer)
Duration
4 months
Tools
Figma, Adobe Suite
Role – Product Designer
• Directed strategic design initiatives to boost online traffic and sales for Rosemary Diamond’s e-commerce website, contributing to increased brand visibility and revenue growth.
• Communicated with stakeholders to sort out business objectives and website ingredients.
• Demonstrated full design guidelines and communicated with developers for the technical feasibility.
Background
My Client – Rosemary Diamond
Rosemary is a dynamic diamond jewellery brand targeting women aged 30-50 with an innovative and approachable personality. By offering lab-grown diamonds, customization, and transparent pricing, it caters to those valuing value over brand. Rosemary aims to rewrite the diamond industry with infinite possibilities and become the Uniqlo of diamond jewellery.
Problem
People may not trust the product because it is a new brand. So, how can a smooth customer experience and company branding be facilitated in order to acquire consumer trust?
The overarching goals of this project is to:
1. Increase the sales: convert the online traffic to make a purchase or book an appointment and visit the actual store.
2. Build up Trust: optimise the user experience so customers know the brand is trustworthy
3. Retain Customers: utilise the acquisition funnel, make clients come back next time and spread the reputation.
Design Process
There is no such thing as a perfect project (except in Barbie’s world); we are always bound by many factors such as time, budget, and technical limitations. There are some changes in business objectives and features in this project, thus requiring a few modifications between DEFINE and IDEATION (I’ll get into that later).
1. DISCOVERY
Research
Research: Defining features with 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. The interview questions are about their online shopping experience and decision-making process.
Here were my 5 major takeaways:
Trying on products and the brand’s reputation contribute significantly to building trust in a purchase decision.
For luxurious items, users seek a combination of a lifetime warranty and a product certificate to ensure product quality and authenticity.
Reviews hold a paramount influence, accounting for around 90% of the decision-making process.
Users feel more confident about product quality when multiple images (around 6) are available, and the quantity of images reflects the seller’s confidence in the product.
Users generally prefer to see the actual product before making a purchase decision, and budget consideration follows the assessment of style, design, and quality.
2. DEFINE
User Stories
User Persona
User Stories
As a customer…
• I want to try on the product before I purchase it so that I can know if the product looks good on me.
• I want to submit my own design as I cannot find the ring setting I like so that I can create my ideal customised ring.
• I want to customise a diamond ring which only belongs to me so that it is unique and I am delighted.
User Persona: Identifying key user needs using personas
3. IDEATION
Main Features
Competitors Analysis
SiteMap
User Flow
Main 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.
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.
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.
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.
Competitors Analysis
Although the project is mostly delivered in Hong Kong, I also analyze lab-grown diamond websites in other nations that have the top e-commerce experience. For example, VARI, BRILLIANT EARTH, JAMES ALLEN, DIAMOND GALLERY, and DIAMOND CULTURE.
Because we are primarily competing in the HK market, my goal for the website is to be more aesthetically appealing than the jewellery websites in HK.
SiteMap: Integrating information to create a web layout
To ensure that customers can find what they want, I referenced some E-commerce websites and created a sitemap to assess where users would expect to access the products.
User Flows
Our main goal was to entice clients to schedule a visit to the physical store. However, based on our research findings, we decided to include a virtual try-on function. It simply makes more sense to include online payment with the new feature, as we want to capture our clients’ instinctive buying drive.
Aside from that, I had to figure out how to use the function – submit your own design. It was difficult in terms of technical execution and streamlining. After discussing with different stakeholders, we customised a detailed process and considered the possibilities in different use cases.
4. DESIGN
Wireframes
UI Design
Prototypes
Wireframes: Low-Fidelity Sketches
In designing the wireframes for the project, I focused on enhancing the user experience through the visual hierarchy. Employing information architecture, it aided in creating intuitive menu navigation. Additionally, I ensured cross-device functionality by designing for both phone and desktop views, thus optimizing responsiveness for a seamless user journey.
UI Design
Our developer strongly advised me to adopt this Material UI kit because there already have built-up components, which will make the development process faster and less expensive. As a result, I combined these elements with a change in brand colour and self-made icons.
High-Fidelity Prototypes: Incorporating features into the shopping experience
5. Validation
Usability Testing
Design Critiques
Iterations
Usability Testing
The best way to validate the experience’s usability was to test the tasks with actual users. I conducted 3 user testings in a moderated setting.
With the Figma prototype, I can test whether or not users would perform the website’s function in both desktop and mobile view, including the checkout process, add to favourite, custom ring, and book an appointment function. The tests helped me discover some usability issues and potential improvements.
Design Critiques
To validate my design decision, I asked for opinions from some senior product designers, like Christopher G. Wright – Senior Product Designer at Shopify and Dennis Liu – Senior product designer at Nobul. Eventually, they gave me a few directions to explore the User Interface and Website Layout.
Iterations
Relocate confusing pop-up
When customers see a pop-up, they generally realize that 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.
Visual aid in the process explanation
People are visual creatures. Long paragraphs may appear tough 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.
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.
Final Design
Optimising shopping experience with virtual try-on
Helping users feel more unique with customised ring function
Personalising user experience with submit own design function
Increasing conversion with store appointment booking
6. Delivery
Design Handoff to Developer
Design Handoff to Developer
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
Localisation
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 skilful 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 matched in with the new design system.