product page - scroll & anchor

-
The Context
This is a prototype of a product page for Adverator.com, a marketplace where small/medium business owners shop for local advertising.
On this page, users are viewing ad spaces for Brides Magazine.
On the left side displays detailed info about the product such as "what's included" & "Sample Ads".
On the right side shows a "buy" module that lets users to choose the market, timing and size, view price and add to cart.

-
The Design Challenge
The previous design(shown in the attachment) employs a typical e-commerce tab approach for displaying detail info since at the time most of our info are technical and not visual.
As our business evolved, we'd like to add more engaging product info.

-
The Design Solution
First, I organized the new info into panels, there are about 12 panels. I then filed them under 5 bigger categories which are the anchor links. This way users can scroll or jump to view at their own pace.
Second, once the user scroll past the fold, the "buy" module on the right side will sticky, convenient for making the purchase$$.

Posted on Oct 16, 2017

More by Ling Zhou

View profile