Project Description: This was a content analysis/adaptive design project based on a product page of sears.com.
Tools: Axure RP, Keynote
Keywords: Responsive Design, Business Strategy, Mobile Design, Tablet Design
My overall approach for this project is to consider users’ context when they are using different devices. By analyzing different scenarios, I prioritized contents that are more relevant to the specific device’s use case.
At the same time, I noticed that sears.com has many value-adding components such as suggested products and purchase protection ads. In order to keep these revenue channels, I included several sponsored contents for both tablets and mobile when appropriate. In general, value-adding contents that requires complicated setup processes are kept for tablet, and the informational ones are for smartphone.
For the purpose of this project I took the product page of a burner on Sears.com. First I brokedown the webpage contents into several sections based on their functions. Some of them are essential such as “payment and shipping”; some of them might render less important on a different device such as “similar products”.
Use Case Analysis
The contexts of smartphone and tablet usage are very different, and here is why.
When users are using a tablet to view product information, they are usually situated in a comfortable environment, probably at home. The tablet they use could be a device that’s shared among the family. More browsing happens than buying. They can view a good amount of images and willing to play video content more. Also it’s easier to do complicated set up process on tablet rather than mobile devices.
On the contrary, buying power is associated with smartphones that have mobile payment technologies enabled. Users are often on-the-go, so information should be presented in a way for easier digestion. Scrolling is also easier for them rather than clicking and tapping. It is also easier to type on mobile than tablet, but not for too long. Complicated set up process is not suited for mobile.
Redesign Wireframe with Annotation