BaubleBar
BaubleBar, the fast-fashion jewelry e-retailer, was on a mission to bring affordable, fashionable accessories to young, professional women everywhere. After releasing dozens of new styles every day, every week, for four years, the site needed an intense redesign and reorganization.
Working strategically for a year, my team and I made huge, impactful and industry-leading design changes to the BaubleBar digital product. We focused on user needs, mobile optimization and simplicity of layout and information to optimize each feature. As a result, the multi-phase design revamp made significant impacts on business goals, increasing engagement time exponentially and boosting conversion rates up to 60%.
In one year:
Launched the BaubleBar iOS app. Redesigned multiple versions of the navigation, homepage and product detail pages. Utilized a 2-4 person team to phase in other usability and functionality updates.
This required:
Conducting more than 60 in-person user-testing sessions. Collecting hundreds of digital surveys responses, in multiple phases. Making hundreds, if not thousands, of sketches, wireframes, mocks and interactive prototypes.
While also:
Conducting all competitive research. Creating all wireframes. Developing initial designs for all future features, such as category pages, personalized product pages and checkout flow.
A deep dive into our process
Redesigning the product detail pages
The BaubleBar product team’s main goal was producing a user-centric feature that could satisfy and exceed business expectations. To do so, I implemented a fluid, 18-step process to use as a guide for tackling any project. (If you’re interested, you can download that process document here.) Developing any successful feature would require acknowledging users’ pain points, doing exhaustive research and formalizing goals. From there, we’d have to concept, validate and refine until we reached the undisputable final result.
The Old Design
Issues from stakeholders
Although functional, the original product detail pages featured a series of quirks that proved problematic for users and stakeholders alike. The ‘Save to my hearts’ CTA was larger than ‘Add to bag.’ Important information was hidden, often in unexpected places. Mobile pages almost never had relevant information above the fold. All of this led to consistent confusion, increased outreach to customer service and, at worst, abandonment. To be successful, the redesign had to tackle hierarchy and communication in a big way.
Collecting user feedback
60 users surveyed
“I often browse BaubleBar when on my phone, but I hate that I can never zoom in to anything like on my laptop.”
“Picking a color is annoying, especially when there are a bunch of similar colors, like teal, seafoam and aquamarine.”
“I like to see pictures of real people wearing the jewelry, not just a model. Maybe that's just me though.”
“There are more photos? Where? Oh, I didn't even know there were ever more than four on these!”
Users overwhelmingly wanted better, larger imagery, as well as easier access to real-world photos to help imagine how they’d look wearing items. Once they’d gotten an initial feel for products, users would choose a color or size and add the product to their bag, usually without much care to price, product fabrication or shipping times. We determined this was often because, even though they determined some of that to be critical information for their purchasing decisions, the information wasn’t where they expected to see it, so it wasn’t top-of-mind until they were already past it.
Competitive Analysis
During a competitive analysis, we look for a few things: Who is doing what (specifically well or poorly)? Are there any new and/or old trends? Is anyone doing anything unique and doing it successfully? Are any cool features mobile-optimized? Most importantly, how do we differentiate ourselves? After reviewing several dozen sites, the overarching themes (which we’d also been hearing from our users) were a desire for:
1
Large, compelling and informative imagery, always with the ability to zoom in for detail
2
Clear calls to action with important information displayed in expected locations
3
Editorial substance to give users the feeling that an item is desirable, necessary and lifestyle-relevant
4
Easy access to related products, either to pair with their item or to purchase instead
Rapid conceptual wireframing and prototyping
First Round of Design
After experimenting with the prototypes, confirming feasibility with development and conducting some internal testing, we resolved on one approach that brought the best of each prototype together. With a focus on larger images, a clear path to purchase and secondary information organized into sections, the page started to look dramatically better. Actual color swatches were not immediately possible, from a development standpoint, but we decided we should at least break out colors into individual buttons that not only changed the product imagery, but also changed the item details and pricing. This transformed the pages into product hubs, and we no longer needed to break out very similar products onto different pages, just to accommodate simple differences like variances in price, manufacturer or availability. That eliminated a huge logistical burden for our online merchandising team.
First round of moderated user-testing feedback
Six users tested
“I love these big pics of people wearing it. Super useful if I was looking to buy this.”
“Picking a color is annoying, especially when there are a bunch of similar colors, like teal, seafoam and aquamarine.”
“No, I wouldn't use those share buttons. Why would I want other people to have my style?!”
“I like these color buttons. That old dropdown thing was annoying.”
The overall reception for the new designs was positive and consistent. But there were still more than a few little quirks to work out. The large product image, along with its ample amounts of internal whitespace, was pushing additional content too far down to be seen, or even to let people know more information was available. Items like the Fit Guide and suggested products were confirmed as necessary, but the common consensus was that they needed higher elevation and more prominence. The social sharing buttons? Everyone wanted those sent back to 2010.
Second Round of Design
Second round of moderated user-testing feedback
Five users tested
“It's nice that it tells me how fast the ring will ship before I even add it to my bag.”
“Seems weird to have the material info below the photo. It's not bad, just weird.”
“Yeah, I like the Fit Guide where it is, but what's in it is not what I was expecting.”
“I LOVE when there are other products to click on so I can just keep browsing.”
Post-testing, it was apparent things were moving in the right direction. With a few exceptions, most everything was approved and in its proper place, ready for UI refinement. The materials and dimension information still needed to find a home, but users were overwhelmingly positive about the new direction, specifically on tablet and mobile, which accounted for over 70% of our traffic.
The final product
Moving materials and measurements below ‘Add to bag’ proved to be the optimal placement solution, since it’s obviously accessible without getting between the user and their choices before purchasing.
Beyond looking far better in both style and composition, the new page designs could be loaded in one-third of the original time and could be completely responsive, from the smallest phone to the largest 4K display. Together, these changes alone accounted for a conversion increase of up to 10% across all device types. And that’s just the result for current users, not including the newly converted.