Mettre — Ada Huang Design

Mettre: A fine jewelry retailer app with virtual try-on features

The Challenge (“Why?”)

With the ongoing COVID-19 pandemic, jewelry shopping cannot be done in person and many brick-and-mortars, especially smaller brands, are forced to close for good. There is something lacking about not being able to try on the items to assure the look and fit before purchasing.

My Solution

Mettre provides a mobile platform with wider audience reach for small brands and uses AR technology to bring the in-person shopping experience to customers at home.

View Prototype

View Final Designs ⬇︎

Timeline

February 2021

Role

UX & UI / Prototyping / Branding / Research / Testing

EMPATHIZE

Knowing the technology & the market expectations

Learning about augmented reality in current apps & user feedback

METHOD: Market Research & Content Audit of existing apps with augmented reality (AR) capabilities.

Main findings include:

The COVID-19 pandemic has accelerated the shift to digital shopping and recreating social experiences with digital tools.
Users associate AR with the words “virtual(ly)”, “3D” or “Live View”.
Users are frustrated that AR features are not intuitive to use and can only view one product at a time.

Understanding the average user & shopping expectations

METHOD: Competitive Analysis

Comparing similar platforms and brands partners revealed how jewelry is often organized, and most importantly, how users expect to shop.

METHOD: Survey

Analyzing the participants’ answers helped identify who the average user is, what they find more or less important in their shopping experience, and their concerns with using AR/VR tools. See the full survey details here.

I discovered that:

80% of users miss trying on items the most from shopping in-person and seeing their real-life dimensions, look and feel.
The majority of participants consider the size/fit the most important factor when shopping for jewelry, followed by price and how the item looks with their outfit.
They rarely buy from one particular brand of jewelry, looking for more variety.
Most have little to no experience with virtual tools when shopping.

DEFINE

The target user & how they navigate

Gathering my research findings, I defined my target user, what they hope to accomplish and how they expect to do it.

Our target users care about:

Following COVID-19 and social-distancing precautions.
Purchasing high-quality jewelry that doesn’t break the bank.
Quick and easy shopping.

Persona

Informed by those insights, I created a user persona, Sandy Caulitt, a front-line worker who wants to shop for everyday minimalist pieces from the comfort of her home.

Determining the features & structure

I organized the pages and functions that effectively serve the user into a features roadmap, prioritizing them by highest impact.

Then, I drew a sitemap to visualize the content structure of the app, thus setting the direction of the navigational flow.

IDEATE

Thinking on the brand and user path

Considering every decision the user makes as they navigate the app, I worked out the customers’ potential journey using a user flow. I want to assure their first experience and, consequently, their return.

I also designed the logo and brand style in a way that helps customers recognize the company’s presence in the market.

User Flow

I created a detailed flow from homepage > browsing and/or filtering > trying on individual products > sharing with friends > checkout. Navigating the app in the customers’ shoes helped to detect any decisions or issues they may encounter.

Logo Creation

To express the brand’s sophisticated feel, I played with ideas of using flourish or script to portray elegance, or san-serif/block letters to exude trust and modern/minimalism.

The gem shape was used to help users have greater recognition for the brand and its products.

Brand stylescape

Speaking to the modern stylista that won’t give up on the quality or the price of their jewelry, I chose to use shades of purple to portray luxury and individuality, and also a feeling of femininity. The typography is san-serif for a clean and minimal look.

PROTOTYPE

Bringing ideas to life

Following the structure of my sitemap and implementing the user flow, I created high-fidelity wireframes in Figma to provide as much context as possible for the prototype.

Hi-fidelity Wireframes & First Version Prototype

The wireframes were developed for the user to explore the homepage, navigate items, filtering and the checkout process.

I particular focused on the virtual try-on flow — how to “try on” items, add them to the “Selection” to put on with other items, and share pictures with friends. Since AR technology is still new to many people and I don’t want to alienate those who think it’s too complicated, I included an onboarding to walk customers through their first time.

Interactions were added the screens to create the first version prototype for usability testing.

UI Kit

I created a design system to establish a consistent brand look for future developments. While the platform continued to build out, the UI kit was continuously updated with its working elements and new components.

TESTING & SOLUTION

Determining effectiveness

METHOD: Moderated Remote Usability Testing

The goal was to check the overall navigation of the app, its filtering system and the user’s ability to understand and use the virtual try-on features. I put together an affinity map to synthesize similar themes shared by all participants.

Key Insights

The flow of the virtual try-on and sharing features needed reordering to limit the uncertainty of what comes next.
Users were looking for more confirmation in the filtering system.
Some CTA’s and words needed to better match language what users were familiar with.
The homepage was expected to reflect what was housed in the side menu. Many users use the homepage more to browse before opening the side menu.

Iterations [Before ➜ After]

Some major improvements I made based on the test findings include:

Homepage

Filtering Items

My Bag

Final Designs