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.


VISIT MVP SITE

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

CV

More about me

ROCKET FUEL

Why hire me?

I have a strong understanding of what’s involved in taking an idea and turning it into a tangible product.

My clients

Ranging from startups to global enterprises, my clients push the boundaries of innovation and excellence in design, technology and engineering.