packprep_airport_banner

PackPrep: Mobile App

Sketch, Invision, Flinto, Illustrator

 

The Idea

On a study by the Air Transport Action Group, over 3 billion passengers took flight this past year. Over 1 billion of these trips were to a foreign country. People are traveling now more than ever to places they’ve never been to. The problem with going somewhere you’ve never been is you don’t know exactly what to expect, especially if you are traveling to a third world country. Not knowing what to expect can mean not knowing how to prepare for the trip. PackPrep solves this problem by making custom packing lists based on locations and activities and allows users to easily find what they need, either in-store or on Amazon, so they can go on their trip with peace of mind.  

 

The Research

Through my research I found that before a trip, most people do a couple hours of research about their destination, over half of people buy new items for their trip, and 91% of people make lists on their phone. I concluded this app would be desirable for many people traveling to many different places and would actually be used, since about half of all people make packing lists anyway.

 

User Interviews

I interviewed 3 people who all had different amounts of experience traveling. 

PackPrep_Research
 
 

User Personas

I created 2 user personas; Lui, a backpacker traveling to South-East Asia and Noah, a college student going to Colorado for spring break. I used these two personas to demonstrate the different uses for the app; from warm to cold climates, long to short trips, and from a destination that is completely foreign to something more domestic. 

 
 

Experience Maps

From the experience map I learned that most of the stress happens right before the trip. I concluded the app would be the best if it was customizable and would suggest items that were readily available. 

 
 

User Epics and Stories

I had 5 epics; the preferences screen, the packing list itself, signing in, the product description, and the shopping list.

 
 

Original User Flow

I turned each of the 5 epics into one user flow with the start being the sign in and the end result of checking off everything as packed.

 
 

Wireframes

 

User Test Conclusions

Screen Shot 2017-03-17 at 5.59.51 PM.png
  • Unclear showing of added destinations
  • Can't input how long they will be staying at each location

  • Solution: enter each destination separately, display on cards, have “add another stop” button which prompts the add destination and calendar page
 
  • Hard to select dates because of spacing and icons for each date are a bit too small, things seemed crammed onto the page, can't see days of the previous month that may be part of the trip

  • Solution: separate calendar and questions and use more white space, use color to make the app more lighthearted

 
  • Keyboard covers password entry, makes it hard for the user to continue and type in the password

  • Solution: move the entry lines up

  • Continue at the top of the screen causes user to have to reach

  • Solution: put continue button under password entry for an easier reach

 
  • Check off and quantity look too similar which confused users

  • Solution: make quantity buttons larger so they are easier to tap and change it to a more rectangular shape to differentiate

  • List is very long and it is too time consuming to scroll through to find what you need

  • Solution: categorize things at the top and put it in tabs, also have the option to check off all items at once to save the user time

  • Lack of margins creates tension

  • Solution: Design with 20px margins
 
Screen Shot 2017-03-17 at 6.54.05 PM.png
  • Text is too close to icons, makes it hard to read

  • Solution: space all the icons out, put more space between icons and text

  • Icons should match better and be cleaner

  • Solution: get icons with color to bring app more variety
 
  • Users can’t tell that buy on amazon is a button

  • Solution: make buy on amazon a separate button and space it out better so it is easier to click

 

Branding

The most prominent color is blue, and I I chose to use this color from inspiration from the sky when you are flying to your destination. I wanted PackPrep to be exciting, adventurous and clean, and for its logo and word mark to relate to travel. At first, I wanted my logo to look like a passport stamp and I actually kept this idea for my word mark. The word mark is a serif font that mimics the fonts I saw in stamps from Munich, Indonesia, and the US. When designing my logo, I started playing around with different suitcases, abstract airplanes, and paper planes. The abstract airplanes seemed too serious and business-like for my app. I wanted to stay playful and lighthearted. After many trials of hand drawn sketches as well as illustrations on illustrator, I finally chose an airplane made of triangles with different shades of blue that mimics the sky. 

Final Result

 

High Fidelity Screens

highfi_Onboarding
 

UI Library