Structure
The whole website is structured in modules. Each piece of content is housed in both a closed (excerpt) module and an open (full page detail) module. These modules enable pages to be made up of a mixture of agile content, allowing the user to make their own unique journey through the site.
Homepage
One of the first things new users will see is a welcoming message to the Pampers site. To quickly engage with the user, a sympathetic image should be chosen that makes a warm, welcoming and emotional connection with the user.
In desktop, the main menu covers the space of the top part of the page. Upon interaction, a submenu expands revealing submenu items related to the parent menu topic.
In mobile, the main navigation is sticky at the top of the page at all times to provide quick and easy access to all areas of the site. The menu is situated on the right and expands from right to left, showing the main menu items. If a menu item contains a submenu, it is indicated with a chevron to the right.
Article page
Article images are a powerful asset to engage the user. They should entice the user to read an article and that is why they are realistic and natural. They should also give the viewer a clear understanding of the content contained within an article.
Product page
As product images play a crucial role in convincing users to purchase products online, special care must be given to create high quality imagery. Products should be displayed on white backgrounds, using the top view for primary assets with balanced lighting to make the product look heroesque while keeping it realistic.
Ui elements
These are some of the elements used in the design of the website: AA compliant colour schemes, typographic and photography guidelines as well as a modular responsive design system. The overall feeling of the site is open, picking up flat design patterns to achieve a modern lightweight look.
