REDESIGNING P&G CHEMICALS SITE
Responsibilities : UX Design, Responsive Web Design & Usability Testing
Quick summary
P&G Chemicals is a 180 year old division within Procter and Gamble that specialises in the production and distribution of oleochemicals throughout the world.
​
PGC wanted their site to be redesigned to cater to better online presence, onboard new customers and efficiently guide them through the right information to contact for sales.
The Approach
Since the site was B2B/C, the first step I took was to check into the business goals, followed by mapping the main user goals and analysing how the present and competitor sites' design and user flows fare in meeting them.
With additional info and inputs from the Search Engine Optimisation reports I proceeded to define the new design solution starting with new information architecture. Explored design directions and proceeded with the one which checked into the requirements.
Business requirements : client interactions
Had initial discussions with business to find the goals of the redesign : they were mainly to get a new user/customer into a connected relationship with the PGC sales and highlighting a better brand connect with the clients.
Understanding the users
From the previous interactions I understood that there are two stark users of P&G chemicals : the technically aware and the non technical ones eg : from sales.
​
Interacted with stakeholders ( total 8 users ) from both these groups to get the generic idea of their daily activities and went ahead to create the personas.
Goals Mapping
The main goals and pain points of the users revolved around knowing where at, why here and how to order oleochemicals for their organisation. I listed the same on the requirement map in order to get the priority scale for the goals and requirements.
Main user goals
Finding right place to inquire/order
Understanding what is being offered
Making the selection
Ordering the chemicals
High level tasks
Know about P&G chemicals
Search for a product
Ask for sample
Check specification sheet
Finding product for an application
Finding applications for a product
Present site under the microscope
Along with some fellow design researchers from my team I did Herustic evaluation on the old PGC site on the basis of the main user goals and tasks to check what was really working and which aspects were way off. We used Nielsen's Usability Heuristics.
​
Main positives :
Content was simple and straightforward and could be retained in almost the same tone.
​
Main negatives :
What we found lacking was in the visual hierarchy and heaviness in the site along with some medium level concerns. The request forms were really confusing especially for a new user.
Competitor Analysis across the goals and tasks
Now did the same for some competitor sites of PGC.
Found that almost all of them suffer with not effectively being able to cater to the main goals and lacking in direction. Also they were geared towards only one of the stakeholders.
​
Some sites were providing the specifications of chemicals quite neatly which was one of the user tasks.
Overall PGC old site was fairing better to competitors .
What was the data saying? SEO Analysis
To increase probability for a new user to reach PGC's new site it had to be optimised. I wanted to understand the aspects that increase the SEO score for which I approached the relevant team and acquired the usage reports of the present site.
​
Found that the ratio of the device usage indicated an increased mobile presence directing towards using a mobile first approach.
​
Since the new visitors were the bigger chunk, the entry and other pages had to be impactful for better engagement and conversions.
​
The young user age group indicated the requirement for modern design and interactions.
Design direction for the new P&G chemicals site
Minimal and clear
Impactful introduction of content including history
Straight direct actions adhering to all the stakeholders’ journeys
Connect of brand and content with parent company
Simplification ( of forms : request sample/request info )
Revisiting the information
The Information architecture of the old site was heavy. To cater to the straight direct actions for the user we scaled down on many layers and sublayers to have a more lean, simple and task oriented site.
​
Quick search, quick research and quick actions was what was needed.
​
Did this by brainstorming with the client post the version presentations.
Planning the layouts
The more lean IA helped in planning a site with less clutter and more scope of micro interactions and larger sections to create more emphasis.
​
Through wireframes I was able to explore two different directions.
Design
Direction 1
Direction 2
Bold contrasts
Functional semi serious
Design highlights of the chosen direction
Strong and brief introduction through copy and imagery for the new users.
Carousel to replace many single pages from present site which were providing the same info.
Quick access to the four main tasks for the repeat/regular users.
The main products introduced in the homepage avoiding a separate page for the products.
Micro interaction to browse through the chemicals suitable for an industry avoiding a separate application page.
Product portfolio of only that region is displayed with map based micro interactions.
A minimal and clear page layout
continues for the rest of the pages
of the site.
Uses of the chemical in different industries displayed in a streamlined way.
Mobile Direction
The mobile design had to take care of the long scroll - moved the non important last sections from the homepage to the hamburger
Made some call to actions like "contact us" as floating for anytime access during the long scroll.
Usability testing
As the stage link was available it was time for usability testing. With the help of user contacts through PGC I was able to conduct a 2 week usability testing followed by design changes post the analysis.
The main areas of changes from the usability stand point were from the navigation zone.
Impact
old site
redesigned site
Till now, PG Chemicals monthly site visits has increased by 50 % and bounce rate reduced by around 30 %.