The approach

1. Client brief

For the PDP project I was in direct contact with Bulgari’s project managers. Whenever the internal departments of marketing, omnichannel, digital and data analytics had requests to be added on the PDP I would discuss it with the project managers and create a new design brief.

2. Competitors benchmark

Bulgari had the necessity of adding several new features/sections to its PDP (e.g. Bulgari Craftmanship & Design, Bulgari’s services, Bulgari CSR). To understand how to design the new content and find inspiration I run competitors benchmarks focusing on Bulgari’s direct and indirect competitors.

How do I run a competitors benchmark

To run a competitors benchmark I listed direct and indirect competitors on an excel spreadsheet. On each column I defined a list of criteria to analyze. In the case of the PDP first viewport the criteria were the following:

• First impression: is the PDP well structured? is it easy to understand?

• Interaction: is browsing the PDP intuitive? are there accessibility issues?

• Product information: is product information missing or there is too much information?

• Multimedia: are different types of multimedia available? are they easy to understand and navigate?

• Features: which kind of additional features are available? are they relevant?

3. Design proposals

For each new feature/section added in the PDP I would deliver several different proposals designed using Sketch and InVision. Together with the sketches I would attach a presentation to explain the rationale behind my design decisions.

First viewport example

Current PDP

1. Image gallery: the current hero image is unaligned with the rest of the information. Also the carousel gallery on the left is unaligned compared to the hero image.

2. Product information: the product description can be very long for certain items, taking too much space. Moreover, the product description can also be found in the “description and details” section below the first viewport, making the content redundant and repetitive.

3. Product options: due to Covid and internal requirements there is the need to add few more options.

New PDP

1. Image gallery: the elements have been aligned to the new page grid. The hero image is larger to give more visibility to the product and a new multimedia carousel has been added below.

2. Product information: the product description can be found in the “description and details” section below the first viewport. This allows Bulgari to have enough space for longer product descriptions and to give a grater importance to the images.

3. Product options: few more options were added. The user has the option to expand the menu to check which other options are available. While Bulgari has the freedom to add more options within the dropdown menu without affecting the page layout.

4. Handover delivery

For those features/sections selected by Bulgari, I would create a PDF file explaining the rationale behind the design, how the elements behave and which are the user interactions. The handover also includes technicalities for development purposes and PSD files of the final feature/section.

Accessibility improvements

• White borders containing image thumbnails have been changed because the contrast with the beige background is too low. Thinker black borders are more visible and clearly indicates which image is selected;

• Fonts are thicker and darker to ensure a high contrast ratio of at least 4.5:1 between text and background colors;

• Written labels indicates type of multimedia gallery option;

• Mouseover labels indicate product color selection options;