Zooplus_redesign_project_13_11_2014 1
zooplus AG 
Ι zooplus AG is the leading e-commerce 
player in the European market for pet 
supplies 
Ι It has been founded in 1999 and is active 
in 23 Countries 
Ι zooplus has about one million active 
customers in Europe and € 426.92 million 
revenue in 2013. The range consists of 
more than 8,000 different items 
Zooplus_redesign_project_13_11_2014 2
The Challenge 
Ι zooplus is facing an important renovation phase 
(redesign of the front end + responsive behaviour + 
adoption of a new system for the backend side) 
Ι The goal is to maintain the same level of revenues 
and conversions growth we have reached during the 
previous years 
Zooplus_redesign_project_13_11_2014 3
Zooplus_redesign_project_13_11_2014 
4 
Ι “It is an old maxim of mine that when you have 
excluded the impossible, whatever remains, 
however improbable, must be the truth.” 
Sherlock is always right #1:
Our Approach: Evolution instead of Revolution 
Ι Revolutions are often messy and 
unpredictable 
Ι Using an evolution approach means that 
after you have identified your most 
important pages and features you have 
to test them 
Ι You should test new layouts, design and 
content with controlled A/B tests, 
Usability tests and Heat maps Analysis 
Ι This will minimize the risk of a 
conversion drop 
Zooplus_redesign_project_13_11_2014 5
Failed Revolutionary approach: Marks and 
Spencer 
Zooplus_redesign_project_13_11_2014 6
Successful Evolutionary approach: amazon 
Zooplus_redesign_project_13_11_2014 7
Ι Standard approaches and best 
practices can be a good starting point 
for collecting new testing ideas but you 
mustn’t follow the flock brainlessly 
Ι The only best practice really worth 
biting into is the practice of rigorous 
conversion testing 
Never follow the flock 
Zooplus_redesign_project_13_11_2014 8
Failure Example: Infinite Scrolling on etsy.com 
and yoox.it 
Ι The users felt lost and they couldn’t filter between relevant 
and not relevant data anymore, they were drowning in 
information 
Ι It isn’t a good fit for goal oriented task 
Zooplus_redesign_project_13_11_2014 9
Example: Large images are forcing the users to 
scroll more 
Zooplus_redesign_project_13_11_2014 10
Don’t be fool by a pretty face 
Ι Don’t be fooled by beauty alone 
Ι You should resolutely focus on 
business goals, usability and results 
Ι Nice new design treatments need to 
prove their value in driving usability 
improvements and conversions 
Zooplus_redesign_project_13_11_2014 11
Example: Uber 
Zooplus_redesign_project_13_11_2014 12
Example:gomacro.com 
Ι The site has incredible attention 
to detail. The Interactions are 
intuitive and the navigation is 
easy to understand, but the 
great design and polished 
animation really demonstrate the 
vibe of the brand. 
Ι Michael FWA, Judge 
Ι Extremely well done. Solid 
Usability with fresh approach. 
This is great work. 
Ι Scott, FWA Judge 
Zooplus_redesign_project_13_11_2014 13
Ι It is very important to implement the 
changes incrementally, especially if 
the adoption of a new CMS is involved 
too 
Ι This help you keep track of how 
content changes affect your 
conversion rate and content rankings 
avoiding your website to become 
invisible to search engines 
Invisible Man 
Zooplus_redesign_project_13_11_2014 14
How the Evolutionary approach works? 
Ι Content Audit and Inventory 
Ι Definition of Personas 
Ι Analytics Review 
Ι Systematic use of A/B testing and Multivariate 
testing through out the website + Heat maps 
Analysis 
Ι Reiteration of Usability tests 
Ι Avoid Change Aversion 
Zooplus_redesign_project_13_11_2014 15
Content Inventory and Audit 
Ι It is important to identify what are the 
valuable content/pages 
Ι You should take into consideration important 
KPIs like: page rank, visits from search 
engines, conversion rate, bounce rate, 
internal search keywords= 
Zooplus_redesign_project_13_11_2014 16
Personas Analysis 
Ι It is important to have an holistic view on current and 
potential customer: this is possible through the use of 
personas 
Ι These are fictional characters created to represent the 
different user types that might use a site, brand or product in 
similar way 
Ι They help in considering the goals, desires and limitations 
of users in order to help to guide decisions about service, 
products, features, interactions and visual design of a website 
Ι A good base to build the personas are: customer 
segmentation Analysis, Analytics Tools, Customer Survey 
Zooplus_redesign_project_13_11_2014 17
Personas example: Brands Loyal 
Background: 
Ι Name: Heike Klum 
Ι Age: 41 
Ι Job: Lawyer and Mother 
About: 
Heike is a very busy woman: a lawyer and a mother of a 5 years old little guy. 
She is also the owner of “Star” an adult Maine Coon which she and her 
husband adopted, before moving in their new house 5 years ago. 
Since Star was a kitten she has always purchased Royal Canin products 
because they were suggested by her friends Maria and her Vet. 
In order to save some of her very limited time she likes to buy food for her 
cat online by zooplus. 
By zooplus she usually buys also Bio Kats Cat litter. Recently she subscribes 
to the Savings plan which is helping her to save some money. 
Favorite Brands: 
Ι Royal Canin 10 kg 
Ι Royal Canin 2-4 kg 
Ι Royal Canin Kitten 
Ι Gimpet and Beaphar Snacks 
Ι Special food: Senior Products 
Ι ProPlan 
Goals: 
Ι Buy Royal Canin products 
Ι Buy Cat litter 
Ι Buy from a retailer she can trust 
Ι Save some money 
Zooplus_redesign_project_13_11_2014 18
Ι Data! Data! Data!” he cried impatiently. “I can’t 
make bricks without clay.” 
Sherlock is always right #2: 
Zooplus_redesign_project_13_11_2014 19
Analytics for Site Redesign 
Ι It is necessary to evaluate analytics reporting to 
understand “what” people do on the site 
Ι How much time do users invest in the site? 
Ι How many visitors have never been to the site 
before? 
Ι How many people visit 1 page and leave (aka Bounce 
rate)? 
Ι Where do users spend the most time? 
Ι Where are the top pages people enter the site on? 
Ι What are the pages where most people leave? 
Ι How do segments of users move through the site? 
Ι = 
Zooplus_redesign_project_13_11_2014 20
Useful Google Analytics Reports for UX 
Ι Top Reports for UX 
1. Audience > Technology > Browser & OS 
2. Audience > Mobile > Devices 
3. Acquisition > Channels 
4. Acquisition > Social > Network Refferrals 
5. Behaviour > Site Content > All Pages 
6. Behaviour > Site Search > Search Terms 
7. Behaviour > Events > Top Events 
8. Behaviour > In Page Analytics 
9. Conversions > Goals > Overview 
10.Conversions > Multi-channel funnels > Path length 
Zooplus_redesign_project_13_11_2014 21
Ι “Never, ever, ever, act on assumptions. Search 
out the facts and act on those.” 
Sherlock is always right #3 
Zooplus_redesign_project_13_11_2014 22
A/B testing and Multivariate testing 
Ι A/B Split Testing 
Ι In A/B testing (also known as split testing), you vary only 
one element on the page at a time. 
This element may be any part of the Web page critical 
to conversions (e.g. button colour, size, ad copy headline). 
Ι Multivariate Testing 
Ι In multivariate testing, you identify different 
sections/factors on a page which effect conversion rate. 
Different variations of those factors are created, which 
are then combined to give rise to multiple different 
versions of the website. 
Zooplus_redesign_project_13_11_2014 23
Ι A heat map is a two-dimensional representation of 
data in which values are represented by colours. 
A simple heat map provides an immediate visual 
summary of information. 
Ι Not only will it show you exactly where your visitors 
are clicking, it can also help you find the best 
position for a form fields or button, see which 
banners or sales ads are clicked more often, or 
even provide your managers or team with a visual 
way to understand site usage patterns. 
Ι You can use this information to improve your 
website by determining which design elements are 
performing best and which ones aren’t getting 
noticed. 
Ι A good and cheap tool is Crazy Egg: 
https://www.crazyegg.com 
Heat maps Analysis 
Zooplus_redesign_project_13_11_2014 24
Ι “We approached the case, you remember, 
with an absolutely blank mind, which is always 
an advantage. We had formed no theories. We 
were simply there to observe.” 
Sherlock is alway right #4 
Zooplus_redesign_project_13_11_2014 25
Usability testing 
Zooplus_redesign_project_13_11_2014 26
Benefits of Usability Testing 
Ι Learn if participants are able to 
complete specified tasks successfully 
Ι Identify how long it takes to complete 
specified tasks 
Ι Find out how satisfied participants are 
with your Web site or other product 
Ι Identify changes required to improve 
user performance and satisfaction 
Ι And analyse the performance to see if it 
meets your usability objectives 
Zooplus_redesign_project_13_11_2014 27
When to work on Usability 
Ι Before starting the new design, test the old design 
to identify the good parts that you should keep or 
emphasise, and the bad parts that give users trouble. 
Ι Test your competitors' designs to get cheap data 
on a range of alternative interfaces that have similar 
features to your own. 
Ι Make a mockup of the first design idea and test 
it. 
Ι Inspect the design relative to established usability 
guidelines whether from your own earlier studies or 
published research. 
Ι Once you decide on and implement the final 
design, test it again. Subtle usability problems 
always creep in during implementation. 
Zooplus_redesign_project_13_11_2014 28
How to avoid (or mitigate) change aversion 
Ι Warn users about major changes. Unexpected 
changes catch people off-guard and can provoke a 
defensive response. 
Ι Tell users how you’re addressing key issues they’ve 
raised. This assures users that their feedback is critical in 
prioritizing improvements. 
Ι Plan a progressive introduction of the new design 
elements and features, don’t do it in one shot this will 
make changes less stressful for users 
Ι Start this process at least one year before the launch. 
This will help your customers to get accustomed to the 
changes and mitigate aversion. 
Zooplus_redesign_project_13_11_2014 29
Thank you :) 
Ι Alessandra Petromilli 
Ι Twitter: @aleanan 
Ι Instagram: @selkieap 
Zooplus_redesign_project_13_11_2014 30
Zooplus_redesign_project_13_11_2014 31
Credits 
Pictures 
• Evolution by PaSt1978 
• Sheeps by vincentfavre 
• The invisible man by DanielGrzeszkiewicz 
• Notes by roomzeiss 
• Usability test picture by Dr. Jenny Cham blog 
• Change Aversion sketched by Hendrik Müller 
• Sherlock Holmes. by lucky-your-with-amy 
Content 
Nielsen Norman Group: http://www.nngroup.com 
Zooplus_redesign_project_13_11_2014 32

