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

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


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_20144

Ι “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:


Ι 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

Our Approach: Evolution instead of Revolution


Failed Revolutionary approach: Marks and

Spencer


Successful Evolutionary approach: amazon


Ι 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


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


Example: Large images are forcing the users to

scroll more


Ι 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

Don’t be fool by a pretty face


Example: Uber


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


Ι 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


Ι 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

How the Evolutionary approach works?


Ι 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=

Content Inventory and Audit


Ι 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

Personas Analysis


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


Ι Data! Data! Data!” he cried impatiently. “I can’t

make bricks without clay.”

Sherlock is always right #2:


Ι 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?

Ι =

Analytics for Site Redesign


Ι 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

Useful Google Analytics Reports for UX


Ι “Never, ever, ever, act on assumptions. Search

out the facts and act on those.”

Sherlock is always right #3


Ι 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.

A/B testing and Multivariate testing


Ι 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


Ι “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


Usability testing


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


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.


Ι 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.

How to avoid (or mitigate) change aversion


Thank you :)

Ι Alessandra Petromilli

Ι Twitter: @aleanan

Ι Instagram: @selkieap


Credits

• 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

Pictures

Content

Nielsen Norman Group: http://www.nngroup.com

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

Design

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