Deutsche Bahn reverse engineering | Ironhack
Prework Challenge 2: ‘Wireframing’
--
Next steps next? Ironhack’s 2nd challenge took me to the world of UI. After having learned about all the basics (color theory, typography, you name it…), I was asked to reverse engineer an app of my choice.
For this I was challenged to first visually replicate the app’s design. In the next step, I had to create a wireframe and build my first prototype for of a selected user flow. I was also recommended (& trained) to use the scene’s most beloved collaboration tool: Figma. Boy, people really only spoke the best about this tool— and guess what, Figma actually proved to be super fun!
My app of choice was the Deutsche Bahn navigator.
A mobility app again?
I was unsure about my choice, too. I mean: Some people went for their favorite music or photo apps. Something modern and fancy. But first, I would never admit in public that I use TikTok and secondly… I felt like I needed to consider which app I really appreciated. What app really was the most useful to me.
Being a travel addict in times of climate change and having my parents and some of my closest friends living 450km away from me, it actually all came down to the DB navigator. I would use it for easy ticket booking, also for getting around within German cities (via Verbundtickets) and definitely for convenient on board check-ins during my trips. I actually just recently talked about DB’s Komfort Check-In with a friend and how this turned out to be especially practical in contactless Covid times (or when you’re deep in a flow of sketchnoting during a long train ride).
My choice was based on the following criteria:
- one of the most useful apps for me personally
- combines lots of information and various functions in a simple design
- generally used by a very diverse audience → must work for everyone
- very convenient & self-explanatory → great UX!
I went for my visual replication of the app’s design first. Yes, I have an unhealthy love for details — so I felt really challenged to come as close to the original design as possible. Especially in terms of replicating icons, the Ironhack Wireframing Kit was very helpful! Hours and hours were spent — but my inner neurotic had the time of her life. Below you’ll find an excerpt.
For a complete view (including some rejected layers) click here!
-Please note that I censored parts of the original screenshots for privacy-
Up next was the wireframe & prototype task.
The user flow I wanted to recreate was doing a Komfort Check-In. However, just when I started to replicate the design, I noticed that I couldn’t take a look into the actual check-in function because neither did I have an active ticket nor was I sitting in a train and actually checking in live.
So I went for another option and imagined the following scenario:
Imagine there’s a global pandemic.
My user wants to take a trip by train anyway and, thus, tries to keep their travel as contactless as possible. Obviously, they’d chose the convenience of DB’s Komfort Check-In. However, shortly after sitting down, they find themselves right next to a family with two kids and a chatty travel group just getting comfortable behind them. The wagon they just passed before, however, was half-empty. Well — time to change seats!
I did a quick task analysis of the user journey and did a first hand sketch for my wireframe, which I then worked with on an expired ticket of mine (you would see this in the original screenshots — thumbs up to Deutsche Bahn, though, for keeping interactions in expired tickets):
The user tasks were:
- Find ticket
> Open tickets > Select specific ticket - Change reserved seat
> Switch from ticket view (QR) to travel schedule > Find button “Sitzplatz ändern” > Locate or enter wagon # > Enter seat # > confirm
Based on the design replica I did before, I set up my wireframe:
- all colors were set to monochrome grey & white — because it’s easier on the eyes as black & white, as I also learned ;)
- layout & other elements were reduced to the main functions I detected in my hand sketch
- individual icons were changed to generic ones — except for the ones that would be functional in my prototype
And here’s the result:
My clickable prototype on lo-fi wireframe!
Seemingly, that was so much fun, that I also did a clickable prototype on the graphic replica. Don’t ask.
I feel pretty pleased with my results and had the impression that I learned a lot doing this exercise. I also know that I did some extra steps that weren’t required… but with each layer I created, with each icon I moved around, I found myself getting quicker and quicker in my work flow. And, surprisingly, I gained the deepest insights during the mimicking task (i.e. the design replica, which was actually not the main exercise). I noticed how much detail went into a seemingly very basic design! Just when I thought I found the perfect font, I noticed how the spacing differed by -3% to -5% and how the letter ‘g’ was just completely different. And what’s the deal with grey 2px divider lines with highlights?!
In case you missed the link before:
Here’s a detailed view of all layers and the wireframe (including some rejected versions) on Figma!
Well, weekend’s near and the bootcamp only 25 days away.
Cheers to that!
