BBG Global Design System
Since 2023, GDS powers Berlin Brands Group with a scalable, cohesive design for all webshopsView case study
UX Analysis for BBG Webshops
Elevating User Experience for Greater Engagement and Conversions
01- Introduction
In 2024, a comprehensive UX analysis was conducted for BBG webshops, including Klarstein, Blumfeldt, and Electronic Star, to enhance customer engagement and improve user experience. The primary objective was to identify pain points, improve usability, and develop strategies for better user engagement and conversion rates.
Company
Berlin Brands Group, Berlin (DE)
Tools Used
Clarity, Whiteboard, Figma
Role
UX Designer
02- Problem Statement
BBG webshops were facing challenges in maintaining high user engagement and conversion rates. Users encountered difficulties during navigation and checkout processes, leading to friction and decreased task success rates.
03- My Role & Responsibilities
As a UX Designer, I was responsible for:
- Conducting UX competitive analysis to benchmark BBG's webshops against industry leaders.
- Designing and executing A/B testing experiments to optimize UI components.
- Analyzing heatmaps and user replay sessions to identify navigation patterns and friction points.
- Leading usability testing sessions and gathering feedback for iterative improvements.
- Mapping and optimizing key user flows.
04- Project Goals
1.
Understand user behavior:
Analyze how users interact with the webshops to reveal patterns and preferences
2.
Identify user pain points:
Pinpoint areas where users encountered friction or confusion
3.
Increase engagement:
Design features and interactions to encourage return visits
4.
Boost conversion rates:
Simplify purchase flows to facilitate faster decision-making
5.
Improve Usability:
Streamline the customer journey for a more intuitive experience
05- Research & Discovery
This phase focused on gathering foundational insights to understand user behaviors, preferences, and pain points. Data collection was enriched through the use of Microsoft Clarity, enabling the analysis of heatmaps and replay sessions to uncover friction points and optimize user experience.
Activities
Heatmaps and Clickstream Analysis:
Visual representations of user interactions revealed high and low engagement areas on pages, providing insights into user navigation patterns and content focus
UX Competitor Benchmarking:
Conducted benchmarking against competitors to identify best practices, trends, and potential opportunities for enhancing the user experience
Behavioral Data Analytics:
Leveraged tools such as Microsoft Clarity to track key metrics like user sessions, click-through rates (CTR), scroll depth, and engagement duration
User Testing:
Real users were observed as they interacted with the webshops, providing qualitative feedback and uncovering usability pain points
A/B Testing:
Controlled experiments compared variations of design elements to determine which versions delivered better user outcomes and conversion rates
06- Key Findings & Pain Points
An in-depth analysis revealed numerous pain points that affected user experience and interaction efficiency.
Checkout Process Complexity:
The multi-step approach led to user drop-offs. Simplifying and streamlining the checkout process emerged as a necessity for improving conversions
Intrusive Banners:
The old banner design, especially on mobile devices, occupied a significant portion of the screen, limiting users' ability to navigate comfortably
Search Bar Visibility:
The lack of prominence for the mobile search bar made it difficult for users to locate and use it effectively, negatively impacting product discoverability
Lack of Marketing Areas:
The initial shop template offered minimal dedicated space for marketing communications, restricting opportunities for targeted offers and promotions
Ineffective Assistant Widget:
The support assistant widget failed to meet user expectations, leading to frequent rage clicks and user frustration
Product Option Selection:
The poorly placed product option selectors caused user confusion, making it difficult for users to choose variations such as size or color
06- Solutions and Implementations
To address these challenges, the following improvements were made:
One-Page Checkout:
We simplified the checkout process by consolidating multiple steps into a single streamlined page, reducing friction and making transactions quicker and more straightforward for users
User-Friendly Banners:
Banners were redesigned to provide essential information without disrupting the user journey. By reducing their dominance, especially on mobile, users now enjoy a more seamless browsing experience.
Enhanced Search Functionality:
Recognizing the critical role of search, we repositioned and visually emphasized the search bar on mobile devices. This enhancement led to faster product discovery and improved user satisfaction
Improved Marketing Areas:
Previously overlooked marketing sections were strategically introduced and optimized across key pages like listings, home, and the basket. These changes allowed for effective communication of promotions without impacting page performance
Support Assistant Enhancements:
The assistant widget, was upgraded to be more intuitive and functional, drastically reducing instances of rage clicks and improving the overall help experience
Product Option Selectors:
We restructured and better positioned the product option selectors on product pages, making it clearer and more intuitive for users to choose variations like size and color, significantly reducing frustration
Notable Results
The UX analysis and subsequent improvements yielded impactful results, demonstrating the value of thoughtful design changes and user-centric enhancements:
Increased User Engagement
Returning users grew by 5%, signaling stronger customer loyalty and sustained interest in the platform
JS Error Reduction
JavaScript errors decreased by 20% to 40% across various pages, significantly enhancing platform stability and providing users with smoother browsing experiences
Boosted Performance
Accessibility and performance improvements contributed to a more seamless user journey, with site performance scores climbing by over 10 points
Enhanced Page Interaction
Users explored 3 to 5 more pages per session and spent an additional 20 to 40 seconds per visit, indicating deeper engagement and interest in the shop offerings
Advanced Event Tracking
The introduction of custom smart event tracking enabled precise monitoring of user journeys and funnel performance, empowering the team to fine-tune future marketing strategies
Reduction in Dead Clicks
Ineffective interactions decreased by 5%, showing that users were engaging more intentionally with the platform's elements
Read the article A story about UX Analysis
Explore my UX analysis of BBG webshops, where I improved checkout flow, banner placements, search functionality, product selection, and accessibility. Dive into the full story here!
Read more07- Effort and Timeline
Total Effort
UX Competitive Analysis:
50 Hrs out of 415 Hrs = 12%
A/B Testing:
120 Hrs out of 415 Hrs = 29%
Heatmap and Replay Analysis:
90 Hrs out of 415 Hrs = 21%
Heatmap and Replay Analysis:
80 Hrs out of 415 Hrs = 19%
Heatmap and Replay Analysis:
75 Hrs out of 415 Hrs = 18%
Timeline
Q1 2024
Data collection, competitive analysis, and quick fixes.
Q2 2024
A/B testing and usability evaluations.
Q3 2024
Iterative design updates and flow mapping.
08- Results & Impact
The UX analysis for BBG webshops successfully addressed critical usability issues, optimized user engagement, and boosted conversion rates. By leveraging behavioral insights, rigorous testing, and iterative improvements, the project demonstrated the transformative power of data-driven UX design. Key results included a 5% increase in returning users, 20–40% reduction in JavaScript errors, and a 10-point rise in performance scores—each measured by comparing metrics from analytics and error-tracking tools before and after the UX updates. Users also explored 3–5 more pages per session and spent 20–40 additional seconds per visit, while dead clicks declined by 5%—clear indicators of enhanced user engagement.
These findings offer valuable lessons for UX professionals seeking to create impactful user experiences. This case study underscores the importance of continuous user research and testing in building user-centric web platforms. Through collaborative efforts and strategic improvements, BBG's webshops have positioned themselves for sustained growth and customer satisfaction.
09- Key Takeaways
This project taught me valuable lessons about:
Data-Driven Insights:
Leveraging behavioral data was crucial in identifying user pain points and optimizing UX elements.
Iterative Testing:
A/B testing and usability evaluations provided valuable insights for enhancing user experiences.
Significant Business Impact:
Quantifiable improvements in engagement, task success, and conversion rates demonstrated the effectiveness of the UX initiatives.
Other Case Studies
View case study
Wheeshing
Built in 2019 as a PWA, Wheeshing transformed customer engagement and simplified tire selection for a leading tire companyView case study
Helpicam
Created in 2020, Helpicam is a PWA enabling real-time incident reporting to boost safety and efficiency across industriesView case study