Compackt
MOBILE APP“There are 32 million flights, $29 billion in baggage fees, and over 2 million bags lost in transit globally per year.”
Problem
Many travelers prefer to fly only with carry-on luggage to avoid the hassles and fees of checked bags. This often leads to challenges in efficiently organizing and packing their limited belongings. Frequent flyers typically spend multiple hours between 8 or more sources to gather the information they need.
Solution
How might we design a solution that provides one-baggers an all-in-one minimalist packing experience? Meet “Compackt” – a mobile app designed exclusively for the needs of carry-on users. It features customizable packing lists tailored to various destinations and trip durations, plus a weight meter and essential airline information. Additionally, Compackt incorporates forums to create a vibrant community of like-minded travelers.
Context
Solo Project
Solo Project
Role
Full Stack Designer
Full Stack Designer
RESEARCH
Becoming a user.
Background
In 2016 I took a trip to South Korea to visit a friend. As a young starving artist in Hollywood, I booked through a budget airline thinking I was saving money, only to read the fine print. If I didn’t want to pay an $80 bag check fee, I’d have to use a bag no larger than a specific set of dimensions, and no heavier than 35lbs. This trip is what opened the gateway into the vast network of online communities like “one-baggers”, and was just the start of my obsession with packing light.
Hidden in plain sight
When browsing these online communities, I discovered just how easy it was to find prominent difficulties, as users spoke about them openly.
︎ Common user pain points were:
No dedication to simple packing
Other packing apps have too broad of a user-base with no dedication to carry-on users. This also means lack of bag-weight or measuring features to keep users in the clear for carry-on restrictions.
There’s a lack of in-app information
Users often have to bounce from platform to platform to find the information they need just to pack one bag. It’s not rare to have to consult Reddit, Quora, Google, Youtube, Instagram, Tiktok, airline website(s) and calculator apps to forumulate a good list.
Market apps are too complicated
Other packing apps often have too many bells and whistles that deter users away. These apps lack the features one-baggers want, while having a surplus of unecessary hoops to jump through.
I surveyed 211 users across various online one-bag communities to gather potential app features, and evaluated this information from least to most important by quantitative measure. After I discovered what features were most desirable, I performed a competitive analysis for Compackt’s concept with other apps already on the market.
EMPATHY AND INSIGHTS
Placing myself in the user’s shoes.
Hearing directly from the users was crucial for my understanding of how I would design Compackt, and the features the app needs to be worthwhile.
︎ Some insights I gained from this research were:
Users want simplicity
The general consesus was that users preferred to just have one, simple-to-use experience with a low learning curve and no-frills.
Users want information
There’s too much time and effort spent using multiple sources to help users pack. Compackt should be a centralized app where users can join/form a vibrant community of like-minded travelers to swap information and advice.
Users want mobility
The whole point of traveling with a carry-on is that you have everything with you at all times. Users want the same hassle-free access to their packing info; hence, why Compackt should be a mobile app.
︎ The packing exercise
One of the advantages I had when designing Compackt, was that I would be considered a user. I created hypothetical trip to a destination I had never been to, and packed out my own travel backpack as this were real. I made a note on each step I took, every time I had to look something up and what information I was searching for.
This exercise would prove to be invaluable to my design process, and would dictate the information architecture of the app.
︎ Compiling the features
From my research and pack exercise, I concluded that Compact needed to have four main screens within the app: lists (homepage), forums, direct messages, and profile.
UI AND VISUALS
Colorful, playful, simple.
Rounded elements and color-pop vector illustrations are distributed throughout the user interface for a friendly and unified experience.
Compackt’s color palette puts users up in the air evokes a sense of adventure and generates positivity for the new day ahead! Source Sans Pro, an inviting sans-serif, acts as the sole font.
I took visual cues for Compackt’s user interface by inspecting other productivity, travel and learning applications such as Hopper, Duolingo, Reminders, Kayak, Klook, Headspace, etc.
ONBOARDING
Welcome aboard!
In a world where globetrotters were overwhelmed with the current travel apps on the market, I embarked on a journey to design a mobile app with a unique twist for those who dared to travel with only a carry-on. Meet Compackt – a delightful solution tailored exclusively to the needs of minimalist travelers.
HOMEPAGE
Nice to see you!
Users are first greeted by their lists, organized by upcoming trip. Each list card provides a photo, trip dates, and a weight meter that displays how much is currently packed for that trip.
Why this screen works:
︎ Keeps users focused on the upcoming task
︎ Cards are clean and show only the important list info
HOMEPAGE ACTIONS
Adding and sorting.
Where the user will be, for how long, and during what season are all considered when formatting a new packing list. Users are able to add multiple cities and airlines for their trip.
By tapping the search icon, users can switch their lists from a horizontal scroll to a grid view. They are also able to sort lists by different attributes, or perform a general search.
Why this screen works:
︎ The multi-add feature helps to provide both the temperature range for their trip and the carry-on restrictions for the strictest airline that they’re flying
︎ The user is afforded many different viewing options for the lists on the home page.
VIEW LIST
Let’s pack!
The list screen is home to an itemized list interface and an overview of list info. An expanding menu on the top right gives users the option to edit, share or delete the list. Gestural interactions such as tapping and swiping help navigate the userflow.
Add List Item Or Section
An item is added by name and weight, but can have additional info like a photo or notes. The section feature provides list organization that helps the user seperate items by pocket or packing cube.
Weight Meter
The weight meter fluctuates as the user adds or subtracts items. There is pertinent bag info for the airline after tapping the meter. Users are alerted when the bag is too heavy.
Why these screens work:
︎ High priority features (weight meter and add item) are sticked
︎ Intuitive gesture-based controls for items
︎ Bag is displayed as an item, since the bag contributes to the overall allowed weight
︎ Packed items appear greyed out
A one-stop-shop.
With the forums feature, users can finally ditch the plethora of websites they hunt for information in.
Why this screen works:
︎ Three sections display only what’s needed
︎ Trending post affords users more exploration
DIRECT MESSAGING
Check your DMs!
Users are able to communicate with each other privately, share their previous lists or even plan a meetup at their destination.Why this screen works:
︎ Intuitive chat UI similar to your text message screen.
TAKEAWAYS
There’s always room for improvement.
This was my first attempt at creating an app from scratch. There were some difficult moments that reminded me that I have much more to learn, but this also motivated me to dive in and get excited about the process!
Some key takeaways from this process:
︎ Don’t reinvent the wheel.
I love visuals and found myself spending hours on Dribbble and Behance for inspiration. Since I wanted to focus equally on Compackt’s UX and UI, I had to remind myself not to try and make things pretty, but to make them work.
︎ Document everything.
I know I had sound reasons for why I made the design choices that I did, but since I didn’t write everything down, I’ve forgotten a few!
︎ Try to dig deeper.
If I could do the project over, I’d connect with more users, ask more questions, and get more insights. I’m positive there are features that I haven’t even thought of that I’d discover with more user insights.
Some key takeaways from this process:
︎ Don’t reinvent the wheel.
I love visuals and found myself spending hours on Dribbble and Behance for inspiration. Since I wanted to focus equally on Compackt’s UX and UI, I had to remind myself not to try and make things pretty, but to make them work.
︎ Document everything.
I know I had sound reasons for why I made the design choices that I did, but since I didn’t write everything down, I’ve forgotten a few!
︎ Try to dig deeper.
If I could do the project over, I’d connect with more users, ask more questions, and get more insights. I’m positive there are features that I haven’t even thought of that I’d discover with more user insights.