Improving conversion to increase revenue for an online retailer of high-end ethical and sustainable jewelry
mobile browser • e-commerce • jewelry
Overview
Responsibilities
Project Management
Research
Design
Prototyping
Usability Testing
Tools
Miro
Zoom
Google Suite
Adobe Photoshop
Figma
Introduction
Terras is a (fictional) online retail company of high-end ethical/sustainable jewelry. To increase revenue on their mobile browser experience, they wanted to improve the conversion rate from product browsing to completion of checkout.
Project Type
Capstone 2 of Springboard's UI/UX Design program
Timeline
Apr 2021 - Jun 2021
Process
01
Discover
Research & Empathize
02
Design
Define & Ideate
03
Validate
Prototype & Test
01
Discover
Methods
Competitive Analysis
Surveys
1-on-1 Interviews
Affinity Map
Tools
Google Suite
Zoom
Miro
Summary
I analyzed 3 well-known online jewelry retailers / designers to learn how competitors help their users determine which ring is best for them. I then conducted a survey and five 1-on-1 interviews with potential users. All participants had purchased fine jewelry in the past or were interested in doing so in the future. I learned about their experiences, pain points and thought process while shopping for fine jewelry.
I organized the results into an affinity map to help define the problem statement and inform the ideation of solutions in the next phase.
Business Pain Points
With the goal of increasing conversion rate in mind, these were the main areas of improvement that I was given for the project:
-
50% of users open 7 item pages on average, then abandon the site without moving any items into the cart
-
Product Manager's hypothesis: users are unable to determine which ring is best based on relative features
-
-
70% of users who place an item in the cart abandon it at the registration page, because they must make an account to purchase
Competitive Analysis
In order to target these pain points, I studied the mobile websites of 3 well-known jewelry retailers and designers. I asked these questions during analysis:
-
How do competitors help users determine which ring is best for them based on relative features?
-
How do competitors handle the checkout/registration process?
I focused on all the ways each design tried to build comfort in the user's decision-making process. I analyzed the first impressions on the home page, how their navigation menus and filter systems were set up, and the details shown on both their catalogue and individual product pages. All three websites had similar features toward this goal, such as:
-
pricing and material details
-
transparent shipping and warranty policies
-
robust filtering system
-
articles and guides about diamond quality, ring sizing, styling jewelry, trends, etc., as well as for general inspiration and gifting
-
lots of contact info listed in multiple places
I also looked at each site's checkout flow and noted whether or not account creation was required for completion of the order.
Blue Nile is a well-known industry leader of luxury jewelry. They focus on diamond engagement and wedding rings. They sell their own collection of jewelry along with collections from other designers. They claim to offer only ethically-sourced diamonds, but it is not widely mentioned across their website. They also offer a range of lab-grown diamonds through their Lightbox collection.
Main takeaways:
-
Very traditional design style
-
Build Your Own Ring feature
-
Callouts on the catalogue page, (shipping speed, customization options, ratings, etc.)
-
Large buttons for metal/gem options in the product page (though very inconsistent)
-
Very info-dense (lots of scrolling)
-
Account registration is optional for checkout
Brilliant Earth is a luxury jewelry designer (not an aggregate retailer) that focuses on ethical jewelry. Their tagline is “Luxury with a Conscience.” They offer conflict-free and lab-grown diamonds, as well as other gemstones. They seem to prioritize responsible business practices and focus mostly on rings.
Main takeaways:
-
More aesthetically modern than Blue Nile - clean and minimal
-
Relies heavily on the “Build Your Own Ring” feature, to the point that it’s actually difficult to simply browse, especially regular non-wedding/engagement rings
-
Large buttons for metal/gem options in the product page
-
Virtual try on
-
Transparent origin source of gemstones to support ethical responsibility
-
Account registration is optional for checkout
Mejuri is a designer of “everyday fine jewelry” (not an aggregate retailer). They promote “gifting yourself” every day with high-quality accessories, not just for special occasions. While they do carry wedding/engagement collections, they seem to place equal importance on a variety of jewelry types, not just rings. They also use modern marketing methods, such as partnering with social media influencers.
Main takeaways:
-
Most modern and minimal of all
-
Has a younger feel, due to use of social media, blog posts, collaborations and celebrity/influencer endorsements
-
Callouts on the catalogue page, ("new arrival", "best seller", etc.)
-
Large buttons for metal, gemstone, and size options in the product page
-
Account login is optional for checkout, but there is no option to create one
Feature Comparison
Click / tap image to magnify
Surveys
I received 42 submissions for my survey from a variety of people with different experiences shopping for fine jewelry. Some had no experience at all, while others have made purchases in the past, either for themselves or as a gift for someone else. All participants had interest in purchasing fine jewelry in the future.
Key Findings
Click / tap image to magnify
Click / tap image to magnify
Interviews
With the findings from the survey in mind, I interviewed 4 of the participants to learn how the experience of shopping in-person could be replicated in an online experience. I also asked what made them comfortable or uncomfortable when shopping for fine jewelry.
Goals
The key points I wanted to explore during the interviews:
-
What are the most important factors that shoppers consider when looking for the right ring?
-
What are the pain points that cause shoppers to abandon their search?
-
How likely are jewelry shoppers to use a “build your own ring” feature?
Because Terras was also focused on providing eco-friendly ethical products, I also wanted to find out if and how fair trade and ethical sourcing influenced the participants' shopping decisions.
“With any shopping experience I like seeing clear photos. It's got to be more than one, and it's got to be on a hand. I've seen so many photos where it's just a ring in white space, and I couldn't get a sense of the scale of the stone or how it looked on a hand.”
- Amelia B
“I would actually like to see [the ring] on my hand, if it's an app or website where I can use my camera to see it on my hand. For example, if it says '1.5 carat' I don't know how big that would be on my finger.”
- Di L
Affinity Map
Click / tap image to magnify
I compiled my findings from the interviews into an affinity map. I grouped all the thoughts, comments and insights into similar ideas. This made it easy to find groups that overlapped. From this map I drew these key takeaways:
-
Narrowing down the choices:
-
Physical characteristics, especially the visual style, size, and quality, were the most important factors.
-
Tools like "build your own ring" and robust filter systems also help.
-
-
Comfort in finalizing a decision:
-
The best way is being able to physically try on the product at home.
-
This means having a solid return/exchange policy.
-
-
Virtual try on is the next best method.
-
Lots of photos are also high priority, both professional quality and customer-uploaded, to help gauge the size and scale of the product and also prove the company's legitimacy and trustworthiness.
-
Customer reviews of the products to accompany the photos are likewise important.
-
-
Other resources like educational materials, flexible payment options and being able to chat with an expert also provide comfort.
-
-
Other findings:
-
Social media can be fairly influential, especially when it provides even more product photos and inspiration to help with the decision-making process.
-
Sustainability, ethics and transparency are generally nice to have but is often not as important as the visual look of the product.
-
Even when it is high priority, it can often be more expensive, which limits options.
-
-
“With my ring, I saw it online, I thought, 'Oh I love this ring,' but I definitely wanted to make sure it was going to feel good when I wear it, because it's something I'm going to wear for the rest of my life. So I definitely need to try it on and make sure it's going to be comfortable and also see how it looks on my hand.”
- Frances P
Extra Competitive Research
From the interviews I now knew how important it was for customers to be able to physically try on the products at home. So I decided to research one extra competitor: Warby Parker. They are a leading retailer of eyeglasses and sunglasses. They offer a “Home Try-On” program that lets users choose 5 pairs of glasses to ship home to them to try for free. A similar program could be tailored to Terras' high-end products (possibly with a small fee, rather than a completely free trial, to accommodate the higher price tag and risks.)
02.0
Design
Methods
Personas
User Stories
User Flows
Wireframing
Tools
Miro
Figma
Summary
Supported by the challenges found in the synthesized research findings, I affirmed the original hypothesis and defined it as the problem statement. I established the primary users of the final product and ideated solutions in low fidelity for later testing.
Problem Statement
How might we help shoppers of fine jewelry feel comfortable deciding which ring is right for their needs?
Pains
Concerns about proper fit
Lack of useful photos
Lack of product knowledge
Concerns about customer service
Lack of trust in the company
Gains
Ensure proper fit
Offer variety of effective photos
Educate customers about the product
Provide excellent customer service
Prove company values and reliability
Personas
The business needs combined with the synthesis of the research provided information for 2 distinct personas. Their experience shopping for fine jewelry differentiated them from each other. Yet they also shared a need to feel comfortable choosing the right product.
Click / tap image to magnify
Click / tap image to magnify
User Stories
I broke down all of the possible/relevant actions that a user could take into the most atomic level using Epics, starting with the phrase, "As a [user type] I want to..." to specify the need and ending with, "...so I can..." to specify the goal.
This minute level of detail allowed me to see each step in the user's journey to achieve a specific goal. This would also help in creating the user flows below.
Click / tap image to magnify
User Flow
I used the epics from the user stories to compile a flow chart to visually show the steps that users will take to complete their goals. I gave extra focus and detail to the Product page, where many elements can help with the users' pain points.
Click / tap image to magnify
Wireframing
Each step of the user flow was translated into low-fidelity mockups to explore how the solutions would practically look and feel. Extra focus was placed on the most important screens to enhance shoppers' comfort in making decisions:
-
Home Try-On feature
-
Virtual Try-On
-
Product page details, educational material and reviews
Attention was also placed on the final checkout flow to ensure that it could easily be done as a guest. The company also needed to capture email addresses.
03.0
Validate
Methods
Rapid Prototyping
Moderated Usability Testing
Tools
Figma
Zoom
Miro
Summary
I created a rough prototype for usability testing to see if the designs were on the right track while the project was still in its early stages. Conducting tests while the designs were still low in fidelity helped reduce attachment to ideas. It also allowed for major changes and quick iterations as necessary.
Low-Fidelity Usability Testing
Participants
Due to the COVID-19 pandemic, I conducted moderated usability testing remotely through video chat with 5 participants. Again, some participants had no experience with shopping for fine jewelry at all, while others have made purchases in the past, either for themselves or as a gift for someone else. All participants had interest in purchasing fine jewelry in the future.
Goals
Test the effectiveness of the design in achieving these goals (through specific tasks):
-
Find out how to try on a product.
-
[Find and add a ring to the “Home Try-On” kit.
-
[Use the “Virtual Try-On” feature.]
-
-
Learn more about product materials.
-
[ex. Learn the difference between 14k gold and gold vermeil.]
-
-
Find out the source of a product’s materials.
-
[ex. Find out that the ring’s setting is made from recycled gold, and its garnet/ruby is ethically mined in Tanzania.]
-
-
Add a product to the cart using the “Build Your Own Ring” feature.
-
Fully place an order.
Synthesis
The findings from each task of the usability tests were compiled into tables with recommended solutions.
Click / tap image to magnify
“I like seeing things on myself. I might like it in the photo, but then when I see it on my hand, it might be different. I would definitely [use the Virtual Try-On] feature.”
- Carrie C
“I have no idea how setting up a ring works, so having the [step counter] gave me comfort that it won't take too long.”
- Makayla C
Key Findings
All tasks were performed successfully by all users with little to no problems. All issues were generally low in severity and required small detail improvements. The key changes to improve the most high-priority features were:
Home Try-On:
-
The “Classic” and “Premium” buttons could be improved by making the material options visible instead of hidden by the button-tap action, so the user can compare both versions at the same time.
-
Changing the label of the "Add to Home Try-On" CTA for the Premium version or adding help text to refer to the Classic version would help make it clearer that the Classic version will be sent to the user.
Virtual Try-On:
-
To prevent confusion between the use of either hand for the photo, adding a phrase like "whichever hand you want" to the instructions would help.
-
Moving the "Save" and "Share" buttons off the photo would make them more noticeable.
Build Your Own Ring:
-
Adding labels to the step counters would make them more visible/noticeable and also clarify each step’s purpose (removing some confusion).
Checkout
-
Adding a step counter to the top of the page and removing the last 2 step containers would make the flow even more intuitive by making the "Continue" CTA the most obvious action forward, rather than trying to expand the next container.
-
For the "Use shipping address for billing" section, using a checked box icon when no fields are being shown and adding fields for when the box is unchecked would be a good opportunity for simple animation.
“I like the [Home Try-On feature]. This would definitely be hassle-free to me. I don't have to worry about paying for shipping and figuring all that stuff out. There's nothing to lose... Especially if you're going to drop a lot of money on it, you want to make sure it fits right and looks really good.”
- Carrie C
02.1
Design
Methods
Style Guide
High-Fidelity Mockups
Tools
Figma
Summary
A minimal style guide was developed for Terras, and it was used in the creation of the first round of high-fidelity mockups. The key findings from usability testing were also incorporated.
Style Guide
I developed a visual theme for the product, using the brand platform and attributes as a guide. A color palette of warm earth tones fit well with Terras' name, since terra is the Latin word for earth. It also reflected the company's sustainability values. Clean, sharp edges helped keep it refined and elegant as a provider of fine high-end jewelry. I also combined the timeless classic style of a serif font for headers with a sleek modern san-serif font for body text.
Brand Platform
Terras is an expert in fine jewelry who is always knowledgeable about the latest trends and focused on responsible business/environmental practices.
Brand Attributes
Elegant • Modern • Honest • Ethical
Primary
#F1B9A5
Rose Quartz
Secondary
#84A98C
Eucalyptus
Accent
#FFF3E1
Chamomile
Text
#263129
Pine
Gray
#EEEFEE
Mist
Header / Assistant
Regular
Body Text / Open Sans
16 pt • Regular
High-Fidelity Mockups
Version 1
The style guide informed many visual design decisions throughout the high-fidelity mockups. The photography was warm and earthy (often with botanical elements) while also elegant at the same time.
The largest changes were made to the product page:
-
Details of both the Classic and Premium versions of the ring were made visible at all times.
-
The Home Try-On CTA was made more clear for the Premium version (previously tapping on the button simply added the Classic version to the Cart with no explanation).
-
The star ratings were moved down to the Reviews section to reduce clutter.
-
A quick link to jump to the contact info was added closer to the top of the screen to make it more noticeable for users who were inclined to ask for help.
I changed the primary CTA of the home page's hero banner to the "Home Try-On" feature. This was to reinforce the effectiveness of the program as an important business strategy, especially in differentiating the company from its competitors.
Multiple points of entry to the experience already existed on almost every page of the website. This included the quicklinks bar at the top, a large banner below the main content of each page, and the "Learn More" link near the relevant areas of content.
To make it even more appealing to shoppers, I adjusted the program slightly to allow them to try on the rings for free. This is possible by putting a hold on the shopper's billing account for the cost of the ring. The shopper would be automatically charged after 5 days for any rings they do not send back. I updated the "Home Try-On" details page to reflect this change, as well as the prices shown in the cart.
.jpg)
03.1
Validate
Methods
Prototyping
Moderated Usability Testing
Tools
Figma
Zoom
Miro
Summary
I created a prototype from the high-fidelity mockups for the next round of usability testing. I tested the same tasks and experiences from the first round to gauge the effectiveness of the high-fidelity changes. I also gathered general impressions on the visual style appeal of the "Home Try-On" feature. I then compiled the test results again into a table with general thoughts, issues and recommended solutions.
High-Fidelity Usability Testing
Participants
I recruited 5 shoppers (2 male and 3 female) for this final round of remotely moderated usability testing. Same as the previous round, participants had a diverse background in shopping for fine jewelry, and all participants had interest in purchasing fine jewelry at some point in the future.
Goals
-
Gauge first impressions and effectiveness of promoting the “Home Try-On” feature more prominently
-
Gauge impressions of color palette, especially in using reddish pink as the primary color
-
Same as previous round, test the effectiveness of the design in achieving these goals (through specific tasks):
-
Find out how to try on a product.
-
[Find and add a ring to the “Home Try-On” kit.
-
[Use the “Virtual Try-On” feature.]
-
-
Learn more about product materials.
-
[ex. Learn the difference between 14k gold and gold vermeil.]
-
-
Find out the source of a product’s materials.
-
[ex. Find out that the ring’s setting is made from recycled gold, and its garnet/ruby is ethically mined in Tanzania.]
-
-
Add a product to the cart using the “Build Your Own Ring” feature.
-
Fully place an order.
-
Synthesis
The findings from the usability tests were compiled into tables with recommended solutions.
Click / tap image to magnify
Key Findings
In stark contrast to the wireframe usability tests, there were many more issues with the high-fidelity designs, especially with the major features:
Home Try-On:
-
No user immediately wanted to learn more about "Home Try-On", and some did not notice the CTAs on the product page at all.
-
Various adjustments will be necessary to make the program more noticeable and appealing, such as higher-priority CTAs, better labeling and copy, and adding more callouts throughout the website, like in the cart and at checkout.
-
Build Your Own Ring:
-
Most users had trouble recognizing that the word "setting" meant the ring band instead of customizable options, which caused confusion for many different parts of the flow, such as pricing and when to expect the "Virtual Try-On" tool.
-
Changing the word "Setting" to "Band" or "Band Style" will help reduce or eliminate most of the confusion.
-
Combining step 2 and 3 will allow earlier previewing and further simplify the flow.
-
-
The relationship between the prices and stone shapes/sizes in the stone catalogue was unclear, which could be remedied by changing the prices of the product listings to a range rather than a flat price.
-
Quicker access to the settings' material/color filters would also be helpful, similarly to how the stone shapes are available in step 1.
Most other issues were small and only required minimal adjustments, such as:
-
Adding a search bar to the navigation menu
-
Adding links at the top of the size guide to quickly jump to the appropriate section
-
Providing a ring size print-out option for users who don’t have a ruler or don’t wish to pay for a ring sizer
-
On the product details page, adding a small "Materials Guide" link below the product options to jump to and expand the "Materials Guide" section
Opinions on the color palette were overwhelmingly calm, soothing and inviting.
02.2
Design
Methods
High-Fidelity Mockups
Tools
Figma
Summary
After solutions were ideated for the issues found during the usability testing, I incorporated them into a second round of iteration for the high-fidelity mockups.
High-Fidelity Mockups
Version 2
Home Try-On
Due to the amount of issues related to the "Home Try-On" experience, I re-evaluated the entire flow holistically from start to finish. I looked at the main entry point and all the other entry points that currently exist. I also considered areas of the website where more points could be added.
The hero section of the home page was the first and primary point of entry for the "Home Try-On" flow. I made changes here so the program was more prominent and its details were easier to get to:
-
Copy was adjusted to be more visible and entice users to learn more (ex. "What happens after 5 days?").
-
CTA now leads to the details page, so users can learn about the program before shopping, which reduces confusion when they see references to the program later.
-
CTA was changed to green to differentiate it from the header and make it more visible on top of the warm-toned model in the hero image.
For the next part of the flow, the "Home Try-On" details page had small color changes to improve visibility. I then duplicated the product catalogue to add a banner that provided more program info and another way to return to the details page. I retained the original catalogue page as part of the general non-"Home Try-On" browsing experience, such as when a user taps on "All Rings" in the navigation menu.
I made changes around the CTAs of the product page to further reinforce the "Home Try-On" program:
-
Primary and secondary CTAs were swapped.
-
Button labels were both adjusted for clarity and consistency.
-
Extra help text was added to provide more info, pique curiosity in the program and drive more traffic to the "Home Try-On" details page.
-
Secondary CTA color was changed to make it more visible as a button.
A link to quickly scroll to and expand the materials guide section was also added below the material options.
.jpg)
Like the product catalogue page, I added copy to the top of the "add to cart" overlay, as well as the top of the cart itself. This provided more info about the "Home Try-On" program and yet another entry point to the program details page.
“I think [the Home Try-On feature] could be re-emphasized somewhere along the checkout area, especially [the cart]. If I saw, 'Have you considered our Home Try-On bundle?', I would be more inclined to learn more if I didn't already know about it. ”
- Rachael H
Build Your Own Ring
The "Build Your Own Ring" experience was one of the other important features of this project. I made some changes to reduce confusion and improve the flow.
Old version: 3 steps, using "Settings" ands no metal filters
New version: 2 steps, using "Bands" and with metal filters
Old final preview (step 3)
-
I changed the word "setting" to "band" across the entire website, since this was the largest source of confusion.
-
Filters for the bands' metal options were moved from the filters menu directly onto the catalogue page for easier access.
-
Steps 2 and 3 were combined to simplify the flow, since the band preview was already shown with the chosen stone from step 1.
New final preview (step 2)
“I wasn't sure what [the word] 'setting' meant. I thought the second step was to customize... I didn't expect the combination of the [price of the stone and the price of the setting] at the end, because the second step already showed [a photo of the final ring together with a lower price].”
- Regine W
Final Takeaways
I learned from this project that moving from low to high fidelity (even with just the addition of color and photography) can make enough difference to completely change the usability experience. The tests for the wireframe prototype went so well, I was taken aback by the poorer results from testing the high-fidelity prototype. This could have been a fault of the high-fidelity changes. Yet I also knew that the testers were a factor in the results as well, since they were different people from the first round of 5 testers.
These lessons reminded me of the value of frequent usability tests. I also learned to never take anything for granted. Even if things look to be going well, it is important to never be too precious with designs, as it can be a barrier to adaptability.
Despite the issues from the high-fidelity tests, the solutions were overall successful at improving shoppers' comfort level in choosing the right ring for their needs. "Home Try-On", "Virtual Try-On" and "Build Your Own Ring" were all praised as business ideas by all testers. It is just a matter of continuing to improve their execution moving forward.
“I think [the Home Try-On feature] is a good way to know [if the ring is a good choice]... If I don't like it, I can return it for free. It's good for expensive rings. If it's a price that I would have to think about whether it was worth it or not, it's helpful to have a trial period.”
- Regine W
“Rings are very beautiful by themselves, but trying them on is a different story. [With my engagement ring], I'm really glad I made the decision to try it on in-store... It made [my fiancé's] life easier, and it gave me peace of mind, because it didn't give me that 'what if?' kind of feeling. I think the 'Virtual Try-On' will provide others with that peace of mind.”
- Rachael H
Next Steps
As with most UX projects, the ideal next step would be to test this second iteration of high-fidelity mockups with 5 new users. Were the changes successful in driving more users into the "Home Try-On" experience? Did they reduce confusion for the "Build Your Own Ring" experience?
While working on the second iteration of the high-fidelity designs, I ran some quick casual guerilla tests with a couple previous testers to gauge their opinions. They were all positive, but I would prefer to run moderated tests again with brand new testers in the same formal format as I had done with the previous 2 testing rounds.
I would also consider starting to build less important features into the prototype to continue making it a more rounded/complete website, such as a tool to compare multiple products against each other, as was originally planned in the user flow.
