The BriefResearch & ProblemAnalyze & DefineIdeateDesign & TestingTakeaways

Zipped Outdoor Activities Packing List

#Self-Initiated Project #User Research #UX Design #UI Design #Mobile Design #iOS

A user-friendly application that helps users to pack their luggage for outdoor activities in an efficient, well-organized, and less frustrating way.

Teammates

Lily Lee

My Role

UX/UI Designer

Timeline

June 2022 - March 2023

Tool Used

Figma, FigJam, Miro, Coda, Asana, Maze

Overview

Prompt

The idea for the product came about when Lily and I were frustrated at packing our luggage for camping. As people who love outdoor activities, we find it time-consuming to pack before going on a trip, especially activities like camping, mountain climbing, and scuba diving, which requires different necessary gear that we are not familiar with that much in our daily life.

Design Process

Primary Research

Survey & User Interview

We conducted a survey with 51 respondents to understand people’s packing experience broadly. We would like to understand when do people feel frustrated and what do they care the most during their packing process.

How to make sure that you don't forget to bring something important?

Will you categorize the items in your luggage?

94.1%

will categorize items

Will you discuss with your travel partner when packing?

86.3%

will discuss with travel partner

Will you double-check when you finish packing?

96.1%

will double-check

How worried are you about not packing the necessary items in your luggage?

3.6

out of 5 average (5 is the most worried)

We also conducted 7 user interviews with respondents to dig deeper into their packing process and broke down our interview notes into atomic information on sticky notes in 7 colors representing 7 interviewees. We used affinity diagram mapping to synthesize our research findings.

Key Learnings From User Interview

✏️ Checklist

  • Most people have a one-time list for packing, and they will rewrite the list next time.

  • Some people would share their packing list with their friend

😔 Frustration

  • They feel worried if they didn’t pack necessary things

  • They feel annoying when they spend too much time on packing

✔️ Double-Check

  • Most people double-check their package more than one time

  • When people double-check, they will do it with their list

Analyze & Define

User Journey Map - Action, Thoughts, Emotion and Opportunities

Key learnings from the User Journey Map

👀 Behavior Pattern

1. Plan the trip

2. Create a list

3. Pack the luggage

4. Discuss with travel partner

4. Double-check

😔 Frustration

  • Spend a lot of time search for packing items

  • Worried to forget something need to be packed in the last minute. (ex: charging cable)

🧡 Feeling

  • Feel exciting and happy in the beginning and at the end

  • Feel frustrated sometimes during the packing process

How might we...

From the secondary research, analysis of the user interviews, I determined three major pain points that users faced:

Problem Statement

Ideate

Design Principal

💪 Effective

Focus on fulfilling users' needs and helping them packing their luggage efficiently.

🌟 Delightful

Create delightful and engaging UX to increase the retention rate.

😀 Simple

List checklist in a clear and simple to avoid information overload.

Solution

A simple, clear, and organized checklist

  • List the items in organized categories.

  • Categorize items into must and optional section.

  • A function to receive notifications for specific items.

  • A set of widget that allow users to see their list clearly on the home screen.

Personalized checklist

  • A function to add your own item into the list.

  • Setting a notification to remind an item before the date of the trip.

  • Highlight feature that allow users to emphasize an item when sharing the list.

Effective packing process

  • Sending notification to remind the unchecked items before the date of the trip.

  • A double-check feature allow users to quickly go through the list and found the item that is unchecked.

  • Sharing function for providing the list to your travel partner.

User-friendly and engaging

  • Onboarding pages that introduce the key features of the product.

  • Design that can easily navigate the application.

  • Start using the app without creating an account or signing in.

Design Iterations

Information Architecture

Paper Sketch and Wireframe

We first put our paper sketch on FigJam to clarify user flow and main function of the app. Later, we designed the lo-fi wireframe for further user testing.

User Testing

We used Maze to conduct 10 unmonitored user testing on our packing experience.

User Testing Key Findings

Is it easy to create a list?

4.8

out of 5 average

How important is the feature to send a notification of unchecked items before the trip?

4

out of 5 average

Is it helpful to share the list with your travel partner?

4.8

out of 5 average

Is it helpful to double-check the list before traveling?

4.7

out of 5 average

Other thoughts:

Final Design

Create a list

Send notification

  • Set an alarm to an item if you want to receive notification about packing that item.

  • Receive the notification about the unchecked item the day before your departure day.

  • Long-press on the notification to mark the item as checked.

Share the list with friends

Double-check the list

  • Quickly go through each item in the the list using the double-check function in the app.

  • Press the Checked button if you already packed the item.

  • Press the Hold button if you didn't packed the item yet.

  • Receive the notification about the unchecked item the day before your departure day.

Visual Element

Takeaways

01. Design system build consistency and save effort

  • I learned to improve my Figma skills with Grouping, Naming, Components, Variants, and Auto-layout when building the design system. By creating a design system, we can build our design more consistently. More importantly, when we want to change a part of the design that may affect the whole product, we can automatically change other identical objects and save a lot of effort and time.

02. User testing is the key for iteration

  • At first, we put the highlight function in the edit page, but it turned out to be a bad design since it require more steps for users to highlight an item. After user testing, we designed the toggle button which allow users to complete the task in a more efficient and intuitive way. By getting feedbacks early in the design process, we can save time and efforts.

03. Articulation with the team

  • When collaborating with other designer, I learned to use low-fi prototypes and mockups instead of words description to communicate my design ideas. I found that prototype could work better than thousands of words.

04. The importance of time and project management

  • I found that limiting discussion time allows us to focus more on the topics we should be discussing, maximizing meeting value and increasing productivity.

  • I also learned to manage my time and work more efficiently since I need to find the balance between my work/study and this side project.

Currently, we are preparing the s design handoff... Stay tuned!