Thread by @ErnestAtHome

Got frustrated lately about how the transit map in KL is now inaccurate and even misinforming for many unfamiliar with the system

So here is a modified map of the Klang Valley transit map, which accurately shows the current service of the Ampang/Sri Petaling Lines and others:

You can grab a high-resolution map download here: drive.google.com/file/d/1MREkAu…

A thread explaining the design process starts from here:

Before you proceed, if you have read through the map, compared to the existing KL transit map, do you find the map to be improved, much more cluttered, or did not change your experience viewing the map compared to before?

If you think otherwise, do comment!

First, a preface -

I wanted to produce a map that adheres with these principles:
- accurate at publication and easily understood
- makes minimal changes to the existing map
- minimise the introduction of new elements to fulfil the first principle

Hence, the map doesn’t:
1. Show the names and service patterns of all LRT replacement buses, as that adds clutter and bus services can change
2. Change the structure of the map - while the current map isn’t well designed, changing the form was not the focus - only changing errors

With that out of the way, let’s discuss some of the major challenges I had editing the map, starting with the first one: how should non-active and special lines be shown on the map?

Precedence dictates that dashed lines means ‘not active’ but that took a paragraph to explain

@JugCerovic’s then method of illustrating planned and upcoming lines by fading them struck me as a good idea - it can be easily understood to be a line that isn’t active

This is very much seen in the space of UX, where a faded button nowadays represent a “disabled” state

There was a phase where I struggled the choice between illustrating the ‘faded’ idea or just got rid of the lines that didn’t exist entirely (eg LRT3)

But this will break principle 2, and will disrupt the perception of the map to existing viewers, so the first option was chosen

Lines under construction? Faded.
Lines suspended? Faded.
Lines shut down? Faded.
Problem? Solved.
Hotel? Trivago

Now we have addressed how LRT3, KTM Skypark and Bandaraya-Sentul Timur should be shown, how should the masjid jamek-hang tuah be depicted?

I experimented with making the line a dashed line to illustrate a ‘special service’ with various lengths

Eventually, I settled on a length I liked (its 7pt), and started experimenting the colours of the dashes.

I initially chose yellow to represent ‘warning’ but that had poor contrast with AGL, then switched to black, but that had poor contrast with SPL. Changing to white works tho

A bit of feedback and the dashed line was later changed to be a dashed line enclosed in the colour line itself

This made it a bit more visible while viewed from a distance, while also distancing from the existing precedence of using dashes to denote ‘under construction’

To wrap up, we have now created two new lines that requires the modification of the map legend to explain the functions of the lines.

Here, you can also see KTM Skypark line is now marked as ‘suspended’, reflecting its current status since February

The legend includes the illustration of a grey line and a faded line, which looks confusing when looked together as they are both in similar shades of grey

They say old is gold and the previous way of showing connecting stations is indeed gold than a grey, squiggly line

Moving on: how do we communicate about the service disruption between masjid jamek & sentul timur?

Since I chose not to illustrate the shuttle bus routes, showing which stations where one can board the shuttle bus serves best

This is what was similarly done in London before

As its established that yellow would be the theme of ‘warning’ (the difference with MRT2’s yellow is that the ‘warning; yellow is more luminescent), next part is to determine the colour of the bus icon

Pure white or blacks didn’t look good but the 75% black looks a bit nicer

Since we want to establish a higher order of service hierarchy given the importance of the information, the size of the icons are 25% larger than the existing icons

To determine the distance between the icons and the station text names, I had to measure them and this is very annoying - it seems that no one icon has the same spacing distance from the next one!

the widths varied from 0.77 to 0.81mm, so I settled on 0.75mm as a safe choice

There are some instances where the icons could not be there as it is affecting the space of the text of other stations, so it had to be stacked vertically.

Interestingly, most station icons are spaced approximately 0.83mm vertically, so I went with that

The next undertaking is to provide the context for Ampang/Sri Petaling Line’s dysfunction.

For this, an infobox was created to allow for commuters to easily understand:
- the line affected
- the stations affected
- when will it be fixed
- alternative transportation provided

The infobox is divided into two parts:
- context
- solution

Most people may know the context but want to know or confirm the solution, and providing an easy way to show this is key

A contrasting design works best as it creates a ‘separation’ of idea while being themed, example:

Since there is nothing from the document itself I can extract to illustrate ‘fixing, I just created a spanner icon

it was an easy creation, didn’t think hard and just created it under 2 minutes

Contemplated to add the ‘download PULSE’ stock message as part of the infobox that would add to clutter, so that would need to be foregone.

In the meantime, here is an image of how close it could’ve been integrated into the infobox:

An interesting design question: as stations that are not active are faded, should Sultan Ismail, a station with no train nor shuttle bus service, be shown faded as well?

It can be argued for that it is a connection to Medan Tungku, but really no one is walking for 10mins for it

Also, this map is riddled with design inconsistencies - like, why are the numbers not centred against the circles they’re in?

It gets better when you realise that even the circles arent even full circles…

A small design touch - add the date of publication of the map!

This practice has unfortunately been discontinued since the publication of the newer maps, as older maps contain the dates of when they are published

To sum it up - this was an impulsive, 7-hour session of me suffering with illustrator to show what that has been itching in my brain since February

The map is likely to be false for 6 months so RapidKL should update their maps to not trick their customers lowyat.net/2023/294675/am…

The map is also licensed under Creative Commons under the following terms: creativecommons.org/licenses/by-nc…

If you try and print this on a t shirt and sell it without giving me a good cut I will do unspeakable things

Anyways, this has been a cool and fun project to do, while also relearning the loops of illustrator, as I havent touched that in a while.

What’s the one thing you liked or hated about the map? Suggestions? Would love to hear feedback!

With the modified map, this reaction will be quite common - the realisation that some services that we think are there, but no longer exists

This is why conveying accurate and timely information via the transit map is important, especially when it is a very powerful design tool

https://twitter.com/aruncipun/status/1648150213125890048

But tldr why KTM skypark is suspended: low ridership, northern commuter sector needed trains and suspension meant funds can now be used to provide free train rides for students and PWDs

nst.com.my/amp/news/natio…

The ball’s court is now in @myrapidkl and @MOTMalaysia to now fix our transit map

Could this be an irresistible offer they can’t turn down?

TIL this exists

But yes, you can also grab a ready-to-go version instead of a PDF supplied by doing this too!

And a tip: the QR code at the bottom right correctly links to the modified map

https://twitter.com/spencerificvsco/status/1648126331752951809

While doing this will conform with the first principle (accurate information), this will be at the expense of the second (minimal change) and third (minimal introduction of new ideas) principle

Also, until ERL changes the names to reflect this (TBD July), the names stands as-is

https://twitter.com/mnhidayatfisal/status/1648083317898747905