Fragrant Jewels

Founded in 2014, Fragrant Jewels is the leader in a unique market: jewelry, specifically rings, hidden inside bath bombs, candles, and scrubs.

Challenge

Redesign Fragrant Jewels site to help new users better understand the products, better navigate the site, and better understand the companies’ offer. 

Solution

Restructure the information architecture, content, and layout.

Scope

Timeline: 3 weeks

Team: Jenni Sloane, Ruben Baez, Yanni Xiang
Role: Lead Designer, UX Designer
Platform: Mobile
Tools: Pen & Paper, Whiteboard, Figma, Xd

Research

Resources

At the kickoff meeting, the Director of Product Management & Engineering stated she was unhappy with the entire current design. Her goal for the redesign was to double FJ’s conversion rate. She provided our design team with the company’s brand strategy, competitors, customer emails, membership birthdays, and site analytics from luckyorange.com

Identifying The Problem

After conducting a Heuristic Evaluation, which identified issues with the content, navigation, and layout, our team determined the scope of the project would be to address the information architecture and content.

Understanding The Problem

We had our scope but we needed to more clearly understand the heart of the problem. While writing our initial problem statement the other members of my team agreed the problem was doubling the conversion rate. That didn’t make sense to me, but I had trouble articulating why in that moment. We were getting stuck, so for the sake of time, collaboration, and diplomacy I moved forward with our team’s definition of the problem: how do we double the customer conversion rate?

Keeping Perspective

We ran the problem statement by Ed Perez, UX Strategist and Design Thinking Instructor. He pointed out that our problem statement was not from the user’s perspective. This solidified to me what I was having trouble articulating earlier; doubling the conversion rate is putting the business needs before the user’s needs.

 

Our team then reworked the problem statement from the user’s perspective. This allowed us to empathize more deeply and help keep the user at the center throughout our design process.

Learning Opportunity

Next, our team created a survey together. When it was done I started preparing the interview guide and another team member sent the survey to the member emails. Before the survey was sent I thought to mention to bcc the email addresses, but I didn’t say it out loud as I was too wrapped up in preparing the interview guide. Unfortunately, the addresses were not bcc’d and some of the users were upset. I contacted our client immediately to make her aware of the situation and apologized for our mistake. She smoothed things out with those customers and assured our team it wasn’t a big deal. I learned from this incident to not get tunnel vision with whatever I’m working on and vocalize any concern no matter how small it may seem.

Improving Communication

From the problem statement rewrite and the email incident I noticed our team needed better communication. At my request, Ed provided us with a team building exercise, which made our design team’s individual values and perspectives more apparent to each other. We agreed to check in more thoroughly during SCRUM and to finish our day with a retrospective exercise. This enabled us to improve our communication as a team moving forward.

What Users Had To Say

I then proceeded to interview 4 potential new users, and as a team we interviewed 1 additional user for a total of 5 interviews.

Checking The Numbers

The brand strategy stated FJ’s main demographic was women 40-49yrs old. By analyzing the list of 108k customer birthdays, however, we discovered that the primary age group was actually 20-29yr old women, with 30-39 being the next largest group. This information helped us create a persona that more accurately portrayed the target user.

Design

Design Studio

We conducted a design studio to whiteboard all the potential screens we needed to create. This process allowed us to combine the strongest features, layouts, and content from each team member into a single cohesive design.

Prototyping

We then created paper, mid-fidelity, and hi-fidelity prototypes, and conducted 4 usability tests for each. The screens that required the most iteration were the membership, navigation, and product listing page.

Membership

Paper

Users were confused by membership signup in the checkout flow

Mid-fi

Membership as a separate flow from checkout divided the users

Hi-fi

Membership as a separate flow was favored in the hi-fi

Navigation

Paper

Icon placement in global navigation was not intuitive 

Mid-fi

Users favored scrolling over a hamburger menu

Hi-fi

Global, primary, and secondary navigation all tested successfully

Product Listing

Paper

Membership and point system were confusing to users

Mid-fi

Users still had confusion over the point system

Hi-fi

Hierarchy of membership and points was clear to users

Prototype

 

Reflection

Moving forward I’d like to A/B test the new membership user flows, apply the mobile site redesign artifacts to the desktop site, and test the branding for a more competitive edge.

  • White LinkedIn Icon