CityPups
Design Sprint Case Study
Overview
Problem
Most Americans have real difficulty packing and a majority put it off until the last minute. Americans voted packing as more stressful than the actual travel.¹ Many apps and websites have attempted to make packing easier, but recent data suggests that most travelers still face this challenge.
51% of people would give up alcohol for a month or social media for a week to NOT have to pack.² 37% of US vacationers have cancelled or delayed their trip due to travel stress.² 65% of Americans admit to having real difficulty when it comes to packing for a trip. ¹
¹ SWNS, https://bit.ly/37OWqSt
² Wyndham Vacation Rentals Data via Travel Agent Central, https://bit.ly/2Lji1uA
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)