What problem did it solve?
TuJu had the right features for Malaysian drivers, but reviews pointed at crowded screens, small text and controls that are hard to read while driving.
What was built?
- One glance per screen: turn, distance and lane in one banner, with toll and camera alerts stacked below it in fixed colours.
- Real data shape: OpenStreetMap with 3D buildings and three real routes from Ampang to Pavilion KL, so every layout decision met real roads.
- One design, three screens: the same components reflow from phone portrait to landscape and to an 800 by 480 CarPlay display.
Why redesign TuJu at all?
TuJu is Malaysia’s own highway navigation app, with features drivers here actually need: toll prices, LLM highway cameras, official traffic updates, R&R and SOS. The idea was right. The reviews were about how it feels to use: busy screens, small text and controls that compete for attention. This is my own unofficial concept, not linked to LLM or Prosignal Consortium, offered free as a starting point.
What does a driver need to see first?
Every screen was designed against one question: if you are driving at 90 km/h, where should your eyes land first? That gave a strict order of information:
- The next action. Turn arrow and distance, largest on screen.
- The lane. Which lane to be in, right under the turn, only when a turn is close.
- What is coming. The next toll and camera with their distance, as coloured strips.
- Everything else. Trip time, arrival and controls, at the bottom and out of the way.
Why a real map instead of mockups?
Mockups hide the hard cases. The demo runs on OpenStreetMap with 3D buildings and three real routes from Ampang to Pavilion Kuala Lumpur, routed by OSRM. Real junctions exposed problems a drawing never would: dual carriageways that pushed the route line off centre, dashed lane markings that turned crossings into noise, and street names that disappeared on dark roads. Each one was fixed on the real map.
Why does the turn banner carry the lanes?
Lane choice is where drivers miss exits on Malaysian highways. The lane arrows sit directly under the turn, with the lane to use in solid TuJu indigo and the others in soft grey, plus one short line such as “Guna lorong kanan”. It appears only within 700 metres of a turn, so the banner stays small the rest of the time.
Why show the toll before you leave?
Toll is the cost Malaysian drivers compare routes on. Every route shows its toll in ringgit next to its time, the toll follows the vehicle class you set once on the home screen, and the trip view lists the payment options at the plaza: Touch ’n Go, SmartTAG and MyRFID.
Why are alerts coloured strips?
A strip you can read by colour alone is faster than a sentence. Each type of alert keeps one colour and one icon, and shows only its name, one detail and the distance:
| Alert | Colour | What it shows |
|---|---|---|
| Toll plaza | Blue | Plaza name, price in RM, distance |
| Speed camera | Green | Camera type, speed limit, distance |
| Road works or jam | Orange | What is happening, distance |
Only the next two show at a time, so the stack never grows past the banner.
Why day mode and clay icons?
Day mode is the default because most Malaysian highway driving happens in bright sunlight, where a light map stays readable. The icons are a custom 3D clay set in one style, replacing mixed graphics, so the app reads as one product. Small controls keep plain line icons, and the position puck matches TuJu’s own 3D style.
How does the same design fit landscape and CarPlay?
The components were built to reflow, not redrawn per screen:
- Phone portrait. Banner on top, trip card at the bottom, map in between.
- Landscape. Banner, alerts and trip card become one panel on the side, and the map recentres into the open space.
- CarPlay. The same panel on an 800 by 480 car display. Malaysian cars are right-hand drive, so the dock and the guidance panel sit on the right, nearest the driver.
A production CarPlay app would draw the guidance panel and buttons with Apple’s navigation templates. The demo shows how TuJu’s content maps into that layout.
What did I leave out on purpose?
- Dashed lane lines on the map. At junctions they read as clutter, so the lane panel carries that job.
- A “then” row under every turn. It doubled the reading for little gain.
- A bottom tab bar during driving. Navigation gets the full screen.
What is real and what is sample data?
The map, roads, routes and turn instructions are real OpenStreetMap and OSRM data. Times, toll amounts, traffic notes and camera images are sample data. The concept is live to try, including CarPlay mode, and offered free to the TuJu team if it helps.