Stockholm county
Public transport system (SL app) redesign — UX/UI Case Study
Simplifying the UI/UX design for users.
Disclaimer -
I’m not affiliated with SL app in any capacity and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive.
The visual design is based on SL app identity, including the color pallete.
Inspirational fonts, icons and maps are used only to show the purpose of the design.
This case study was done to enhance my learning experience and challenge myself to redesign it.
About SL
Stockholm Public Transport, formerly Stockholm Transport and commonly referred to as SL, is the organisation running all of the land based public transport systems in Stockholm County.
Stockholm Public Transport, SL, is responsible for buses, underground trains, commuter trains, trams, and certain ferry lines in Greater Stockholm. The underground is the easiest way to get around town. Tickets can be purchased at SL Centers, underground ticket booths, newsagent kiosks, via SMS, or via the SL app.
Problem/Opportunity
What’s the problem? Why it a problem?
Where’s room for improvement?
SEARCH:
The app requires user’s location access. This feature is not used to the optimal. It is used only to show location on a map and when the user searches for a route. However, if the app can show the user’s location as a dot, it can also show nearby stations and routes instead of searching for it.
It does not support motor skills, say voice command search for people in rush or special needs.
Many other features such as -
Calendar sync
Reminder for journey
MAP:
It occupies a major portion of the home screen with no possibility to reduce the occupied space. Search, favourites and related fields, therefore, are crunched up in the bottom. When the user selects the route, the map comes as a small widget. But if the user wants to see a live map while walking/cycling towards the bus stop, it fails to show the routes. No trails are visible for transit routes, so the user is compelled to use another app for such requirements.
FAVOURITES:
It is a great feature for quick navigation. So users select a lot of them. But hey! did the user think about them in the order of priority while creating? Naah! But to rearrange or remove them is a lengthy, lethargic process. It is not even clearly visible that the user could do that.
Quite possible to miss!
Requirements
User’s location access.
Voice activation and translation of it to text.
Third party map access to show real time feature.
Ability to store user’s search history.
Notification and calendar access
Constraints
User’s location access, incase the user is not willing to share the details with the app.
Voice activation and translation of it to text.
Third party map access to show real time feature.
Notification and calendar access
Who are the users?
What are their days like?
For the users of who live in Stockholm and use the public transport system, the two most popular apps available are Maps (Apple and Google) or state owned SL, wherein SL also allows to purchase tickets. Apple maps/ Google maps both use data from SL to show search results.
The Process
Iterations
These led to designing the atomic features, wireframes and the visual design. I broadly worked on four features -
Defining your frequent travel destinations as favourites is a great feature for quick navigation, and the users define a lot of them.
I am confused which area I’m in!
I don’t know the language, area spellings are too tough for me. what to type?
Can I get a quick glance at my nearby transport stops?
Knowing the fastest route with additional supportive features.
Route timings highlighted with accent color to easily identify.
Map is retained on the page consistency across the travel tab.
Primary information text is highlighted with the secondary text is subtle and grey.
SL app does not optimise the map feature, so the user if needs map, uses another app and looses confidence with SL.
Realtime map is one such solution to see the —
Location of the transport
User’s location while walking/cycling towards the bus stop
Often not so frequent travelers get lost or confused around bigger transit stops.
Map for transits is a solution
Add to calendar and reminder are another great interactive features.
If this excites you, I’d love to hear from you and have a chat to explain in more detail what I’ve been building and what I can offer you to develop and thrive.
Hire me!
What would be the blue case senario be like?
Different case scenarios -
Frequent travel route suggestions based on user’s interaction. Say if the user uses public transport to work daily morning and evening. The app can suggest, without requiring the user to search, transport timings and possible alerts.
SL provides frequent users to purchase a travel card for 3 months and full year. What if this could be added as an e-card in the app, that can both be used and recharged rather than the user going to a brick and mortar store to refill it.
Features such as customer care, accessibility info within settings guides the user to a desktop site. Instead it can provide key information like customer care shows a phone number that you can dial directly rather than reading the lengthy desktop page to find and type separately to connect.
SL has a beautiful SL museum. What if a user can visit is virtually.
Support and enhance accessibility by -
Spoken & interactive description of the visual content. Allowing the user to talk/interact with search to find the route, timings and way to reach there.
During Covid times, it can show a graph of rush in routes for users to choose alternative travel times.
Sharing economy! Allowing users to transfer purchases, hours and passes.
