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, BBG webshops—including Klarstein, Blumfeldt, and Electronic Star—struggled with user engagement and conversion rates. Users faced friction during navigation and checkout, leading to reduced satisfaction and decreased task success rates. Our objective was to systematically identify pain points, improve accessibility, reduce user drop-off, and boost both engagement and conversions.
Company
Berlin Brands Group, Berlin (DE)
Tools Used
Clarity, Whiteboard, Figma
Role
UX Designer
02- Project Goals
- Understand User Behavior: Reveal interaction patterns and user preferences through data analytics and observation.
- Identify Pain Points: Pinpoint areas where users encountered friction or confusion—especially in navigation and checkout.
- Increase Engagement: Encourage return visits and deeper site exploration.
- Boost Conversion Rates: Simplify purchase flows to enable faster decisions and reduce drop-offs.
- Improve Usability & Accessibility: Ensure compliance with WCAG guidelines and best practices (e.g., alt text, ARIA, color contrast), opening our shops to a broader audience.
03- My Role & Responsibilities
UX Designer, Accessibility Lead
- 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.
- Conducting Accessibility Audit & Implementation to review color contrast, form labels, ARIA usage, and semantic HTML.
- Design & Prototyping new layouts for testing new components.
- Communicate with the stakeholders, developers, and marketing teams regularly with updates, ensuring fixes are aligned with business and user goals.
04- Research & Discovery
Hypotheses
Hypothesis 1:
Simplifying the multi-step checkout into a more linear, one-page process will increase the overall conversion rate by at least 30%.
Hypothesis 2:
Improving search-bar visibility on mobile devices will increase product discovery and reduce frustration.
Hypothesis 3:
Addressing accessibility issues (contrast, missing alt text, form labels) will expand our user base, enhance SEO, and boost overall satisfaction.
Research Insights
Heatmaps & Clickstream Analysis:
Visual representations in Microsoft Clarity revealed high- and low-engagement zones.
UX Competitor Benchmarking:
Compared our approach to leading e-commerce sites, spotting best practices in both usability and accessibility.
Behavioral Data Analytics:
Tracked key metrics (sessions, CTR, scroll depth, engagement) via Clarity to pinpoint friction points.
A/B Experiments:
Compared design element variations (banners, product layouts) to measure engagement and conversion.
UX Surveys (Internal Employees)
In addition to public user testing, we distributed short surveys to internal staff who regularly managed or interacted with the webshops. These surveys helped:
- Validate operational pain points (e.g., content updates, repeated user questions).
- Confirm earlier findings from heatmaps and competitor benchmarks.
- Gather quick feedback on new design proposals before large-scale rollouts.
05- Accessibility Analysis
During the project, we performed an in-depth accessibility audit for each webshop. The audit revealed:
1. Color Contrast Shortfalls
Certain text elements were too close in color to their backgrounds, violating WCAG 2.1 contrast ratios.
2. Common Accessibility Errors
Missing or empty alt attributes for images, empty buttons and links without descriptive labels, broken ARIA references.
3. Accessibility Alerts
Redundant alt text, multiple images near each other with the same alternative text, inconsistent or missing fieldset tags for grouped radio buttons or checkboxes, overlapping links leading to the same destination.
4. Structural & ARIA Improvements
Emphasis on using semantic HTML first (e.g., <button> vs. div+role="button"), ensuring correct ARIA roles (role="dialog", aria-expanded, aria-live, etc.) only when needed, proper focus management for modals and dynamic content.
06- Key Findings & Pain Points
An in-depth analysis uncovered several critical issues affecting user satisfaction and task efficiency:
1. Checkout Complexity
Multi-step process contributed significantly to user drop-offs.
2. Intrusive Banners
Large mobile banners limited visibility of core site content.
3. Search Bar Visibility
Mobile search lacked prominence, hurting product discoverability.
4. Limited Marketing Areas
Minimal space for targeted promotions or offers.
5. Ineffective Assistant Widget
Low usability led to rage clicks and user frustration.
6. Confusing Product Option Selectors
Poorly placed variation selectors (size, color) created confusion and slowed purchasing.
07- Solutions & Implementations
General UX Improvements
To address these challenges, we implemented targeted improvements:
1. One-Page Checkout
Consolidated multiple steps into a single page, reducing friction and simplifying transactions.
2. User-Friendly Banners
Redesigned banners—especially on mobile—to convey essential info without dominating screen space.
3. Enhanced Search Functionality
Repositioned and visually emphasized the search bar, making product discovery more intuitive.
4. Improved Marketing Sections
Introduced well-placed marketing blocks on listing pages, homepage, and basket pages.
5. Upgraded Support Assistant
Refined widget logic to reduce confusion and rage clicks, improving overall help experience.
6. Product Option Selectors
Reorganized and clearly labeled size/color selectors, speeding up item selection.
Accessibility Fixes
1. Color Contrast Updates
Adjusted foreground/background contrast ratios to meet 4.5:1 (or 3:1 for large text) using tools like Accessible Colors.
2. Alt Text & Form Labels
Added meaningful alt text (or empty alt for decorative images), ensured all form elements had proper <label> or ARIA labeling.
3. Redundant/Empty Links
Combined or removed adjacent links pointing to the same page, provided descriptive link text for clarity (avoid “click here”).
4. Fieldset & Legend
Grouped related checkboxes/radio buttons under <fieldset> + <legend> to aid screen readers.
08- Effort and Timeline
Total Effort (415 Hrs)
- UX Competitive Analysis: 50 hrs (12%)
- A/B Testing: 120 hrs (29%)
- Heatmap & Replay Analysis: 90 hrs (21%)
- User Testing & Refinement: 80 hrs (19%)
- Accessibility Audits & Fixes: 75 hrs (18%)
Timeline
Q1 2024
Data collection, competitor analysis, and initial quick fixes.
Q2 2024
A/B testing, usability & accessibility evaluations
Q3 2024
Iterative design updates, flow optimization, and final rollout.
09- Results & Impact
These UX enhancements addressed usability issues, boosted engagement, and improved conversion rates across BBG’s webshops. Key outcomes included:
- 5% Increase in Returning Users Indicates stronger loyalty and ongoing interest.
- 20–40% Fewer JS Errors Enhanced site stability and smoother user journeys.
- 10-Point Performance Gain Faster load times + improved accessibility = better user satisfaction.
- 3–5 Additional Pages per Session Deeper exploration and higher conversion opportunities.
- 20–40 Extra Seconds Onsite More engaged and attentive users.
- 5% Reduction in Dead Clicks Users engaged more intentionally, signaling clearer interface design.
- Reduced “Empty Alt” Errors by ~90% Ensured crucial product images and marketing assets had meaningful alt text.
- Eliminated ~90% of “Broken ARIA” references Improved screen-reader compatibility and user confidence.
- Heightened Color Contrast Met or surpassed minimum WCAG 2.1 guidelines, aiding low-vision users.
- Improved Form Usability <fieldset> + <legend> approach clarified multi-option choices, reducing user confusion.
Key metrics improvements
| Metric | Before Improvements | After Improvements | Change |
|---|---|---|---|
| Returning Users | N/A (Baseline) | 5% higher | +5% |
| JavaScript Errors | Baseline Error Rate | Reduced by 20–40% | -20–40% |
| Performance Score | Baseline (e.g. 70) | +10 points (e.g. 80) | +10 points |
| Pages per Session | Baseline (e.g. 2 pages) | 3–5 pages | +1–3 pages |
| Time on Site | Baseline (e.g. 2 min) | +20–40 seconds | +20–40s |
| Dead Clicks | Baseline Click Rate | Reduced by 5% | -5% |
| Alt Text Coverage | ~70% of images had alt text | ~95% of images have meaningful alt text | +25% |
| Color Contrast Compliance | ~60% pass rate (WCAG) | ~95% pass rate | +35% |
| Broken ARIA References | 40 references | 4 references | -90% |
| Missing Fieldsets/Labels | Baseline of 50 fields | 5 fields | -90% |
10- Key Takeaways
Data-Driven Insights:
Heatmaps, analytics, and accessibility audits uncovered real user frustrations—both in general usability and barrier-free usage.
Iterative Testing:
A/B tests + usability sessions refined designs, ensuring continuous improvement.
Significant Business Impact:
Tangible metrics (engagement, performance, and inclusive design) boosted both brand reputation and potential revenue.
“Methodical testing, analytics, and user-focused changes propelled BBG’s webshops toward a more cohesive, engaging user experience, setting a foundation for future growth.”
Andrea Mecenero
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 moreOther 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