BBG UX Analysis
Since 2024, the UX analysis of BBG webshops has enhanced usability, streamlined navigation, and improved accessibility, creating a more seamless shopping experience.View case study
BBG Global Design System
Unifying webshops to enhance efficiency and consistency
01- Introduction
When I joined Berlin Brands Group in Berlin, I helped spearhead a strategic initiative called the Global Design System (GDS). More than just a rebranding exercise, the GDS aimed to unify multiple webshops under a single, scalable design foundation while preserving each brand’s unique identity. By centralizing essential assets, we planned to increase efficiency, ensure consistency, and enable faster scaling for future brands.
Company
Berlin Brands Group, Berlin (DE)
Tools Used
Figma, Jira, Asana, GitHub, SCSS, JSON, Confluence
Role
UI/UX Designer
Product Owner
02- Problem Statement
Despite having multiple webshops—Klarstein, Blumfeldt, Electronic Star, among others—each site followed its own design principles. This led to:
- High development costs: Every new feature was built separately for each brand.
- Maintenance Bottlenecks: Updates were time-consuming and lacked consistency.
- Fragmented Brand Experience: Inconsistencies made it challenging to uphold a cohesive look and feel.
- Inefficient Checkout: A 5-step checkout caused high cart abandonment rates.
Before & After Snapshot
- Before: Multiple standalone design files, scattered brand elements, and a 5-click checkout.
- After: Centralized component libraries, consistent branding across 23 shops, and a simplified one-page checkout.
Goals & Objectives
Goal 1:
Reduce cart abandonment from 60% to 30%.
Goal 2:
Provide a standardized design system that cuts dev time for new brands by 30%.
Goal 3:
Improve brand consistency with shared color palettes, typography, and UI components.
03- My Role & Responsibilities
UI/UX Designer
- Design System Development: Built and maintained the Figma-based system architecture, structuring color shades, typography, and reusable UI components.
- Prototyping & Testing: Crafted high-fidelity prototypes; ran usability tests to validate design decisions.
Product Owner
- Project Alignment: Mapped the GDS scope, defined the roadmap, and prioritized tasks using MoSCoW.
- Team Collaboration: Coordinated with developers, marketing, and product managers for smooth handoffs.
- Stakeholder Communication: Kept managers and shop owners updated on timelines, requirements, and design rationale.
04- Research & Discovery
Hypotheses
Hypothesis 1:
If we reduce the checkout process from 5 steps to 1, cart abandonment will drop by 20% or more.
Hypothesis 2:
If we adopt a single source of truth (e.g., shared components and tokens), we can lower dev overhead by 20–30% across all shops.
Hypothesis 3:
Aligning visual elements (colors, typography) will boost brand recognition and user trust, reflected in improved returning-user rates.
Research Insights
Stakeholder Interviews:
Identified key pain points in brand consistency and development speed.
Competitor Analysis:
Revealed best practices for e-commerce checkouts, design systems, and performance optimization.
UX Audits:
Confirmed that cart abandonment spiked during multi-step checkouts.
UX Surveys:
Validated earlier findings from stakeholder interviews.
MoSCoW Method
Must-Haves (Essential for MVP):
Unified component library, one-page checkout, thorough documentation, sticky sidebar on product pages, repositioned badges.
Should-Haves (Important but not critical):
SEO-optimized content structure, improved product carousels, Hero banner with 3 key promotions.
Could-Haves (Nice to include if time permits):
Dark mode UI, localization for emerging markets, installment payments, pickup point delivery options, accessibility refinements, live chat support widget.
Won’t-Haves (Not for this version but maybe later):
AR product previews, AI-driven personalization, advanced loyalty program integration (future consideration).
SWOT Analysis
Strengths:
Wide product range, loyal customer base, centralized GDS, faster handoff.
Weaknesses:
Conflicting brand styles, outdated checkout, limited personalization, missing UX features.
Opportunities:
Faster brand rollout, localization & flexibility, accessibility & UX trends, future personalization.
Threats:
Lean competitors, high UX expectations, tech debt risks, localization pressure.
Project Roadmap and Timeline
1. Research & Planning
Duration: 3 months
Competitor analysis, stakeholder interviews, scoping the GDS
2. Design & Development
Duration: 6 months
Building the component library, testing new website templates
3. Testing & Rollout
Duration: 3 months
Implementing GDS across Klarstein, Blumfeldt, and Electronic Star
05- Design Process
GDS as a Blueprint
We structured the Figma-based design system into four foundational layers:
1. Primitives Library:
Core color shade variables shared across all brands.
2. Brand Foundations:
Unique colors, typography, and icons tailored to Klarstein, Blumfeldt, and Electronic Star.
3. Component Library:
A centralized set of reusable UI components for cohesive product layouts.
4. Website Templates:
Quick-start templates developers could adapt for future brands.
Checkout Process Optimization
We replaced the 5-click checkout with a single-page flow, reducing friction and user drop-off.
- Before: 5-step checkout
- After: 1-page checkout
See the related UX Analysis for BBG Webshops case study for deeper insights.
Design Tokens
A critical step was exporting design tokens (colors, typography) from Figma into JSON, pushing them to GitHub, and integrating them into SCSS. This approach guaranteed automatic updates whenever a color or style changed in Figma—minimizing manual coding errors and accelerating front-end development.
1. Exporting design tokens
From Figma into JSON files
2. Storing them in a GitHub repository
Where developers could easily access them
3. Integrating tokens into the SCSS web shop
Enabling automatic updates and reducing manual work
06- Key Features and Improvements
- Hero Banner with 3 Promotions: Boosted conversions by showcasing top deals.
- Dynamic Recommendation Carousels: Positioned higher on the page for increased visibility.
- Compacted SEO Content: Improved load speeds and readability.
- Sticky Sidebar on Product Pages: Streamlined navigation and boosted add-to-cart actions.
- Repositioned Badges: Emphasized unique selling points near the “Add to Cart” button.
- One-Page Checkout: Reduced cart abandonment through fewer clicks.
07- Results & Impact
GDS was not merely a redesign—it revolutionized how we handle e-commerce across 23 international webshops. By consolidating design assets, we trimmed design-to-development handoff from 10 days to 7, a 30% reduction measured by sprint data (before vs. after GDS). This holistic foundation cut costs, boosted consistency, and empowered our teams to scale faster and innovate confidently.
Design-to-development handoff improvements
| Sprint | Pre-GDS (days) | Post-GDS (days) | Improvement |
|---|---|---|---|
| Sprint 1 | 10 | - | - |
| Sprint 2 | 9 | - | - |
| Sprint 3 | 8 | - | - |
| Sprint 4 | - | 7 | 30% (approx.) |
Future Focus
We plan to continuously evolve the GDS by integrating emerging UX trends, refining accessibility, and exploring functionalities like installment payments and pickup point deliveries to further optimize the user journey.
08- Key Takeaways
Modular Design Approach:
A flexible structure met various branding requirements while maintaining efficiency.
Cross-Functional Collaboration:
Regular alignment and transparent documentation bridged the gap between design, development, and marketing.
Design Token Implementation:
Translating designs directly into code minimized errors and maintained visual consistency across all webshops.
“Working as both a UI/UX Designer and Product Owner gave me a 360° perspective—streamlining the design process while ensuring business and technical alignment across 23 international brands.”
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