Product Detail Pages

Product Detail Pages

Product Detail Pages

Improving pages that provide information on a specific product

Improving pages that provide information on a specific product

Improving pages that provide information on a specific product

Client

Client

Client

Sears Canada

Sears Canada

Sears Canada

timeline

timeline

timeline

W 2017 - F 2017

W 2017 - F 2017

W 2017 - F 2017

tool

tool

tool

Axure

Axure

Axure

01

problem

Sears Canada went through a massive rebrand, called “Sears 2.0,” that brought about an initiative to replace their outdated legacy e-commerce site with a new and improved one that was more functional and user-friendly. I was brought on after the initial MVP launch of the new website and was tasked to take on projects for a “phase two”.

One of the major projects was to improve the layout of the product detail pages. Although Sears Canada’s PDP had all the elements of what made up a standard retail PDP, we found that it still lacked a lot of structure that could drive customers to ultimately want to purchase from this site.

02

project goal

Ensure that the new product detail page layouts were transparent in conveying all the necessary information to customers.

03

role/team

I was the lead UX Designer and Researcher responsible for the competitive analysis and creation of wireframes and interactive prototypes. I worked closely with Visual Designers from our in-house online marketing team, who would create high-fidelity mock-ups.

Shifting the Target Market

Shifting the Target Market

Shifting the Target Market

Sears Canada was known to be a department store that older generations typically shopped at. With all the effort put into the rebrand, Sears Canada was hoping to bring in new customers by targeting a younger demographic–the Millennials.

04

defining a user persona

To better understand this demographic, we defined them according to various life stages, like young professionals, common-law partners, newly weds and new parents. We were able to create a user persona that fit this demographic and our description of the ideal customer.

Michelle, 31

Creative Freelancer

Marital status: Married

salary: $100k

Archetype: The Adopter

Risk-Taker

Organized

Intelligent

Compassionate

BIO

Michelle and her partner, Aaron, bought a house with the long-term goal of fixing it up bit by bit. It may be a little more than they can afford, but they want to start a family soon.


As a creative freelancer, Michelle is always on-the-go, constantly finding new work and meeting with clients. She is a high adopter of technology, and feels it’s made life faster and easier. She’s prompt with checking emails and responding to texts quickly, heavily relying on her mobile phone for everything.

personality

laid Back

Competitive

Frugal

Spender

Passive

Active

Dreamer

Realist

motivation

Price

Comfort

Convenience

Speed

wants/needs

  • More sales & savings opportunities

  • Price matching between in-store & online

  • Free shipping and returns

  • Ship to store and same-day shipping

  • One stop shop for all her home needs

shopping pattern & behaviours

Once a Year

Several x/Year

Once a Month

Several x/Month

  • Browse

  • Find/purchase

  • Research

  • Socialize

  • Browse

  • Find/purchase

  • Account Info

  • Research

  • Price Check

  • Browse

  • Find/purchase

  • Research

  • Price Check

05

first initial updates

A major focus for this update was to upgrade the original layout of these pages. With the MVP, I felt that the hierarchy of content below the image wasn’t well-established. To combat this, the major change I made was to consolidate all the product info and description to the right and keep the images to the left. Any additional content, provided by the manufacturer, we kept below as tertiary information. 

I wanted to utilize “sticky scrolling,” where the images would change on scroll, while the product information remained fixed to the top of the page until the customers were done scrolling through all the images. The other noticeable change was updating the “Add to Cart” CTA, making it larger and more prominent.

MVP

major appliances

home

apparel

MVP

major appliances

home

apparel

MVP

major appliances

home

apparel

MVP

major appliances

home

apparel

Pivoting & Gaining Insight

Pivoting & Gaining Insight

Pivoting & Gaining Insight

Sears Canada decided to change business direction for their website. Their vision was to separate four major categories into “micro-sites”–apparel/footwear, furniture/home decor, Sears Canada’s mattress-in-a-box brand, and major appliances. With this change in mind, they enlisted the help of Baymard Institute. A week-long workshop was facilitated, and with their guidance, we were able to better identify pain points/usability issues in order to make improvements to the site. 

Since Sears Canada was a department store that carried multiple categories of products, one of my favourite discoveries during this workshop was realizing that there was no one-size-fits-all PDP layout for all categories. Each category required different page layouts based on their respective product details.

06

wireframes for second update

I was able to take all the valuable learnings from Baymard and transform the PDP layouts. One major change that applied to all the categories was rearranging the hierarchy of the page. Customer reviews were brought from the bottom of the page to right below the product description, highlighting its importance in a customer’s buying decision. Anything after that was considered tertiary and “nice-to-have” add-ons. 

VIEW PROTOTYPE

NOTE
Prototype can be viewed at the desktop and mobile breakpoint by adjusting the browser width.

apparel

footwear

home

major appliances

Baymard statistics have shown that customers based much of their decision to “add to cart” when a PDP had large images, especially for aesthetically-driven products. This drove me to give the apparel and footwear category more real estate for product images (in hopes of showing a variety of angles and lifestyle imagery).


Product descriptions were updated to have multiple subheadings (ie. size & fit, material & care) paired with transparent and informative copy


Sears Canada’s social media gallery and a carousel of outfit suggestions were included as tertiary add-ons to complete the PDP layouts.

apparel

footwear

home

major appliances

Baymard statistics have shown that customers based much of their decision to “add to cart” when a PDP had large images, especially for aesthetically-driven products. This drove me to give the apparel and footwear category more real estate for product images (in hopes of showing a variety of angles and lifestyle imagery).


Product descriptions were updated to have multiple subheadings (ie. size & fit, material & care) paired with transparent and informative copy


Sears Canada’s social media gallery and a carousel of outfit suggestions were included as tertiary add-ons to complete the PDP layouts.

apparel

footwear

home

major appliances

Baymard statistics have shown that customers based much of their decision to “add to cart” when a PDP had large images, especially for aesthetically-driven products. This drove me to give the apparel and footwear category more real estate for product images (in hopes of showing a variety of angles and lifestyle imagery).


Product descriptions were updated to have multiple subheadings (ie. size & fit, material & care) paired with transparent and informative copy


Sears Canada’s social media gallery and a carousel of outfit suggestions were included as tertiary add-ons to complete the PDP layouts.

apparel

footwear

home

major appliances

Baymard statistics have shown that customers based much of their decision to “add to cart” when a PDP had large images, especially for aesthetically-driven products. This drove me to give the apparel and footwear category more real estate for product images (in hopes of showing a variety of angles and lifestyle imagery).


Product descriptions were updated to have multiple subheadings (ie. size & fit, material & care) paired with transparent and informative copy


Sears Canada’s social media gallery and a carousel of outfit suggestions were included as tertiary add-ons to complete the PDP layouts.

09

final thoughts

Being the only UX designer for Sears Canada after only starting in this role for a few months, a lot of responsibility fell on my shoulders to help transform the website. But, due to external factors that were out of my control, this project (alongside many others) was unable to be fully realized and developed.

Nonetheless, a lot of knowledge was gained throughout the duration of this project, especially with the help of Baymard Institute. Being able to apply what I learned into my designs, it was great to see the potential Sears Canada could have had in the e-commerce space after its rebrand.