Pack! Mobile App Design
A re-imagined travel packing list version of supermarket shopping list mobile app Bring!
Challenge
Packing for an upcoming trip can be stressful and too often, passengers forget to bring something they left behind at home. I found a gap that wasn’t met in current travel packing apps. The inspiration for the design is Bring!, a mobile application I use regularly for food shopping. The goal of this project is to design a travel packing app which is engaging, easy to use and inspires other users to pack efficiently for upcoming trips.
Results
Project Inspiration : Bring!
Red and Green distinguishes the selected and non-selected items from the list
Items are clearly labelled with their own hand-drawn logos
Default theme is Dark Mode. App offers users the choice of dark theme, light theme and system theme (the appearance adjusts automatically).
Pre-existing recipes on the 'Inspiration' Page
Links to view the recipe, share with others and add to favourites
Pre-made list of ingredients for that specific recipe
Bring! aims and objectives
-
Forget that scrap of paper! With the Bring! Shopping App you can plan your shopping faster – at home and on the go.​
-
Learn how to use the Bring! App to optimize your shopping. Stay posted on updates and new features, and get the best tips for your kitchen and supermarket
-
Easily create and share shopping lists with your family, partner and flat mates​
-
​​​Simplify the shopping for millions of households worldwide
User Survey
To inform my design, I conducted a user survey to identify and understand common trends, goals and pain points that users experience when compiling a list for packing items for travel.
Other than passport, wallet, phone and keys, what are your 3 most essential travel items that you need to pack when going on a trip?
-
Moisturiser, travel pillow and crocs
-
Appropriate clothing, book, sketchbook.
-
My kindle, tablet and the right kind of shoes
-
HeadphOnes, batteries, sunglasses
-
Makeup, face cleansing products, phone charger
-
Paperwork (car hire, travel insurance, boarding pass), swim shorts, sun cream
-
Insurance documents, glasses, painkillers
-
Clothes, toiletries and chargers.
-
personal care items
-
Travel adaptor, chargers, power bank
-
Water bottle, toothbrush, phone charger
-
Medication, toiletries, and phone charger
-
Underwear, bathing suit, headphones
-
Kindle, headphones, sun cream
-
Headphones, chargers/cables, toiletries​
-
​​​Toiletries, clothes, book
-
chargers, sun cream, toothpaste
-
Underwear, toothbrush, pjs
-
Chargers, some specific toileteries, sunglasses
-
Tech Adaptors, Medical, sportswear
-
Medication, shaving blade & gel, change of underwear
-
Glasses, a book, pack of cards
-
Underwear, make up, meds
-
It depends. If I have to drop off my suitcase I always make sure I’ve got extra clothes on my backpack/carry on. Otherwise I will always bring with me underwear, deodorant and a T-shirt as an essencial.
-
Toothbrush, pijamas and chargers
-
Underwear, toiletries, noise cancelling headphones
-
Skin care, medication, kids essentials
-
Handheld steamer, speaker, chargers
Top Essential Items from the survey
-
Chargers - 10 participants
-
Toiletries - 6 participants
-
Underwear - 6 participants
-
Medication - 6 participants
Pain Points
Goals
-
Overpacking
-
Forgetting essential items
-
Difficulty organising items
-
Difficulty managing different lists for different trips
-
Pre-made packing templates based on trip type
-
Reminders for last minute items
-
Weather destination - specific suggestions
-
Share lists with others
-
Customisable packing lists
-
Integration with itinerary or calendar
How might we:
Help users pack lighter in order to avoid overpacking
Remind users about last minute items to pack so they don't forget to bring these items for their trip
Encourage users how to better organise their items when packing
Help users remember essential items
Implement suggestions based on weather and destination to ensure suitable items are packed
-
Provide 'How to' links to videos and blogs on the inspiration page of the app
-
Have a shared list with people on the trip. Assign items for each person to pack
-
Implement a 'reminder' feature for the user to customise
-
Notifications on user's phone on the day/time the user set for the reminder
-
Design pre-made packing templates based on trip type
-
Provide 'how to' links to videos and blogs on the inspiration page of the app
-
Suggested items to pack starting with essential items often forgotten from user survey, as the default
-
Potential monetisation - can partner with brands e.g. 'Soltan sunscreen is the best way to keep safe in the sun!'
-
Implement and 'reminder' feature for the user to customise
-
User selects destination on packing list
-
Add linking to flight details for easy access within one place
Wireframes
I began by producing some initial wireframe sketches using analog media. These gave me an idea of how I could incorporate the existing features of Bring! into a travel packing app.
Addressing the wall
Whilst in the flow of producing sketches which resembled the Bring! app, I hit a wall when it came to designing the Reminder feature. I was initially building features too true to the existing layouts that it didn't provide much scope for designing a reminders feature or entering data specific to the list. I became stuck. To get out of this, I started designing a user journey to go from creating the list with the necessary data to implement a reminders feature.
Mid-Fidelity Designs
I transformed my low-fidelity wireframe sketches into mid-fidelity designs using Figma. This exercise helped me cement an understanding of the UI elements, including their visual hierarchy and the placement of various functions on the screen. My focus while creating these wireframes was making the UI elements, such as icons and buttons, simple and consistent.
Icon Illustrations by catagory
I created the icon illustration using the studio pen in Procreate. This method was used to replicate the hand-drawn digital illustrations and icons used in the Bring! app, designed for Pack!. By replicating the illustration style, this allows consistency throughout the existing app and the new design. The list is not exhaustive, this is simply an introduction of the types of items which the user can choose from to add to their lists.
Official Documents
Toiletries
Underwear and Nightwear
Electrical Items
Swimwear
Outdoor Items
Clothing
Accessories
Misc
Logo design
I sketched some ideas on Procreate for a logo for the packing list app design. Like the Bring! app logo, I wanted to keep the image simple but recognisable as the bag where the items end up in. I also brainstormed a few names for the app design.
Following the final logo design, I came up with three ideas for the possible names for the app design with the new logo. These were then shown to 12 users who were asked to select which design they preferred and why.
Bring! travel
Bring!
travel
Pack!
Results :
8%
0%
92%
Additional comments:
-
Not a stand alone app so is not confusing
-
It is simple - one word, like Bring!​
-
Message is clearer
-
Memorable
-
The name is exactly what the app is being used for
Choosing a colour palette
It then came to deciding on the colour palette for the high fidelity designs. After coming up with a few different colour palettes associated with the theme of travel, I produced one high fidelity design.
Starting from the original colour palette from 'Bring!' and duplicated them, applying a new palette to each one. These were shown to users who selected the colour palette they felt would work best for 'Pack!'. Some chose more than one design.
37%
5%
5%
53%
Additional comments:
-
Nice contrast
-
Complimentary to the eye, easy to read
-
Contrast allows for clear CTA (call to action)
-
I like the colours the most
-
Better contrast
The new colour scheme would also apply to the logo. These designs were shown to several users who chose the designs they felt were the strongest.
7%
39%
54%
Additional comments:
-
Goes better with the colour palette
-
It makes sense they are all different colours
Design System
Spot illustrations
Bring! uses colourful spot illustrations which supports an action which the user must take or has taken, e.g. 'enter first articles' and 'Hurra, shopping done!'.
Giving my app is designed for packing lists, it is important to have appropriate illustrations which support the user's actions.
Using a visual brainstorm allowed me to get all my ideas, good and bad, onto paper.
Spot illustrations - the final four
'Enter First Articles!'
'You have no upcoming trips... yet'
'Hurra, packing done!'
'Reminders'
High Fidelity Designs
User Testing and feedback
The prototype was tested with a group of 4 users, using a think-aloud protocol and taking notes of their observations.
I used a feedback capture grid to formulate constructive feedback systematically in 4 key areas:
-
Likes - What did the users like?
​
-
Wishes - What wishes do the users have?
​
-
Questions - What questions cropped up during the testing?
​​
-
Ideas - What ideas have generated during testing?
​
1. Likes
The user of blue is good and relaxing, minimalistic is good as travelling is stressful
Lots of big tiles and not too much menu-faff
2. Wishes
Next button in top corner makes me feel jumpy - want a button in the centre which says ‘set reminder’ or ‘confirm’
I’d expect a CTA button which tells me something like ‘finish list’ or ‘complete list’
Pretty intuitive
I don’t understand why I’d need to untick something I had packed
‘Recently used’ the way it’s written feels like it’s what the app is suggesting.
Not obvious if date of travel is outbound or return
3. Questions
How can I remove items off the pre-made list?
What are the ones assigned to me? What is left? e.g. You haven't bought deodorant for this trip - this needs to be clear.
‘See template’ - already on the template?!
4. Ideas
Just a few more minimal prompts/info icon
‘Add items’ with current trip and name of trip can be a floating button. Button to the right ‘add to trip’
Try a 4 by 4 grid - to improve visibility and reduces scrolling.
Ability to swipe and have ‘delete item’ or ‘to add a note’ like ‘pink dress’ or upload a photo
Most of the feedback from the User Testing addressed errors in the functionality of the app which include visibility, navigation, actions and vocabulary.
These types of errors can be improved by :
​
-
Revisiting and developing the low fidelity designs
-
Iterative user testing - perhaps using A/B testing methods or think-aloud​​ with a wider range of users on an achievable scale