1

Marah Mobile Website Proposal

David Ko

2

Outline

• EC Mobile Website Introduction– Functions– Popular UI Elements

• Marah Mobile Design (website only)– Functions– UI– Page Flow

• References– Phone Simulator

3

EC Mobile Website Introduction

4

EC Mobile Functions• Product Functions

– Product Browse• Catalog, Refinement• Search

– Deals & Promotions• Today Deals, Free Shipping, …, etc

– Product List• Sorting by Criteria (Relevance, Top Sellers,

Review Rating, Name, Lowest Price, Highest Price, New Arrivals)

– Product Page• Basic Profile, Up-Sale, Cross-Sale, …, etc

– Recommendation• Based on User, Amazon only• Customers buy also

– Share (App only)• User Functions

– Sign In/Out & Sing Up– Wish List– Shopping Cart– Check Out– Order (History, Tracking)

• Others– Help, Feedback

Catalog + Refinement Deals & Promo Search

Wish List Cart

Check Out

Order

Product List Related Products

Recommend

5

Product Category, Refinement

(Collapsed) Category List

Select a category

Product List of the selected

category

Refined Product List

Home Page

Refine to more detailed

product list

• Amazon provides collapsed list view to show product categories. In home page, just show the most important categories.

• Overstock provides category list view by level. At product list page of some category, user can refine to view more detailed classified products.

Refinement List

6

Product Search

Home Page

Product List

Any Page

• Amazon provides “Filter Result” & “Choose Department” to filter the searched product list.1. Filter Result: Shipping Options (Free Super Saver Shipping), Amazon Prime: (Prime Eligible)2. Choose Department: filter by

• OverStack provides “Refine” function to provide more detailed classified results.

* Place search element in all page, and possibly customize in different page, like only search products based on some category.

Filtered Product List

Search

Filter by Options or Category

Refine

7

Deals, Promotions & Recommendation

Home Page

Deal Categories

Deal Product List Deals

Amazon: Deal of the Day, Lightning Deals, Best DealsFilter: User can choose department to filter product list.

Promotions & RecommendationCan place promotion in the form of horizontal gallery in the Home Page. Otherwise, for a login user, can show recommended products.

Choose a Deal Category

Filter by Category

Promotion Product

Click a promo or

recommended product

Filtered Product List

8

Product Profile

Category Browse Flow

Product Profile

Home Page

Product Search Flow

Common Product Profile• Basic Profile

• Title, Review Counts, List Price, Price, You Save, Quantity, In/Out-off Stock, Options (Eligible, …)

• Buttons• Add to Shopping Cart, Add to Wish List

• Up-Sell• Buy Together (provide saving to attract)

• Cross-Sell• Customers buy also

• Reviews (filter by star level)

View a product

9

Sign In/Out & Sing Up

Sign In / Sign UP

Home Page

Any Authorized Flow

Redirect if not authorized

user

* Combine Sign In & Sing Up in the same page

10

Wish List

Product

Wish List

Product ProfileFlow

Home Page

Add to wish list

View a wish list

Wish List Management• Delete product• Add to Cart• Create a new Wish List

(Amazon only)

11

Shopping Cart

Product

Shopping Cart

Product ProfileFlow

Home Page

Add to cart

Wish List

Add to wish list

Add to cart

View Cart

Cart Management• Delete product• Save for Later (Amazon

only)• Product information (title,

price, you save, quantity, subtotal)

• Update quantity• Proceed to Check out

12

Check OutHome Page

Shopping Cart Flow

Shipping Address

Sign In Again

Shipping Method

Payment Method

Billing Address

Confirm Order

13

Mobile UI Element

Tab Menu, List View Collapsed List View(At most one sub level)

Collapsed Menu

• List View– List View is a good UI experience for displaying items for

mobile phone.– Most EC websites use it to place function entry, display

product categories or refinements.– Can integrate with “Collapse/Expand” to show more

info.

• Tab Menu – Tab Menu can highlight main functions, but in mobile

phone, at most use 4~6 tabs and name the last as “More” to show more functions by List View or other ways.

14

Marah Mobile Design

15

Marah Mobile Functions - 1• Product Functions

– Product Browse• Catalog, Refinement• Search

– Deals & Promotions• Coupons & Promotions, Clearance Sale Center, Blank Media Sale, Media Accessories

Sale, Flash Memory / SSD Sale, Duplication Hardware Sale, Ink Cartridges Sale and Toner Cartridge Sale

– Product List• Sorting by Criteria including Top Sellers, Sale Price (Lowest Price, Highest Price), Best

Rating , Most Reviews)• For product search, sorting by Relevance, Sale Price, Best Rating and Most Reviews

– Product Page• Basic Profile• Up-Sell• Cross-Sell

16

Marah Mobile Functions - 2• User Functions

– Sign In/Out & Sing Up– Wish List

• Add/Remove a product in wish list– Shopping Cart

• Add/Remove a product in shopping cart• Process to checkout• Show shopping info and summary

– Check Out• Credit Cart, Google CheckOut and Paypal

– My Account• Change name, email or password• Shipping Address management• Payment Info management• Order

• Track Order• Order Status (History, Re-order)

• Others• Help, Feedback, Terms of Condition, Policies

17

Marah Mobile UI• Pages

– Home Page• Show promotions and function entries

– Category List Page• Sub-Category, Refinement

– Deal List Page– Product List Page

• Based on a specified category, deal, refinement (for a deal or category) or a search key

– More Page• Order Page• Account Setting Page (change name, email, password)• Address Management Page (Shipping, Billing)• Payment Method Management Page

– Wish List Page– Shopping Cart Page– Checkout Page Flow

• Sign In → Shipping Address Page → Shipping Method → Billing Address → Payment Method → Place Order

– Sign In Page, Sign Up Page

• Shared Elements– Product Search (shown in every page) * SMS Mock Up

18

Page Flow

19

References

• Phone Simulator– Use Android simulator to browse mobile web sites. (The browsers of Android and

iPhone are all based on WebKit engine, although a little different)

• Lite JavaScript Library• Others

– There’re some mobile JavaScript framework to use.• Buy.com uses "jQuery Mobile" framework to develop, still alpha version until now.