AMCOR PRODUCTS

Amcor is a global B2B packaging manufacturer serving brands like Coca-cola and Nestle. The current products section was barely functional and I had just 4 weeks for UX Design

MY ROLE

I was responsible for the research phase, UX and visual design for the responsive site. I lead the UX work, producing all major deliverables and presenting these to the client in December 2016. I worked with, and reported to the Global Head of Digital.

Desktop UX, Database Design and Visual Designs were delivered to replace www.amcor.com/products

BEFORE & AFTER

This is what was seen under 'Products' in the main nav

The Carousel is way too big and there's no other functionality on the page at this screen size (standard mac laptop)

Amlite and the subtitle are unreadable over the image

Users are confused as to what to do next, they can't see anywhere to go or anything to do on this page - it's a dead end and no wonder they are bouncing out. Obviously the user journey has not been thought out.

Any user who did scroll down, found a search box and a very long country selector dropdown and the search results and product pages were very poor as they had no product DB!

See the new site at amcor.com/products

APPROACH

A Sydney contact recommended I contact the Global Head of Digital at Amcor and after talking through the requirements I supplied a quote for 3 months of work. The stages recommended were:

1. Set up & Research
1.1 Develop brief & scope including technical considerations / constraints
1.2 Project plan
1.3 Interview Amcor stakeholders (feeds into 1.1)
1.4 Internal business process review
1.5 Expert review of site including some usability issues
1.6 Competitor review
1.7 Identify Amcor product customer persona types (users)
1.8 Google Analytics review with Amcor GA expert

Deliverables > Brief & scope, project plan, stakeholder interview documentation, business process diagrams, expert review, competitor review, GA review

2. User Research
2.1 Design interviews including global considerations
2.2 Set up interview times & locations (Skype, remote video recording)
2.3 Interview users (x 10) - Find pain points (frustrations)
2.4 Document interview results
2.5 Document usability issues (also done in 1.5)
2.6 Draw up personas
2.7 Write conclusions
2.8 Draw up ideal user journeys

Deliverables > Interview results, usability issues, personas, conclusions for improvement, ideal user journeys

3. Wireframing / Prototype Designs
3.1 Identify templates required (web-page types)
3.2 Draw up all templates x 5 (estimated)
3.3 Client changes to templates

Deliverables > Wireframe designs for each template, internal review and updates to wireframes

4. User Testing & Wireframe Adjustments
4.1 Design tests including global considerations
4.2 Set up test times & locations (Skype remote video recording)
4.3 Test with users (x 10)
4.4 Document test results
4.5 Adjust wireframes according to findings

Deliverables > User testing results, updated wireframes

5. UX Review of Visual Design & Build
5.1 UX Reviews of each template - visual design
5.2 UX Review of each template - build
5.3 UX Review of the whole i.e. user journeys

Deliverables > Recommendations for updates to visual design where not in-keeping with UX vision, Same for build and user journey & usability review when all build complete.

But the business needed the work done in one month to tie in with the digital schedule

Since Amcor Digital works in quick sprints of improvement and repeats improvements to sections periodically, in some ways it made sense to do a quick, short improvement, especially since the existing products pages are in a poor state

NEW APPROACH

So the new approach was to keep '1. Research', collapse '2. User Research' into a survey inside no.1, collapse '2. User Research' into Personas only, keep '3. Wireframing' and remove '4. User Testing' which was not ideal, but there was no choice.

I made a strong point that it's important to do as much user research as possible because getting into the heads of users is essential to a good outcome. I also set things up so that in the next round of site improvements, there would be more UX research to feed into it. The new approach was:

1. Business & User Research
2. Personas
3. Wireframing

Later 1 week was added for
4. Visual Designs

PROBLEM

I wrote the brief: The current products section has usability issues and is not serving the audience well to assist them in finding the product information they need in a good format. The site is not transparent to the user regarding the Amcor approach to serving it's clients, and is also not supporting the internal business processes well. (*Email me to request the password to access all links)

See the full brief here*

BUSINESS & USER RESEARCH

