Dösäri

A lightweight iOS application to access public transit timetables in the Helsinki region.

Tasks Completed

• Problem identification
• Wireframing
• Prototyping and full-stack software development
• Closed alpha testing
• Iterating based on user feedback
• TestFlight deployment

Artifacts

• Initial web-based PWA prototype
• Native iOS application (available on TestFlight)

Background

I have personally had an issue with the official Helsinki Region Transport (HSL) app for a while now. I rarely use the route planner, because most of my trips are not strictly time-sensitive and happen on routes that I am more than familiar with. All I usually need to know is when my bus/tram/metro leaves from the stop I am going to.

However, while the official HSL app offers the functionality for checking stop-specific timetables, it makes the process unnecessarily complicated. When opening the app, the first view is the ticket view, meaning that I have to navigate to the route planner first. Then, I have to scroll down among the options to find the route/stop search bar. Typing in my stop’s name yiels a list of automatic suggestions. I choose mine. Then, the application displays an animation locating the stop on the map before showing me the information I actually am after: the stop-specific timetable.

All I really want from the application is being able to search for a stop (or quickly pick a favorited one) and get the next departures from that stop. I know where my stop is. Rendering maps and animations adds bloat, which shows - the official app is pretty slow to use! Rendering unnecessary content and animations also consumes energy, which clashes with sustainable software development practices.

Initial Prototype

Thankfully, the Helsinki region public transit data is made public via the DigiTransit API, so anyone can make their own solution! Knowing that I could make the application work, I decided to focus on designing a first iteration of the user interface. The requirements were: lightweight, easy to learn and use, and most importantly, easy to read.

A few sketches later I was already coding a prototype with Vue. I styled the interface with my own CSS and used Feather Icons for the iconography. At this point, since the GraphQL API did not enforce authentication, no back-end was required, which in turn made prototyping very quick.

I turned the first prototype into a progressive web application that was tested by 3 users (and myself) in our day-to-day lives. Based on the others’ responses, a streamlined application is very much welcome to commuter use. A notable development idea / feature request was the addition of a favorite system for quickly looking up often-used stops.

Second Prototype

The project went on pause for a while during my master’s studies at Aalto. During one course assignment I was introduced the concept of saliency modeling and a tool that could be used to estimate the saliency of an interface (the AIM, which I ended up utilizing on a later project as well). Combining these insights with other learnings regarding UX practices, I set out to develop the initial prototype into a native iOS application.

The user-facing application was still developed with Vue, but I opted to use CapacitorJS to easily deploy onto iOS. I updated the visuals and layout of the app to be more in line with system conventions (e.g. use of color, bottom navigation bar). As the DigiTransit API had begun enforcing authentication, I coded a simple proxy server with Express to hide the API key and process queries from the app. I let a few testers start trying out the application via a web deployment to get early feedback while I worked on preparing the application for release.

While I did end up including some UI animations to make the experience feel premium despite the application being quite slim, I also made these completely optional by allowing users to toggle them off in the application’s settings. This increases accessibility, sustainability and helps the application run better overall on older devices.

Once I felt the application had reached an MVP stage, I submitted it to TestFlight so that testers could have an actual in-app experience rather than use the UI via a browser.

… and that’s where I’m at today. The application is still available on TestFlight for anyone to try, if you’re interested in getting hands-on yourself! Future improvements include displaying more search results, allowing pinning stops to the home screen and giving bookmarked stops custom names. Maybe it’ll even be on the actual App Store one day!