Research

Stakeholders Interviews

In an interview with project stakeholders, we mapped out the major pain points regarding the product detail page:

Scalability

As the product range expanded, the page and it’s components could no longer accommodate the quantity of variants per product.

Responsiviness

The screen proportions were not pleasing, causing problems for users in different devices. The rank on Google was also affected by it.

Performance

The slow page loading not only affected search result performance but also led to higher user abandonment rates.

Lack of features

It lags behind the market, with few features and personalizations that were common among other competitors.

Initial research and assessment

During the initial research phase, we gathered all information regarding user behavior within the page and the journey:

• Qualitative: Through recordings and heatmaps, we mapped out areas of high abandonment, dead clicks, and other user behavior metrics.
• Quantitative: We collected all access data, interaction events, bounce rate, conversion rate, average loading time, and conducted the necessary data cross-referencing to construct a comprehensive performance report.

In our initial page assessment, we identified usability and responsiveness problems. The page had not been updated since 2012, while other brands had already broadened their product range, incorporating other departments.

The assessment acted as self-documentation, revealing a few key areas for improvement, mainly around usability and responsiveness. Through data collected from user feedback, recordings, and heat maps, we’ve categorized these issues in order of importance, from critical to minor.

Competitive Analysis

Each department has distinct needs, with some prioritizing photos and others descriptions. The product page must effectively meet these varied requirements. To enhance and validate the provided information, my UX counterpart and I gathered insights from competitors.

Insight #1

An hybrid page it’s more reliable

Over time, we discovered that a versatile page showcasing any product from any category with consistent features boosted scalability and user trust. Maintaining uniformity across pages and elements was pivotal for a reliable and consistent design.

Insight #2

Responsiveness its a must

Users faced reachability issues on mobile, contributing to a 25% bounce rate caused by misclicks. Layout distortion across devices, including desktops, caused a 30% decrease in scrolling compared to other pages.

Insight #3

Delivering information only when needed.

Customers were inundated with diverse product information, making anticipating worst-case scenarios challenging (given the constantly evolving marketplace). Therefore, we should develop scalable ways of personalize the page during seasonal campains or sales.

Turning Insights in Ideas

Sketches & Wireframing

After identifying goals and insights, we collaborated with the design team for a Crazy 8 dynamics session to expand our solution vision. We focused on designing what was the hyphotesys that we wanted to test, also focusing on a smart Information Archteture.

Following the initial sketches, I transferred all screens into Figma to craft detailed wireframes. This allowed me to explore various scenarios even some major interaction for desktop devices and tablets. In this phase, close collaboration with the business area was pivotal to tailor specific views that aligned with the required information.

Results