top of page
Add a heading (2).png
Add a heading.png

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

Empathize

1.png

Define

3.png

Ideate

6.png

Prototype

5.png

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

Pre-Travel Stress Survey JPG.png
Pre-Travel Stress Survey JPG.png
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:

affinity map for capstone 1.png
affinity map for capstone 1.png
affinity map for capstone 1.png
affinity map for capstone 1.png
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. 

Cover.png
Cover (2).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?"

3.png
4.png
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
Untitled_Artwork.png
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 Stories.jpg
1.png
2.png
3.png
4.png
5.png
Untitled_Artwork.png
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.

PACKING USER FLOWS (2).jpg
2.png
1.png
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.

1_ MASTER PACKING LIST.png
2_ ADD A TRIP.png
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

19 - Moodboard - V2.png
19 - Moodboard - V2.png
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. 

PACKFLOW LOGO - v2.png

V1

packflow logo (14).png

V2

PACKFLOW LOGO v3.png

V3

Screen Shot 2021-08-10 at 2.05.10 PM.png

V4 - Final Version

Color Palette
1.png
2.png
3.png
05394F.png
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.  

Copy of Aa (1).png
Copy of Aa.png
2.png
Copy of Aa (2).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. 

20.png
23.png
19.png
18.png

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.  

Untitled design (2).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.

New Trip, New Packing List for Trip, from scratch (1).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.

Untitled design (3).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.

Reflections and Next Steps
bottom of page