Visualising the architectural impact of the Rotterdam Blitz and bringing it to live through a high-fidelity prototype.
The objective of the official Adobe XD Playoff contest was to design and create a prototype based on your hometown with Adobe XD.
The underlying thought was that we’re all influenced by where we’re from. One’s hometown inspires our personality, our tastes and interests, as well as our work.
My initial objective was to make my submission stand out by having a different approach: addressing a relevant topic rather than creating a more common sightseeing or a transportation related app.
Trying to find an angle for the design, I looked into the city’s history. Considering I haven’t lived in my hometown for the last 10 years, my own memories of the city quickly went back to my childhood.
I realised that despite growing up in Rotterdam, I never fully understood the impact of the Rotterdam Blitz. While I was used to the uncommon modern architecture and knew the why the modern skyline looked the way it did, I wasn’t aware of the magnitude of the destruction that took place.
Services / / User research, UX & UI design
Year / / 2019
The challenges & outcome
While working on this concept I was faced with two main challenges:
1 // I had to work with a concise project timeline of only 7 days.
2 // I had enormous creative freedom; the only requirement was that the submission had to evolve around your hometown.
Having tackled the latter challenge by settling on the topic of the architectural impact on Rotterdam through the Blitz, it then meant I had to work quickly to be able to submit my entry before the deadline.
I decided to approach my submission for the contest as a full UX/UI project. This meant that I started out by conducting a small user research.
Through the research consisting of one-on-one interviews with five people from the same hometown, I validated the topic for the design.
I found out that the vast majority had little knowledge about the Blitz, despite being raised in and still living in the area.
The final stage of the project was to turn the full design into a prototype, although I already partially started on that while designing the interface. Having the aim of entering the most complete prototype I could provide into the contest meant I had to find small work-arounds for some small prototyping limitations, such as shifting from animated transitions to overlays.
I continued by creating initial sketches and drawing out the 3 different states of the Rotterdam skyline I wanted to portray: before the bombings, after them and the current skyline. Crafting the skylines took up the largest chunk of time, but it felt justified as these skylines would be the core of the app. In order to make up some time, and have sufficient time left for the user interface, I decided to rely on imagery and copy from Wikipedia for the content.
I kept the user interface clean and minimal to emphasize the line illustrations of the skylines. The UI was based on a bold colour scheme, relying solely on three colours and a strong font combination of Playfair Display and Lato.
The final stage of the project was to turn the full design into a prototype. I wanted to enter the contest with the most complete prototype that I could possibly get to, so I had to find small work-arounds for various Adobe XD limitations, e.g. shifting from animated transitions to overlays.
After spending roughly 12 hours on the project, spread over four days, I submitted the concept as a completely designed and high-fidelity prototype of 39 screens well before the contest’s deadline.