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 versions 5, 6, and 6 plus.
The plan was to focus on interface and not visual design.
This project focused primarily on interface and interactive design. Research and visual design would follow current design style guides.
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.
While evaluating the current website for sear.com, I felt that the solution was somewhat simple and didn’t require sketches. I decided to move straight to Balsamiq instead.
I took the mobile (or phone) first approach but specifically. My intention was to show everything that the business owner wants and needs 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 are deemed necessary to be shown in more detail, I provided a way to show that content.
I placed the primary navigation menu under the standard ‘hamburger’ menu icon.
The Shopping and My Account links are changed from text to icons to help with real estate concerns.
This was an attempt to save space while also keeping their use intuitive.
The breadcrumb navigation has been compacted to a drop-down style menu that when clicked will show all the appropriate links.
This idea seems a better possible solution such as an expanding menu.
The search box is compacted while not in use but will expand when clicked on to allow for better interaction.
The slideshow works much the same way as the current full site but the thumbs have been compacted and placed at the bottom on the main image.
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.
The Fun Bar
Social Icons: The social icons have been compact- ed into a common ‘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 clicked on a dialog box will allow the user to add to a list or registry. I think that a dialog box works here because the task very quick and simple.
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
These areas have been reduced to show only a single line of text for the title and an arrow suggesting that if touch more content will be shown.
A teaser for up selling has been afforded to the project in an attempt to increase the sale.
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 denote that when touched more content would be presented. The additional content would be lazy loaded.
The ad will be prominently shown taking up the whole width of the screen.
The tablet version follows the basic idea of the smartphone version with some obviously needed exceptions.
Frequently Bought Together
This area is now showing some teasers but not as many as the full site.
Teasers and imagery are afforded to the section to garner more interest from the user.
Ratings & Reviews
Additional information has been shown in contrast to the phone version. The user can still expand to get more info.
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.
Without putting this design to production it is hard to know what level of success or fail was accomplished. One area that I did think is a failure is the breadcrumb solution in the phone version. I am also concerned about the performance of the expanding links with how many there are. This was a single iteration result but overall I think it is on to a good start.