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

16,030 views

Published on

Online shoppers have high expectations nowadays when it comes to your website and mobile apps. They increasingly expect companies to continually provide a compelling User Experience (UX) that is useful, usable, and desirable. But how do you accomplish that?

This presentation is aimed at helping you learn the current best practices in e-Commerce website design that lead to an improved User Experience (UX).

In this presentation, you’ll learn about the seven building blocks essential for a great User Experience:

• User Needs
• Information Architecture
• UI Design
• Visitor Behaviors
• Business Objectives
• Look and Feel
• Content

Who Should View this:

• Product Managers
• CEOs
• Marketing Directors
• Creative Directors
• Website Designers
• Website Developers

Published in: Business, Technology
1 Comment
70 Likes
Statistics
Notes
No Downloads
Views
Total views
16,030
On SlideShare
0
From Embeds
0
Number of Embeds
931
Actions
Shares
0
Downloads
877
Comments
1
Likes
70
Embeds 0
No embeds

No notes for slide

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

  1. 1. ®Creating the bestUser experienCe (Ux)in eCommerCeMagento Webinar | October 26, 2011
  2. 2. 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
  3. 3. 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
  4. 4. User Needs UI Design Information Architecture User experienCe (Ux)Behaviors Content Business Objectives Look & Feel 4
  5. 5. 4Create a bettereCommerCe experienCeLet shoppers browse their wayGive products the spotlightHighlight calls to actionStreamline the checkout process steps 5
  6. 6. Designed by Something Digitallet shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 6
  7. 7. let shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 7
  8. 8. let shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 8
  9. 9. let shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 9
  10. 10. let shoppersbroWse their WayCreate an intuitive navigationalstructureInclude multiple ways to filter & sortIncorporate options for viewingproduct resultsAdd breadcrumbsOffer a comprehensive search 10
  11. 11. 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
  12. 12. 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
  13. 13. 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 13
  14. 14. 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 14
  15. 15. 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 15
  16. 16. 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
  17. 17. 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
  18. 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 18
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 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 22
  23. 23. 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
  24. 24. 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
  25. 25. 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 25
  26. 26. 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 26
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. ®thank yoUSomething Digital9 East 38th Street, 8th Fl.New York, NY 10016212.983.8373info@somethingdigital.com

×