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
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!
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
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
Later 1 week was added for
4. Visual Designs
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
Lots of components without clear/logical segregation
No Detailed overview
Difficultes in finding desired product
Need adequate and helpful filters
Function Limited content
Site is not easily navigable
Require downloading a catalogue
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
Too much information
Late or no response to contact email
Need large images of packaging op>ons
Need feature summary
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
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
Search in the product area went up by 100%!
LIVE SITE SCREENSHOTS
The top level products page