Sometimes, easy and quick access to information is more important than flash. The Pampers website design is a living illustration of this insight. It stands out not for shiny animations or other design techniques, but for its focus on the customer journey for busy moms and dads. Below, we uncover the lessons you can learn from the Pampers website design.
The menu at the top of the page looks simple and uncluttered. At the same time, it has multiple categories to allow access to different parts of the website. What Procter & Gamble’s design for Pampers’ website accomplishes, however, is for easy self-selection of the audience based on their circumstances.
Here is a list of navigation items:
Rather than treat all phases of childcare as a monolith, the navigation treats these as separate. The result is that a mom-to-be can easily find tools that suit pregnancy. Likewise, the mother of a toddler can click through right away to the Pampers product pages that are specific to toddlers.
In addition, the product navigation gives three simple choices based on the age of the child:
On each of those pages, you will then find the products that are suitable for these three age ranges. Rather than treat product menu options as a product listing problem, the design treats it as a user-experience problem.
Thus, the website does not list products in a more generic listing of product types, prices or other groupings. It takes the mother’s viewpoint. Navigation options for these products are therefore presented from the point of view of a mother shopping for her baby. She will naturally want to shop products for that age range. This is an obviously superior choice for the various pages on the website in retrospect, but not altogether intuitive when faced with a wide range of design options.
The website design does not throw out sleek techniques altogether. The navigation uses a fast hover technique to make discovery of submenu items lightning fast. For example, when a user hovers over the “NEWBORN” menu item, it expands to give them a range of choices that include:
Procter & Gamble understands the issues that are pressing on the mind of a mother with a newborn. Rather than present a slew of guidebooks, the design zeroes in on the most important topics right away and presents those to the user. The website, therefore, serves as a handy companion to the child-caring journey. It’s there with the answers when the mother needs them.
The use of the hover effect in this way enables easy exploration of the entire menu in a matter of seconds. There is no need to click through to a page only to find out that you landed in the wrong destination. Given that the mother of a newborn is likely going to have her hands full taking care of the child, making the site easy to explore brings welcome convenience.
The typography on the website is an easy-to-read bold, green sans-serif. The green gives a youthful feel. It is relaxed and unhurried, but the large font size makes it easy to quickly read, at a glance, the labels on various elements on the page. If you are in a rush to find a product, this choice of lettering will reduce the time it takes to find the right item. Green is paired here with white as an alternative color for the rest of the labels, such as on CTAs (calls to action). White stands out against the green and orange backgrounds to make text on CTAs easy to digest.
Pregnancy is an exciting time, but it presents new challenges. The Pampers website uses emotionally supportive and beautiful design on its tools to make navigating the journey easier. Not only is the choice of language on these pages user-friendly, but the design of the tools is playful and pleasing to the eye.
While this website is meant to be used by mothers, its choice of colors and images takes into account their emotional bond with their babies. Elements and backgrounds feature simple, joyful colors such as yellow and green. This creates a smooth browsing experience that fits with the visitor’s frame of mind. A mother browsing guidebooks for her newborn child is concerned with one main thing: The care of her child.
The website’s use of color reinforce that focus and make it fun with fluffy design. Images of smiling babies and mothers add to the happy feelings the website radiates. These choices of images and color make the experience more pleasant for a mother who might be stressed about her baby’s wellness.
Rather than bore the new mother with mountains of text, the website makes use of interactive quizzes as a learning tool. This design choice increases the mother’s engagement with the website. It not only gives her information but also aids in the retention of that information since the answers are scored and she gets immediate feedback. As a result, the quizzes make the learning process fun and more effective at the same time.
At the end of the day, after the mother has obtained all the information she came to find, Pampers wants to continue the relationship. Sales and conversions are definitely a part of this very well-executed website design. The website design accomplishes its e-commerce conversion goals in multiple ways. Savings rewards are prominently displayed at various points of a mother’s navigation of the page. The website’s opt-ins fold in with a smooth, slow animation, rather than the rude pop-ups that annoy users across the web.
The rewards and coupons are carefully targeted, offering genuine savings to users. Signing up is easy. The user can enter their details, or sign up with Facebook. The website also has signup prompts at the end of its quizzes, which makes for a natural sign up experience.
The Pampers website design is a showcase of user-focused design. For your own websites, you will want to emulate some of its lessons. The first is to get very clear on who your ideal customer is. Then you need to relentlessly question your design choices to move away from what you want to what the ideal customer wants on the page. This focus on the customer’s journey is what will yield a well-optimized and user-friendly website design.