Why a redesign?
After spending a weekend in Stockholm I became quickly acquainted with SL’s (Stockholm’s transit commission) mobile app. In its current state the app works, but not without producing a lot of headaches first. When I returned home from Stockholm I decided that this would make a terrific side project to redesign a couple of features from the app as I could 1. improve my design and motion skills and 2. deal with the stress SL’s app caused me in a positive way and 3. Finally stop putting off learning how to use Principle.
To start to understand the current version of the SL app I wrote down all of its features in a document. By doing this I was able to sort the features into different categories. In the end I decided that within the SL app the features I saw the most potential for a redesign were Journey Planning & Ticket Purchasing. In my opinion these are the largest pain points for users and there are a few reasons as to why I think this:
- The opening landing page is way too simplistic and structures information in an awkward way. When the user opens the app they’re presented with the same static image (every. single. time.) and with a bunch of boxes that the user can choose from to navigate through the app. I believe that this screen can be optimized better for users, in its current state it does not have a lot to offer.
- The app is divided into chunks for buying different tickets offered by SL, UL or the Arlanda Express. Having multiple tabs to buy tickets is extremely confusing. By putting all the tickets in one place this would allow the user to spend less time navigating within the app since the flow would be streamlined.
- The user is presented with too many options when planning their route, by using the location data of the user the most appropriate and quickest route can be presented to the user faster. I have talked to so many friends that hate the clutter and screen full of departure and arrival times, with this in mind I wanted to slim down on information presented after the user had decided on their route.
My main objectives for this redesign were to update the app’s UI and bring it into 2018 as well as attempt to streamline the users experience so that they can plan out their route and purchase tickets as quickly and as efficiently as possible. I also wanted to reduce the cognitive load presented to the user by showing them the most relevant information as it relates to them at that moment in time.
I looked into other cities Transit apps to gain inspiration and to look for things that were done well as it relates to the over all usability of the app. Some of the apps I looked at were Transit, Waze and of course Google Maps (shout out to the OG). I also spent a good amount of time on Instagram trying to see what UI trends are the most popular at the moment.
Next I sat in front of my computer for a good 20 hours clicking away in Sketch and wishing that I was as talented as every UI designer on the internet always seems to be.
Like with most projects I quickly realized this was not a once done process. I messed around with colours and different layouts for the initial landing page for quite sometime before ultimately picking the one I decided to use in the final product.
After spending hours pushing pixels I finally finished the redesign. Here’s a few of the screens and I’ll try my best to break down the process as best as I can. (assuming you’re still reading to this point)
This is the Screen users are presented with immediately upon opening the app. This was perhaps the biggest overhaul of this entire process and I tried very hard to focus on a couple of main things here.
I knew I wanted to hit the user with right away with their location. I think when designing for a transit app its important to recognize that one of the key values shared amongst users is time saved. By presenting them with their real time location, this effectively saves them a step in the process of journey planning. In addition to that, the home screen also features stations with line and schedule information that is closest to them. I think this feature is especially good for users that are experts, users that are new to the city as well as for eager users who are constantly checking their app to see how many more minutes there is until the next departure (this may or may not be exactly me…).
Much like the old app I kept some of the features that I think need to be there like the ability to simply be brought to the ticket screen by the push of a button as well as settings within the app.
Again for this part of the redesign my main focus here was to streamline information and to present users with the information that is most relevant to them based on their current location. In the original version of the app the user can input the starting and finishing location. The user is also presented with previous trips that they have taken. In this redesign I decided to first present the user with making the decision of where they would like to go. Next, the users chooses where they’d like to start their journey from, these stops are shown to them based on their current location and then based on which stops they used within the app most recently. By structuring the information this way I think it takes some stress off of the user. Most times people have their destination in mind but not necessarily where they need to start their journey from. The destination is the users main goal here after all and by inputing that information first the users job is essentially already complete since the app will calculate what the most convenient location to start your journey from is based on your location.
The main thing that really bugged be about buying tickets in the old SL app was the fact that tickets to take other trains than the SL were located in different places within the app. The old app actually does a pretty good job of streamlining ticket purchasing, storing credit card info and storing your tickets into your digital passbook. Mainly I updated the UI here and made it so all the tickets can all be found in the same place.
Further more, this was my first time REALLY trying to make interactions and animations within Principle, this was somewhat of a struggle at first but after a few video tutorials and muttering some bad words I wouldn’t say in front of my mother I got it looking pretty smooth.
I’ve been trying to get better with animating. Here are a few interactions I designed for this project! :^)
When I first started this project I was pretty worried that I was going to have a hard time using Principle for the first time (which is only partly true). Learning a new tool as well as redesigning a product that I truly believe needs a major overhaul was a great exercise that tested both my patience as well as my ability to quickly adapt to new technology. I also would like to add a schedule feature so the user can see the next few trains, maybe something like a left or right swipe feature when the user is presented with their journey itinerary. I think doing an overhaul on a product like this for real would be extremely cool because its something thats used by thousands of people everyday and is a crucial part to a lot of people’s everyday commute.
Thanks for reading to the end! You can check out more of my work here!