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.
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
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
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.
