Virani Bespoke Page Redesign
Sept. 2019 | 2-Day Design Exercise | Website
I was tasked with a design challenge to redesign the Bespoke page in 2 days when I was interviewing for Virani Jewelry. After gathering as much information as I could from various research methods, I reorganized the existing content and came up with some new sections. My solution aimed to satisfy the needs of both the customers and the business. It distinguished me from the other interviewees and ultimately landed me the job!
Scope of Work
User Research, Content Audit, Comparable Brands Analysis, Ideation, Rapid Prototyping
Pencil & Paper, Sketch, InVision, etc.
Specify Redesign Goal
What is the challenge?
My notes and reflections will go here. 💡
High bounce rate, low conversion.
Virani’s Bespoke page is intended to walk customers through the ring customization service process and encourage them to book appointments online. After that, more personalized services can be provided when customers come into the store. However, as described in the prompt I was given, only a few customers actually booked appointments through that page. It had a pretty high bounce rate of 67%, which was above the average of 20-45% in the e-commerce category.
How did I dissect the challenge?
In the first place, I needed to make the problem more concrete. I specified the redesign goal as 2 parts by thinking about the main stakeholders and their respective goals in this context. This not only served as a checklist reminding me that my final solution should strive to meet goals on both ends, but also as criteria for me to evaluate how the current page works later on.
The business goal and the customers' goal actually go hand in hand.
Empathize With Users
Who are the users?
Before jumping into assessing the performance of the page based on the 2 aspects of goals I defined above, I realized that I am not a representative user who would browse a ring customization service page, which meant that I may not see the same problems as the real users. However, it was not feasible to find target users to talk to given the time constraint. In this case, I tried to come up with as many questions as possible to help myself build empathy. And here are some of them:
This was the first roadblock I met in this project, which prompted me to think about "How to maintain a user-centered design process when talking to users directly is not possible?" 🤨
I mainly relied on my personal experience and tried to think divergently to answer these questions. Although this was a less optimal way to collect firsthand user data compared to interviews or focus groups, it still gave me a contextual understanding of the problem. The answers also helped me come up with 2 typical user scenarios:
When I was working on the user scenarios, I found that I could put Kenny and Mia in the same story! Yet, they still land on the page differently and have different motivations & needs.
Does the current page achieve users’ goals?
Then, I moved on to see if the page meets users’ expectations by providing relevant information in a comprehensible manner. The first thing I noticed was that it actually doesn’t include much information right now: simply a hero image followed by 3 sections. I analyzed each section and paid attention not only to their respective purposes but also to the story they tell as a whole, through which I identified 3 major problems.
Using the shape of a ring is pretty eye-catching. Unfortunately, it sacrifices clarity for creativity...
1. The service process is not communicated in a clear way.
Firstly, the 3 sections are not organized in a logical order: Section A serves as a general introduction; Section B is merely a video offering a glimpse into the ring making process; Section C mentions some customization options, such as diamond shape, color, etc. After looking through the whole page, customers are still not clear what steps are included exactly and how they should start the process.
2. The page’s real estate is not used in an effective way.
The largest space on the page is taken up by Section C, where an image of a ring is used as the background. However, it doesn’t facilitate users’ understanding, rather confronts them with the confusion about where to start looking at first and what’s the right reading order. Furthermore, from a responsive design point of view, it’s hard to accommodate such a big picture on the mobile screen.
3. The story is not narrated in a compelling way.
Apart from the content and layout, the current page is also not compelling enough for customers to book appointments online. While Virani has high-quality jewelry and flexible customization, this page does not distinguish itself from other jewelry brands, so customers have little reason to choose Virani over the others.
Secondary Research & Ideate
How did I pick my focus in secondary research?
So far, it was clear how this page fails in providing what customers need to know and convincing them that Virani is the right choice. In order to effectively transfer problems to opportunities, I raised questions for each of them to help identify what I had already known and what needed further investigation.
Since primary research with users was not feasible, I had to rely on secondary research to answer these unknown questions. While I didn’t have time to dig into each of them, I picked 2 areas that could potentially yield the most actionable insights by my instinct as a UX designer:
How do other jewelry brands introduce their custom services?
What differentiates Virani from other jewelry brands?
Compared with questions that are more related to users, the 2 questions I picked are more approachable using secondary research.
How did research inform me in making design decisions?
Q1: How do other jewelry brands introduce their custom services?
In order to answer “How do other jewelry brands introduce their custom services”, I searched for some other jewelry brands that also provide ring customization services on their websites. I was curious about how they would craft their customers’ online experiences differently to distinguish themselves in the market. I got some interesting findings and after careful consideration, I made the following design decisions:
1. Creating custom design online is popular but not suitable for Virani.
Many of the brands I looked into allow customers to choose various characteristics and create the design digitally by themselves. While it does involve customers to a great extent, the process itself is really complicated. Customers could be daunted when faced with so many different parameters to play with, some of which are quite technical. However, Virani moves all this complexity into customers' in-store appointments, where they are accompanied by diamond experts. Therefore, this idea is not suitable from Virani.
Personally, I found this idea super fascinating as you can actually see the final result rendered in real time!! 🤩
2. Sharing customers’ reviews is an opportunity supported by research.
I also noticed that some brands choose to have a customer review section on their websites and display ring images shared by customers on their social media. This got me wondering how reviews influence customers’ online shopping behaviors. After reading through a bunch of related articles and research papers, I believe that incorporating reviews is an opportunity for Virani because this establishes social proof and builds trust with customers. Furthermore, people between ages 18 and 34 spend the most time reading and writing reviews, and they are also the target user group of the customization service.
I compiled a list of all the resources I referred to. Keeping them all in one place is easy to retrieve in the future.
Q2: What differentiates Virani from other jewelry brands?
Another significant insight I gained about people’s behaviors specific to purchasing jewelry was that they see it as an emotional symbolism. Consumers expect a lot more from brands these days than just quality products. They would choose to buy from brands that hold values that align with their own, such as embracing sustainable practices or supporting social causes. This finding echoed with another guiding question of my secondary research “What differentiates Virani from other jewelry brands”. And I found the answer on the Inside Virani page and other online presences.
As a customer, I totally agree with this point!
Virani celebrates the connections between individuals and families built by jewelry.
I learned that as a family business originating from India, Virani is looking to maintain traditional culture through the products. The greatest investment to date is in education, creating opportunities for fair and equal education for children in South India. I believed that highlighting this part would be an effective way of appealing to customers emotionally and building a loyal customer base.
With all the inspiring findings I got from research, I started sketching the interface for the new Bespoke page, and below are the final results!
My Redesign Proposal
What are the differences between my redesign and the old version?
1. An integrated section explains the service process up front.
Instead of scattering the information about the service process around the page, in my redesign, I put them all together in one section directly under the hero image. This section would answer the important question of “How does the customization service work” as soon as customers land on the page.
2. Two newly added sections support a cohesive story.
In addition, I created 2 new sections: “Our Story” highlighting Virani’s unique cultural background, value and vision; and “Your Story” displaying customers’ reviews together with the images of the custom designs.
3. Multiple CTAs encourage customers to take action.
Finally, I added more CTA buttons around the page. For example, customers can browse through the custom designs first before they get to the details of the process; or they can go check out the “Inside Virani” page if they want to know more about the brand story. This also increases the opportunities for customers to interact with the page and hence decreases the bounce rate.
How does my redesign solve the problems?
Clear process & effective usage of space.
“How It Works” demonstrates the 4-step process in the shape of a ring. As customers click one by one, the corresponding content will expand and the “ring” will be completed progressively.
You can probably guess that I was kind of inspired by the old design. 😛
A cohesive & compelling story.
From “Our Story” to “Your Story”, these two sections give customers more reasons to trust and choose Virani as they are assured that Virani is not only a diamond connoisseur but also a responsible company.
What did I learn from this project?
Ask the right questions to help guide yourself through the process.
Always take what works for other people with a grain of salt. Think critically and choose what works for you.
Prioritize and strategize when there are limited time and resources. Sometimes, go with your instinct!
What would I do if I had more time?
Talk to the customers directly to gain a deeper understanding of their needs and expectations.
Look at backend analytics to uncover users’ behavior patterns
Evaluate and iterate the solution through usability testing, A/B testing, etc.
What did my interviewer say...
"Yan impressed me with how thorough she was in delivering this design challenge. She walked me through her process, and I can see how she made decisions in each step and reached the final results."
Project Manager @Virani Jewelers