BIJOUX
A LUXURY JEWELRY GALLERY WEBSITE
How might we help busy clients create custom jewelry,without having to come to the store?
Desktop UX/UI Design
UX/UI Designer
Type of Project:
My Role:
Tools:
Deliverables:
User Flow, Customer journey Map Storyboard, UX/UI Design, Digital Prototype
Adobe XD, Adobe Photoshop, Adobe Illustrator, Pencil, Paper
Client:
School Project
The Project:
Create an online jewelry design studio allowing clients to design custom jewelry at home, instead of having to visit a store and meet with a designer, which can be an inconvenience.
The Goal:
Give our clientele a more convenient custom jewelry design experience.
1. RESEARCH & UNDERSTAND
Competitor Analysis:
This is so I can have a better idea of what my competition is doing in regard to solving this issue. It will show how they are solving the issue, and how I can improve on their solution.
Interview Clientele
This will give me a better understanding of the wants & needs of my target clientele.
COMPETITOR ANALYSIS:
This analysis covers direct & indirect competitors and customization
design studio features.
6 Direct Competitors:
1. Cartier 2. Tiffany & Co. 3. Harry Winston 4. Chopard 5. Van cleef & Arpels 6. Bvlgari
5 Indirect Competitors:
1. Blue Nile 2. James Allen 3. Jared 4. Four Mine 5. Nike
The findings after my competitor analysis were:
1. Most of my direct & indirect competitors offer a design studio option of some kind.
2. Many of my direct & indirect competitors have setting, stone, and view detail options all on 3 separate pages. This results in the client not being able to see the final piece until the end.
How I can improve their design studios:
The piece of jewelry will be visible at all times & all studio options will be accessible on one page. This will allow the client to easily see all the changes being made in real time.
INTERVIEW CLIENTELE
The findings after my interviews were:
1. Creating custom jewelry is something they are interested in.
2. They are extremely busy, & going to the store to meet with a designer can be inconvenient.
3. Having an online design studio would definitely make the custom design process easier.
4. Online design studios' do already exist, however; they are mainly used to customize only engagement rings, not other types of rings or jewelry in general.
2. SKETCHES & WIREFRAMES
After interviewing my clientele, I created possible persona scenarios & mindsets my clientele might have when wanting to create a custom piece of jewelry.
I then created the scenarios journey & user flow as they go through the process of creating a custom piece of jewelry on the BIJOUX website.
After that I created wireframes to give a basic tour of the design studio features.
Persona Scenarios / Mindsets:
Customer Journey Map Quick Rough Sketch:
Customer Journey Map Refined:
User Flow:
Wire Frames:
3. DESIGN SYSTEM
I created a design system which I feel portrays a look & feel of simplicity, lightness, & luxury.
All my colors, fonts, icons, and buttons are light, thin, & give off the simple light luxury look & feel I am looking for.
Design Studio Symbol Examples:
Color Palette:
Stone Shapes
#000000
#ffffff
#f3f3f3
#9b9999
Stone Types
Metal Types
Typography:
Fonts:
Playfair Display
Montserrat
Header:
Submenu
The word mountains
(size 14, 75px letter spacing)
Menu
THE WORD MOUNTAINS
(size 19, 75px letter spacing)
Home Page Body:
Titles
THE WORD MOUNTAINS
(size 30, 300px letter spacing, 30px line spacing)
Paragraph
Footer:
Titles
The word mountains
(size 20, 0px letter spacing)
Paragraph
The word mountains
(size 14, 0px letter spacing, 24px line spacing)
Products / Design Studio:
Titles
The word mountains
(size 20, 100px letter spacing)
Paragraph
THE WORD MOUNTAINS
Behind the word mountains
(size 19, 75px letter spacing, 30px line spacing)
BEHIND THE WORD MOUNTAINS
(size 19, 75px letter spacing, 30px line spacing)
The word mountains
(size 19, 75px letter spacing, 24px line spacing)
The word mountains
(size 15, 25px letter spacing, 24px line spacing)
Design Studio Dropdown
& Slide Bar Examples:
CHOOSE YOUR SETTING
CHOOSE YOUR MAIN STONE
Carat
0.30
0.30
5.00
Button Examples:
DISCOVER
ADD TO MY DESIGNS
Main Buttons / CTA
Secondary Buttons
Back Buttons
4. PROTOTYPE
I began by creating a storyboard sketch which gave me a rough idea of how I wanted to lay out my prototype.
I then made a digital version for clarity & professionalism.
I made high fidelity mockups & created a working prototype to show the look, feel, and functionality the studio will have in real life.
Storyboard Rough Sketch:
Storyboard Refined:
High Fidelity Mockup Examples:
Prototype:
prototype newest video March 3 2019
5. NEXT STEPS
1. Run usability tests in the real world.
2. Add more features to the design studio such as augmented reality.
This will allow the client try on the ring they just designed to see if they like the way it looks on them. I learnt that augmented reality was another feature my clientele would like in general, during the interview process.