Case Study — Redesigning BVG App
I am happy to share the Case Study of my first individual project.
- Role: UI Designer
- Duration: 3 days
- Team: Solo
- Tools: Figma
This project was about practicing UI skills. The focus was on challenging the existing information architecture of an app’s content (possibly content organization, as well as the navigation logic and sequencing). As this project was not prioritizing new content creation or UX writing, no user research was needed.
The challenge
Select an app of your choice for this redesign — The only constraint is that you must select a well-known native mobile app. (either iOS or Android). Redesign at least three screens
My choice: BVG Fahrinfo App (Local Transportation App)
After exploring a lot of different apps on the market and looking for design opportunities, I decided to go with the BVG (Berliner Verkehrsbetriebe). I chose this app, because I saw the most potential and also the biggest challenge. We were advised to go with a native app, but using the BVG app on my iOS smartphone, I realized that this company has mainly implemented the android design system in the iOS version of the app — and only using partly the iOS design system. With this information I decided to not “only” redesign a native app, I’d rather transform the current app screens from android to fully iOS and challenge myself even a bit more.
Analyzing BVG Fahrinfo
While keeping in mind the heuristic principles, I analyzed the screens and figured out how to improve them. I mostly focused on consistency and standards as well as aesthetic and minimalist design.
I chose to not rebrand BVG and take over their color palette and typography. I got inspired by some pictures and simply added some colors and design elements such as icons and buttons or tags.
The process
What stood out immediately on the first screen (menu) was that you would see the previous screen on the right side. When you guide through the app further, this is a visualization that doesn’t appear anymore, you would only see the full screen of what you had selected. Therefore I decided to remove this infiltrating screen and use all the space for the content on that menu screen. I gave each item from this menu also more space, to make it consistent with the other two screens from this project. To please the eye, the image on top of the screen was changed and the BVG-Logo was added in the bottom right corner.
Everyone who knows BVG as a brand would probably agree, that they are a a company with a very playful and fun marketing. I wanted to show the playfulness and the “love” towards their customers (#weilwirdichlieben) and added the little heart to the menu icon. To make the design less boring, I changed the color of some words and gave it some better contrast. To be consistent with the menu screen, I added (by also creating) some icons related to the topic. Spacing and background color were adjusted.
On the “4-Fahrten-Karten”-screen you will find the most drastic changes. Here you can find an overview of a specific kind of tickets. Inspired by the BVG Tickets App, I decided to make the tickets more visual. I created images for the tickets, added a prize tag and grouped the tickets into sections, based on the geographical sectors and time.
Here you can find an overview of all redesigned screens:
Thank you very much for reading and please feel free to leave a comment!
