creating the best e-commerce user experience (ux) | something digital

®

Creating the best User experienCe (Ux) in eCommerCe Magento Webinar | October 26, 2011

2

something Digital Based in New York City Founded in 1999 Built Around 3 Practice Groups: Interactive, Software, and IT Services

Horizontally-Focused: eCommerce, Corporate Websites, Portals, Enterprise AND Consumer Apps, Web Branding

Experience in Retail, Media, Fashion, Professional Services, Non-Profit, Healthcare

Awards - 2011 Webby Nominee for drugfree.org

- 2011 Gold American Graphic Design Awards for elmaphilanthropies.org & madisonsquarepark.org

- 2010 Gold American Graphic Design Award for somethingdigital.com

- 2008-2009 Silver Communicator Awards & W3 Awards for

timetotalk.org & meth360.org

Mickey Winter (Creative Director)

Jon Klonsky (Founding Principal)

Greg Steinberg (Founding Principal)

3

Why Does User experienCe matter?User Experience (UX) is the interaction a user has with a product and how they perceive it.

= $Convenient

Enjoyable

Intuitive

4

User experienCe (Ux)

UI DesignInformation Architecture

Content

Look & Feel

User Needs

Behaviors

Business Objectives

5

Create a better eCommerCe experienCeLet shoppers browse their way

Give products the spotlight

Highlight calls to action

Streamline the checkout process

steps4

6

let shoppers broWse their Way Create an intuitive navigational structure

Include multiple ways to filter & sort Incorporate options for viewing product results

Add breadcrumbs Offer a comprehensive search

Designed by Something Digital

7

let shoppers broWse their Way Create an intuitive navigational structure

Include multiple ways to filter & sort Incorporate options for viewing product results

Add breadcrumbs Offer a comprehensive search

8

let shoppers broWse their Way Create an intuitive navigational structure

Include multiple ways to filter & sort Incorporate options for viewing product results

Add breadcrumbs Offer a comprehensive search

9

let shoppers broWse their Way Create an intuitive navigational structure

Include multiple ways to filter & sort Incorporate options for viewing product results

Add breadcrumbs Offer a comprehensive search

10

let shoppers broWse their Way Create an intuitive navigational structure

Include multiple ways to filter & sort Incorporate options for viewing product results

Add breadcrumbs Offer a comprehensive search

11

give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)

Include as much detail about a product as possible (size, material, weight, etc.)

Show related products, up-sells & cross-sells on the same page

Enable wishlists, sharing and notifications

Display detailed product reviews

12

give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)

Include as much detail about a product as possible (size, material, weight, etc.)

Show related products, up-sells & cross-sells on the same page

Enable wishlists, sharing and notifications

Display detailed product reviews

Designed by Something Digital

13

give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)

Include as much detail about a product as possible (size, material, weight, etc.)

Show related products, up-sells & cross-sells on the same page

Enable wishlists, sharing and notifications

Display detailed product reviews

14

give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)

Include as much detail about a product as possible (size, material, weight, etc.)

Show related products, up-sells & cross-sells on the same page

Enable wishlists, sharing and notifications

Display detailed product reviews

15

give proDUCts the spotlight Provide shoppers with multiple views of each product (photos, video, etc.)

Include as much detail about a product as possible (size, material, weight, etc.)

Show related products, up-sells & cross-sells on the same page

Enable wishlists, sharing and notifications

Display detailed product reviews

16

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary and secondary action items

Use whitespace, color & size to separate the actions from content

17

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area (the end of the viewing pattern)

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary and secondary action items

Use whitespace, color & size to separate the actions from content

New client of Something Digital, updated site launching 2012

18

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area (the end of the viewing pattern)

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary and secondary action items

Use whitespace, color & size to separate the actions from content

19

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area (the end of the viewing pattern)

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary and secondary action items

Use whitespace, color & size to separate the actions from content

20

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area (the end of the viewing pattern)

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary, secondary & tertiary action items

Use whitespace, color & size to separate the actions from content

Designed by Something Digital

21

highlight Calls to aCtion Add primary and secondary action items to the homepage

Place key calls to action in a terminal area (the end of the viewing pattern)

Avoid deadends, include at least one call to action on every page

Use ACTIVE language that describes the action

Differentiate between primary, secondary & tertiary action items

Use whitespace, color & size to separate the actions from content

22

streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page

Show all fees in the shopping cart Allow customers to buy without creating an account

Make the checkout a single page Design forms for fastest completion time

23

streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page

Show all fees in the shopping cart Allow customers to buy without creating an account

Make the checkout a single page Design forms for fastest completion time

24

streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page

Show all fees in the shopping cart Allow customers to buy without creating an account

Make the checkout a single page Design forms for fastest completion time

Designed by Something Digital

25

streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page

Show all fees in the shopping cart Allow customers to buy without creating an account

Make the checkout a single page Design forms for fastest completion time

Designed by Something Digital

26

streamline the CheCkoUt proCess Make the shopping cart clearly accessible from every page

Show all fees in the shopping cart Allow customers to buy without creating an account

Make the checkout a single page Design forms for fastest completion time

Designed by Something Digital

27

What have We learneD?

Incorporate the following best practices and you will create a better eCommerce experience.

Let shoppers browse their way.

Give products the spotlight.

Highlight calls to action.

Streamline the checkout process.

28

In simplest terms, UX is the overall emotional feeling a user gets after using a website.

Give them a convenient, intuitive, & enjoyable experience and they will buy.

29

resoUrCesAdaptivePath.comAlistApart.comBaymard.comHumanfactors.comJjg.netLukeWroblewski.comSmashingMagazine.comSomethingDigital.comUie.comUsabilitypost.comUseit.comUXdesign.comUXmatters.comUXmovement.comWebdesignerdepot.com

FeatUreD sitesAnnTaylor.comApple.comCrate&Barrel.comFreePeople.comModCloth.comPapyrusOnline.comPotteryBarn.comTarget.comTelcare.comTheodora&Callum.comVMVhypoallergenics.comWestElm.com

Zappos.com

®

thank yoUSomething Digital 9 East 38th Street, 8th Fl. New York, NY 10016

212.983.8373

info@somethingdigital.com