About Sears

 

Sears.com is the third largest online mass merchant with 2.4 billion page views a year, 15 million unique visitors a month and attracts 1 million homepage views per day. Sears also reaches customers through 717 mall-based retail stores, and an additional independently owned 634 retail locations primarily in smaller and rural markets. The Company competes with Walmart, Target, Kohl's, J.C. Penney, Macy's, The Home Depot, Lowe's, Best Buy and Amazon

 

I was assigned to work with Sears Planning and Promotions, and a team of developers to redesign their homepage, product page, department landing pages, and navigation to better tell the story of their products and the community behind them.

Assessing the Site Before Redesign

Initial discussions with Planning and Promotions centered around Sears goals to overhaul their product landing page, which was informative but lacked the very personality their products had become so well known for. It was clear that there was a huge opportunity to highlight the offers and product’s features through storytelling in the redesign.

Mapping a User Journey

From these initial conversations I was able to map the journey we wanted users to experience while shopping: “Show me what it is, tell me what it does, help me imagine how I’ll use it, inspire me with a story, and let me explore what else I can do.”

Conceptual Layouts

With the user journey as a guide, I roughly designed a broad range of low resolution options for consideration. We explored concepts for product displays to highlight key features, templates with large videos and lifestyle imagery to help bring products to life, and multiple variations of the site navigation to allow users to move easily to other departments.

Wireframes

 

Low resolution mock ups were refined in three distinct areas through wireframes. Some of our explorations included using menus over product photography, tabs to separate product information, and placing a persistent navigation as users scroll down the page.

Because of its ability to scale, show multiple products, provide alternate information areas, and tell a story, we agreed to move forward with the wireframes into visual design.

The Grid To Lead The Eye

 

When you land on a product page, the weekly sales billboard is the first thing you’ll see. The grid leads the shopper’s eye from the billboard, to the category cards, and then pulls the eye down to the vibrant color of the remaining rows.

Tell Customers Why To Buy

 

Sears category rows solve unique problems most common sites fail to address. Before the redesign, products and features were described with a simple bulleted list. Now, each product row is a featured section using fun images and to simple language.

Inspire Customers

 

We wanted to inspire our audience to imagine while encouraging them to purchase additional products. The combo row story humanizes the text, providing relatable narratives for customers, and shows the basics of what a category includes.

Encourage Site Exploration

 

After customers have had a chance to look at the product in detail, we wanted to make sure they had quick access to explore more products that might fit into their lifestyle. Product and service recommendations are based on purchases that other customers made after viewing the same product.

Updated Navigation

 

To make it easy for shoppers to get around, we created a navigation dropdown that allowed quick browsing by groups including, occasions, recipient, and personality. Other areas of the page show alternate ways to navigate to categories to keep the site feeling fresh while maintaining a consistent navigation on the left.

New Department Landing Pages

 

We wanted shoppers to enjoy browsing categories just as much as product landing pages. This template was designed to allow Sears to showcase a featured or best-selling product larger than the rest. We also introduced the idea of interrupters to break up the grid and cross-sell featured products from across other categories.

New Homepage

 

The homepage was designed to showcase a dropdown navigation, noteworthy events, and product collections.  A series of rows, dynamic content, and stackable information rows proceeded to keep exploration exciting and engaging.

LUONGOMADE

Sears homepage

 

In 2012 Sears redesigned their e-commerce experience to showcase products, stories, and personalization in a unique way. The goals was to immerse consumers in an improved online shopping experience like no other.

 

Visual Design   |   Product Design  |  User Experience

About Sears

 

Sears.com is the third largest online mass merchant with 2.4 billion page views a year, 15 million unique visitors a month and attracts 1 million homepage views per day. Sears also reaches customers through 717 mall-based retail stores, and an additional independently owned 634 retail locations primarily in smaller and rural markets. The Company competes with Walmart, Target, Kohl's, J.C. Penney, Macy's, The Home Depot, Lowe's, Best Buy and Amazon

 

I was assigned to work with Sears Planning and Promotions, and a team of developers to redesign their homepage, product page, department landing pages, and navigation to better tell the story of their products and the community behind them.

Assessing the Site Before Redesign

Initial discussions with Planning and Promotions centered around Sears goals to overhaul their product landing page, which was informative but lacked the very personality their products had become so well known for. It was clear that there was a huge opportunity to highlight the offers and product’s features through storytelling in the redesign.

Mapping a User Journey

From these initial conversations I was able to map the journey we wanted users to experience while shopping: “Show me what it is, tell me what it does, help me imagine how I’ll use it, inspire me with a story, and let me explore what else I can do.”

Conceptual Layouts

With the user journey as a guide, I roughly designed a broad range of low resolution options for consideration. We explored concepts for product displays to highlight key features, templates with large videos and lifestyle imagery to help bring products to life, and multiple variations of the site navigation to allow users to move easily to other departments.

Wireframes

 

Low resolution mock ups were refined in three distinct areas through wireframes. Some of our explorations included using menus over product photography, tabs to separate product information, and placing a persistent navigation as users scroll down the page.

Because of its ability to scale, show multiple products, provide alternate information areas, and tell a story, we agreed to move forward with the wireframes into visual design.

The Grid To Lead The Eye

 

