A flexible platform so you can read and listen to your next book.
Overview
​
Problem
​
​
​
Solution
​​After researching, exploring solutions, testing solutions, and reiterating, I crafted a solution to relieve stress of the pre-travel process. Packflow is a mobile application for frequent travelers to create packing systems that work for them for every type of trip.
​
My Role
UI/UX Designer, Researcher, Usability Tester
​
Tools
Sketch, Marvel, Figma, Miro, Coolors, Google Forms, Google Docs, Procreate, Zoom
​
Process
My process was to utilize the core stages of design thinking: Empathize, Define, Ideate, Prototype, Test. I reiterated this process several times.
Empathize
Define
Ideate
Prototype
Test
Empathize
To empathize with users in the space and learn what they are really struggling with, I conducted primary and secondary research.
​
Secondary Research
According to my secondary research, the pre-travel process and in particular, packing, is a major stressor among the target market.
Primary Research
In order to gain first hand experience, I conducted interviews with potential users. First, I recruited users through a Screener Survey I created via Google Forms.
​
After collecting 60+ responses to the screener survey, I narrowed it down to 5 potential users to interview who fit into the following demographics:
​
-
Users aged 25-40
-
Travel by airplane regularly (4+ times a year)
-
Pack their own suitcase
Affinity Mapping
After conducting interviews, I wanted to take a look at the overlapping information from the each person. I synthesized the key information into the following affinity map:
Empathy Mapping
To better understand the users' pain points, goals, feelings, thoughts, and behaviors, I created two empathy maps. My goal for my empathy mapping was to bridge the gap between creating personas for the app with the problems the target market faced.
.png)
Personas
Creating two empathy maps from my original affinity map gave me two distinct maps to build personas from. Below, I have represented two particular users for Packflow to help me understand "Who am I designing this product for?"
Refining the Problem Statement​
After my researching and deep-dive discovery into the potential users of Packflow, I wanted to make sure I was clearly articulating the problem(s) I was trying to solve. I framed these in 4 "How Might We..." statements before I went any further into crafting a solution.
​
-
How might we destress the packing process?
-
How might we teach travelers to pack more effectively?
-
How might we reduce the amount of things travelers forget when packing?
-
How might we help travelers prepare for the weather at their destination?
Design
Define & Ideate
My next phase of this project was to brainstorm solutions to the problem based on my research and How We Might Problem Statements.
Brainstorming
User Stories
To prioritize features by needs of the users, I crafted and narrowed down user stories. First, I've outlined my initial user story concepts then I prioritized 5 for the MVP.
User Stories
Prioritized User Stories for MVP
User Flows
Thinking of the user stories, I thought about the routes that users might take to achieve specific goals in the app. I crafted essential routes – or red routes – to outline this.
.jpg)
Sketching
Sketching was the next part of my process to quickly get my ideas down before creating an in-depth prototype. My goal was to be able to get a low-fidelity version of my ideas down so I could test them first. I took my red routes and created the following screens for testing.
Guerilla Usability Testing
To get initial feedback on my ideas, I employed the method of Guerilla Usability Testing. My goal was to quickly learn what users liked, disliked, and struggled with in order to further my ideas.
Because of COVID, I was unable to do the guerrilla usability test in a cafe or somewhere public, so I conducted the test with 5 friends and family members. I created a prototype on Marvel for this test. You can view the prototype here. I recruited them by explaining I was working on a project for school and if they could give me a few minutes of their time for feedback it would help me a lot. They all are avid travelers and use apps regularly.
Findings
The usability testing was extremely interesting and provided me with a lot of insight. I discovered that I needed to explain better if they should ‘Create an account’ or act like a returning user in the beginning steps. I also think that I could have worded my questions a bit more clearly in general. Participants did understand the purpose of the app without me having to tell them. I think the simplicity of the set up helped with understanding what the app was for. I think having some type of intro landing page of information on the prototype would be more helpful to make that even more clearer in the future. I definitely think I would like to do another round of testing after I make some design tweaks and build things out a bit more.
Recommendations
I am definitely going to make sure there is a description on the landing page when the user first opens the app and instead of just going to buttons for options “Getting Started” “Your Account” make sure there is a tutorial that can be walked through the first time a user logs in and creates an account on the app. I also think having a BACK button would be helpful.
Wireframes & Wireflows
To take my design ideas further, I created a wireframe of the app and then made it into a wireflow. My goal was to see how the elements interacted without diving into the design, color, typography, etc.
Edge Cases
My next step was planning for the unexpected by examining edge case scenarios – routes that the user might take outside of the red routes described in the wireframes above. Below are some of the edge cases I identified.
Brand Platform
Crafting a visual style that will resonate with users was my next step in the process. Creating a moodboard, style guide, and visual language to guide my prototype is outlined below.
​
Company/Product Name
-
PackFlow
-
Rationale: I chose this name because I wanted to convey packing and a sense of having a system with packing.
-
Mission/Vision
-
Packing should be the least stressful part of travel. We provide tools that make it easy to prepare for travel and concentrate on the trip.
-
Rationale: I chose this mission/vision because I wanted this company to help take the stress out of packing so travelers could focus more on the destination than the prep they needed to do to get there.
-
​
Brand Personality
-
PackFlow goes beyond travel as it helps relieve stress and makes a real difference in people’s lives. Showcasing a lighthearted and fun filled travel experience is essential.
-
Rationale: It’s important the brand creates less stress in the user’s lives and not just improve the travel experience.
-
Brand Attributes
-
Reliable, stress-reducing, effortless
-
Rationale: Traveling can be overwhelming. Creating a reliable system for travelers to use will be stress-reducing and will help them achieve an effortless pre-travel experience.
-
​
Style Guide
Logo
Crafting a logo that embodied the brand personality and brand attributes saw me working through a lot of iterations. I knew I wanted something that embodied packing, travel, and a streamlined process.
V1
.png)
V2
V3
V4 - Final Version
Color Palette
Typography
When looking at fonts to compliment the logo design, I wanted to make sure I chose fonts that were easy to read, accessible, and inclusive.
.png)
.png)
Imagery
Selecting images that complimented Packflow's branding was essential in making sure there was a cohesive end product. I wanted to ensure I found images that reinforced the brand's personality and create a connection with the users. As such, finding images that felt like an effortless travel experience were essential.
Iconography
One of the most important parts of creating an inclusive, accessible experience was creating intuitive, easy to understand icons for users. Although I did not need many icons, I wanted to be sure the ones used in the Packflow app were streamlined.
HOME
PACKING LISTS
TRIPS
HELP
Prototype
High Fidelity Mockups
Creating a fleshed out version of the app after establishing the style guide was the next step in my process. My goal was to create an engaging, accessible, and inclusive design that solved the user problems. To create the best user experience possible, there were multiple iterations of the high fidelity mockups.
​
Version 1
The first iteration of Packflow was all about getting the color scheme, flow and ideas down. I also experimented with a colored background versus a plain white background.
.png)
Version 2
I wanted to create a more cohesive, streamlined look and feel to the app. Getting rid of the yellow and playing with negative space and gradients made the app feel more branded. Version 2 had many different iterations within it before landing on the final version of 2.
.png)
Version 3
The final version of Packflow was born after usability testing, mentor review, and hiring manager reviews. The final prototype complete with animations is viewable here.
.png)
Test
Throughout each version of the high fidelity prototype, I employed user testing to get feedback. I wanted to figure out what would work and what needed improvement in my designs. Some of the feedback was more casual in nature from mentors and colleagues, but two official rounds of Usability Testing were employed.
​
Usability Testing - Round 1 Findings
The first round of Usability Tests were done with the goals to find usability issues in the design of the app. I recruited 5 individuals in the target market through a social media callout. By conducting moderated remote usability tests, I wanted to discover:
-
Can users add a Master Packing List?
-
Can users add a Trip?
-
Can users add a new Master Packing List?
-
How do users respond to the flow of the UI?
Issue #1
Language Consistency was a common theme throughout.
Summary
There was some confusion with the label “Master Packing Lists” and “Packing Lists”
Recommendations
Reworking the naming of Master Packing Lists and Packing Lists could be helpful. Perhaps restructuring the name of Master Packing Lists so that it signifies more of what it was originally supposed to be - your core essentials you take on every trip no matter where you are going. e.g. glasses, toothbrush, phone cord etc.
Issue #2
There were some hang ups with the flow of Trips and to use the Master Packing List or not based on the type of trip.
Summary
When users got to the question if they should use the Master Packing List or not, the question was, “What type of trip is it? How would I know what type of Packing List to use?”
Recommendations
The flow of adding a trip can be improved by adding in a way to determine what type of trip it is from the get go: for leisure or for work.
Issue #3
Weather
Summary
Users said they could not determine what to pack if they did not know what the weather
would be like where they were going.
Recommendations
Adding in an option in the flow of “Add a Trip” to view the weather of the location they are
going to before they edit the Master Packing List or add a new Packing List would be
helpful in the packing process.
Issue #4
Editing Master Packing List
Summary
Users said that even if they used the Master Packing List for a Trip, they would still like
to tweak it for that trip.
Recommendations
Building out a way to edit the Master Packing List for the specific Trip after they have
answered “yes” to the “Use Master Packing List for trip?” question would help solve this
issue.