Summer 2024 • Academic • UI / UX Design

HabPack is a packing assistant that streamline the packing experience for travellers.

Sneak Peak the Design Proposals

A Little Summary

Team

Shiyu Zhao

UI/UX Design

Dhruv Joshi

User Research & Testing

Reuben

User Research

Lauren Hoese

Secondary Research

Nora Warschewski

Prototyping & Testing
Skills

UI Design
UX Design
Prototyping
User Research
User Testing

Timeline

May – Jul '24
12 Weeks

Tools

Figma
After Effects

Brief

HabPack uses AI to analyze trip details like duration, destination, and personal preferences to provide tailored packing suggestions, automating the entire process for a hassle-free experience. By focusing on user habits and ergonomics, the app helps travelers pack only what they need, reducing the likelihood of forgotten items and minimizing unnecessary baggage.

Background

Traveling can be a stressful experience, particularly when it comes to packing. Many travelers find it challenging to remember all the necessary items, with studies showing that 65% of travelers forget essential items while packing. Additionally, the travel industry generates over 8 million tons of waste annually, highlighting the need for more sustainable practices in travel preparation.

Research

To better understand the pain points and needs of travelers during the packing process, we conducted a qualitative study with in-depth interviews with 10 individuals who travel regularly for both business and leisure with backpacks.

The Interviews revealed that many respondents face challenges when packing, often struggling with organisation and comfort and sometimes forgetting essential items. Interviews highlighted a strong demand for personalised, ergonomic packing solutions that cater to individual travel styles and take the stress out of preparation. In addition, respondents are interested in sustainable and efficient packing strategies that enhance the overall travelling experience.

habpack-research
Research
habpack-research
Interview Guideline
habpack-research
Interview Analysis
habpack-research
Storytelling

Opportunity

Based on our research findings, we identified three key areas for improvement in the packing process: ergonomically efficient, streamlied and personalized.

Ergonomic

"My backpack usually feels too heavy after packing."

Streamlined

“I always feel like I forget something important when I pack.”

Personalized

"I often struggle to figure out what I need to pack for different trips."

The Vision

How might we simplify and enhance the packing process for travelers to reduce stress and improve their overall travel experience in a sustainable way?

Understand the Users

Before defining the exact solution, we also wanted to gain insight into users' current experience with similar services and find out what unique features our solution could bring to the existing market. We defined two user personas, which helped me visualise the user experience.

habpack-persona
habpack-persona

The Solution

Through market research, we analyzed existing solutions to identify gaps and refine Habpack’s unique approach. Using a Business Model Canvas, we ensured our solution was viable and met user needs. We prioritized key assumptions with an Assumption Map to validate our decisions and crafted signature features that addressed user frustrations, setting Habpack apart.

Market Research

We also researched a number of existing solutions to understand their business models and shortcomings before finalising our specific solution. During this process, we also introduced a Business Model Canvas for our service to give us an overview of our solutions meet user needs and stand out in the marketplace.

habpack-research

Signature Features

Each of these signature interactions was developed from all the previous interviews and persona designs. Not only do they address user frustrations and enhance the user experience, but they also take our service from standing out in the marketplace.

To prioritize the key assumptions about user needs, we created an assumption map to test and validate our design decisions.

Assumption Map

Assumption Map
Signature Feature

Personalized Tips

Receive customized packing suggestions based on your destination, weather, and activities to ease your preparation.

Signature Feature

Smart Checklist

Provides real-time reminders and an evolving checklist to ensure you never forget important items.

Signature Feature

Smart Checklist

Helps you pack comfortably by promoting even weight distribution and easy access to frequently used items.

User Flow

After establishing our key features through assumption mapping, we crafted the user flow for Habpack to seamlessly integrate these features into the packing experience. Our goal was to align every interaction with user needs, making packing more efficient, comfortable, and environmentally conscious.

habpack-research

Prototyping

Considering the user flow and signature features, we drew wireframes and storyboards, medium fidelity and high fidelity prototypes to further enhance the detailed user interactions and screens in our service.

Wireframes & Storyboard

We started with storyboards to visualise how users interact with the product in a narrative format, showing context, environment and user interactions over time. We then created wireframes based on this, outlining the basic structure, functionality and interactions of Habpack without details.

habpack-research
Storyboard
habpack-research
Wireframes

Low-fi Prototype

We created a low-fi prototype to test the basic layout and functionality of Habpack. This simple, interactive model allowed us to quickly gather feedback and make adjustments before moving to more detailed design work.

habpack-wireframe

Iterations and Testing

Before finalising the design, we went through several rounds of design revisions and user testing. With the help of and testing the different processes users go through in the app, we ended up with a more complete design.

Design Iterations

Through multiple design iterations, we explored different styles and colours. There were also many changes to the overall placement of features as user testing progressed.

habpack-wireframe

User Testing

For the user testing of HabPack, we conducted interviews with 12 participants using Figma as our testing platform. Figma enabled us to create interactive prototypes that participants could easily engage with, without requiring any downloads or installations. The insights gained from these sessions highlighted areas for improvement in both the UI and overall user experience, which we have incorporated into the final design of HabPack.

habpack-research
User Testing Analysis
habpack-research
Feedback Matrix

Final Design

Signature Feature

Personalized Packing Experience

Users can input their preferences to tailor their packing experience. After logging in or registering, the homepage provides personalized recommendations based on individual needs, ensuring a customized and stress-free packing process.

habpack-final
habpack-final
Signature Feature

AR Luggage Detection & Ergonomic Scoring

The app uses AR technology to detect properties like the brand and measurements of your luggage. It then ranks the luggage with an ergonomic score, helping users choose the best options for comfortable and efficient packing.

Signature Feature

AI Checklist &
Sustainable Shopping

HabPack offers a personalized AI checklist that adapts to your travel needs. It also includes shopping recommendations for sustainable items from our partners, promoting eco-friendly packing practices.

habpack-final
habpack-final
Signature Feature

Ergonomic Packing Guidance

Receive expert guidance on how to pack your items ergonomically, ensuring weight is distributed evenly and frequently used items are easily accessible. This feature helps enhance comfort and efficiency during your travels.

habpack-wireframe

Design System

For the HabPack design system, we selected Jost as the primary font for headings, chosen for its blend of playfulness and readability, aligning with the approachable nature of the overall style. For body text, we used SF Pro, the default iOS font, to ensure clarity and familiarity. The color palette is drawn directly from the brand's visual identity, maintaining consistent brightness across all elements. Buttons, cards, icons, and forms are designed systematically to ensure a cohesive experience across all screens, enhancing usability and visual harmony.

habpack-wireframe

Learnings & Next Steps

Designing the Habpack application has been an insightful journey, pushing my creative and problem-solving skills to new heights. Throughout the process, I found the following two points that I learned inspire me the most.

Practical Design System

Creating a practical design system is hard. During the design process, I not only learnt how to make full use of the design tool's component management system, but also explored how to create a consistent design that adapts to different scenarios. This has given me a clearer idea of how to improve future design projects.

Group Efficiency

The creation of Habpack is one of the most challenging for us so far. Under the hood, we altered our ideas, solutions, and scenarios multiple times. Still, with collaboration, communication, brainstorming, and proper task assignment, we are proud that we improved our group efficiency and delivered our final design!

What’s Next?

The journey with Habpack is far from over, but I would love to develop this project even further. The next phase will involve more extensive user testing with a broader demographic to uncover any remaining usability issues. Insights from this phase will guide fine-tuning of the design and feature set.

You've reached the end!

Thank you for reading! You can check out more cool stuff by smashing either one of the following buttons...

Next Project