Embed Size (px)
Citation preview
Design & Usability for
increased conversion
Vlad Stanescu
About me● CEO and CTO @ MindMagnet● Web agency founded in 2005● 30+ developers● Strong focus on Magento and custom PHP
solutions● Background of PHP development and PM
PROUD ORGANIZER OF IN ROMANIA
We all lovenice designs
What do users want?To find this out, we ran a survey on iVox.ro with the following target:
● medium and high income / household● urban area● internet users that shop online
Data based on 1428 web interviews conducted on April 27-30, 2015.
What do users want?● 60,57% of users said design is very
important (only 13,19% said it’s not important)
● about their most used store:o 93,64% were happy with its designo 93,82% were happy with its usabilityo 76,68% were happy with its copywritingo 92,23% said they save time when shopping
on it● 89,22% want a site that’s easy to
use
What do users want?Info that matters to the user:● 50,35% said they often need details on
delivery● 45,41% said they often need details on
returns● 44,35% said they often need details on
warranty● 75,26% said they happen to need the
invoice● when shopping 38,69% want good filters
above everything
Why have a good design?● increase credibility
o 76,32% of users state that if a shop they don’t know has a nice design they’re more likely to purchase from it
● increase conversiono 64.31% of users previously abandoned orders on frustrating
websiteso 67.86% stated that they haven’t returned to that site
● increase loyaltyo 67,84% of users say they enjoy shopping on a store if it has a good
designo 77.74% of users say they never recommended a website they
don’t like
Why is design hard?
Focusing on the wrong things
Too much content you think is important.Too little details on products and procedures.Assuming your users know things.
● about products● about terms of delivery● about what happens when● about eCommerce in general
Only theHappy-FlowWhat is the happy flow?
User with:● plenty of time● lots of experience with shopping● a conesoeur in your line of products● has no concerns regarding your store or the
products
Who wants to:● buy your most popular products● paying with a valid credit card
Afterwards, order goes perfectly and at 10am the next morning delivery is made to the user patiently waiting at home.
● Mom needs to leave home in 15min to pick up the kid from kindergarten wants to quickly order a pair of sport headphones for her husband’s birthday which is in 3 days;
● Grandmother with little experience wants to buy an iPod Touch for her grandson’s 15th birthday;
● Office assistant purchased office supplies and needs the invoice for taxing purposes, but she finds out she entered an incorrect billing address;
● Active runner bought a pair of running shoes, but they’re not comfortable enough so he wants to send them back;
● Young man ordered a nice present on his way to work for his girlfriend, which he expected to arrive yesterday but didn’t, so he wants precise confirmation that he’ll receive it today since today is the anniversary;
But how does reality look like?
No focus on the post-saleAfter purchase, your customer might still need you:● wants to know when delivery will happen● needs the invoice● needs to return something● needs to send in his product for warranty
Evaluating & improving designs
PersonasCreate personas for your usersPersona 1:
● lives in big city, central area● works in advertising and earns well● is avid runner● is quite tech savvy
PersonasCreate personas for your usersPersona 2:
● lives in the suburbs● is a history teacher and earns ok● non technical
PersonasCreate personas for your usersPersona 3:
● in college, lives in campus and works as freelance writer
● medium technical skills● huge movie fan
ScenariosCreate scenarios:
● Scenario 1o user wants to buy products X and Y he knows and checkout
with registration and shipping to address A and payment by credit card
● Scenario 2o user wants to look for a product from the X category, not
spend more than A, but he needs it delivered within a week
● Scenario 3o user purchased product X and wants to return it
Create dozens of scenarios and think about how your personas would deal with them.
Make a focus group● Considering your scenarios and personas, create a focus
group and run them through the scenarios
● Use a software to track their activity (silverbackapp.com is a good option)
● Maybe also run them through your competitor’s website to see what problems they run into there
● Collect open feedback from them
Improve and repeat with a new focus group.
A/B Test on live site
Tools:● Google Analytics Experiments● Optimizely.com● Convert.com
Better Designs
The basicsThe general things:● alignment
The basicsThe general things:● alignment● spacing
The basicsThe general things:● alignment● spacing● easy to scan
The basicsThe general things:● alignment● spacing● easy to scan● content placement &
hierarchy
The basicsThe general things:● alignment● spacing● easy to scan● content placement &
hierarchy● respect the layout
conventions
Focus on the mobile
Goals for mobile
● have smaller sites● make it readable and clickable● show different content● different focus
Tips for a good catalogClear category structure
● make sure at each level it’s easy to understand which one holds what● show breadcrumbs
Tips for agood catalogGood filters!
Tips for a good search● handle synonyms
o Close synonyms (e.g. “mobile phone” instead of “cell phone”)o Distant synonyms (e.g. “optical drive” instead of “DVD”)o Branded names (e.g. “Wi-Fi” instead of “802.11b”)o Different spellings (e.g. “file cabinet” instead of “filing cabinet”)o Simple plurals (e.g. “screwdrivers” instead of “screwdriver”)o Complex plurals (e.g. “knives” instead of “knife”)o Acronyms (e.g. “D-SLR” instead of “Digital Single Lens Reflex”)
● handle frequent misspellingso Brand names (e.g. “Philips” instead of “Phillips”)o Category names (e.g. “Pilateese” instead of “Pilates”)o Product names (e.g. “FitBeat” instead of “FitBit”)o Product details (e.g. “Mahagony” instead of “mohagany”)o Author or artist names (e.g. “Bill Bur” instead of “Bill Burr”)
Source: 37signals Research Report on Search Engines
Tips for a good search
● mixed specificationso Mixing gender and products (e.g. “women’s sweaters”)o Mixing prices and products (e.g. “$50 mp3 player”)o Mixing details and products (e.g. “red jacket”)o Mixing specials and products (e.g. “Skirts on sale”)o Mixing sizes and products (e.g. “120GB SSD”)
Search must also be:● fast● accurate/relevant (e.g. Searching for “bread knife” should show only bread
knives and no bread ovens or other types of knives)● have order by functionality and preferably filters too● offer something when no results were found
Source: 37signals Research Report on Search Engines
Tips for a good checkout● clarify shipping costs and terms early
on● don’t ask more details than you need● don’t distract the user● allow for coupon code in the checkout
Tips for a good checkoutOur view for a goodcheckout:PRIME CHECKOUT
Tips for good support● provide details on delivery● have both instant and non-instant
supporto 50,36% prefer chat or phoneo 33,92% prefer email or helpdesko 15,72% would rather not use support
● answer most frequent questions inside the site or confirmation page
● make it easy to ask for help
Design Trends
Design TrendsClean, simple, unobtrusive, functional
1/3
Design TrendsClean, simple, unobtrusive, functional
2/3
Design TrendsClean, simple, unobtrusive, functional
3/3
Design TrendsVibrant colors or simple black & white contrast
1/3
Design TrendsVibrant colors or simple black & white contrast
2/3
Design TrendsVibrant colors or simple black & white contrast
3/3
Design TrendsGood typography & storytelling
1/1
Design TrendsBig, impactful images & product video
1/3
Design TrendsBig, impactful images & product video
2/3
Design TrendsBig, impactful images & product video
3/3
Design TrendsProduct focused
1/1
