END TO END UX/UI AND BRANDING
Atom Packs - Create a seamless and immersive shopping experience for the UK's leading ultralight backpack manufacturer
The problem
Atom Packs already had a website, but it was too complicated for users to find the right backpack for them and their needs. With so many features and specs to customise, customers needed a clear pathway to their perfect backpack.
The brief
Create a user experience which enables customers to find and customise their dream backpack for their next thru-hike. Refresh the brand and weave it into the front end.
Who are they?
Atom Packs are the only manufacturer of ultralight backpacks and backpacking accessories in the UK. Using a creative process to design, build and test their products over thousands of miles of hiking, they're able to create some of the lightest backpacks on the market using some of the word's strongest materials.
Whatch the promo video I directed, shot and produced to find out more
The old website
When customers landed on the old website, they were presented with just a list of all the packs in each size and capacity. Each product page was a duplicate of the others in that range except some of the specs.
Then there was customization. In order to customise their order, users would first have to have previous knowledge of how backpacks are made and then send customisation requests and ask questions about what's available to customise via email.
So, I began to construct a strategy to understand their audience and build a plan.
The new site and brand
The solution was a refreshed user experience with clear pathways to different products for every user type. The biggest addition to the experience is the immersive backpack customiser where users are able to build a pack from scratch or customise one they've purchased.
Audiences
Thru-hikers
Hikers who want to walk trails in their entirety from start to finish. These could be 100-mile, 1 week-long trips, or 3,000 mile trips over many months.
Climbers
Climbers require different gear and skills compared to hikers, and their packs need be no different.
Ultralight backpackers
Those wanting to hike long distances and fast, so they'll require a smaller, lighter load to do so.
User types
Researchers
They are interested in Atom Packs, but not sure what they offer.
Journey
Users want to learn more about what Atom Packs offer. They may have a specific need or this may be their first ultralight backpack. They may have heard of Atom Packs through word of mouth.
New users
Those who are new to Atom Packs, but already know what we can offer them. They have a good idea of what Atom Packs offer and what their needs are.
Journey
Users searching within the site for a specific product.
Current users
Users who’ve already engaged with Atom Packs. They may have already purchased a product and require further information, they may have already taken their pack out and need further information.
Journey
Users looking for additional support due to an issue, the may want to purchase again.
Strategy
The ultimate goal
Tell users what Atom Packs are offering, what the benefits are and guide them through the customer journey and customisation options so they have the right pack to meet their needs.
How we achieve it
Each level in this strategy relates to a specific need and has a purpose. This allows us to create the appropriate levels of pages with the most relevant content for each of our user types and to map out a journey towards the ultimate goal.
Site map
Create attention
Create relevance
Convince
Convert
Care
Journey
Schematics
Content
Each page falls into the strategy to meet the user's needs and the content for which will be designed accordingly to meet the relevant purpose and achieve the ultimate goal.
Wireframes
User journey
Now, getting into more detail we take our findings from the schematics embedding the strategy and the ultimate goal into the journey and the elements on the page.
Visual language
Speed and elegance
Precision and quality
Creative and clear
Engineered
Planned
Hand-crafted
Pure nature
Stylish
Sharp
Logo update
The current logo was difficult to embroider and wasn't legible on smaller-scale applications. So a clean up added more definition and fitted in line with the visual language.
Old
New
Stickers and colour
Some new stickers were created to add to the box when shipping for customers to use. Colours chosen for the brand colours were taken from the colours the VX21 fabric comes in.
Stacked logo
Logo icon and text
Designs
Home page
The new home page sign-posts the user to the different areas of the website. The first module is always the product which Atom Packs wants to upsell.
Do: Click through to backpack customiser
Choose a backpack base
To fulfil an order correctly, Atom Packs needs to know whether the user wishes to have a pack with a frame and removable hipbelt or not as these require completely different base patterns from the start.
Do: Click backpack without frame and hipbelt
Backpack customiser
User is now taken to the backpack customiser where they can change materials and colours as well as add components to the pack such as pockets, straps and more.
Do: Click to highlight a panel on the base design
Changing materials
With a panel highlighted, the user then clicks on the materials icon on the right to bring up the list of materials to change the selected panel to.
Do: Select VX21 and click information icon
Material information
Information on each material can be found by tapping the "I" icon next to each swatch. This explains the benefits and specifications of each material in detail. Helping the user to make the right choice.
Do: Close and tap the check mark
Changing colours
With a panel highlighted, the user then clicks on the colours icon on the right to bring up the list of colours available in their chosen material to change the selected panel to.
Do: Select red for the right side pocket
Adding/removing components
With/without a panel selected, the user then taps on the + icon to add or remove components to or from the base pack. This is presented in the form of a list with checkboxes and switches, depending on which side of the pack the component is required.
Do: Select which components are wanted on the pack