When you land on a product page, the weekly sales billboard is the first thing you’ll see. The grid leads the shopper’s eye from the billboard, to the category cards, and then pulls the eye down to the vibrant color of the remaining rows.

Tell Customers Why To Buy

 

Sears category rows solve unique problems most common sites fail to address. Before the redesign, products and features were described with a simple bulleted list. Now, each product row is a featured section using fun images and to simple language.

Inspire Customers

 

We wanted to inspire our audience to imagine while encouraging them to purchase additional products. The combo row story humanizes the text, providing relatable narratives for customers, and shows the basics of what a category includes.

Encourage Site Exploration

 

After customers have had a chance to look at the product in detail, we wanted to make sure they had quick access to explore more products that might fit into their lifestyle. Product and service recommendations are based on purchases that other customers made after viewing the same product.

Updated Navigation

 

To make it easy for shoppers to get around, we created a navigation dropdown that allowed quick browsing by groups including, occasions, recipient, and personality. Other areas of the page show alternate ways to navigate to categories to keep the site feeling fresh while maintaining a consistent navigation on the left.

New Department Landing Pages

 

We wanted shoppers to enjoy browsing categories just as much as product landing pages. This template was designed to allow Sears to showcase a featured or best-selling product larger than the rest. We also introduced the idea of interrupters to break up the grid and cross-sell featured products from across other categories.

New Homepage

 

The homepage was designed to showcase a dropdown navigation, noteworthy events, and product collections.  A series of rows, dynamic content, and stackable information rows proceeded to keep exploration exciting and engaging.

Sears homepage

 

In 2012 Sears redesigned their e-commerce experience to showcase products, stories, and personalization in a unique way. The goals was to immerse consumers in an improved online shopping experience like no other.

 

Visual Design   |   Product Design  |  User Experience

About Sears

 

Sears.com is the third largest online mass merchant with 2.4 billion page views a year, 15 million unique visitors a month and attracts 1 million homepage views per day. Sears also reaches customers through 717 mall-based retail stores, and an additional independently owned 634 retail locations primarily in smaller and rural markets. The Company competes with Walmart, Target, Kohl's, J.C. Penney, Macy's, The Home Depot, Lowe's, Best Buy and Amazon

 

I was assigned to work with Sears Planning and Promotions, and a team of developers to redesign their homepage, product page, department landing pages, and navigation to better tell the story of their products and the community behind them.

Assessing the Site Before Redesign

Initial discussions with Planning and Promotions centered around Sears goals to overhaul their product landing page, which was informative but lacked the very personality their products had become so well known for. It was clear that there was a huge opportunity to highlight the offers and product’s features through storytelling in the redesign.

Mapping a User Journey

From these initial conversations I was able to map the journey we wanted users to experience while shopping: “Show me what it is, tell me what it does, help me imagine how I’ll use it, inspire me with a story, and let me explore what else I can do.”

Conceptual Layouts

With the user journey as a guide, I roughly designed a broad range of low resolution options for consideration. We explored concepts for product displays to highlight key features, templates with large videos and lifestyle imagery to help bring products to life, and multiple variations of the site navigation to allow users to move easily to other departments.

Wireframes

 

Low resolution mock ups were refined in three distinct areas through wireframes. Some of our explorations included using menus over product photography, tabs to separate product information, and placing a persistent navigation as users scroll down the page.

Because of its ability to scale, show multiple products, provide alternate information areas, and tell a story, we agreed to move forward with the wireframes into visual design.

The Grid To Lead The Eye

 

When you land on a product page, the weekly sales billboard is the first thing you’ll see. The grid leads the shopper’s eye from the billboard, to the category cards, and then pulls the eye down to the vibrant color of the remaining rows.

Tell Customers Why To Buy

 

Sears category rows solve unique problems most common sites fail to address. Before the redesign, products and features were described with a simple bulleted list. Now, each product row is a featured section using fun images and to simple language.

Inspire Customers

 

We wanted to inspire our audience to imagine while encouraging them to purchase additional products. The combo row story humanizes the text, providing relatable narratives for customers, and shows the basics of what a category includes.

Encourage Site Exploration

 

After customers have had a chance to look at the product in detail, we wanted to make sure they had quick access to explore more products that might fit into their lifestyle. Product and service recommendations are based on purchases that other customers made after viewing the same product.

Updated Navigation

 

To make it easy for shoppers to get around, we created a navigation dropdown that allowed quick browsing by groups including, occasions, recipient, and personality. Other areas of the page show alternate ways to navigate to categories to keep the site feeling fresh while maintaining a consistent navigation on the left.

New Department Landing Pages

 

We wanted shoppers to enjoy browsing categories just as much as product landing pages. This template was designed to allow Sears to showcase a featured or best-selling product larger than the rest. We also introduced the idea of interrupters to break up the grid and cross-sell featured products from across other categories.

New Homepage

 

The homepage was designed to showcase a dropdown navigation, noteworthy events, and product collections.  A series of rows, dynamic content, and stackable information rows proceeded to keep exploration exciting and engaging.

Sears homepage

 

In 2012 Sears redesigned their e-commerce experience to showcase products, stories, and personalization in a unique way. The goals was to immerse consumers in an improved online shopping experience like no other.

 

Visual Design   |   Product Design  |  User Experience