Swiftly is an informational transit app that provides riders with real-time information on bus route times and allows them to purchase tickets and reload their transit card on the go.
Role
Product designer Visual designer
Duration
June 2020 - September 2020
context
Serving over 400,000 riders, Seattle’s public transportation system is one of the busiest transportation agencies in the nation. However, it’s made of two separate agencies: the Sound Transit and King County Metro, which both have their own separate visual systems. For my project, I worked on unifying the two agencies to provide riders with a seamless experience through creating an app called Swiftly.
the problem
Seattle’s public transportation system is composed of the Sound Transit and King County Metro. These two agencies provide similar services and riders are able to use the same transit pass on both of these systems. However, the visual and brand identity of the two systems are inconsistent and are distinct from each other. As a result, riders are lost and confused when they interact with the public transportation system.
research 🔍
To start off my research, I conducted semi-structured interviews with people who use the Seattle public transportation system to gain a better understanding of my user group. Here are the key pain points that were mentioned:
– Finding information on why the Light Rail is late is difficult – There is inconsistent information across the website / stop / social media – Route planning is a pain due to the two separate systems – Adding money to ORCA card can be stressful when you’re in a hurry
With my research findings and insights, I defined my key design question, which would guide me through the entire process.
THE GUIDING QUESTION
“How might we alleviate rider confusion caused by the inaccurate + inconsistent information of the transit system?”
From here, I identified a list of design goals to address my design question.
After creating my storyboards, I ultimately decided to create a mobile application, as it would allow information to be accessed by riders while they were on the go. Additionally, I decided that I would design a bus / light rail stop electronic billboard that would inform riders about any updates or delays.
ideation
With my design goals in mind, I began to generate ideas and solutions through sketching + storyboards. My storyboard showcased a potential feature that would allow riders to add money to their cards on the go and another form factor that would allow them to view bus and light rail updates in one central location.
After creating my storyboards, I ultimately decided to create a mobile application, as it would allow information to be accessed by riders while they were on the go. Additionally, I decided that I would design a bus / light rail stop electronic billboard that would inform riders about any updates or delays.
user flows
Now that I had my form factor figured out, it was time for me to figure out the common scenarios that my users would run into when interacting with the app. I designed 3 user flows, which would include riders adding money into their ORCA card, bookmarking their frequently used stops and checking when the light rail would arrive. These flows helped me decide what pages the user would need to navigate in order to achieve their goals.
wireframing
With the flow of my app figured out, I started to create wireframes that would help me figure out the layout and structure of the app. This allowed me to define the hierarchy of the items on the screen and decide which pieces of information I wanted to highlight.
iteration
After I had the structure of my screens laid out, I moved on to designing high fidelity prototypes of my app. I wanted my app to have a friendly and reliable feel to it, so I went with blue and yellow for the color scheme. I presented my prototypes to my peers and received feedback on my designs. You can check out my first round of designs below, along with the notes!
final designs
I took note of what needed fixin’ and fixed it! Along with that, I chose a new color scheme to refresh the overall feeling to the app. After weeks of research, learning, critiques, and designing, I present to you… Swiftly!
View Bus + Light Rail Information Switch between the two transit systems with ease and view real time information about your bus / Light Rail stop in one central location
Keep Track Of Your Favorite Routes Riders can bookmark their most frequent routes and stops to access them when they need it the most
Add Funds On The Go Adding money to your ORCA card can be done in a matter of seconds, allowing riders to reload their balance at their own convenience
Looking Back & Moving Forward!
I've got to say, this is one of my favorite projects that I worked on. As a frequent user of these transportation systems, I felt like I was able to connect with the problems that I had discovered through my research and really understand the goals and pain points of my users. Here are my key takeaways from this project!
Design is Dynamic
There is no such thing as a perfect design. I had completed this project in August, thinking that it was all good to go. However, when I looked back at it again in December I realized that I wanted to change everything. And then I spent a week changing (almost) everything. It made me realize that there's always room to improve and that the only certainty is change.
Always Make Room For a Back Arrow
When creating a live prototype of my design, I realized I made one huge problem. I forgot to add a way for users to undo their actions and navigate backwards. I had never thought that users might want to change their mind and go back on the previous screen. Because of this, I had to update all of my screens to include a back arrow to allow users to have full freedom to navigate where they wanted to.
Choosing a Name For Your App is Hard
It took me 2 days to come up with the name "Swiftly." Not going to lie, I am a bit embarrassed at the amount of time it took me to find an app name that I liked.
%20(1).svg)
%20(1).png)
.png)
.png)
.png)
.png)
.png)
.png)