Transit Pass Goes Mobile: UI/UX Design of a Public Transportation Card App

Time to read
11 min
Table of Contents
  • Executive summary
  • Why choose PEKA for the redesign?
  • How did the Product Design team deliver the project?
    • 1. Initial research
    • 2. Mapping the user journey
    • 3. Brainstorming
    • 4. Designing a prototype
    • 5. Testing the solution in the wild
  • Results of the project
  • Final thoughts

Public transport. Most of us have used it at least once in our life. It’s hard to find someone who doesn’t have an opinion about their city buses and streetcars, ranging from “they’re usable” all the way to “I’ll never set foot in a bus again in my life.”

But public transport has its good sides, too. It’s green, it’s cheap, and it saves you trouble looking for parking spots.

The problem is, the public sector is usually behind on tech trends. And the solutions that worked well a few years ago don’t always (if not usually) age like good wine.

The public transportation system in the city of our headquarters, Poznań, suffers the same problems. While it keeps being modernized, it still leaves a lot to be desired.

With all that in mind, a dedicated team of our Product Designers took it upon themselves to give our old public transport card a little makeover and make it more suited to the mobile era.

In this article, we’ll take you through the entire work process of our PD team. You can see for yourself how they approach problems, seek solutions, and execute their vision.

Read our case studies

Executive summary

  • Two members of our Product Design team did a concept redesign of the PEKA public transportation card and came up with an idea for a mobile version.
  • They chose PEKA because it’s local, familiar, and commonly considered inconvenient to use.
  • They performed the initial research, mapped the user journey, brainstormed, designed a prototype, ran UX guerrilla tests, applied changes according to feedback, and prepared a case study.
  • The process was a useful exercise that gave our designers a chance to perform the entire UX design process and let them test their skills.
  • You can check out the case study on Behance.

Why choose PEKA for the redesign?

You might be wondering why our Product Design team decided to redesign PEKA, specifically.

The team members behind the project—let’s call them “Team PEKA” for brevity—explained that it was because they wanted to help solve the problems of their local community. As our company headquarters is located in Poznań, they felt they should give something back. Doing so had a very handy side effect: a nice little addition to their portfolio.

This isn’t always possible with projects for our clients. While challenging and thought-provoking, they’re also highly specific, sometimes even confidential. Our designers wanted to work on something that was relatable and accessible to everyone.

And, well, everyone has at least heard of public transport, so it was a perfect fit.

The designers knew the ins and outs of the PEKA system, as did most people around them. It was easy for them to get opinions on what people wanted improved.

Additionally, PEKA is a vital part of Poznań. It has a special place in all of our hearts, so doing something that could benefit the city was an appealing prospect.

Finally, from a practical standpoint, redesigns are the perfect way to show off the designers’ skills. Nothing says “I can improve your UX tenfold” more than a design you can easily compare with its less glamorous counterpart.

casestpeka_blog_01_low

How did the Product Design team deliver the project?

1. Initial research

After choosing the subject of their project for the reasons listed above, Team PEKA had some research to do.

First, they had to visualize the entire user journey of Poznań public transport passengers. To do it, they consulted the PEKA website and their own experience.

Then, they considered how an average citizen of Poznań navigates the city. That was the moment the idea of designing a mobile version of the PEKA card started taking shape.

Ridesharing and electric scooter renting apps are currently getting increasingly popular in Poznań. That was a clear sign that using a phone to find commuting options is a common practice.

Team PEKA also did a little bit of soul-searching of their own. As public transport users, they asked themselves what bothers them the most about the current solutions. Then, they consulted their friends and co-workers, asking them the same question.

2. Mapping the user journey

When Team PEKA gathered all the necessary input, it was time to map the user journey.

Sticky notes are sometimes considered to be overrated, but our Product Designers know how to use them right. In their hands, the notes greatly aid the creative process.

Team PEKA split the user journey into the following categories:

  • actions (that people undertake when using PEKA),
  • locations (places where the users perform the actions, both physical and virtual),
  • pain points,
  • opportunities.

img_8466.jpg__5472x3648_q85_crop_subsampling-2_upscale

3. Brainstorming

When they had the entire user journey mapped right in front of them, Team PEKA began brainstorming.

It quickly turned out that the PEKA user experience could be improved in many different ways. For example, the submission to receive the card can only be filed at a physical PEKA point. Moving the procedure online would speed up the whole process and reduce the long lines forming at the counter.

That observation was enough to inspire yet another project. For now, Team PEKA focused on another pressing issue: the fact that PEKA cards only exist in their physical, plastic form, which may lead to many miserable outcomes:

  • it’s easy to misplace your card;
  • you may leave it in your other pair of pants;
  • you may drop it in the morning traffic and have people step on your fingers while you search for it;
  • you’re in deep trouble if you lose it: you’ll have to visit a PEKA point to request a new card, which takes a long time to be issued, forcing you to travel around using the more expensive and less green paper tickets.

As for other inconveniences:

  • you have no way of accessing your journey history;
  • you can’t monitor your spending in real time;
  • you can’t track your city excursions in any way.

