Gap N' Go

travel app banner image

Brief

With an emphasis on illustration, icon, diagram and charts this brief asked me to design an app based around travel.

Starting on paper

First up- the research! I brainstormed many different areas for this project, I looked at a wide range of possibilities from space to under the sea. However the idea I felt most connected to was the idea of an app designed for young people, an app that could help young people on their travels and I wanted to make an app that could inspire their journey.

User story- as part of my research I completed a user story task in order to focus on what the user would want and need from the type of travel app that I was going to design. I am interested in user centred design and that approach, so I enjoy completing tasks like this and seeing the clarity it provides me. To see more of my research process for this project head over to my blog!

Wireframing

Using all of my research I advanced onto the next stage of my process which is wireframing. I began with a basic wireframe, planning and plotting layouts on paper first of course!

Illustrations

I then thought about the illustrations for my travel app, including what locations and icons to choose. I brainstormed various illustration styles until I decided on the perfect approach to take for my app. Taking into account targeted users and what they want from apps I decided on a minimalist flat design style.

I wanted the hot air balloon idea to be the app's main brand image and theme, this represents freedom and that idea of not being ‘tied down’ or restricted and it shows that travel can be spontaneous and liberating this was an important aspect to my travel app as it had a lot of symbolic meaning which I delved deeper into over on my blog. I took some time sketching out how I could incorporate this idea into the apps homepage and throughout the app screens.

Icon set

One of the tasks within this brief was to create a set of icons for the travel app. I completed mind maps and I sketched out possible icons that I would need and that would also make sense in my app.

Icon sketching

I refined my choices down to the essential icons that made sense for my app and I decided on a minimalist icon design. I wanted to keep them simple therefore making them accessible as well as easily understandable.

Taking it digital

I took to Figma to create digital wireframes based on the sketches. I kept these wireframes as simple as possible to give me a clear vision before I began to build the app.

I took my sketches and began to build them digitally in Adobe Illustrator. This stage involved the exploration of colour combinations aswell as looking at various structures and forms. I decided on the flat design style as I felt this combined with my chosen warm colour palette fitted my targeted users and the overall vibe I wanted me travel app to give.

I incorporated the same style throughout the digital illustrations, including the location illustrations and the icons in order to produce a consistent and cohesive app.

This is my final icon set for my travel app. I decided to go for a simple, minimalist style for my icons as the rest of my app is very illustrative. These icons will be used for the nav.

Challenges and reflection

This ux project provided me with a lot of challenges, from the icon set to the the illustrations to layout! This is my first ux app that I have created start to finish, and one of the challenges I found I had is placement and layout as well as sizing of elements.

I thoroughly enjoyed this project and the challenges I faced while creating it. in order to design the appropriate app for my targeted users I completed a lot of user centred research, including questionnaires with gap year students (more info on this on my blog!) I enjoyed the research side as well as the illustrating and I have strengthened my skills across multiple areas with this project.

Final app screens

Want to see more of research and development of this project? Head over to my blog!

Blog