DeepTourism
Graphic Design ● UI and UX Design ● App Design ● Branding
Project Name: DeepTourism
Project Type: Mobile Application (Interactive Map & City Guide)
Project Duration: Erasmus Winter Term 2021/2022
My Role: Sole Designer & Developer (Concept, Research, Design, Programming)
Tools Used: Adobe XD, Mapbox, Illustrator, Photoshop, After Effects, analogue drawing
Overview
DeepTourism is your passport to a unique urban adventure. It’s an interactive app that invites you to step off the beaten path and discover Frankfurt through the lens of psychogeography – a playful and spontaneous way of exploring cities.
Whether you’re a first-time visitor or a seasoned local, DeepTourism will help you see the city with fresh eyes. Follow the interactive map to uncover hidden spots, learn fascinating stories about landmarks, and capture your own unique perspective through photos.
As you navigate the city, keep an eye out for eye-catching posters and stickers. Scan their QR codes to unlock augmented reality experiences and explore the urban fabric.
DeepTourism isn’t just a guide; it’s a game, an invitation to connect with the city on a personal level.
Research
The initial phase of the project involved a comprehensive information-gathering process to establish a deep understanding of Frankfurt’s unique character and cultural context. This included consulting a range of resources, such as guidebooks, official city websites, online rankings, and personal recommendations. The book “Frankfurt for Beginners” by Matthias Arning proved particularly insightful, offering a nuanced perspective on the city’s history and landmarks. Additionally, resources provided through the Erasmus program, facilitated by the German student exchange coordinator, offered valuable insights into broader German culture.
To further enhance the app’s authenticity and visual appeal, I embarked on a psychogeographic exploration of Frankfurt, capturing photographic impressions of the city’s diverse neighborhoods and landmarks. These images served as a rich source of inspiration for developing the app’s color palette, posters, icons, and animations. A particularly striking nocturnal photograph of the Frankfurt skyline, with its illuminated skyscrapers juxtaposed against the night sky, crystallized the project’s aesthetic direction, evoking a distinct cyberpunk ambiance.
Following this immersive exploration, I conducted research into various artistic techniques to determine the most suitable visual style for the app’s graphics and promotional materials. While initially considering a blend of analogue and digital techniques, I ultimately drew inspiration from my own childhood drawings, opting for a style reminiscent of the Polish scratch art technique known as “wydrapanka.” This choice infused the project with a sense of personal nostalgia and playful charm, further distinguishing it from conventional travel applications.
Design
DeepTourism is an application based on the idea of psychogeography, made One of the first things that I designed was the colour palette. I set the colours inspired by the night view of Frankfurt – high contrast of black and CMYK colours: yellow, cyan and magenta. Each colour is representing different aspects of tourism: art, active and life. Art is focused on cultural sphere like museums, active aims sports and other body related activities, with life you can experience spots related to the common life things like food, restaurants, sleeping.
After setting colours it was time to create a map itself. My first idea was to make a not litteral map of Frankfurt that is related to Frankfurt’s image. I researched that an eagle is a sign of Frankfurt and it is placed on coat of arms. I drew a map by hand and converted it into a digital artwork. I set on map some Frankfurt spots that interested me the most. After further development I decided to move to the Mapbox, what helped me a lot in the further development of my app. I change the map that to one made in Mapbox.
My further steps was to design the icon set for application and an app icon that is going to be present after you download the app from your app store. I chose to base all shapes on the circular nature of my spots. Every icon has rounded features
and consisted line weight. Similarly I was choosing the typeface for my project. The best option was Century Gothic – a sans serif geometric font. Ideal for my project in its design and modern look. The posters that I wanted to include as part of my project and illustrations for the app ar made in the similar manner as the first map design. Analogue drawings were converted into digital artworks inspired by scratch artworks made by little children. All of those are made in a consistent manner.
I created the logo for DeepTourism as well. It is the part of app visual identity. The logo contains logotype mede with Century Gothic typeface and a sygnet made of three spots that are characteristical for the app and are reminding of tree spots aspects. After creating the logo it was animated in Adobe After Effects and used as a loading screen. The last thing left to design was how the app should look like. I designed the main page, menu, profile page, spot page and example route page. To create them I used hand drawn elements, Adobe Illustrator, Adobe Photoshop and Adobe XD.
Programming
The development of the DeepTourism application presented a series of technical challenges and opportunities for innovation. Initial efforts focused on traditional web development technologies such as HTML, CSS, and JavaScript, with attempts to integrate interactive maps using Wix. However, these approaches proved cumbersome and limited in their ability to achieve the desired level of functionality and user experience.
The discovery of Mapbox, a powerful mapping platform, marked a turning point in the development process. Mapbox’s robust features and customization options allowed for the creation of a visually appealing and informative map interface. However, integrating Mapbox seamlessly into the existing web framework presented further hurdles.
To overcome these challenges, a strategic decision was made to shift the development environment to Adobe XD, a versatile design and prototyping tool. This transition enabled a more streamlined workflow, particularly with the integration of the Fancy Maps plugin, which facilitated the incorporation of Mapbox maps directly within the Adobe XD environment. This approach not only simplified the development process but also empowered the designer to focus on crafting an intuitive and engaging user experience without the need for extensive coding expertise.
Final Outcome
The final outcomes include: several app mockups, application prototype and app icon set.
