View All

Building a Better Product Detail Experience

Services

User Experience
E-Commerce
Personalization
Strategy

‍

The Challenge

Our client’s inventory boasts over 8 million SKUs of digital components. Their existing customer base is extremely loyal and understands the website’s outdated design and structure, but new users are struggling to find the right information and understand the complex product detail pages.

The Ask

Concord was engaged to wireframe, layout, and visually design two versions of their product detail pages; one specifically for their legacy users with minimal updates to layout and functionality, and one that re-imagined the page with updated components and personalization opportunities for other user personas.

The Beginning

E-Commerce Design

Concepts for Clarity

With the legacy design being straightforward, we put much of our focus towards creating a list of components that could be customized and prioritized based upon user preferences, behaviors, or insights. 

  • Elevated primary information
  • Increased product image size
  • Combined pricing types
  • Increased layout readability

What We Did

Creating Focus

With the legacy design being straightforward, we put much of our focus towards creating a modular set of components that could be customized and prioritized based on user preferences, behaviors, or insights.

01. Images

We increased the image size so customers could see more details without zooming.

‍

03. Pricing

We designed a system to display a unit price before a quantity was entered.

02. Focus

We designed a system to display a unit price before a quantity was entered.

‍

04. Readability

Although customer’s enjoy dense information, the readability was suffering.

Articles & Marketing

We introduced new content types to serve the growing audiences within our client’s user base - namely “futurists” who are looking for a more exploratory and educational search process, instead of a purely transactional experience.

‍

Fixed Purchasing Menu

The Goal

As we introduced marketing content, articles suggestions, and components that added significant length to our page, we needed to keep the user aware of where they were located within the page, and give them access to scroll anywhere they needed. We also wanted to keep them within one click of a purchase.

How It Works

We achieved these things with a two layered fixed menu. This scrolls with the user and sticks to the top of the page while a user is exploring the page. Upon click, the top section tabs immediatly scroll the user to that section of the site. The second layer of menu is solely product focused, and keeps their next step in focus. 

‍

Concord Digital

We’re a design and development consultancy within the Concord global family.

We unite design and technology to deliver results that work in the real-world, not just look good on screens.

Looking Forward

Ready for real results? Our solutions obliterate the tough problems standing between what your users want and what your current tools can do.

We work with clients ranging from Fortune 50 giants to scrappy start-ups. Reach out to learn more about partnering with Concord Digital.