Atom Packs

A seamless shopping experience for the UK's leading ultralight outdoor gear manufacturer

ITF

Client

Atom Packs

Duration

5 weeks

Current site

View

Source files

.sketch

My scope of work

UX discovery > Site map > Schematics > Wireframes > Full mobile-first web design > Full WP DIVI build > Video production > Brand collateral updates and asset refresh

My role

In 2019 I went to Atom Packs offering to make the promo video above for free, just because I really wanted to help them grow. I've since worked with them as their freelance designer on so many things, including their website, brand updates and video productions.

The website

Audience

Hikers

Insight

Everyone wants custom packs

Output

Mobile website

CMS

Wordpress

The problem

Atom Packs already had a website, but it was too complicated for users to find the right backpack for their needs. With so many features and specs to customise, users needed a clear pathway to their perfect backpack.


The legacy website

When customers landed on the old website, they were presented with just a list of all the packs in each size and capacity. Smaller packs had closer shots making them look larger, and there was no consistency in the visual language or customer journey.

View on archive.org

First Atom Packs website

The solution

It starts with a sketch

We got to work. I drove to the Lake District to meet Tom at the workshop and began hashing out a journey on the whiteboard which would enable customers to find, or even create their dream pack for their next adventure.

Initial site map whiteboard

A simple categorisation between off-the-shelf, custom configured packs and an accessories category was needed, while also taking the opportunity to care for customers before and after conversion. We achieved this by educating them about what each pack is for, the fabrics and their benefits, fitting, manufacturing processes and of course, the team behind the sewing machines.

Download site map .pdf

Developed site map

Wireframes

Complex variants, simple UX

Customers have the choice of purchasing either a ready-made pack, customising base model colours and add-ons, or starting from scratch by choosing their base and changing almost everything. It should be as easy as ordering a pizza, with the added caveat that backpacks are far more complex than pizzas.

With this insight in mind, it's important to include as much information in tooltips and onboarding as possible so customers understand why they're being asked to make a choice and when.

Understanding how the backpacking community geeks out on gear was a huge advantage for me, as I had the chance to form a UX journey that I'd be delighted to be presented with.

It was time to crack on with wireframes. Every page was wireframed to ensure all functionality was included to set the foundation. We chose a product configurator plugin whose team were able to develop extra functional requirements into the package like total weight and load capacity, which features could add and take away.

The configurator wireframes were then fully annotated to show defaults and which variations would change which totals.

Top: All wireframes
Bottom: Annotated desktop wireframes for the pack configurator and checkout bag

Designs

A complete experience

A dark themed site was chosen to make the imagery of the products pop and for a high-contrast look and feel which was sporty and gamified, yet premium and high-quality. Images of contour lines from maps pepper the backgrounds and interactive elements really stand out, just like their packs.

One of my favourite additions to the site was the pack comparison module which showed the each model side by side and showed the clear differences between each. Helping customers make the right choice.

Global header and footer

Pack comparison module

Product description page

Backpack configurator

Customise everything!

The pack configurator was the meat and potatoes of this project. Users would select their base from either an Atom, an Atom+, or a Mo, and then be able to customise everything from size, volume colours, materials, straps, accessories, zips and belts. All available across devices.

The level of variations was complex and extensive and the conditional logic had to be very carefully set up.

Backpack configurator

The future for Atom Packs

What's next?

Some blurb about what's coming up for AP and a CTA to hit the buy now btn

Buy now

Next project:

Work with me, baby!

Get in touch

(+44) 07934014543