01DRIVE MODE↗
Navigation18 min
12.4 km
Navigation
04Mobility
MOBILITY / UICarluex — Next-gen in-car infotainment
An automotive interface exploration built around glanceability, hierarchy and a cohesive visual language.
●●●PRODUCT / EXPERIENCE
09:41HOME24°
↗
ARRIVE 10:1218 min12.4 km · Main Boulevard
♫Media
⌖Navigation
☼Climate
◉Vehicle
01Approved product mockup / presentation visualScroll to explore ↓
INTERFACE STUDY
Designed as a system.
Supporting interface moments turn the hero screen into a product story: hierarchy, states and interaction patterns are shown as connected parts of one experience.
02MEDIA↗
Now playingNight Drive
09:41
Now playing
03CONTEXT↗
Weather 24°Next turn
Vehicle status
Weather 24°
THE CONTEXT
Start with the why.
Carluex is publicly listed in Tayyaba’s Behance work as a next-generation in-car infotainment UI/UX project. The strongest design lens is therefore the constraint: the interface must work while attention is divided.
01 / DISCOVERY
What the experience revealed.
Before shaping the interface, the work is framed around the user's mental model, moments of friction and the opportunities that can change the journey.
KEY OBSERVATIONS
01
Glanceability matters more than information density while driving.
02
Controls should adapt to context and remain predictable.
03
Navigation, media and vehicle status compete for limited attention.
PAIN POINTS
×
Dense dashboard hierarchy
×
Small or inconsistent targets
×
OPPORTUNITIESContext switching between vehicle tasks
↗
Prioritize one primary task per state
↗
Use large glanceable modules
↗
Keep secondary controls consistent and discoverable
02 / INFORMATION ARCHITECTURE
Structure before surface.
The interface follows a clear information hierarchy so visual polish supports the product model rather than hiding it.
01Home→
02Navigation→
03Media→
04Vehicle→
05Climate→
06Settings
THE PROBLEM
In a vehicle, the interface competes with the road, passengers and physical controls. Dense dashboards, tiny targets and decorative interactions can create unnecessary cognitive load.
DESIGN HYPOTHESIS
If the interface prioritizes glanceable hierarchy, context-specific controls and consistent interaction behavior, users can access more capability without the screen feeling busy.
WHO IT SERVESDrivers and passengers using navigation, media, vehicle information and connected controls in an in-car environment.
03 / USER JOURNEYFrom first intent
From first intent
to useful outcome.
The journey is intentionally expressed as a sequence of decisions, not a list of screens. This keeps the case study about behavior and product thinking.
01Glance at current stateentry
02Choose a contextdecision
03Perform the primary actiondecision
04Confirm without losing orientationdecision
05Return to the driving contextoutcome
04 / PROCESS
How the work moved forward.
01
01 — Context
Define what deserves attention while driving versus what can wait until the vehicle is stationary.
Context mapPriority matrixSafety assumptions
02
02 — Hierarchy
Create large, predictable information zones and reduce competing emphasis.
Layout systemControl groupsNavigation model
03
03 — Interaction
Prototype transitions and states that preserve orientation as the driver moves between contexts.
Interaction modelMotion statesPrototype
04
04 — Polish
Apply a premium visual language while protecting legibility, contrast and consistency.
Visual systemComponent statesUI polish
05 / DESIGN DECISIONS
Small choices create the experience.
These are the decisions that make the final interface feel coherent rather than merely polished.
01
Keep primary driving information persistent.
02
Group controls by context instead of feature inventory.
03
Use motion to explain state change, not to decorate.
04
Design large targets and clear return paths.
06 / UI SYSTEM
A visual language that scales.
Instead of designing each screen independently, repeated behavior becomes a system. That gives future screens the same rhythm and makes implementation more predictable.
COMPONENTS
01Media player↗
02Navigation card↗
03Vehicle status↗
04Context controls↗
05Glanceable alerts↗
Designed around the decision.
07 / OUTCOME
The project becomes a strong visual proof point for systems thinking: a coherent interface language across a constrained, high-attention environment.
Project framing is based on the publicly listed Behance project title/context; no performance claims are inferred.