Mobile Design System · iOS · Android · B2B Platform

BMW Group
My BMW App & ProFLEX

Lead UX/UI Designer across 9 interconnected digital products - from Discovery and stakeholder alignment through to Figma library governance, client presentations, and cross-functional sign-off. The role doubled as design-led business analysis: converting ambiguous product asks into validated user flows before engineering investment.

Client

BMW Group

Role

Lead UX/UI Designer · Business Analysis

Platforms

iOS · Android · Web

Timeline

Jul 2023 - Jul 2024

Overview

At BMW Group I held a dual role as UI/UX Designer and Business Analyst across 9 interconnected digital products in a regulated automotive context - a multi-persona, multi-product workflow spanning drivers, fleet managers, internal product owners, and engineering squads. Products included the My BMW App and ProFLEX, BMW's internal fleet and mobility management platform used by enterprise fleet managers across Europe.

The dual responsibility shaped how decisions were made and communicated. I ran Discovery and stakeholder interviews at the start of each cycle, translated complex business and regulatory requirements into validated design specifications, and presented decisions directly to cross-functional leadership - product managers, engineering leads, and BMW Group product owners in Munich. I owned the Figma component library across squads, facilitated Design Sprints, and led knowledge transfer for iOS HIG and Android Material 3 platform standards. The functional specifications I authored became the standard for design-to-engineering documentation across BMW Group product squads - leadership work that scaled past my direct involvement.

The craft challenge: keep consistency across two very different surfaces - a dark, premium consumer app and a data-dense, light enterprise fleet dashboard - both sharing underlying design tokens and component logic. The aesthetics matter, but they're downstream of the harder problem: aligning consumer drivers, fleet operators, and internal product squads on one shared workflow.

9

Interconnected digital products

2

Surfaces: consumer app + fleet dashboard

3

Platforms: iOS, Android, Web

1yr

Embedded in product team

Discovery for a multi-product workflow

Working across 9 connected BMW Group products required Discovery that could surface needs across consumer drivers, enterprise fleet operators, and internal product squads - all under a regulated automotive context with different review cycles per surface. Personas were never abstract; each shipping decision came back to which one owned the binding constraint.

Personas served

Discovery methods I ran

Stakeholder interviews per product cycle Design Sprints with cross-functional teams User research + component audits Requirements documentation in Confluence Usability testing on iOS + Android Accessibility testing (VoiceOver, TalkBack)

Process

End-to-end ownership - from generative research and Discovery through to interface design, stakeholder alignment, and engineering handoff. The two product contexts (consumer app + enterprise fleet dashboard) shared an underlying token system but served distinct personas with different cognitive loads, regulatory constraints, and review cycles. Coordination across PMs, engineering leads, QA, and product owners in Munich was the operating model - not the exception.

01

Discovery

Facilitated Discovery sessions with BMW product owners and market stakeholders. User research, component audits, and requirements documentation in Confluence ahead of each sprint cycle.

02

Align

Presented design strategy and functional specs to BMW Group product leadership. Design decisions aligned across PM, engineering, and QA - documented with clear rationale and edge-case coverage.

03

Design & Build

Figma component library built and governed for cross-team use. Knowledge transfer workshops with engineering on iOS HIG and Android Material 3 platform guidelines.

04

Validate

Usability sessions, accessibility testing with iOS VoiceOver and Android TalkBack, engineering handoff via Zeplin, and sign-off presentations to BMW Group stakeholders.

My BMW App - Key Screens

Dark-first design system reflecting BMW's premium automotive brand. iOS-first (Apple HIG) with Android (Material 3) and web variants maintained in parallel. Covers vehicle status, remote services, navigation, charging, and account management.

Mobile UI - Connected Car Screens

My BMW App - Screen Designs iOS · Android
9:41 ●●● ▌

Good morning,

Anna M.

AM

Your Vehicle

BMW iX3

M-TD 2841

Ready

Battery & Range

78%

≈ 312 km
Home
Map
Services
Profile
9:41 🔋 ●●●

Charging Status

78% · 1h 22m left

78% charged

Charging Point

BMW Charging · Home

11 kW AC · 14.6 kWh added

9:41 ●●● ▌

Remote Services

BMW iX3 · M-TD 2841

🔒

Lock

Secured

❄️

Climate

Set temp

📍

Locate

Map view

🔔

Horn

Signal

Last Sync

2 min ago

Home
Map
Services
Profile

Button System & Component States

Button Components - Variants & States

Button Variants

WCAG 2.5.5 - Min touch target 44×44px

All interactive elements meet WCAG AA touch target requirements

Design Token System

Three-layer token architecture: global primitives, semantic aliases, component-specific overrides. ProFLEX (light) and My BMW App (dark) share the same structure while rendering different visual outputs.

Color Tokens - Dark Theme (My BMW App)

Global Color Tokens - Dark tokens/dark.json

color.interactive

#1C69D4

color.accent

#00A8E0

surface.base

#0C0E13

surface.elevated

#1E2130

surface.border

#2E3347

text.primary

#E8EAF0

text.muted

#8892AA

semantic.success

#3ABF7A

Typography Scale - Mobile

Type Scale - iOS & Android
TokenSizeWeightLine HeightUsage
text.display32px7001.1Screen titles, hero numbers
text.title-lg24px7001.2Section headers
text.title-md20px6001.25Card titles
text.body-lg16px4001.6Primary body text
text.body-sm14px4001.55Secondary descriptions
text.caption12px5001.4Labels, hints, metadata

ProFLEX - Fleet Management Platform

BMW Group's internal enterprise platform for fleet and mobility management - used across Europe to oversee vehicles, leasing contracts, bookings, and service status. Light, data-dense UI optimised for desktop productivity.

The UX challenge was information density. Fleet managers need high-density data views, but the existing interface buried critical signals (status, contract expiry, service due) in undifferentiated table rows. The redesign prioritised status clarity and rapid scanning over decoration.

Fleet Dashboard - Redesigned

Fleet Overview - Munich Region
Export CSV + Add Vehicle

Total Fleet

248

Active

201

In Service

31

Reserved

16

VehicleDriverStatusMileageNext ServiceContract End
BMW 520d
M-AB 4412
Klaus Weber ● Active 42,180 km In 8,200 km Mar 2026
BMW iX3
M-CD 8821
Sarah Müller ● In Service 18,450 km Now Jun 2026
BMW 740i
M-GH 3305
- unassigned ● Reserved 67,920 km In 2,100 km Dec 2024 ⚠
BMW X5 xDrive
M-JK 1190
Thomas Braun ● Active 29,340 km In 15,660 km Sep 2027

Business Analysis & Functional Specifications

Alongside design, I translated stakeholder requirements into functional specs - the bridge between business need and engineering build. Authored in Confluence, referenced by developers, QA, and PM during implementation and sprint planning.

Outcomes

9
Products on one governed Figma component library - across the BMW digital ecosystem
iOS + Android
Platforms shipped under unified standards - Apple HIG · Material Design 3
AA
VoiceOver + TalkBack accessibility testing embedded into the design review cycle
Figma Zeplin Jira · Confluence iOS Human Interface Guidelines Material Design 3 Design Tokens Component Library Stakeholder Interviews Functional Specifications Design Sprints Usability Testing Accessibility Testing

Due to privacy and confidentiality policies, original design assets, screens, and client materials cannot be shared publicly. All visual elements shown in this case study are faithful recreations, not the original production designs.

More case studies

Continue exploring