Ruth Reid
An experienced B2B industry leader wants to develop a new B2C eCommerce experience targeting a younger demographic.
A New Platform for an Established Company
Ruth Reid is a new brand from Stevens Jewelers - a B2B Jewelry company operating out of Chicago for the past 30 years. Ruth Reid was launched in 2021 as a way to target a different type of client looking for a more efficient jewelry shopping experience.
Originally housed on their main brand website, Stevens was looking to separate the brands to create a more simplified shopping experience. We focused on delivering the best possible version of the website within the constraints of Squarespace.
How can we develop an eCommerce experience to attract a new customer base?
Role and Duration
Client: Stevens Jewelers Inc.
Role: Product Designer + UX Researcher
Timeline: November 2021 - 80 hours
Tools: Adobe, Figma, Whimscal, Maze
Solution
I designed a new brand identity and responsive eCommerce platform for Stevens Jewelers to target a new, younger demographic by prioritizing product discovery and transparent pricing.
Product Discovery
During user testing I watched all 5 participants continue to scroll through the entirety of the homepage, hoping to see an item that caught their eye. They continued the behavior on the product page, scrolling down to see if there were any other interesting products on the page.
Our client had outlined a project goal to decrease the bounce rate and I proposed product discovery opportunities at several touchpoints in the user flow to keep potential shoppers interested. At the end of the product searches and product pages, I have suggested and recommended products so users always have somewhere to click next.
Price Transparency
The client was focused on differentiating their brand in the segment and saw an opportunity to do that by providing pricing education and information. While this revelation came after our research phase, we were still able to understand that price and transparency were a big part of building consumer trust from our user interviews.
Our final design provides item-specific pricing information in the product accordion menu. This feature has the goal of educating shoppers. The Fair Pricing page in the about section is tasked with providing more general information on the jewelry industry as a whole and how my Ruth Reid can save you money.
Key Performance Indicators + Project Goals
Early in the project, the client and I started to define how we could measure this project, and which data points would point towards a successful project. We defined the following project goals:
1. Increase conversion rate (Comparison to Stevens Jewelers Website)
2. Reduce homepage bounce rate (Comparison to Stevens Jewelers Website)
3. Reveal confusions, frustrations, or roadblocks that customers face when ordering jewelry online.
4. Design an eCommerce experience to accommodate new and existing customers.
5. Design a site and Brand for the client to easily adapt and edit as they grow and change.
Setting these goals upfront as a project team helped align design decisions around common goals.
Existing Site Audit
The current Stevens Jewelers' website is not optimized for quick shopping.
While developing the scope, I analyzed the current website to access its viability in hosting this new eCommerce experience. What I discovered was that the current website was set up with information for wholesalers, and without separating that from the eCommerce component, it would be potentially confusing for both customer groups.
There were two options, divide the current website into two distinct sections, one for wholesalers and one for eCommerce, or build out a separate website for eCommerce. I proposed we build a new website that would allow us to tailor the experience for Ruth Reid's target consumer.
Research Goals
Collaborating with my client, we focused our research by asking questions that would inform a feature list and the brand identity.
1. Understand shoppers' process for purchasing jewelry.
2. Determine how shoppers determine a brand is trustworthy.
3. Determine why shoppers don't feel comfortable purchasing jewelry online.
To answer these questions and verify the assumptions, we decided on a two-pronged initial research strategy launching an online survey and conducting user interviews with the new target demographic.
Online Survey - 120 Responses
120 Respondents took our 8-question public survey aimed at gaining a wide lense understanding of shoppers' priorities and brand preferences. The survey was sent to existing Stevens Jewelers customers and posted in shopping/jewelry online groups. Participants were screened to be jewelry shoppers. 73% were women, and participants had a mean age of 27.
Key results and learnings included:
1. Quality of Goods is the most important consideration for shoppers (84%).
2. 69.5% of people have purchased jewelry online before.
3. 66.8% of people bought jewelry from brands advertising on social media.
4. Only 11% of people indicated that customization options were an important consideration.
User Interviews - 5 Participants
I conducted 5 half an hour interviews over zoom with online jewelry shoppers within the target demographic of my client, females, 25-40yrs.
These interviews had two parts, first, I asked participants questions learning about their comfort and preferences in shopping for jewelry online. Then together, through screen sharing, I observed users search for and purchase a gift for a friend on a competitor's eCommerce site. My role was observational, during the second part.
I organized my observations and notes into an affinity map, grouping similar topics and understanding common trends and thoughts.
Key Takeaways
Compiling what I learned from the survey and chatting with jewelry shoppers, I identified 4 key takeaways.
Site Map
After we defined our feature list, I began to organize the shopping experience. I set navigation tabs like “About” so that future additions could be easily slotted in. Our initial principle of prioritizing product discovery shows up here too, I propose multiple ways to search through the "Shop" tab like for a gift or trending items.
Consultant = Educator
My client was advocating for a shopping experience that was largely organized around the different jewelry collections they had designed.
Looking back to our research, I found evidence shoppers preferred to search by product type, like ring or necklace, rather than collection style.
This data helped us prioritize those filter and search features over searching by collection.
Wireframes
Information architecture in place, I started sketching and searching Squarespace for a template that would work for this design. With those constraints understood, I started developing wireframes in Figma. Squarespace could not offer us as much of a robust review feature as I had wanted to include, so we had to deprioritize a robust review section. Wireframes were developed for responsive design and included a mobile, tablet, and desktop version.
I tested these wireframes with 3 users. Since there were no issues completing high-priority tasks like purchasing or searching for jewelry, I felt comfortable proceeding ahead. The elements and components of the final design closely match this initial wireframing study.
Bringing the Design to Life
By this point, you might have asked yourself what's up with that hot pink?
Let's explore how we got there. I presented my client with two options to choose from, Option A - neutral leaning mauve or Option B, colorful pink. My client had preferred the neutral colors of Option A but wanted to understand how shoppers perceived the brand colors.
I used the Microsoft Desirability Toolkit to test our brand colors and users’ perception of the aesthetic quality of our site.
I had 16 users test one version of the site and had them select 5 words from a standardized group of 25 words. Words were shown in a randomized order and included positive, negative, and neutral options. To communicate the results to our client I created a Venn Diagram showing each option and the chosen words
Both designs had a majority of users describe the websites as Familiar, High Quality, Trustworthy, and Fresh. Since these were the most commonly selected words I knew that either option was well perceived by potential users.
Both of the options had 2 negative words associated with the designs. For the neutral options, users thought the site was Dated and Old, and for the Colorful option users thought it was Busy and Cheap. I turned back to our target demographic to help make a decision - to myself and my client, the adjectives associated with the colorful option were more aligned with our user group's goals.
High-Fidelity Prototype Testing
A desktop version of the High-fidelity prototype was shared with the client and used to demonstrate page functionality to them. Additionally, we tested the prototype with 5 users, to validate that the functionality of the site was clear and users could search for and purchase selected jewelry. Explore the prototype for yourself below:
Lessons Learned
Define Key Performance Indicators Early
While defining the scope with the client, we worked together to identify key metrics that would define what a successful project would look like. With these goals in hand, (Increased conversion rate and reduced homepage bounce rate) I was able to design specific solutions with those goals in mind. These metrics helped me define how UX decisions can have a direct impact on the bottom line. As this project moves out of the development phase I will be able to test and adjust the site with these goals in mind.
More Projects
Lets build great products together!
Thanks for stopping by, contact me at: Saitelbachj@gmail.com
