Creating the Best e-Commerce User Experience (UX) | Something Digital

®Creating the bestUser experienCe (Ux)in eCommerCeMagento Webinar | October 26, 2011

something DigitalBased in New York CityFounded in 1999Built Around 3 Practice Groups: Interactive, Mickey Winter (Creative Director)Software, and IT ServicesHorizontally-Focused: eCommerce, CorporateWebsites, Portals, Enterprise AND Consumer Apps,Web BrandingExperience in Retail, Media, Fashion, ProfessionalServices, Non-Profit, Healthcare Jon Klonsky (Founding Principal)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 Greg Steinberg (Founding Principal) timetotalk.org & meth360.org 2

Why Does User experienCe matter?User Experience (UX) is the interaction a user has with a product and how they perceive it. nt e nie o nv C $ Enjo yab le Intuitive = 3

User Needs UI Design Information Architecture User experienCe (Ux)Behaviors Content Business Objectives Look & Feel 4

4Create a bettereCommerCe experienCeLet shoppers browse their wayGive products the spotlightHighlight calls to actionStreamline the checkout process steps 5

Designed by Something Digitallet shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 6

let shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 7

give proDUCts thespotlightProvide shoppers with multiple viewsof each product (photos, video, etc.)Include as much detail about aproduct as possible (size, material,weight, etc.)Show related products, up-sells &cross-sells on the same pageEnable wishlists, sharing andnotificationsDisplay detailed product reviews 11

Designed by Something Digitalgive proDUCts thespotlightProvide shoppers with multiple viewsof each product (photos, video, etc.)Include as much detail about aproduct as possible (size, material,weight, etc.)Show related products, up-sells &cross-sells on the same pageEnable wishlists, sharing andnotificationsDisplay detailed product reviews 12

highlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalareaAvoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary andsecondary action itemsUse whitespace, color & size toseparate the actions from content 16

New client of Something Digital, updated site launching 2012highlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalarea (the end of the viewing pattern)Avoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary andsecondary action itemsUse whitespace, color & size toseparate the actions from content 17

highlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalarea (the end of the viewing pattern)Avoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary andsecondary action itemsUse whitespace, color & size toseparate the actions from content 18

highlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalarea (the end of the viewing pattern)Avoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary andsecondary action itemsUse whitespace, color & size toseparate the actions from content 19

Designed by Something Digitalhighlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalarea (the end of the viewing pattern)Avoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary,secondary & tertiary action itemsUse whitespace, color & size toseparate the actions from content 20

highlight Callsto aCtionAdd primary and secondary actionitems to the homepagePlace key calls to action in a terminalarea (the end of the viewing pattern)Avoid deadends, include at least onecall to action on every pageUse ACTIVE language that describesthe actionDifferentiate between primary,secondary & tertiary action itemsUse whitespace, color & size toseparate the actions from content 21

streamline theCheCkoUt proCessMake the shopping cart clearlyaccessible from every pageShow all fees in the shopping cartAllow customers to buy withoutcreating an accountMake the checkout a single pageDesign forms for fastest completiontime 22

streamline theCheCkoUt proCessMake the shopping cart clearlyaccessible from every pageShow all fees in the shopping cartAllow customers to buy withoutcreating an accountMake the checkout a single pageDesign forms for fastest completiontime 23

Designed by Something Digitalstreamline theCheCkoUt proCessMake the shopping cart clearlyaccessible from every pageShow all fees in the shopping cartAllow customers to buy withoutcreating an accountMake the checkout a single pageDesign forms for fastest completiontime 24

What have We learneD?Incorporate the following best practices and you will create abetter eCommerce experience.Let shoppers browse their way.Give products the spotlight.Highlight calls to action.Streamline the checkout process. 27

In simplest terms, UX is the overallemotional feeling a user gets after usinga website.Give them a convenient, intuitive, &enjoyable experience and they will buy. 28

resoUrCes FeatUreD sitesAdaptivePath.com AnnTaylor.comAlistApart.com Apple.comBaymard.com Crate&Barrel.comHumanfactors.com FreePeople.comJjg.net ModCloth.comLukeWroblewski.com PapyrusOnline.comSmashingMagazine.com PotteryBarn.comSomethingDigital.com Target.comUie.com Telcare.comUsabilitypost.com Theodora&Callum.comUseit.com VMVhypoallergenics.comUXdesign.com WestElm.comUXmatters.com Zappos.comUXmovement.comWebdesignerdepot.com 29

®thank yoUSomething Digital9 East 38th Street, 8th Fl.New York, NY 10016212.983.8373info@somethingdigital.com

http://www.somethingdigital.com	508
http://confluence.ontrq.com	46
http://staging.somethingdigital.com	38
http://safe.tumblr.com	3
http://paper.li	2
http://mallresearch.tumblr.com	2
https://si0.twimg.com	2
http://api.markup.io	1
https://twitter.com	1
http://tweetedtimes.com	1
http://www.techgig.com	1
http://prod.somethingdigital.com	1
http://markup.io	1

Creating the Best e-Commerce User Experience (UX) | Something Digital

by New York Interactive and Digital Marketing Agency | Something Digital

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 607

Statistics