Information Card Layout
The card should include a concise title at the top, such as “System Status Overview”. Detailed system information can sit beneath it in a smaller or collapsed format to save space.
BMW — ACCOUNT / DEALER CONNECT
Account Creation & Mapping
Designing a clear, resilient account experience for BMW dealer users, with backend status, dynamic messaging and error handling built into the flow.
Target User
BMW dealership users working with complex sales and customer-account workflows.
Design Process
Defining the problem & solution · User flows & journey · Low-fi · Hi-fi · Working prototypes
Project Context
Automotive / B2B · BMW ZA IT Hub · International collaboration
Methods / Skills
User research · Requirements synthesis · Figma · Agile · International collaboration · Usability testing
Objectives
Workflow – Translate complex B2B workflows into an intuitive account experience.
Resilience – Make backend states and errors understandable without blocking the user unnecessarily.
Delivery – Balance user needs, technical feasibility and design fidelity.
03 · PROBLEM STATEMENT
Making backend complexity understandable
The account journey needed to accommodate several backend conditions without leaving dealers uncertain about what was happening or what to do next.
LOOKING AT
looking at integrating APPN/MAPPING into the application for dealers
→
THE UI
Ensure the UI can cater for dynamic messages and error handling
→
THE TOOL
The tool should not confuse the user or block them when any backend system is not responsive
→
BECAUSE
The user might not know what has gone wrong if the interface is unclear
→
WHAT DOES THIS FEEL LIKE?
Frustrated
04 · PROCESS — BMW ACCOUNT
Mapping the account experience
The process artefact below captures the working flow used to explore account creation, mapping and the different backend-driven outcomes.
05 · LOW-FIDELITY EXPLORATION
Designing the system status card
A lightweight status card gives the dealer enough information to understand the current state while keeping the primary workflow simple.
Traffic Light Signal Bar
- Red — critical issue or downtime.
- Yellow — warning or non-critical issue.
- Green — systems are functioning as expected.
System Status Integration
The signal colour dynamically updates from backend checks. This can be automated through an API or backend service that monitors relevant systems and returns the current status.
Visual Hierarchy
The signal bar should be noticeable without dominating the card. It communicates status at a glance and sits at the bottom of the card so it does not interfere with the information above.
Optional Design Elements
Hover states or tooltips can provide additional context, such as “Server 1 Down”. Small service icons and a short explanation beneath the status can help users understand what the current colour means and what action is required.
CTA DECISION
I chose a simple CTA that is always enabled. If the user is unable to proceed, they can still click the button, and a relevant message will inform them of the issue.
System Status Overview
InformationCurrent statusSystem message
Original low-fi reference
Success-state reference
Outcome / Impact
USER
Clearer feedback when backend services are unavailable or delayed.
BUSINESS
A more resilient dealer workflow that reduces uncertainty around account actions.
DESIGN
A reusable status-card pattern for communicating system health consistently.