WUD Rome 2014 - Managing a Responsive Design Redesign Project (IT) - Alessandra Petromilli

  • 1.
  • 2.
    zooplus AG Ιzooplus AG is the leading e-commerce player in the European market for pet supplies Ι It has been founded in 1999 and is active in 23 Countries Ι zooplus has about one million active customers in Europe and € 426.92 million revenue in 2013. The range consists of more than 8,000 different items Zooplus_redesign_project_13_11_2014 2
  • 3.
    The Challenge Ιzooplus is facing an important renovation phase (redesign of the front end + responsive behaviour + adoption of a new system for the backend side) Ι The goal is to maintain the same level of revenues and conversions growth we have reached during the previous years Zooplus_redesign_project_13_11_2014 3
  • 4.
    Zooplus_redesign_project_13_11_2014 4 Ι“It is an old maxim of mine that when you have excluded the impossible, whatever remains, however improbable, must be the truth.” Sherlock is always right #1:
  • 5.
    Our Approach: Evolutioninstead of Revolution Ι Revolutions are often messy and unpredictable Ι Using an evolution approach means that after you have identified your most important pages and features you have to test them Ι You should test new layouts, design and content with controlled A/B tests, Usability tests and Heat maps Analysis Ι This will minimize the risk of a conversion drop Zooplus_redesign_project_13_11_2014 5
  • 6.
    Failed Revolutionary approach:Marks and Spencer Zooplus_redesign_project_13_11_2014 6
  • 7.
    Successful Evolutionary approach:amazon Zooplus_redesign_project_13_11_2014 7
  • 8.
    Ι Standard approachesand best practices can be a good starting point for collecting new testing ideas but you mustn’t follow the flock brainlessly Ι The only best practice really worth biting into is the practice of rigorous conversion testing Never follow the flock Zooplus_redesign_project_13_11_2014 8
  • 9.
    Failure Example: InfiniteScrolling on etsy.com and yoox.it Ι The users felt lost and they couldn’t filter between relevant and not relevant data anymore, they were drowning in information Ι It isn’t a good fit for goal oriented task Zooplus_redesign_project_13_11_2014 9
  • 10.
    Example: Large imagesare forcing the users to scroll more Zooplus_redesign_project_13_11_2014 10
  • 11.
    Don’t be foolby a pretty face Ι Don’t be fooled by beauty alone Ι You should resolutely focus on business goals, usability and results Ι Nice new design treatments need to prove their value in driving usability improvements and conversions Zooplus_redesign_project_13_11_2014 11
  • 12.
  • 13.
    Example:gomacro.com Ι Thesite has incredible attention to detail. The Interactions are intuitive and the navigation is easy to understand, but the great design and polished animation really demonstrate the vibe of the brand. Ι Michael FWA, Judge Ι Extremely well done. Solid Usability with fresh approach. This is great work. Ι Scott, FWA Judge Zooplus_redesign_project_13_11_2014 13
  • 14.
    Ι It isvery important to implement the changes incrementally, especially if the adoption of a new CMS is involved too Ι This help you keep track of how content changes affect your conversion rate and content rankings avoiding your website to become invisible to search engines Invisible Man Zooplus_redesign_project_13_11_2014 14
  • 15.
    How the Evolutionaryapproach works? Ι Content Audit and Inventory Ι Definition of Personas Ι Analytics Review Ι Systematic use of A/B testing and Multivariate testing through out the website + Heat maps Analysis Ι Reiteration of Usability tests Ι Avoid Change Aversion Zooplus_redesign_project_13_11_2014 15
  • 16.
    Content Inventory andAudit Ι It is important to identify what are the valuable content/pages Ι You should take into consideration important KPIs like: page rank, visits from search engines, conversion rate, bounce rate, internal search keywords= Zooplus_redesign_project_13_11_2014 16
  • 17.
    Personas Analysis ΙIt is important to have an holistic view on current and potential customer: this is possible through the use of personas Ι These are fictional characters created to represent the different user types that might use a site, brand or product in similar way Ι They help in considering the goals, desires and limitations of users in order to help to guide decisions about service, products, features, interactions and visual design of a website Ι A good base to build the personas are: customer segmentation Analysis, Analytics Tools, Customer Survey Zooplus_redesign_project_13_11_2014 17
  • 18.
    Personas example: BrandsLoyal Background: Ι Name: Heike Klum Ι Age: 41 Ι Job: Lawyer and Mother About: Heike is a very busy woman: a lawyer and a mother of a 5 years old little guy. She is also the owner of “Star” an adult Maine Coon which she and her husband adopted, before moving in their new house 5 years ago. Since Star was a kitten she has always purchased Royal Canin products because they were suggested by her friends Maria and her Vet. In order to save some of her very limited time she likes to buy food for her cat online by zooplus. By zooplus she usually buys also Bio Kats Cat litter. Recently she subscribes to the Savings plan which is helping her to save some money. Favorite Brands: Ι Royal Canin 10 kg Ι Royal Canin 2-4 kg Ι Royal Canin Kitten Ι Gimpet and Beaphar Snacks Ι Special food: Senior Products Ι ProPlan Goals: Ι Buy Royal Canin products Ι Buy Cat litter Ι Buy from a retailer she can trust Ι Save some money Zooplus_redesign_project_13_11_2014 18
  • 19.
    Ι Data! Data!Data!” he cried impatiently. “I can’t make bricks without clay.” Sherlock is always right #2: Zooplus_redesign_project_13_11_2014 19
  • 20.
    Analytics for SiteRedesign Ι It is necessary to evaluate analytics reporting to understand “what” people do on the site Ι How much time do users invest in the site? Ι How many visitors have never been to the site before? Ι How many people visit 1 page and leave (aka Bounce rate)? Ι Where do users spend the most time? Ι Where are the top pages people enter the site on? Ι What are the pages where most people leave? Ι How do segments of users move through the site? Ι = Zooplus_redesign_project_13_11_2014 20
  • 21.
    Useful Google AnalyticsReports for UX Ι Top Reports for UX 1. Audience > Technology > Browser & OS 2. Audience > Mobile > Devices 3. Acquisition > Channels 4. Acquisition > Social > Network Refferrals 5. Behaviour > Site Content > All Pages 6. Behaviour > Site Search > Search Terms 7. Behaviour > Events > Top Events 8. Behaviour > In Page Analytics 9. Conversions > Goals > Overview 10.Conversions > Multi-channel funnels > Path length Zooplus_redesign_project_13_11_2014 21
  • 22.
    Ι “Never, ever,ever, act on assumptions. Search out the facts and act on those.” Sherlock is always right #3 Zooplus_redesign_project_13_11_2014 22
  • 23.
    A/B testing andMultivariate testing Ι A/B Split Testing Ι In A/B testing (also known as split testing), you vary only one element on the page at a time. This element may be any part of the Web page critical to conversions (e.g. button colour, size, ad copy headline). Ι Multivariate Testing Ι In multivariate testing, you identify different sections/factors on a page which effect conversion rate. Different variations of those factors are created, which are then combined to give rise to multiple different versions of the website. Zooplus_redesign_project_13_11_2014 23
  • 24.
    Ι A heatmap is a two-dimensional representation of data in which values are represented by colours. A simple heat map provides an immediate visual summary of information. Ι Not only will it show you exactly where your visitors are clicking, it can also help you find the best position for a form fields or button, see which banners or sales ads are clicked more often, or even provide your managers or team with a visual way to understand site usage patterns. Ι You can use this information to improve your website by determining which design elements are performing best and which ones aren’t getting noticed. Ι A good and cheap tool is Crazy Egg: https://www.crazyegg.com Heat maps Analysis Zooplus_redesign_project_13_11_2014 24
  • 25.
    Ι “We approachedthe case, you remember, with an absolutely blank mind, which is always an advantage. We had formed no theories. We were simply there to observe.” Sherlock is alway right #4 Zooplus_redesign_project_13_11_2014 25
  • 26.
  • 27.
    Benefits of UsabilityTesting Ι Learn if participants are able to complete specified tasks successfully Ι Identify how long it takes to complete specified tasks Ι Find out how satisfied participants are with your Web site or other product Ι Identify changes required to improve user performance and satisfaction Ι And analyse the performance to see if it meets your usability objectives Zooplus_redesign_project_13_11_2014 27
  • 28.
    When to workon Usability Ι Before starting the new design, test the old design to identify the good parts that you should keep or emphasise, and the bad parts that give users trouble. Ι Test your competitors' designs to get cheap data on a range of alternative interfaces that have similar features to your own. Ι Make a mockup of the first design idea and test it. Ι Inspect the design relative to established usability guidelines whether from your own earlier studies or published research. Ι Once you decide on and implement the final design, test it again. Subtle usability problems always creep in during implementation. Zooplus_redesign_project_13_11_2014 28
  • 29.
    How to avoid(or mitigate) change aversion Ι Warn users about major changes. Unexpected changes catch people off-guard and can provoke a defensive response. Ι Tell users how you’re addressing key issues they’ve raised. This assures users that their feedback is critical in prioritizing improvements. Ι Plan a progressive introduction of the new design elements and features, don’t do it in one shot this will make changes less stressful for users Ι Start this process at least one year before the launch. This will help your customers to get accustomed to the changes and mitigate aversion. Zooplus_redesign_project_13_11_2014 29
  • 30.
    Thank you :) Ι Alessandra Petromilli Ι Twitter: @aleanan Ι Instagram: @selkieap Zooplus_redesign_project_13_11_2014 30
  • 31.
  • 32.
    Credits Pictures •Evolution by PaSt1978 • Sheeps by vincentfavre • The invisible man by DanielGrzeszkiewicz • Notes by roomzeiss • Usability test picture by Dr. Jenny Cham blog • Change Aversion sketched by Hendrik Müller • Sherlock Holmes. by lucky-your-with-amy Content Nielsen Norman Group: http://www.nngroup.com Zooplus_redesign_project_13_11_2014 32