top of page

1.Pedaling along the Berliner Public Transport App

3 Case-Studies 1. Design Thinking | BVG Study Case | “I didn't get a fine, but my bike did.”


by X.iO | @ IronHack ux|ui

“I didn't get a fine, but my bike did.”

In the last few years, the user experience for the Berliner Verkehrsbetriebe [BVG] public transportation app has improved a lot. A couple of years ago, we would have to stand in line in the cold to purchase tickets for buses, trains, and subways because it was easier than purchasing online. Among many improvements, the monthly and yearly tickets can be purchased online, which also reduces the risk of washing your cloth with your ticket inside your pants’ pocket and losing your investment.

In the process of interviewing some friends, as Berliners as they can be, I found a common concern: purchasing tickets for their bikes. Just to give you an idea of how many bike riders are in Berlin, in 2017, on the 200th anniversary of the bicycle’s invention, tens of thousands of cyclists took over the streets of Berlin as a part of a campaign. Especially in summer, most Berliners prefer to ride their bikes, becoming an absolutely daymare for car drivers.


However, back to our concern, on rushed hours or on rainy days, the public transport gets packed with bikes. In addition, many bike riders take public transport to leave the urban areas and explore the green paradises outside the city. While interviewing them, I heard funny things like: “I didn't get a fine, but my bike did because I wasn’t fast enough to purchase an extra ticket for my bike.” Another friend asked, “have you ever seen a bike getting on the train by itself?” A friend visiting from abroad said, “I purchased only the ‘Bike single trip’ ticket for 2.10€ because I assumed that I was included.” Apparently, the whole process of purchasing tickets for the rider and the bike are two completely separate journeys.

As I revisited the app and went through the entire process, I outlined the current journey in black and the possible journey in blue. I lost count of my finger tabs but here is an example: → Select a ticket for a single trip, select starting station, add the rider ticket to the cart, and go all the way back to the beginning. Scroll down, find the Bike Ticket, select starting station, add the bike ticket to the cart, and finally pay.

PROPOSAL → Select a ticket for a single trip, select starting station, check the bike box, add both tickets to the cart, and pay.

Current and possible journey experience adding a bike ticket to the purchase
Current and possible journey experience adding a bike ticket to the purchase

Considering human behavior, we tend to jump into the train even when most of them come every 5 min. In conclusion, finding a better way to make the purchasing process shorter, could avoid frustrations and confrontations with the BVG ticket inspectors, -people you really do NOT want to meet, trust me.

2. Case Study | Notability App in Layers for full flexibility

Notability | Study Case


Analyzing an app, which already has content and users, can be quite challenging. It takes a lot of time to first familiarize oneself with it, and then see what can be done better. However, it can also be very beneficial to exercise our lazy brains and improve our information architecture and visual skills.

As explained by Tony Fadel

...our brains encode the everyday things we do into habits so we can free up space to learn new things. It's a process called habituation and it's one of the most basic ways, as humans, we learn. Now, habituation isn't always bad. it allows us to drive and talk simultaneously without thinking. But...If it stops us from noticing the problems that are around us, well, that's bad. And if it stops us from noticing and fixing those problems, well, then that's really bad.

As UX|UI designers, it's our job to notice and to go one step further and try fixing them.

As a part of this task, I selected Notability, "powerful, yet wonderfully simple note-taking and PDF annotation".


As part of the process, I started analyzing the brand and main components, as well as the competitor's and user's reviews.


I found the brand image and components pretty straightforward.

  • Their fonts speak up for the user's possible preferences: typing notes, or handwriting.

  • For the logo, maybe a more modern/abstract approach

  • For the active icons, maybe less boxy, just filled icons

  • Based on their slogan, "unleash your ideas, your way" I would maybe suggest adding one extra color, yellow, as it stands for creativity (your ideas) and the existing blue for freedom (your way).


Based on global rank, its major competitor is goodnotes. Also, both are marked "Editor's choice" on the apple store and they share almost the same audience.

Now, going deep into details, I interviewed an active user of both apps, and here are his words:

I use other software to modify images. I have Notability just because I already paid for it. I prefer using GoodNote due to its flexibility

To explain the outcome of the quantitative, and qualitative, including the remarkable reviews by users, a persona was born.

To illustrate Samantha's issues, a site map, and a user flow explain the following:


[The Notability App] was designed to provide efficiency and freedom of creativity while taking notes. I have observed that the app does not offer enough flexibility to customize text, images, and general layouts, which is causing unsatisfied users, therefore emigrating to its competitor, good note.


A more flexible and dynamic annotating app for creative users:

  • safe default tool

  • undo & redo

  • object based items

  • text alignment | text box

  • image filter option

  • neutral interface


As a designer and familiar with layers and object-oriented interfaces, like Affinity Designer or the most popular Photoshop, I can imagen Notability using the same approach without overwhelming general users with layers, but with its flexibility to move objects around independently.


Our challenge is to wake up each day and say: How can I experience the world better? -T Fadel

3. Making Sense of recurrent Users | desktop vs mobile

Reverse Engineer practice | Design interaction & User Flow from an existing selected app, WEF


Beyond the branding image, colors, and style, the user experience is one of the success criteria for emerging start-ups. However, global and well-established entities may also have some UX flaws. REVERSE ENGINEER For a wire-framing class challenge called “reverse-engineering”, I selected a specific user path in one of my favorite and reliable sources of information apps: WEF [World Economic Forum], which engages the foremost social, political, business, and cultural issues for the global agendas. Once the standard registration process is done, the main page is pretty straightforward: it is called Discover with a list of Collections: ‘Highlights’, ‘Community Collection’, ‘Topics You Follow’, and ‘All Topics’. Obviously, as pragmatic as I can be, my most frequent path is “Topics You Follow.” It unfolds itself smoothly from the broadest list based on my selected topics to the most detailed content of a selected publication.


The challenge I faced was finding the short way back to the main page, or to the topics I follow. It only happens by going all the way back through every visited page or link. Also, because I am quite familiar with the desktop version, I found the general structure of the mobile quite different. Therefore, I realized that the implementation of standard features, such as navigation bars with shortcuts, and familiarity (desktop-mobile structure) can make the user path pleasant and effortless.

by X.iO | @ IronHack ux|ui

bottom of page