Sears.com – Responsive Redesign

Introduction

The Client

Sears and sears.com

A major retail chain, and formally perhaps the largest, located in Chicago Illinois. With a long history and many physical stores located throughout North America and elsewhere, Sears is interested in staying relevant with current consumer trends.

Objective

Create responsive and/or adaptive versions of sears.com to work with common screen sizes for mobile devices. The main target being products that data suggests attract high-quality users such as Apple products: iPad and iPhone.

Include all useful information and functions for the phone and tablet experiences. Prioritize for those experiences and omit those items that would not be necessary

Scope

This project was constrained under the premise that the current website had the functionality that was required but the mobile and tablet experiences needed to be addressed.

This project focused on interface and interactive design. Visual design would follow the current design style guides are are already being use in the desktop version.

Research was not within scope.

The Problem

The internet world has gone small. More users are looking for and purchasing their items from sears.com via mobile and tablet devices. Because of this movement in consumer behavior, Sears has decided to quickly roll out a responsive version of their current website.

Process and What Happened

Phone Version

Skipping the “mobile (or phone) first” approach because the large format site already existed, the intention was to show everything that the business owner wanted and needed on the site, while also considering the resources available in the smaller device. This was done by hiding everything but the title of all items first. Then for those items that were decided necessary to be shown in more detail than just the title, a way to show that content was employed.

Tablet Version

The tablet version follows the basic idea of the mobile version with some obvious or unique tablet exceptions.

Landing or Hero Section

Phone
Tablet

Primary Navigation

The primary navigation menu was placed under the standard ‘hamburger’ menu icon. The choice was made both because it saves valuable real estate and because it is a common and arguably expected pattern.

Quick Links

The Shopping and My Account links are changed from text to icons, to help with real estate concerns. They are still prominent because they are used in all interactions.

This was an attempt to save space while also keeping their use intuitive.

Breadcrumbs

Phone

The breadcrumb navigation has been compacted to a drop-down style menu that when clicked will show all the appropriate links.

This approach seems to be a better solution than an expanding menu. Testing needs to be done to prove or disprove this hypothesis.

Tablet

The bread-crumb navigation menu has been brought back to normal size.

Search - Phone

Phone

The search box is hidden while not in use but will expand when clicked on to allow for interaction. Balsamiq’s default search icon is not visually representative of the intended pattern. Further work will need to be done to fine-tune this interaction in the hi-fidelity prototype and interface coding phases.

Tablet

These items have been returned together and above the fold, just as they are in the desktop version.

Slideshow (Features) - Phone

Phone

The features slideshow as expected and experienced in my other applications. There is an automatic changing slideshow that will feature current sales and other relevant information.

Employed as an indication tool are small thumbs located under the mail slideshow window. They should indicate to the user that there is more to see and will also give the user a way to choose the slide they might want to select.

Tablet

These items have been returned together and above the fold, just as they are in the desktop version.

Reviews - Phone

Phone

The reviews section has been moved to below the slideshow to allow the user to always see the product. If the area is clicked, the user will be taken to the reviews page.

Tablet

These items have been returned together and above the fold, just as they are in the desktop version.

The Fun Bar - Phone

Phone

Social Icons: The social icons have been compacted into a single ‘share icon’ to save space.

Passing feedback: The “like it”, “Want it”, and “Have it” text has been removed while the icons remain. When clicked, a dialog box will appear to interact with.

Add to: The two links have been consolidated to the words ‘Add to’. When pressed, a dialog box will allow the user to add to a list or registry. The thinking is that a dialog box works here because the task very quick and simple. A slide-out is another pattern to consider.

Tablet

These items have been returned together and above the fold, just as they are in the desktop version.

Phone
Tablet

Pricing Info Panel

The Pricing Info Panel has been placed inline with the page instead of floating on the right of the main body. It is under the fold but should be the first item seen when the user scrolls down.

Description and Specifications

Phone

These areas have been reduced to show only a single line of text for the title and an arrow suggesting that if touched, more content will be shown.

Tablet

These areas have been expanded to show a sample of their content.

Upgrade

Phone

A teaser for up selling has been afforded to the project in an attempt to increase conversion or up sale.

Tablet

More examples are shown and the more info link will take the user to a new page.

Phone
Quick links for phone version
Tablet

Quick links

Phone

It was decided that there are items on the page that need to remain but that need to take up less space and initial bandwidth. To accomplish these requirements the areas where compacted to one line of text along with an arrow that is intended to indicate that when touched more content would be presented. The additional content would be lazy loaded.

Frequently Bought Together

Tablet

This area is now showing some teasers but not as many as the full site.

Sears Protection

Tablet

Teasers and imagery are afforded to the section to garner more interest from the user.

Ratings & Reviews

Tablet

Additional information has been shown in contrast to the phone version. The user can still expand to get more info.

Similar Products

Tablet

At this size, this area is now showing the same teasers as the full site but limited in content. Four or five links can also be shown in the Related Searches list.

Ad

The ad will be prominently shown taking up the whole width of the screen.

Phone
Tablet

Footer

In the current full site, there are three columns of content. These three columns will be stacked in this version.

Conclusion

Without conducting any form of user research on this design, the level of success or fail that was accomplished is unknown.

One area that might be a failure is the breadcrumb solution in the phone version. Instead of a typical breadcrumb pattern, a dropdown device has been employed. The intent is not to use a common dropdown but rather something that works like one but looks appropriate. This is something that would need to be worked out in the visual version.

There is concern about the performance of the expanding links with how many there are. 

This was a single iteration but overall I think it is on to a good start.

Full Wireframes with Annotations

Phone
Tablet