creating the best e-commerce user experience (ux) | something digital
Upload: new-york-interactive-and-digital-marketing-agency-something-digital
Post on 21-Nov-2014
11.211 views
DESCRIPTION
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 DevelopersTRANSCRIPT
![Page 1: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/1.jpg)
®
Creating the best User experienCe (Ux) in eCommerCe Magento Webinar | October 26, 2011
![Page 2: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/2.jpg)
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)
![Page 3: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/3.jpg)
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
![Page 4: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/4.jpg)
4
User experienCe (Ux)
UI DesignInformation Architecture
Content
Look & Feel
User Needs
Behaviors
Business Objectives
![Page 5: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/5.jpg)
5
Create a better eCommerCe experienCeLet shoppers browse their way
Give products the spotlight
Highlight calls to action
Streamline the checkout process
steps4
![Page 6: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/6.jpg)
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
![Page 7: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/7.jpg)
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
![Page 8: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/8.jpg)
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
![Page 9: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/9.jpg)
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
![Page 10: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/10.jpg)
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
![Page 11: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/11.jpg)
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
![Page 12: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/12.jpg)
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
![Page 13: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/13.jpg)
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
![Page 14: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/14.jpg)
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
![Page 15: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/15.jpg)
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
![Page 16: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/16.jpg)
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
![Page 17: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/17.jpg)
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
![Page 18: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/18.jpg)
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
![Page 19: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/19.jpg)
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
![Page 20: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/20.jpg)
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
![Page 21: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/21.jpg)
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
![Page 22: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/22.jpg)
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
![Page 23: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/23.jpg)
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
![Page 24: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/24.jpg)
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
![Page 25: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/25.jpg)
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
![Page 26: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/26.jpg)
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
![Page 27: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/27.jpg)
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.
![Page 28: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/28.jpg)
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.
![Page 29: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/29.jpg)
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
![Page 30: Creating the Best e-Commerce User Experience (UX) | Something Digital](https://reader033.vdocument.in/reader033/viewer/2022051816/546e8d78b4af9fc3268b46ed/html5/thumbnails/30.jpg)
®
thank yoUSomething Digital 9 East 38th Street, 8th Fl. New York, NY 10016
212.983.8373