Overview
At BMW Group I held a dual role as UI/UX Designer and Business Analyst across 9 interconnected digital products — including the MyBMW App (used by millions of drivers globally) and ProFLEX, BMW's internal fleet and mobility management platform used by enterprise fleet managers across Europe.
This dual responsibility was central to how design decisions were made and communicated. I ran Discovery sessions and stakeholder interviews at the start of each product cycle, translated complex business requirements into validated design specifications, and presented design decisions directly to cross-functional leadership — including product managers, engineering leads, and BMW Group's internal product owners in Munich. I owned the Figma component library, facilitated Design Sprints, and led knowledge transfer for platform-specific guidelines across iOS, Android, and web.
The challenge was coordinating consistency across two very different product contexts: a dark-themed, premium consumer app and a data-dense, light enterprise dashboard — both sharing underlying design tokens and component logic.
9
Interconnected digital products
M+
MyBMW App global users
3
Platforms: iOS, Android, Web
2yr
Embedded in product team
Process
I owned the design process end-to-end — from generative research and Discovery sessions through to interface design, stakeholder presentations, and engineering handoff. Working across two very different product contexts required both strong cross-functional coordination and a clear design quality standard that could be applied consistently across the portfolio.
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.
MyBMW App — Key Screens
The MyBMW App design system follows a dark-first approach, reflecting BMW's premium automotive brand. Components were built iOS-first (Apple HIG-compliant) with Android (Material 3) and web variants maintained in Figma in parallel. The component library covers the full connected car experience: vehicle status, remote services, navigation, charging, and account management.
Mobile UI — Connected Car Screens
iOS · Android
Good morning,
Anna M.
Your Vehicle
BMW iX3
M-TD 2841
Battery & Range
78%
≈ 312 kmCharging Status
78% · 1h 22m left
Charging Point
BMW Charging · Home
11 kW AC · 14.6 kWh added
Remote Services
BMW iX3 · M-TD 2841
Lock
Secured
Climate
Set temp
Locate
Map view
Horn
Signal
Last Sync
2 min ago
Button System & Component States
Button Variants
WCAG 2.5.5 — Min touch target 44×44px
Design Token System
The BMW design system is built on a dark-first token architecture — reflecting the premium automotive visual language. Tokens were structured across three layers: global primitives, semantic aliases, and component-specific overrides. This layered approach allowed ProFLEX (light theme) and MyBMW App (dark theme) to share the same token structure while rendering completely different visual outputs.
Color Tokens — Dark Theme (MyBMW App)
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
| Token | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| text.display | 32px | 700 | 1.1 | Screen titles, hero numbers |
| text.title-lg | 24px | 700 | 1.2 | Section headers |
| text.title-md | 20px | 600 | 1.25 | Card titles |
| text.body-lg | 16px | 400 | 1.6 | Primary body text |
| text.body-sm | 14px | 400 | 1.55 | Secondary descriptions |
| text.caption | 12px | 500 | 1.4 | Labels, hints, metadata |
ProFLEX — Fleet Management Platform
ProFLEX is BMW Group's internal enterprise platform for fleet and mobility management, used by fleet managers across Europe to oversee hundreds of vehicles, manage leasing contracts, coordinate bookings, and monitor service status. In contrast to the MyBMW App's dark premium consumer experience, ProFLEX uses a light, data-dense UI optimised for desktop and productivity.
Fleet Dashboard — Redesigned
Total Fleet
248
Active
201
In Service
31
Reserved
16
| Vehicle | Driver | Status | Mileage | Next Service | Contract 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
As Business Analyst alongside my design role, I was responsible for translating stakeholder requirements into structured functional specifications — the bridge document between what the business needs and what engineering builds. These specs were authored in Confluence and referenced directly by developers, QA engineers, and the product owner during implementation and sprint planning.
- Conducted structured stakeholder interviews across product owners, market managers, and engineering leads in Munich and across distributed teams
- Produced functional specifications covering full user flows, edge cases, error states, empty states, and data requirements — co-authored with PM and reviewed in cross-functional sessions
- Wrote Jira epics and user stories linked directly to Figma design artifacts, ensuring full traceability from business requirement to shipped component
- Facilitated design review sessions between BMW Munich stakeholders and the distributed development team — ensuring alignment on scope, rationale, and exceptions before implementation began
- Maintained a decision log documenting design rationale and rejected alternatives — used for onboarding new team members and resolving future design questions
- Contributed to sprint retrospectives and planning sessions as a dual-role voice for both design quality and requirements clarity
Outcomes
- Shipped multiple MyBMW App releases across iOS and Android — features signed off through structured stakeholder review and client-facing design presentations to BMW Group leadership
- Redesigned the ProFLEX fleet dashboard through a focused Design Sprint, surfacing critical status signals and reducing time-on-task for core fleet management workflows
- Built and governed a Figma component library adopted across all 9 products in the ecosystem, with a governance process that maintained consistent quality as the team grew
- Functional specifications authored during the engagement became the team standard for design-to-engineering documentation across BMW Group product squads
- Led knowledge transfer workshops that embedded iOS Human Interface Guidelines and Android Material 3 platform standards into the broader design and engineering team's practice
- Accessibility testing with iOS VoiceOver and Android TalkBack integrated as a standard stage of the design review cycle — ensuring WCAG compliance across connected car features
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.