SEARS Product Page — a Wireframe & Redesign Project

By David R. Hankes

Overview

Using Axure to create a detailed tablet and smartphone wireframe for this Sears.com product page: http://bit.ly/1U1Sy3s.  The wireframes are detailed and show every data element on the page, including complete annotations to describe the interactions. A paragraph that succinctly describes your approach for each wireframe (tablet and smartphone).

Methods

After inspecting the Sears product page that has been selected, there are many elements that are geared more towards the desktop audience (deals, coupons, local ads, credit cards, kmart.com, etc). These elements have been placed under the hamburger icon in addition to the main navigation section. By moving these items under this element, we give tablet and mobile users more screen real estate.

Since the desktop version that was presented to us has many elements it was difficult to decide what to keep and discard. One issue that tablet and mobile users will encounter if this page was created with responsive only, would be the large amount of scrolling that would need to be performed. This was an area that I kept in mind when I was looking to create user experiences on both tablet and mobile wireframes.

The main areas that I focused on created the best experience with are as follows:

  • Navigation
  • Product Overview
  • Product Description
  • Customers Viewed
  • Specifications
  • Ratings and Reviews
  • Questions and Answers

Tasks

Navigation

  • Primary: the navigation consists of the hamburger icon with additional section information from the desktop version being placed here. This section was not extrapolated for the project requirements.
    • Search: Since search is a major component of users finding inventory, a search box was added to the tablet version and the universal magnifying glass to indicate search functionality was added to the mobile version. The search box was placed in the center to allow the end user to search Sears’ entire inventory of products without having to hunt down this element.
    • Share: The share elements were originally tucked below the product information and only included a couple options.  This standardized location will allow users to quickly select the icon and share the current item on the screen with any social media service.
    • Cart: Since product conversion is a high priority to sales, the cart icon is located in the upper right-hand corner to allow the user to view their cart contents, but also notified through a number when there is an item in their cart. This will allow shoppers the ability to know that they are not leaving unfinished products in their cart and therefore more likely to complete the conversion process.
  • Secondary: The main sections of the product page are highlighted, overview, description, specs, reviews, and Q&A. By placing this secondary navigation, our users are given the ability to jump to various sections without excessive scrolling.
    • Product Overview:
      • In this section, the user is presented with a product title, product photos, specials, pricing, loyalty rewards, delivery options, quantity, lists, registries, and scrolling advertising. To simplify the tablet and mobile versions I concentrated on the main components that sell products based on common standards.
      • Images: tablet images were placed under the main product photo, where as since mobile users swipe more often, image indicators below the main photo are presented to indicate more images are available.
    • Product Description:
      • This element was left as-is since it commonly is provided by the manufacture. However, for the mobile version this section has been given its own page. The user clicks on the description section and they are sent to an additional page for further information (see section 1.4). This was performed to minimize the amount of scrolling the user would have to perform under other circumstances.
    • Customers Viewed:
      • This section was complete copy over from the desktop. The only difference with the tablet is that the user controls further products clicking the left and right arrow keys, and the mobile user is show a partially hidden product, indicating that scrolling will give them additional products.
    • Specifications:
      • The specifications section was a direct carry over form the desktop version to the tablet since there was enough screen space to allow the user to identify critical specs on the product like size, weight, dimensions, etc. The mobile version was given an additional page that the user could click on to retrieve this additional information (see section 1.6). This decision was based on minimizing the amount of scrolling the user would need to perform in retrieving product information.
    • Ratings and Reviews
      • The section on ratings and reviews was brought over from the desktop version, however design elements were changed to accommodate gestures versus point and click (see section 1.7). Text links were converted to call to action buttons, both primary and secondary. The user is required to click on a menu item in the mobile version, which takes them to an additional screen. This decision was based on minimizing the amount of scrolling the user would need to perform in retrieving product reviews.
  • Questions and Answers
    • The Q&A section was brought over from the desktop version, however design elements were changed slightly to accommodate gestures versus point and click and screen real estate (see section 1.8). Text links were converted to call to action buttons, both primary and secondary. The user is required to click on a menu item in the mobile version, which takes them to an additional screen. This decision was based on minimizing the amount of scrolling the user would need to perform in retrieving product reviews.

Discussions

Additional details can be found in this document, including footnotes and explanations to features. In the section above, there were many changes to the mobile version due to screen constraints. I have included the product description, specifications, ratings and reviews, and questions and answers screens that would accompany the necessary clicks, which were developed to minimize scrolling by the user.

Documentation