Virani My Bag Page Optimization
Oct. - Dec. 2019 | Lead UX Designer @Virani Jewelry | Responsive Website
The goal of this project was to improve the conversion rate of viranijewelers.com. I led this project together with a product manager and collaborated with a copywriter and 2 developers.
The first half of this case study illustrates how we arrived at 2 design opportunities after breaking down the customer journey: restructuring My Bag page and adding new components. The second half focuses on the process of prototyping and implementing the new My Bag page.
Scope of Work
UX Analytics, Stakeholder Interview, Task Analysis, Wireframing, Prototyping, Technical Screening, Design Handoff
Judith Sully - Product Manager
Esther Sodeinde - Senior Copywriter
Manish Mittal - Developer
Grant LaRocca - Developer
What's the challenge?
For a long time since its launch in 2017, Virani’s e-commerce store has had a conversion rate that was far below the average of the Jewelry & Cosmetics sector. During the kickoff meeting where my product manager first introduced this project to me, we did not have sufficient data to uncover the root cause of the low conversion. Therefore, I proposed to first gather user data for a month using the purchase funnel and recordings on Hotjar.
My notes and reflections will go here. 💡
Many “Add to cart”, few “Check out”.
Below is the report generated based on Virani's traffic in September 2019. It demonstrated that the current purchase funnel was ineffective quantitatively and located where the greatest drop-off occurred in the conversion process: My Bag page.
We set the homepage as the first step in the funnel as that’s where most sessions on our store started on.
How's the result?
Since the changes were launched in January 2020, we’ve started to see positive changes (stats from Jan. - May 2020) in the success metrics we defined at the beginning of this project:
the shopping cart abandonment rate has been reduced from 80% to 43%
the online store conversion rate has been *TRIPLED* from 0.13% to 0.46%
the units per transaction (UPT) has risen from 1.2 to 1.8
YAY, that's a great achievement for us! 🎉
Let's see how we identified user behavior patterns and understood the reasons behind.
Identify user behavior patterns through recording analysis
In addition to the funnel map, which provided a holistic view of how well (maybe bad 😅) the website was performing, we also had more than 2000 session recordings that allowed us to watch how people actually interact with the website as if we were sitting at the same table!
Our page of interest was My Bag page, so to get started, we filtered the recordings down to only the sessions that contained that page. However, our focus should not be limited to how users interact with that page. We also needed to understand what’s happening before and after, i.e. how they landed on this page and when they left. Since there were still hundreds of recording sessions after filtering (some of which were longer than 30 minutes), my product manager suggested coming up with some strategies to help identify users' behavior patterns more efficiently.
Inspired by the concept of “Micro-Moments” coined by Google, I segmented the user journey starting as users entering the purchase funnel into 3 main stages: I-need-some-ideas stage, Which-one’s-best stage, and I-want-to-buy-it stage. And as shown below, different pages across the website were categorized under these 3 stages as funnel hubs.
After mapping out the recordings based on stages, we got 2 findings that characterized users’ behavior.
1. The V pattern: user moving back and forth between pages
Consider the 2 types of users in the world as shown in the chart below: on the left side is someone who has a super clear goal of what to buy and is ready to checkout as soon as they find the product on the site; on the right side is someone who has no idea what she wants, spends half an hour casually navigating the site, and ends up buying nothing. Unfortunately, most of our users fell into the second type, including myself 🤷♀️. They would spend most of the time at I-need-some-ideas stage, switching between different product listing pages. Sometimes, they would click to get more details on a particular piece, after which they would either add it to My Bag or continue their treasure hunts.
2. The wide V vs. the narrow V
Users entered My Bag page by clicking the shopping bag icon on the top right of the site, which was accessible on any page across the site. Most of the time, they stayed for an average of 30 seconds, during which they either deleted a piece or clicked into a piece for more details. I noticed there was another click-journey users would take to enter My Bag page. They clicked the icon after clicking the "Add to Bag" button on a product detail page. And in this case, they only stayed on My Bag page for around 5 seconds with almost no actions.
Uncover the WHYs through usability testing
In order to understand the motivation behind users’ behavior, I used UserTesting to recruit people who fell into Virani’s target user demographic and conducted some remote usability testing. They were asked to think out loud as they were finishing the given tasks, such as “You are looking for a necklace for your mom as her Christmas gift.” After 30 sessions, some major problem areas on the current site started emerging, which also explained the differences between the wide V and the narrow V.
The wide V suggested that users had difficulties making decisions.
Through the usability testing sessions, I found that most people tend to use My Bag as a transit station, meaning that they would add all the pieces they felt interested in to My Bag first. They would then go to My Bag page to compare the pieces and decide whether they want to keep or remove. The wide V suggested that users had difficulties making decisions on this page and that’s because:
The information hierarchy was not clear: product details were not placed in a logical visual order. Too many font styles and irregular layouts made it difficult to scan and find important information.
Many essential features were missing or obscured: users couldn’t find features they expected such as adding to wishlist or entering coupon code.
The visual style was out-dated: the old and rigid visual style was not appealing and in accordance with the brand guide.
The narrow V occurred because the system status change was almost invisible.
After users clicked the “Add To Bag” button on the product page, a slim drop-down would appear directly under the mega menu with a confirmation message that says “Item added to cart.” However, because the drop-down had a similar dark blue background color as the mega menu, it was not visually loud enough to attract users’ attention. The narrow V occurred because the system status change was almost invisible. Users went to My Bag just because they needed to make sure that they really added the piece, which interrupted the user flow.
Design Tasks Specification
With all the observations of users’ behavior and diagnoses of the problems that hindered them from achieving their goals quickly and smoothly, we came up with solutions as follows:
Revamp My Bag page: both the contents and their placements on this page needed to be reconsidered. *More details of my redesign process will be discussed in the second half of this case study.*
Add new components: instead of showing a slim drop-down after users clicked the “Add To Bag” button, a mini-card will slide in from the right side providing a preview of My Bag. Users can see product details, go to My Bag page, and even go check out directly from this card. This component will apply to all the 3 icons on the top right of the website, i.e. My Viani, My Wishlist, and My Bag. And users can access the mini-card on whichever page across the site by simply hovering over the icons, which saves interaction cost.
In the following sections, you'll see how I translated ideas into pixels and collaborated with developers to implement the changes.
Define content requirements through internal stakeholder interview & task analysis
From the usability testing earlier, we realized that some key features were missing in the old My Bag page, such as adding a piece to the wishlist. However, in addition to the things that people say they want, there are also features that people even don’t know they want! And usually, those features can help answer the subconscious questions users may have at a specific stage of their user journey, and eventually facilitate their decision-making process.
Committing to not only delivering on our users’ needs but also anticipating their needs, I tried to reach out to internal stakeholders and see if any information from them could possibly shed light on features that hadn’t been identified yet. I scheduled a meeting with our head of marketing to know more about Virani’s business strategies. I also talked to our customer service team since they have been solving customer service tickets every day, so they would have already gathered and grouped the common information that users are looking for.
Based on feedback from both usability testing and stakeholder interviews, I listed out all the actions users can take on My Bag page, as well as the required contents for each of them.
Translate ideas into pixels
Having all the contents on My Bag page defined, it’s time to create some wireframes to translate ideas into pixels. At the same time, our copywriter was also able to start working on the required copies. I started with the mobile end first and then desktop, not only because it’s more challenging to accommodate information on smaller screens, but also because more than 70% of Virani’s online store visits come from mobile.
Make adjustments after technical screening
After completing the mid-fidelity wireframes, I had a meeting with the developers to walk them through the user flow and confirm the feasibility on the tech end. The biggest constraint for us came from the platform Shopify, where Virani’s website is built on. We rely heavily on Shopify apps to build new features, however, some of them are not fully customizable. Based on the suggestions from developers, I checked out the apps we needed to incorporate into the new My Bag page and made some changes to the wireframes.
Now, let's take a look at the final design
Work with developers
In order to make the implementation process as smooth as possible, I drafted a requirement checklist to make sure that all the details were considered. This worksheet was also where the developers and I keep track of the tweaks that needed to be done.