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, one of the most ambitious projects I worked on was the Global Design System (GDS). The goal was to create a unified template that could be applied across multiple webshops, starting with Klarstein, Blumfeldt, and Electronic Star, and eventually scale to future brands. This project wasn't just about making things look pretty; it was about efficiency, consistency, and scalability, ensuring that all our brands shared a common foundation while maintaining their unique identities.
Company
Berlin Brands Group, Berlin (DE)
Tools Used
Figma, Jira, Asana, GitHub, SCSS, JSON, Confluence
Role
UI/UX Designer
Product Owner
02- Problem Statement
Our company had multiple webshops, each following different design principles and structures. The challenge was to unify these disparate designs under a single, scalable system, allowing us to launch new brands faster and streamline collaboration between teams. This inconsistency led to:
- High development costs, as every new feature had to be built separately for each brand
- Inefficiencies in updates and maintenance, causing delays and bottlenecks
- Brand inconsistencies, making it difficult to create a unified user experience across our portfolio
- The checkout process was outdated, spanning five long steps, which contributed to high cart abandonment rates.
03- My Role & Responsibilities
As a UI/UX Designer and Product Owner on the GDS project, my key responsibilities included:
- Design System Development: Leading the creation and structuring of the Figma-based design system to ensure scalability and consistency.
- Product Ownership: Ensuring the project stayed aligned with business objectives, prioritizing feature development, and facilitating cross-team collaboration.
- Collaboration with Developers: Bridging the gap between design and development by providing clear guidelines, design tokens, and component specifications.
- Stakeholder Communication: Regularly aligning with project managers, shop management, and marketing teams to incorporate business requirements.
- Prototyping and Testing: Developing high-fidelity prototypes and conducting usability tests to validate design decisions.
- Documentation: Maintaining comprehensive documentation in Confluence to facilitate onboarding and future scalability.
- Project Tracking with Jira and Asana: Collaborating with the development team using Jira to track tasks, manage sprints, and ensure smooth handoff of design deliverables. Additionally, leveraging Asana to track work in progress with the marketing team and maintain alignment across departments.
04- Research & Discovery
Project Roadmap and Timeline
As the Product Owner, I defined the project roadmap, aligning key stakeholders and ensuring timely execution of each phase. The project spanned over a year, with clearly defined milestones. Despite facing a few delays, we successfully rolled out the new templates across all brands, setting the stage for future expansions.
1.
Research & Planning (3 months)
Competitor analysis, stakeholder interviews, and defining the GDS scope
2.
Design & Development (6 months)
Creating the foundation, building the component library, and testing website templates
3.
Testing & Rollout (3 months)
Implementing across Klarstein, Blumfeldt, and Electronic Star with continuous iterations
MoSCoW Method
To manage priorities effectively, I applied the MoSCoW method to categorize design decisions:
Must-Haves (Essential for MVP):
- Unified component library across all brands
- One-page checkout to reduce abandonment
- Comprehensive documentation for developers and designers
Should-Haves (Important but not critical):
- SEO-optimized content structure
- Enhanced product recommendation carousels
Could-Haves (Nice to include if time permits):
- Dark mode UI option
- Localization support for emerging markets
Won’t-Haves (Not for this version but maybe later):
- Augmented reality (AR) product previews
- AI-driven personalization features
Research Insights
During the discovery phase, we conducted:
Stakeholder interviews to understand business needs
Competitor analysis to identify industry best practices
UX audits to pinpoint pain points and areas of improvement
05- Design Process
The Blueprint
We envisioned GDS as a blueprint, a comprehensive design system that would serve as a reusable template for every future brand. This meant developing a complex Figma-based design system, which was structured into multiple files and synchronized across teams.
Design System Architecture
To ensure a robust and scalable system, I structured the design system into different foundational layers. Each of these elements worked in harmony to deliver a single source of truth, ensuring all stakeholders – from designers to developers – were aligned.
Primitives Library (Color Shade Variables)
This served as the fundamental layer, containing essential color shade variables that formed the base for all brand-specific foundations
Brand Foundations (Colors, Typography, Icons)
Klarstein (KDS), Blumfeldt (BDS), and Electronic Star (EDS) had their unique brand foundations based on the primitives
Component Library
A centralized set of reusable UI components, ensuring consistency across all webshops
Website Templates
Predefined templates that developers could use to speed up the website-building process
Checkout Process Optimization
One of the biggest pain points was the 5-click long checkout process, which we optimized by introducing a one-page checkout. This allowed users to complete their purchases faster, improving conversion rates and reducing abandonment. For a deeper look into UX improvements, check out the case study titled UX Analysis for BBG Webshops.
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 moreStreamlining Development with Design Tokens
One of the most critical aspects of the project was implementing design tokens, which allowed us to translate design decisions (such as colors and typography) directly into code. This process ensured that any design update would seamlessly flow into the development environment. Here's how it worked:
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
Some of the most notable improvements compared to previous templates include:
- Hero Banner with 3 Promotions: Increasing user engagement and boosting conversions.
- Dynamic Recommendation Carousels: Moved up to maximize visibility and conversion.
- Compacted SEO Content: Improved page load speed and readability.
- New Product Page Layout: Introduced a sticky sidebar for better UX.
- Repositioned Badges: Highlighting key selling points near the "Add to Cart" button.
- One-Page Checkout: Streamlining the process to reduce cart abandonment.
07- Results & Impact
GDS was more than just a design project; it was a strategic initiative that transformed how our company approaches e-commerce. By building a solid foundation, we not only saved time and resources but also empowered our teams to scale efficiently and innovate with confidence.
Our future focus is to continuously maintain and evolve the GDS, incorporating emerging UX trends and enhancing customer satisfaction through ongoing analysis, user testing, and accessibility improvements. We will also explore adding new functionalities such as installment payments and pickup point deliveries to further enrich the shopping experience.
08- Key Takeaways
This project taught me valuable lessons about:
Modular Design Approach:
Creating a flexible design system helped us accommodate diverse brand needs efficiently.
Cross-Functional Collaboration:
Effective communication and documentation aligned different teams towards a shared goal.
Design Token Implementation:
Leveraging design tokens streamlined the transition from design to development, ensuring consistency.
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
Hire me!
Are you looking for an expert UI Designer? Available for working remotely or in-house.
Contact me