STOREPAGE PROMOTION

One of the options to promote products to users is via store page. Showing the good deals, deals for yelpers can converts more users into local stores.

PRODUCTS CHANNEL

Product Channel is another option to get more users to product page. Since every month there’s a tons of unique visits or new users registered, users could select the interested products channels or Yelpers to follow, such like “Givenchy”. After following the channels, relevant products will be pushed daily to users.

In terms of this page’s design. I use the dynamic sizing cards, floating on top of the background. Each card will be sized specifically based on product. Each time users browse on this page, new pushed products will be added to top.  Users could click the product he/she interested to favorite or check out the product.

DESIGNING FOR FIRST FOLD

MENTAL MODEL

When designing for the first fold of the screen, I considered the mental model of users when browsing a product and filter out the unnecessary information such as multiple photos, user uploaded reviews, shipping information.

DESIGN JUSTIFICATION

DESIGNING FOR CTA

DESIGNING FOR THE SECOND FOLD - FILTER TABS

DETAILS

  • Description
  • Size and Fit
  • Stock Information

REVIEWS

  • User Ratings
  • Write a review
  • Suggested Reviews

STORES

  1. Available Stores
  2. Filter/Sort Stores
  3. Nearby Stores

DESIGNING FOR THE SECOND FOLD - FILTER TABS

COLLAPSED DRAWER DESIGN

Even after using the “Three-tabs filter” to organize content, there’s still too much to show under each tab.
As I learnt, “No one scrolled” really is one of the things to remember when designing the mobile product.
By using collapsed drawer, we can hide and show relevant information as user chooses. First, we lower the average cognition workload on each screen; second, we save a lot of screen space. Users don’t have to scroll a lot to find a piece of content.

DESIGNING FOR MY CART

MY CART

After user clicking the “Add to Cart” button, we successfully convert this user to the checkout session, where users would see all the products he/she considered to check out.
On this page, we have to consider how to show users the benefits of checkout via Yelp which correlates with Yelps’ business strategy as a whole.
Are we providing discounts if they pick up the products at local store? Are they getting additional profits? How can we moderate if we successfully convert users to in-store?
These are questions I considered a lot, which will ultimately affect how the design looks  on this page.

DESIGNING FOR BAR CODE

BAR CODE

Bar code is a great way of recording how much traffic we converted to local store and finally check out.
After users check out via Yelp.product, they can click to reveal the bar code either at the helper desk or at the check out desk. It saves them a lot of time looking around at the local store and will give them relative discount based on monetization plan between Yelp and local stores.

Reflection

For this design exercise, I started from brainstorming the ideas, defining the problems, quickly sketched out several design options and went from there. I iterated several times for each of the screen, for first fold and second fold, I tried to organized the content based on users mental modal and information architecture. 
I feel like this exercise requires the understanding of this product and the iteration ability to User Interface. If given more time and more resources, there must a lot to improve and dig deeper.