Backpack Buddy

The Aim:

Creating an app to benefit young people backpacking through Europe.
It is a place to store locations and tickets, as well as get hotel/hostel recommendations. I created seven app screen prototypes as well as all illustrations and icons using Figma.

Skills Used:

UI design, UX design, illustration, branding, iconography, prototyping

Research and iterations

For this project I started off by conducting a competitor analysis of different travel apps. I also looked for inspiration and what the best features are to include.
I then looked on Dribbble at some prototypes that other people had been designing.
I moved on to researching the locations I wanted to have in my app, to reach a better understanding of them - as well as finding information to include about them within the app. I based the location in Berlin for the screens as this is a popular destination when backpacking through Europe.

Wireframes:

Once I had a basic idea of what I'd like to do, the next natural step was to start sketching wireframes. I first created some minimal wireframes on paper - and later developed these into greyscale mock-ups that included the "Backpack Buddy" content.
I also drew sketches for the illustrations/icons that I was planning to include.

Usability Testing:

After that, I took to Figma and created greyscale content wireframes.
Once I did that, I conducted a short usability test. Within this test, I asked a few of my peers (since their age group is the target audience) to look at my screens and tell me what they thought each feature was to be used for, and how to use it. This gave me a good idea of what potentially needs fixed & rejigged before moving on.
We also did a group critique later on in that week, and I received even more feedback (which can be viewed on my blog).

Colour:

Moving on  from here, I played around a lot with colour. I wanted this app to be bright, with colours showing excitement and adventure. So, naturally, the colours I wanted to include most were green and yellow.
I found it tricky to make these colours contrast enough for them to be visible to the visually impaired. However, with many different iterations, re-working (and squinting at my screen) I got there eventually. I also frequently asked the opinion of my friends from the course, as well as consulting my lecturers.

Refining &
Prototyping:

Once I was satisfied with my choice of colour (I chose the colours used in the penultimate logo above), I added it to the mock-ups accordingly. I also took time to digitally draw and refine the rest of the illustrations that I needed for each screen - basing them on locations from the research I had done. Then, after another group critique, as well as one final user test, I made the final changes and placed the screens onto an iPhone mock-up frame I designed for presentation.