Idea & challenge
This project was part of the course 'Interaction Design 1'. The task was to realize an own app-idea with a high-fidelity-prototype and the design-tool of our choice. Because of my great interest in photography and urban exploring, my idea was to link those two topics. 'Urban Exploring' describes a large community exloring and photographing urban and lost places. Often times these places are abandonned, e.g. old factory buildings. The personal safety and protection of the places is really important. With my app I want to give a plattform for inspiration to this growing movement. It is supposed to be a network connecting the topics of photography and adventure. People should be animatited to spend more time outside, explore their surroundings and to be aware of the environment. A special challenge was to sort the large amount of information with photos, maps and other views. It was also important for me to design an interface with a high recognition value and to create a brand with a high acceptance in the mostly young target group.
Idea & challenge
Through talks with fellow students, the exchange in internet forums with urban exploring as the topic and an internet research in the field of urban exploring, different user needs for a potential urban exploring app could be detected. Furthermore the first pitch of the app idea in front of my my fellow students brought up a lot of helpul feedback. Examples for some gathered knowlede are:
- people with urban exploring as a hobby like exchanging about their experiences
- Urban Exploring is often connected with photography as a hobby
- for new followers of this hobby, it’s often difficult to get information and good overview about interesting places in their near environment
- a lot of people like spontanious trips and and want to experience new adventures in their usual environment
- people moving to a new town, want to get to know their new hometown in an intensive and extraordinary way
- as an urban explorer I want to make experiences that go beyond a normal touristic exploration
- lots of people want to spend more time outside and want to exscape from their daily lifes
To consider these user needs my app concept shows a high level of visual and photographic content and gives the user the possibility of an intensive exchange with other fellows inside the community.
Scribbles, Wireframes & High-Fidelity-Screens
After the first scribbles on paper I put the structure into a digital wireframe. With the prototyping-tool Adobe XD I designed the high-fidelity-prototype. Below you can see three example screens for every iteration phase.
show interactive protoype ➞
The name of the app urb× stands for 'urban exploring' and creates a brand with the 'X' as a design element. It is a metaphor for a marked place on a map and shows up in the header of the different menus. 'Explore your city, deeper than ever.' is a slogan which is supposed to make curious. The whole interface is specialized to contain a lot of photographic content of the urban adventures of the users. Everybody is animated to share their experiences. You can look up the most viewed urban places and the most favored photos. On a map you can see interesting urban places near you. The bottom-navigation gives you the ability to navigate easily between the menus. The interface has a minimalistic flat-design. The colors are striking with a light turquoise and a dark blue. The color gradient provides depth to the UI and lets the user think about unknown adventures and city lights. All the photos were results of my personal photo trips in the context of urban exploring. They were a good way to make the interactive prototype feel authentic and realistic. Through this project I was able to link two of my personal interests and evolve my skills in the field of UI/UX Design in a really fun way.
Illustration for After Effects Tutorial-Video
Intro of my Urban Exploring Tutorial-Video