Case Study:
TripBuddy UX/UI Design

Crafting TripBuddy

Overview

Traveling is good for the soul. Planning a trip should be as well. TripBuddy allows users to plan a trip including accommodation and activities all in one app. Moreover the app also assists users when they are already on the trip by providing useful information on spontaneous activities and infrastructure on site.

Contents

Click on the keyword to get to this part of the case study directly.
User ResearchUser PersonasUser FlowsWireframesPrototypeMood BoardMockups

Purpose and Context

The project was completed as part of the CareerFoundry UI Design course.

Objectives

The following goals / problems were aimed to meet / solve:

  • To plan a trip easily
  • Simplify the process of booking accommodation / activities
  • Help travellers on site find what they need

Tools

The project was engaged with the help of the following tools:

  • Lucidchart (User Flows)
  • Skype (User Interviews)
  • Sketch (Wireframes, User Personas, Icons & Illustrations, Final Designs, Mockups)
  • InVision (Prototype)

User Research & Personas

Interview Sessions

Interview sessions with multiple were conducted to find out about wants, needs and pain points in regard to travelling and especially planning and executing a trip. The interviews were held in person or via Skype and recorded for later evaluation.
The following points present the findings in a condensed form:

  • Most participants prefer authentic experiences that locals would do / recommend themselves
  • The biggest pain point when planning a trip for all participants is finding and booking accommodation
  • An important need of all participants is information on infrastructure (e.g. free public toilets, public transport, parking)
  • Most participants prefer to plan a trip based on inspiration. However sources and methods to find such vary

User Personas

From the findings of the interviews user personas were derived to get a clearer picture of where the MVP should be heading. The following three user personas were defined:

User Stories & User Flows

User Stories

To ensure a fast delivery of an MVP a MVP statement was made to narrow the scope of user flows necessary to convince early adopters. The document also provided information on features necessary for a first iteration of the MVP and features that could possibly follow in a second or third iteration. Additionally user stories were defined to form a basis for the path of the user.

As an organized person,
I want to make sure everything for my trip is booked beforehand,
so that I can start my trip without worrying I forgot something.

As an organized person,
I want to be able to see an overview of my trip, so that I can organize my trip further.

As a student on a budget,
I want to be able to find cheap accommodation and eating, so that I’m able to take a trip without touching my savings.

As someone who always like to visit new destinations, I want to be able to get a hang of public
transportation, public toilets etc. quickly so that I don’t feel lost at any time.

User Flows & User Flow Diagram

To visualize the user stories and to get an idea about the actual steps as well as an estimation on the amount and complexity of the first screens user flows were defined and consolidated into a user flow diagram.

Low-Fidelity Wireframes & First Prototype

Low-Fidelity Wireframes

With iteration-based design in mind, low-fidelity wireframes were created on paper to make sure that all ideas could be considered for the following prototype. The result were around 40 screens of which several were iterations of one screen to be enhanced each round.

First Prototype & User Testing

After the first wireframing session the first prototype for the app was created. Based on the user flows three test scenarios were created and all necessary screens were included into the prototype. Afterwards multiple users participated in a moderated user test to test the prototype and find out if assumptions made in the user stories and user flows were true.
The test did not show any major flaws in the prototype however the test uncovered some cosmetic issues that occurred due to the nature of paper prototypes and would be fixed in the next stage of mid-fidelity wireframes.

While icons were only suggested in this type of prototype, the problems that occurred with the chosen symbols already gave useful insights for the later creation of icons for more detailed wireframes.

Mid-Fidelity Wireframes

Besides uncovering small issues with help of the paper prototype the wireframes were ready to be enhanced and polished. For this stage mid- and later high-fidelity wireframes were created.

Mood Board

With the wireframes finished the next task was to define a visual identity for the app which, at this stage, only had a few colors assigned to it for checking the function of primary and secondary buttons. To help facilitate defining a visual identity and sorting all inspiration found a mood board was created that was to guide the following steps of visually refining the app.
Inspiration was drawn from several other projects, photographs of local scenery or dished from cities around the world as well as vintage typefaces and mostly warm colors that transport the an inviting spirit.

High-Fidelity Wireframes & Feedback Loop

With user input on the design of the app the final screens were ready to be created. Based on the high-fidelity wireframes all screens were enhanced with visuals. To maintain the iterative approach the designs were still not considered final and subjected to a round of feedback that resulted in a lot of points to be improved and therefore the screens were redesigned once more. In addition to all mobile app screens some few selected screens were also designed for other bigger devices based on a responsive grid. At the very final stage of the project the screens were put into perspective with the help of mockups.

Mockups

Style Guide

To help designers, engineers and also marketers involved with the product in the future, a style guide was created that outlined the style of the app and its elements further.

Thank you for your interest!
Do you like what you just saw?
Then let's talk!