With only 4 weeks, I had to hit the ground running and get all my stakeholder interviews and other meetings set up quickly. I needed some user research data and so set up a meeting with an employee who I’d been told could organise an external research company to do the user research survey I needed as an absolute minimum.

The initial response was ‘no and not in this timeline’ however later we found a compromise where I would write the survey questions and would receive 3 responses for each of my 3 persona types

I also had other meetings to identify what the persona types would be and collected other data from Google Analytics and worked with the Australian team to set up Hotjar to get stats and movies of users on the current site. I also wrote a Usability (UI) Review, Competitor Review, and Expert Review whilst interviewing Amcor stakeholders in Zurich and the USA by teleconference.

I also met with the Sustainability Director and we devised the 'Amcor sustainability star' system to aid users in identifying top sustainable products, particularly on the product detail page in the 'Alternatives & Similar' carousel

THE USER SURVEY

The following are 4 of the most useful insights from the survey in late Nov 2016. 1 = high

Based on your experience, please rank in order of importance the information you typically receive to choose a packaging solution

What do you think are the most helpful search features on any packaging products site?

What do you think are the most helpful filter features on any packaging products site?

What frustrations do you experience when using packaging products sites?

Lack of specific data on packaging my product

Service

Lots of components without clear/logical segregation

No Detailed overview

Simplified navigation

Difficultes in finding desired product

Need adequate and helpful filters

Function Limited content

Site is not easily navigable

Require downloading a catalogue

Pricing

No benchmarking

Delivery

Price

Lots of images but no or very few details

No online support

Not enough technical data

Poor example imagery to showcase the range of customization options

Product categorisation

Too much information

Late or no response to contact email

Need large images of packaging op>ons

Need feature summary

Price

Usage

Specifications not clear

Hard to navigate

Hard to find contact info to discuss live with company

Images aren't clear enough; would help to scroll over to see more detail

Descriptions should be consumer centric as well as technical

Generic Contact information

Does not identify customization opportunity

3 x PERSONAS

Buyer, Technical and Marketing persona types were identified.
Later an R&D persona could be added, but for now this is covered by a mix of Tech and Marketing.

See research results and clickable wireframes here

During research, it became apparent that an up to date, accurate and comprehensive product database did not exist. So this had to be designed to provide data for the product detail pages and search function

About 346 products were shown on the website, which are out of date. The fields for each product are inadequate and are held in Kentico CMS fields, not in a robust Database solution

I was also told that after Jan 2017, a new team is being put in place to keep the DB current. Until then, the business needed to get a good start on creating a product database

LO-FI WIREFRAMES

Clickable prototypes can be seen here

Note that you'll need the password and can email me for that

TA - Product Landing Page
TB - Search Results (shown to left)
TC - Inspiration & Innovation Page
TD - Product Detail Page

HI-FI WIREFRAMES & DB

The site detects the users location and sets the users continent in search results and uses their country as the default delivery location in the enquiry form. Note that many of the images used are placeholder images. These draft visual designs were further polished by the build company.

TA - Products landing page, accessible from first main nav option

If the user interacts with the 'fill product or keyword' search, the options below are replaced with these:

TB - Search results page.
Pack formats and volumes to be confirmed by the business
User can select more than one continent, but if no search results show, a message such as 'No products are available in every single continent, try removing some areas from your search criteria' would show

TB - Search results page.
If the user clicks to search again, search bar opens with options which are designed to satisfy all the persona types and user flows

TD - Product detail page
Users can click on 'Marketing' or 'Tech' in the top blue bar and we can collect stats

BEFORE & AFTER STATISTICS

Comparing statistics for the www.amcor.com/products area from 1-31st October 2016 with the same month in October 2017

Bounce rate went from 39.48% in 2016 to 0.26% in 2017
- a Percentage change of 99.34%

Below, the light orange line shows 2016 bounce rate and the light blue line on close to the X axis shows the new bounce rate

Page views and unique page views have gone down slightly and average time on page has gone up, suggesting that users could be finding what they need more easily and reading the product pages longer