And let’s face it: we’re far beyond the era of plastic cards littering our wallets.

Team PEKA supported their ideas with initial drafts, inspired by Apple Pay, ridesharing apps, and car or scooter renting apps.

In the end, the brainstorming sessions ended with Team PEKA choosing to design a mobile version of the public transportation card—a solution that was simple, user-friendly, and surprisingly not introduced by the city yet.

4. Designing a prototype

Before Team PEKA could sit down and design the prototype, one of the graphic designers had to draw a few sketches. He based them on the visual identification of PEKA and the concepts used in the aforementioned ridesharing and scooter renting apps.

Then, Team PEKA designed a clickable prototype in Adobe XD—go ahead and check it out for yourself. The initial design included only a few sample elements: a city map, starting and ending points of the public transport journey, menu, and visualization of the card. Just enough to represent what the real thing could do.

Software development

5. Testing the solution in the wild
a) Guerrilla usability test—what’s that?

Now that Team PEKA had their perfectly clickable prototype ready, there was just one thing left to do: guerrilla usability tests.

For those of you who aren’t acquainted with the field of Product Design, guerrilla usability testing is a commonly used practice and it’s exactly what the name suggests. The designers of a given product approach random people and ask them to spend a few minutes interacting with their prototype.

The method is popular because it’s cheap and authentic (the users don’t have any pre-existing expectations), while meeting people face to face allows the designers to observe how people use the app and what their gut reactions are. You can also collect immediate feedback.

b) Conducting the tests

Team PEKA were in a perfect position to conduct a guerrilla test. As our office is located right in the city center, all it took was going outside and chatting up some people around the bus stops. A relevant user base served on a silver platter!

The map shown in the prototype purposefully corresponded with the surroundings of the nearest stop. Thanks to that, the test users could have easily imagined they were actually using the product.

Team PEKA showed the app to a few passersby and asked them to interact with it. The scenario: the streetcar is approaching, they get in, then get off a few stops later.

The designers observed how the passengers were using the app—whether it was easily comprehensible, fast, and convenient to use, and, most importantly, serving its purpose better than the physical PEKA card.

After using the app, the testers were asked a few questions: would they download the app if it existed, how intuitive was it, and what they’d change about it. Other than that, they were asked if they used mobile payments and ridesharing apps, and what else bothered them in the current PEKA system.

c) Feedback & Conclusions

The guerrilla usability tests showed that the younger generation of people from Poznań is ready to embrace the mobile solution. They welcomed the idea of moving their cards to their phones with enthusiasm.

Team PEKA was also pleased to notice that the people they interviewed were eager to take part in the tests, give feedback, and answer the questions.

According to Team PEKA, whenever you’re doing something locally, going out and asking around is the right thing to do. Early user reviews are invaluable. They help you look at the project from an outsider’s perspective and quickly correct any mistakes.

d) Publication

The guerrilla usability tests helped our Product Design team apply changes based on the feedback, though they hadn’t heard many negative comments. Turns out, the people of Poznań were so enthusiastic about the idea they didn’t find much room for improvement.

The only thing left to do at the finishing stage was to turn everything they had created and learned into a case study, which they included in the Product Design portfolio. 

You can see the presentation of the product (along with a few funny animations) on their Behance profile.

casestpeka_blog_02

Results of the project

The PEKA mobile app prototype isn’t a commercial product.

Therefore, you might be asking yourself: what did we get from it?

Team PEKA can name quite a few benefits.

First of all, it served as a useful exercise and a unique opportunity for the team to gain more experience, both of which are priceless. Because the case was so close to our designers, both literally and figuratively, they had the perfect conditions to plan it out, prepare a comprehensive map of the user journey, perform research, and conduct usability tests.

Which brings me to my next point: the project was a great chance to go through the entire UX process, without rushing through any stage.

Commercial projects are often highly specialized, which means limited testing opportunities. Sometimes, the designers can’t collect feedback along the way because the project is classified. Or, the time pressure is so strong that the processes of mapping and brainstorming have to be cut down drastically… Or all of the above.

And as a cherry on top, a redesign of an already existing solution is a fantastic way for Product Designers to prove that they can handle any challenge—and do it better than the people before them.

Who knows, given the positive feedback, maybe the project will eventually see the light of day? If anyone on the PEKA crew is reading this, you know where to find us! 

Final thoughts

We hope this article shed some light on how our Product Design team works and how they tackle UX problems.

We hope this article shed some light on how our Product Design team works and how they tackle UX problems.

After all, the end user only cares about one thing: that your app is usable. And good-quality code is just one of the components needed to achieve this result. It’s equally important that your users instinctively know which button to click.

With the help of the right Product Design professionals, your product will not only be a good piece of tech—it will also make people’s lives easier. Just like PEKA Mobile would!

To learn more about Product Design, we recommend our other articles:

And if you want to work with our talented team of designers, visit their website!

Get a project estimate

Get your free ebook

Download ebook
Download ebook
Junior Marketing Specialist
UX Designer
Share this post