Improving United By Blue’s Product Listing
My team and I were tasked with improving site conversions throughout the checkout process before the coming holiday season. I identified we needed to prioritize checkout and product listings as those were our two major sources for conversions and they had the most issues.
From initial research, I discovered that multiple teams had been adding content to the product listings without communicating to others, attempting to optimize for their own goals. The result was messy, confusing, and lacking focus.
Role
Lead Designer
Team
Designer
Strategist
Engineers x 2
Skills
Product Design, UX/UI
User Research
QA + Testing
About
United By Blue was an international ecommerce startup that specialized in sustainable outdoor apparel and accessories. This project allowed me to push processes for improving cross-departmental communication and making the case for mobile-first design which I spoke about here.
Previous Version
UX Challenges
While Shopify CMS offered us a multitude of benefits, we were bound by the limitations of their framework and what we could extract using their Liquid code. Additionally, budgeting was a significant factor for United By Blue, a nascent startup. As we lacked in-house developers and relied on freelancers, we had to be mindful of any potential custom features that would require extensive development hours.
The absence of collaboration and communication among team members hindered our efforts, ultimately impacting the customer experience. It was crucial to not only bring everyone on the same page but also to foster collective brainstorming and idea generation to ensure the project's success was a joint endeavor. Finally, our leadership, actively involved in many projects, often held strong opinions that sometimes clashed with our research and testing, creating decision bottlenecks.
Research Methodologies
User research played a pivotal role in designing an effective product listing page, our key conversion point. Every modification underwent rigorous evaluation to ensure it positively impacted conversions and sales. By understanding user behavior and preferences, we optimized the listing for enhanced engagement and purchase intent. This user-centric approach ensured data-driven design decisions aligned with our business growth goals.
Customer Journey Analysis
Stakeholder & Customer Interviews
Workshops
Data Analysis
Competitor Benchmarking
Internal Process Audit
Collaborative Ideation
From the workshops and research, product and I identified two aspects that customers were looking for and that they felt explained and justified the purchase of the product:
United By Blue took great pains to source all sustainable textiles, manufacture in responsible factories, and their mission to clean up a pound of trash from waterways for every product sold was the backbone to the whole business. But this was currently not communicated at all, or very poorly.
Since United By Blue only had two stores (one in Philadelphia and the other in NYC) and a select amount of pieces in outdoor retailers like REI, there was virtually no place to try on clothes or see the products in person. So information about the extended and easy to use return policy as well as detailed information about sizing and fit was critical.
Using those three pieces of content (sustainability, return policy, and sizing and fit) as our design compass, we further identified three key areas for design improvement.
The details section — it had two measly tabs, one of which was a bulk amount of just plain text.
The layout of the product image and gallery. We had beautiful photography, how best can we show it off.
Overall usability and readability. Type color was too light and hard to read, and there wasn’t a great type hierarchy in place.
The Solution
The new design reduced clutter and prioritized customers needs while portraying unique differentiators for United By Blue.
This included adding reviews, taxonomy, and updated product titles; pulling color and size out of dropdowns; and making the add to cart button more prominent. The content of the details section was moved from tabs to drawers, allowing users to see all of the information at once. The information was also organized into four buckets: a short description, fit information, care and content details, and exchange and return policy details.
Afterwards, I set up a governance document on who, how, and when products can be updated and the entire internal team adhered to the new guidelines, avoiding any future missteps.
Cross-Platform Adoption
We used the website design as a beta for the app which we created and launched in our next quarter, using all of our takeaways from the responsive view to make the best customer experience on the app.
Results
23%
increase in conversion rates
$300k
increase in holiday sales
30%
decrease in bounce rates
100%
governance adoption
Summary of Role
Led all design on this team while overseeing design work for other ongoing projects.
Led cross-departmental discovery workshops.
Led meetings with leadership to discuss progress and solutions.
Conducted qualitative and quantitative research alongside product.
Contributed to the overall strategy, scoping, and timeline for the project.
Ensured quality by leading a robust visual and functional QA, partnering with the engineering team
Worked cross-functionally with the Apparel & Accessories teams to ensure our work was in sync, as they were finalizing fits and manufacturing for the next season. This required significant collaboration to ensure we would have all necessary information, guaranteeing that new updates wouldn't quickly become obsolete and would remain future-proof for upcoming seasons.
I collaborated closely with our engineers for the entirety of the project, ensuring alignment through regular updates in our cadence document and the use of Loom recordings.