際際滷

際際滷Share a Scribd company logo
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
We all love
nice 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 its not important)
 about their most used store:
o 93,64% were happy with its design
o 93,82% were happy with its usability
o 76,68% were happy with its copywriting
o 92,23% said they save time when shopping on it
 89,22% want a site thats 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 dont know has a nice design theyre
more likely to purchase from it
 increase conversion
o 64.31% of users previously abandoned orders on frustrating websites
o 67.86% stated that they havent returned to that site
 increase loyalty
o 67,84% of users say they enjoy shopping on a store if it has a good design
o 77.74% of users say they never recommended a website they dont 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 the
Happy-Flow
What 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 husbands birthday which
is in 3 days;
 Grandmother with little experience wants to buy an
iPod Touch for her grandsons 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
theyre 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 didnt, so he wants precise
confirmation that hell receive it today since today is
the anniversary;
But how does reality look like?
No focus on the post-sale
After 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
Personas Create personas for your users
Persona 1:
 lives in big city, central area
 works in advertising and earns well
 is avid runner
 is quite tech savvy
Personas Create personas for your users
Persona 2:
 lives in the suburbs
 is a history teacher and earns ok
 non technical
Personas Create personas for your users
Persona 3:
 in college, lives in campus and works as freelance writer
 medium technical skills
 huge movie fan
Scenarios
Create scenarios:
 Scenario 1
o 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 2
o 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 3
o 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 competitors 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 basics
The general things:
 alignment
The basics
The general things:

 spacing
The basics
The general things:


 easy to scan
The basics
The general things:



 content placement & hierarchy
The basics
The general things:




 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 catalog
Clear category structure
 make sure at each level its easy to understand which one holds what
 show breadcrumbs
Tips for a
good catalog
Good filters!
Tips for a good search
 handle synonyms
o Close synonyms
o Distant synonyms
o Branded names
o Different spellings
o Simple plurals
o Complex plurals
o Acronyms
 handle frequent misspellings
o Brand names
o Category names
o Product names
o Product details
o Author or artist names
Source: 37signals Research Report on Search Engines
Tips for a good search
 mixed specifications
o Mixing gender and products
o Mixing prices and products
o Mixing details and products
o Mixing specials and products
o Mixing sizes and products
Search must also be:
 fast
 accurate/relevant
 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
 dont ask more details than you need
 dont distract the user
 allow for coupon code in the checkout
Tips for a good checkout
Our view
for a good
checkout:
PRIME CHECKOUT
Design & usability for increased conversion (MeetMagento Germany 2015)
Design & usability for increased conversion (MeetMagento Germany 2015)
Design & usability for increased conversion (MeetMagento Germany 2015)
Tips for good support
 provide details on delivery
 have both instant and non-instant support
o 50,36% prefer chat or phone
o 33,92% prefer email or helpdesk
o 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 Trends
Clean, simple, unobtrusive, functional
Design Trends
Clean, simple, unobtrusive, functional
Design Trends
Clean, simple, unobtrusive, functional
Design Trends
Vibrant colors or simple black & white contrast
Design Trends
Vibrant colors or simple black & white contrast
Design Trends
Vibrant colors or simple black & white contrast
Design Trends
Good typography & storytelling
Design Trends
Big, impactful images & product video
Design Trends
Big, impactful images & product video
Design Trends
Big, impactful images & product video
Design Trends
Product focused
Thank you!
vlad.stanescu@mindmagnetsoftware.com
@vladstanescu
www.mindmagnetsoftware.com

More Related Content

Design & usability for increased conversion (MeetMagento Germany 2015)

  • 1. Design & Usability for increased conversion Vlad Stanescu
  • 2. 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
  • 4. 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.
  • 5. What do users want? 60,57% of users said design is very important (only 13,19% said its not important) about their most used store: o 93,64% were happy with its design o 93,82% were happy with its usability o 76,68% were happy with its copywriting o 92,23% said they save time when shopping on it 89,22% want a site thats easy to use
  • 6. 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
  • 7. Why have a good design? increase credibility o 76,32% of users state that if a shop they dont know has a nice design theyre more likely to purchase from it increase conversion o 64.31% of users previously abandoned orders on frustrating websites o 67.86% stated that they havent returned to that site increase loyalty o 67,84% of users say they enjoy shopping on a store if it has a good design o 77.74% of users say they never recommended a website they dont like
  • 9. 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
  • 10. Only the Happy-Flow What 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.
  • 11. 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 husbands birthday which is in 3 days; Grandmother with little experience wants to buy an iPod Touch for her grandsons 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 theyre 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 didnt, so he wants precise confirmation that hell receive it today since today is the anniversary; But how does reality look like?
  • 12. No focus on the post-sale After 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
  • 14. Personas Create personas for your users Persona 1: lives in big city, central area works in advertising and earns well is avid runner is quite tech savvy
  • 15. Personas Create personas for your users Persona 2: lives in the suburbs is a history teacher and earns ok non technical
  • 16. Personas Create personas for your users Persona 3: in college, lives in campus and works as freelance writer medium technical skills huge movie fan
  • 17. Scenarios Create scenarios: Scenario 1 o 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 2 o 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 3 o user purchased product X and wants to return it Create dozens of scenarios and think about how your personas would deal with them.
  • 18. 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 competitors website to see what problems they run into there Collect open feedback from them Improve and repeat with a new focus group.
  • 19. A/B Test on live site Tools: Google Analytics Experiments Optimizely.com Convert.com
  • 21. The basics The general things: alignment
  • 22. The basics The general things: spacing
  • 23. The basics The general things: easy to scan
  • 24. The basics The general things: content placement & hierarchy
  • 25. The basics The general things: respect the layout conventions
  • 26. Focus on the mobile Goals for mobile have smaller sites make it readable and clickable show different content different focus
  • 27. Tips for a good catalog Clear category structure make sure at each level its easy to understand which one holds what show breadcrumbs
  • 28. Tips for a good catalog Good filters!
  • 29. Tips for a good search handle synonyms o Close synonyms o Distant synonyms o Branded names o Different spellings o Simple plurals o Complex plurals o Acronyms handle frequent misspellings o Brand names o Category names o Product names o Product details o Author or artist names Source: 37signals Research Report on Search Engines
  • 30. Tips for a good search mixed specifications o Mixing gender and products o Mixing prices and products o Mixing details and products o Mixing specials and products o Mixing sizes and products Search must also be: fast accurate/relevant have order by functionality and preferably filters too offer something when no results were found Source: 37signals Research Report on Search Engines
  • 31. Tips for a good checkout clarify shipping costs and terms early on dont ask more details than you need dont distract the user allow for coupon code in the checkout
  • 32. Tips for a good checkout Our view for a good checkout: PRIME CHECKOUT
  • 36. Tips for good support provide details on delivery have both instant and non-instant support o 50,36% prefer chat or phone o 33,92% prefer email or helpdesk o 15,72% would rather not use support answer most frequent questions inside the site or confirmation page make it easy to ask for help
  • 38. Design Trends Clean, simple, unobtrusive, functional
  • 39. Design Trends Clean, simple, unobtrusive, functional
  • 40. Design Trends Clean, simple, unobtrusive, functional
  • 41. Design Trends Vibrant colors or simple black & white contrast
  • 42. Design Trends Vibrant colors or simple black & white contrast
  • 43. Design Trends Vibrant colors or simple black & white contrast
  • 45. Design Trends Big, impactful images & product video
  • 46. Design Trends Big, impactful images & product video
  • 47. Design Trends Big, impactful images & product video