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
Skiil
UX / UI Design
Expert Review
Prototyping
User Testing
Timeline
May – Jul '24
12 Weeks
Team
Figma
Miroboard
Reuben
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.
Research
Interview Guideline
Interview Analysis
Storyteling
Opportunity
Based on our research findings, we identified three key areas for improvement in the packing process: ergonomically efficient, streamlied and personalized.
Ergonomic
Most people pack by instinct, for example, heavy things go wherever they fit, light things fill the gaps. But where weight sits inside the bag changes how it carries on the body. The same 10 kg can feel manageable or unbearable depending on whether it's close to the spine or sagging at the bottom. We can guide users toward a body-friendly packing layout, so the bag stops fighting them from the first step.
Streamlined
Packing today is a memory game. Travelers run through items in their head, usually the night before, and inevitably miss something, like a charger, a prescription, a passport. The anxiety doesn't end at the door; it follows them through the trip. The opportunity is to replace mental recall with a guided flow that surfaces the right items at the right moment, so nothing important depends on being remembered.
Personalised
A weekend in Paris and a four-day hike need completely different bags, but most packing tools treat every trip the same. Users end up either over-packing "just in case" or scrambling for essentials once they arrive. There's room to make packing suggestions context-aware, such as adapting to destination, weather, duration, and trip purpose, so every list starts tailored, not generic.
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?
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.
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.
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.
Feature 01
Personalized Tips
Receive customized packing suggestions based on your destination, weather, and activities to ease your preparation.
Feature 02
Smart Checklist
Provides real-time reminders and an evolving checklist to ensure you never forget important items.
Feature 03
Packing Guidance
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.
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.
Storyboard
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.
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.
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.
User Testing Analysis
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.
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.
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.
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.
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.
Lesson 01
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.
Lesson 02
Group Efficiency
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.
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.