Indoxi Jewelry
Indoxi Jewelry
Indoxi Jewelry
Client Project / Product Design, Design Systems, Front-End Development
Client Project / Product Design, Design Systems, Front-End Development
Client Project / Product Design, Design Systems, Front-End Development
The Specs
The Specs
Role
Role
Product Designer, Developer
Duration
Duration
February 2023 to May 2023
Team
Team
Clara Tu
Rachel Hua
Enya Do
Joanna Huynh
Ruofu Li
Disciplines
Disciplines
Product Design
Design Systems
Front-End Dev
Toolkit
Toolkit
Figma Design
Figma Prototype
Webflow
Role
Product Designer, Developer
Duration
February 2023 to May 2023
Team
Clara Tu
Rachel Hua
Enya Do
Joanna Huynh
Ruofu Li
Disciplines
Product Design
Design Systems
Front-End Dev
Toolkit
Figma Design
Figma Prototype
Webflow
The Specs
Problem
Problem
Problem
Indoxi Jewelry is a small jewelry shop based in Greenwich, Connecticut. Everything is conceived, designed, and handcrafted by the creative director: Katie Karram.
Though Indoxi has hosted patrons at its physical location for years, the founders wanted to establish a digital presence as well—a place to see current inventory in neat catalogues and facilitate the ease of purchasing.
The ask: build a 0->1 design system that balances functionalities of successful jewelry e-commerce sites with Indoxi's philosophy of craftsmanship as the foremost priority.
Get a sneak peek of our final deliverables here:
Indoxi Jewelry is a small jewelry shop based in Greenwich, Connecticut. Everything is conceived, designed, and handcrafted by the creative director: Katie Karram.
Though Indoxi has hosted patrons at its physical location for years, the founders wanted to establish a digital presence as well—a place to see current inventory in neat catalogues and facilitate the ease of purchasing.
The ask: build a 0->1 design system that balances functionalities of successful jewelry e-commerce sites with Indoxi's philosophy of craftsmanship as the foremost priority.
Get a sneak peek of our final deliverables here:
I. UNDERSTANDING INDOXI
I. UNDERSTANDING INDOXI
The Indoxi founders handed off some existing brand assets they would like for us to consider:
The Indoxi founders handed off some existing brand assets they would like for us to consider:
Handmade
Everything is designed and handcrafted by a real person—Katie!
Everything is designed and handcrafted by a real person—Katie!
Authentic
Each piece is unique and has its own personality.
Each piece is unique and has its own personality.
Locally Owned
You’re more than just a
customer—we’ll get to know you personally!
You’re more than just a
customer—we’ll get to know you personally!
Variety
We carry a large selection of Sterling Silver and 14k Gold.
We carry a large selection of Sterling Silver and 14k Gold.
Based on these initial value statements, how might we translate Indoxi's philosophy into a visual language?
Based on these initial value statements, how might we translate Indoxi's philosophy into a visual language?
Based on these initial value statements, how might we translate Indoxi's philosophy into a visual language?
We used moodboards in our first attempt at tackling this problem!
We used moodboards in our first attempt at tackling this problem!
From there, the team agreed on some branding must-haves:
From there, the team agreed on some branding must-haves:
From there, the team agreed on some branding must-haves:
Adding warmth: warm colours emulate the down-to-earth atmosphere of Indoxi's in-person shopping experience.
Adding warmth: warm colours emulate the down-to-earth atmosphere of Indoxi's in-person shopping experience.
Bold colours and shapes: distinct visual assets help reflect Indoxi's "authenticity" and differentiate the brand from others.
Bold colours and shapes: distinct visual assets help reflect Indoxi's "authenticity" and differentiate the brand from others.
Hand-drawn elements: emphasize the "handmade" aspect of Indoxi products, keeping consistent from brick-and-mortar to web.
Hand-drawn elements: emphasize the "handmade" aspect of Indoxi products, keeping consistent from brick-and-mortar to web.
II. LOW-FIDELITY DESIGNS
II. LOW-FIDELITY DESIGNS
We made the first iteration of Indoxi's new website design after meeting with the founders to confirm our vision. As an IC, I primarily worked on the gallery page and full-website development (later on).
We made the first iteration of Indoxi's new website design after meeting with the founders to confirm our vision. As an IC, I primarily worked on the gallery page and full-website development (later on).
Gallery Page
Gallery Page
Gallery Page
For Indoxi, the gallery page is the most important feature on the website. The founders emphasized that because Indoxi does not mass produce jewelry, there is not a large amount of inventory per unique product.
The shop only highlights items that are currently available (too many "sold out" tags can create a frustrating user experience), so it is the responsibility of the gallery page to function as a style preview for future products and bespoke.
For Indoxi, the gallery page is the most important feature on the website. The founders emphasized that because Indoxi does not mass produce jewelry, there is not a large amount of inventory per unique product.
The shop only highlights items that are currently available (too many "sold out" tags can create a frustrating user experience), so it is the responsibility of the gallery page to function as a style preview for future products and bespoke.
Preview pictures of jewelry collections.
Clickable flipbook to showcase the catalogue of each jewelry collection.
An entry point to the shop page, promoting conversion from interest to purchase through an easily accessible call to action.
Occasional change in catalogue layout to increase visual dynamism.
Home Page & Shop Page
Home Page & Shop Page
Home Page & Shop Page
These are my peer designers' low-fidelity renditions of the home and shop page—for a better view of the overall feature set of the website.
These are my peer designers' low-fidelity renditions of the home and shop page—for a better view of the overall feature set of the website.
III. ITERATION
III. ITERATION
We factored in feedback from the founders and 12 usability tests before shipping out the final designs. These are the insights we received:
We factored in feedback from the founders and 12 usability tests before shipping out the final designs. These are the insights we received:
We factored in feedback from the founders and 12 usability tests before shipping out the final designs. These are the insights we received:
Usability Tests
Usability Tests
Usability Tests
Should have more graphic flourishes to emphasize artistry over commerce.
Reduce excessive negative space—which also creates a commercial feeling.
Draw the user in through interactivity.
Should have more graphic flourishes to emphasize artistry over commerce.
Reduce excessive negative space—which also creates a commercial feeling.
Draw the user in through interactivity.
See the questions we asked our interviewees on this Notion doc! The three main categories were first impressions, exploratory tasks, and directed tasks.
See the questions we asked our interviewees on this Notion doc! The three main categories were first impressions, exploratory tasks, and directed tasks.
See the questions we asked our interviewees on this Notion doc! The three main categories were first impressions, exploratory tasks, and directed tasks.
Founders
Founders
Founders
Do not include a "shop" CTA for each collection—would draw attention to unavailable inventory. Instead, include a single "shop" CTA at the bottom of the page.
Keep the colour scheme light rather than dark.
Do not include a "shop" CTA for each collection—would draw attention to unavailable inventory. Instead, include a single "shop" CTA at the bottom of the page.
Keep the colour scheme light rather than dark.
IV. HIGH-FIDELITY DESIGNS
IV. HIGH-FIDELITY DESIGNS
… And here are the final designs!
… And here are the final designs!
… And here are the final designs!
Gallery Page
Gallery Page
Gallery Page
I changed the collections preview pictures into interactive link blocks. There is a hover animation revealing the collection each item belongs to and on click, the link leads the user to its respective flipbook. There also now only a single "shop" CTA at the bottom of the page.
I changed the collections preview pictures into interactive link blocks. There is a hover animation revealing the collection each item belongs to and on click, the link leads the user to its respective flipbook. There also now only a single "shop" CTA at the bottom of the page.
I changed the collections preview pictures into interactive link blocks. There is a hover animation revealing the collection each item belongs to and on click, the link leads the user to its respective flipbook. There also now only a single "shop" CTA at the bottom of the page.
Home Page & Shop Page
Home Page & Shop Page
Home Page & Shop Page
The home page and shop page have also been populated with the new warm teal and cream colour scheme. Some graphic flourishes were also included to keep visual intrigue.
The home page and shop page have also been populated with the new warm teal and cream colour scheme. Some graphic flourishes were also included to keep visual intrigue.
The home page and shop page have also been populated with the new warm teal and cream colour scheme. Some graphic flourishes were also included to keep visual intrigue.
V. DESIGN SYSTEM
V. DESIGN SYSTEM
The final phase of the Indoxi project was shipping our designs to web. At this point, the project had been optimized for desktop but not other devices. As a part of the development team, I realized we would benefit greatly from having a single source of truth for all our design decisions going forward.
The final phase of the Indoxi project was shipping our designs to web. At this point, the project had been optimized for desktop but not other devices. As a part of the development team, I realized we would benefit greatly from having a single source of truth for all our design decisions going forward.
To support cross-platform and responsive design in the development phase, I created a design system. See Indoxi's visual toolkit below (scroll)!
To support cross-platform and responsive design in the development phase, I created a design system. See Indoxi's visual toolkit below (scroll)!
To support cross-platform and responsive design in the development phase, I created a design system. See Indoxi's visual toolkit below (scroll)!
SINCERELY,
EMILY XIAO
LET'S CONNECT!
VI. CONCLUDING NOTES
VI. CONCLUDING NOTES
Learnings
Learnings
Learnings
In terms of deltas, I think this project could have used more user research and systematic usability testing to milk out more useful insights for the second iteration. Additionally, it would help the team convey design decisions more coherently to the founders when we had differences in opinion.
Nevertheless, working on Indoxi was a great opportunity for me to become more comfortable exercising creative liberty and making design decisions that live on indefinitely—in the design system!
Though I had worked on design systems before, my past experience was with student organizations where I intended to continue being the principal designer; there was not as much of a need for exhaustive documentation and organized libraries. Since Indoxi was a three month project, later passed onto the founding team to maintain, it challenged me to think about the longevity of artifacts I produced.
In terms of deltas, I think this project could have used more user research and systematic usability testing to milk out more useful insights for the second iteration. Additionally, it would help the team convey design decisions more coherently to the founders when we had differences in opinion.
Nevertheless, working on Indoxi was a great opportunity for me to become more comfortable exercising creative liberty and making design decisions that live on indefinitely—in the design system!
Though I had worked on design systems before, my past experience was with student organizations where I intended to continue being the principal designer; there was not as much of a need for exhaustive documentation and organized libraries. Since Indoxi was a three month project, later passed onto the founding team to maintain, it challenged me to think about the longevity of artifacts I produced.
Big thank you to Team Indoxi for learning alongside me!
Big thank you to Team Indoxi for learning alongside me!
Big thank you to Team Indoxi for learning alongside me!
SINCERELY,
EMILY XIAO
LET'S CONNECT!
SINCERELY,
EMILY XIAO
LET'S CONNECT!