Storstockholms Lokaltrafik (Stockholm Public Transport) commonly referred to as SL, is the organisation running all of the land based public transport systems in the Greater Stockholm County. The SL app features mobile tickets, travel planner, and public transportation information services via website, iOS, and Android platforms.

The SL app is one of the key digital channels for SL, also enabling contactless customer service and reducing the consumption of physical tickets. 

- UX/UI Design
- User Research
- Prototyping
- Agile UX with Google Design Sprint
Hyper Island Concept Project

ROLE UX Design, Interaction Design, Prototyping
TEAM Cristina Coll Cartiel, Maria Saldatsenkava, Yiyuan Xu
DURATION 4 weeks, ≈ 60 hrs
October/November 2021

Programs Used:
Figma
ProtoPie
Miro

Phase 1: Empathize

For our project, we were tasked with researching and developing a design a solution that will help people to get around the city with public transportation. With our focus being a local public transportation app here in Stockholm, SL to be exact, the first stage was to empathize with the users of the app.

We soon realised there were a lot of various users of this app with different goals. We chose to narrow are focus down to the “everyday user”, in hopes of making a feasible solution in the time given.
For this phase we started with an Empathy Map Canvas to get an idea of the initial situation and challenge for the users, as well as find out what info we still needed and to look for patterns.

“If you want to build a product that’s relevant to people, you need to put yourself in their shoes.”
—Jack Dorsey (Co-foudner of Twitter)

User Survey & General Data Findings

To further understand our users and empathize with them, we created a survey with Google Forms to send out. We wanted to see what further information we could collect through the responses of real users, to help pave the way for the user needs, and to create a general user journey which would allow us to focus on their top needs.

We felt this would be beneficial to help start the path of picking a target user and then defining the user later on.

Finally, we created a general user journey map based on the user needs. From there we were able to see where the majority of pain points landed. This is turn helped us narrow down to our “top” user needs and then to select one user need we would focus on.

After going through the data and feedback, it became clear the strangest user need, which would become our feature focus, was showing peak hours of travel or rather, a “live” view of how crowded the chosen transport is at the moment.

Phase 2: Define

Through the empathize phase, and by utilizing the user survey, its findings, and patterns we found, we were able to narrow in on a target user group and user need.
This would be the basis to then start further defining and shaping the user and their need for the project. By defining a user through archetypes and personas, we would be able to create an actionable problem statement.

To achieve our defined user, we looked at the data collected and asked ourselves:
What are the users needs?
What are their problems/challenges?
What are the insights we can use from interviews?

To define the target goal and actionable problem statement, we utilized the “How Might We...” method.
Our actionable problem statement was defined as:

“How might we show the user live crowds of all transport route/option to help them choose”.

To get a general idea of the users actions, habits, frustrations, and goals, we took the information collected to create a user archetype and then developed a user persona. From this we then created another user journey map, but specific to the more the developed persona.

To start our ideation phase, we wanted to create flows of how we envisioned the user using the SL app with the updated feature of live crowds being visible and part of their transportation selection.
From the pulled out scope of task flow, to a more dialed in view with the user flow and eventually a detailed view with a wireflow.

This stage also gave us the opportunity to create our hyptohesis of which we would validate later on within prototyping and testing phases.

Once we had a solid user flow, our hypothesis came quite naturally. Our hypothesis became,

“We believe that users want to see live crowd information when choosing a public transportation route, so that they can feel at ease and in control”.

Phase 4: Hifi frames & Prototyping

Taking the wireframes I made for the wireflow, I then created High Fidelity frames to be as close to the end result we had imagined. I then took these into a working testable prototype.
Below you will see the prototype creation in Figma, a video of it being used, and you can even try it out yourself!

Note: This prototype is currently being rebuilt in ProtoPie for a more realistic experience. In the meantime, please enjoy the Figma version.

Phase 5: User Testing

User testing is currently in progress.
Once feedback and data is collected the product feature will continue to evolve through iterations for the best end user experience and see if our hypothesis is validated or not.

Section to be updated once more data is taken in.

Conclusion

The backbone to the Design Thinking process is based in an iterative and flexible mindset, with an intent on collaboration between designers and users. The emphasis on bringing ideas to life based on how real users think, feel and behave. The methodology is intuitive and creates an iterative and sensemaking process from beginning to end, and back again. Ultimately we found that you make the process your own and adapt it to your style and your work. We honed our process to one which worked for us and in this context.

Further reflecting on our assignment and the methodology, I would have liked to spend more time in the phase of ideating. To develop the ideas further and explore features we spoke of but did not have time to flesh out. And of course having the time to take this all the way to the Testing phase and then reiterate based on findings would have been great!