Visual redesign, optimized for conversion
My Role
Strategy, UX, Visual Design
Team
Gloria Lee . Product Manager
Kristen Stewart . Head of eComm
Travis Martin . Brand Designer
Tim Jorgensen . Analyst
Problem
To coincide with an upcoming visual refresh to floydhome.com, we considered how we might integrate a strategy to increase user confidence and boost CVR for our core products.
Outcome
A refresh strategy that prioritizes visual simplification to allow for more frequent A/B testing, and relies on current insights to improve user confidence and boost CVR.
Setting a Clear Direction for Visual Design
It was important that we kicked off the project with a strong vision. This sets the stage for the creative strategy that follows. Following closely to our overall brand guidelines, I took inspiration from bright, clean and brutalist experiences that felt honest, warm and organized. It was important that the refresh could be a vessel for content, be modular and highly testable.
Sorting inspiration for design into buckets to help bring the vision to life for the refresh. Taking cues from the brand ethos of Floyd, I organized the inspiration into the following themes:
Immersrive
Scale
Strategic Animation
Balance
Technical
Playful
& Modular (of course)
Identifying Areas for Improvement
In everyday language, our analyst ran an analysis of all of our pages, and in combination with qualitative insights, made the following suggestions for improvement. This is an example from one category of pages, the PDPs:
Especially on Mobile, the Hero Gallery was A/B Tested and proved a barrier to exploration. We will combine the Rendering Area and the Hero Gallery.
Affirm has a low CTR, but high CVR, because of this, we will want. to A/B Test messaging. andplacement in the refresh.
The Rendering Area, especially for more complex products, is a valuable experience for those who end up converting, so we will test more features in this space to enhance the experience, such as 360 views, in-situation dimension views and an improved scrolling interaction on mobile to allow users to see the rendering as they interact with the purchase area.
High CTR on complex products proves that we need increased usability/visibility for dimensions on top of the product rendering.
Reviews increase CVR and should be easily accessible.
Second Gallery has a low CTR and should be combined with Rendering Gallery for simplified experience.
Cross-Sells A/B Tested better higher up on page, we adjust to increase discovery and increase AOV.
Handle with Care: Using metrics to optimize design time
The Analyst performed an audit of our pages to identify which URLs had CVR and Traffic patterns that would yield risk with a major content architecture or visual redesign. Overall, this drove a desire to remain extremely lean with our design and ux hours, but also allowed us to flex where items might need some improvements.
Additionally, we organized our product types into categories to reduce redundancies in design. This defines the process for future product launches as well as informing expectations for CVR, Information Needs for users, ATC and other performance benchmarks for each product group. Products fall into one of the following groups:
Infinitely Scalable Products: Infinitely scalable in. all directions and require added storytelling at the Category, PLP and PDP levels.
Limited Scalability, Base + (Complex) Products: Items that cannot scale beyond X number wide/tall/deep, but have configurability within the constraints of the base product. Requires additional storytelling at the PLP and PDP levels, and after purchase to explain add-ons.
Simple Products: A product where a user can choose size, color. Generally lower priced and requires low cognitive overhead to understand.
Configurators or Customizers: A new group for us, likely formed of Infinitely Scalable Products and Base + Products, where an added level of customization needs to occur. High cognitive overhead - requires some research and testing ahead of launch.
Testing a new PLP Visual Design
Historically, Floyd has always used Category Pages, which are inherently difficult to navigate and impossible to filter. We refined the experience to work alongside deep storytelling experiences, but be lean enough to, at a glance, give an overview of the product category. We don’t always test visual design, but in this case, it was worth it as a brand new feature. See below how this feature set differs:
We tested two visual designs to two separate test groups to determine the amount of creative direction we could inject into the experience on Desktop. Our solution, on mobile, would remain the same regardless of the outcome. Users valued the hierarchy and playfulness of. the ’modular’ PLP (Left), but preferred the more standard experience (Right). In addition, we tested the value of different pieces of information to users. This will be tweaked for different user groups, so for someone deep in market who is visiting the site for the third time, they might see a different set of information than a user orienting themselves on a product category on a visit from an ad.
We packaged this information up into a comprehensive format to share with key stakeholders. Stay tuned as we continue this project!