Zooplus

E-commerce platform

Helping a leading online business make a huge step forward.

Zooplus is the European market leader in pet supplies and related services. With 6.8M active customers in 2018 and over 8.000 products in stock and ready to ship, the company aims to make pet owner's lives easier with simple online ordering and convenient home delivery.

YEAR

2015 — 2019

COMPANY

Zooplus AG

ROLE

Design Lead
UI/UX/Product Design

zooplus-web-001-2

About the project

During 3 years, I had the opportunity to redesign Zooplus across all digital channels, lead the transition into a full-responsive modular framework, and subsequently use the newly created system to rebuild the subsidiary brand Bitiba, and lauch a new grocery shop under the name Zoobee.

I joined Zooplus in December 2015 as the very first UI/UX designer ever since its founding 16 years earlier, in 1999. The company had been struggling with the development of their platform for some time, the process had become quite unmanageable, so the management decided to bring in a design expert to help.

A few months later, a second designer joined me. Together, as the newly constituted design team, we worked on the massive undertaking of redesigning and rebuilding the product from its base.

Check out the results of this 3-year adventure.

Objectives

Modernize the product across all platforms without negatively impacting metrics.

Support sales growth by increasing conversion and retention rates — especially on mobile.

Integration and establishment of design processes and build a design team.

zooplus-gravity-responsive

Situation

Design basics

Overall, the design language was inconsistent and different patterns and flows were used across the site to tackle similar needs. No brand guidelines existed and the css styles were not centralized. 

Also, a few attempts to restyle the website had been undertaken over the years, but they were never brought to an end, and so neither the UI nor the UX were homogeneous.

As Zooplus had never had an in-house design expert before me, there were no psd or sketch files in their servers — at the very beginning I had to work with screenshots of the actual website.


Platform

Zooplus had no CMS in place. Instead, various custom tools allowed the injection of content and code in predefined areas of each page. This discretionary customization of pages made it impossible to revamp Zooplus by simply redesigning page templates, components and modules on a one-to-one basis. The lack of a separation between code and content was one of the biggest complications for the transformation we wanted to carry out. Also, it was hard to predict what a code release would affect and to what extent.

We were dealing with a total amount of 88 dedicated websites (all markets, in all languages), which were all manged separately. Moreover, the iOs and Android apps (50 in total) had embedded webviews of the mobile websites, meaning that any change to the m. codebase would also affect them.

Design culture and process

Zooplus hadn't had a design professional for 16 years, and so it wasn't very surprising that design wasn't understood and valued as a process-driven discipline — the common belief was, that design just was the last step of the process, only necessary to "make things pretty" before they went into development.

Handling design issues had not been easy in the past: not having an in-house design expert was definitely one of the reasons, but the lack of a method to take informed decisions and the amount of parties involved in every deliberation made the process a very complex matter.

Concerns

There was a latent concern that any change could affect the conversion and retention rates, as they were surprisingly good on desktop — not so much on tablet and mobile.

On the other hand, shop managers had the platform and the custom tools under control. They knew their shops and they had learned to customize them at their will, and many of them were reluctant to any transformation that could break that hard-earned control.

zooplus-01

Zooplus before the redesign

Process

Note: The following is a simplified summary of 3 years of work.

Understanding

Whether you want to tackle a new design solution or you want to redefine a process, it’s essential to understand first what you are going to act on. And so, I started by gathering information about the business, about the users and about the existing "design" process.

I talked to teammates who’d worked at Zooplus for many years, to the management, to developers, and of course, I checked our analytics and our user feedback.

USER PROFILE

The typical customer of Zooplus is female, around 40 years old, lives in a city and spends 250-290€ annually on cat/dog food and pet accessories, with an average basket size of 55€.

Auditing and redesigning the UI 

Prior to my hiring, ideas were depicted with screenshots of the website, meaning that proper design files were nonexistent. And so, before being able to tackle any usability issues, I had to build a design system from the ground up.

I started auditing the design language, identifying templates, components and patterns across the shop, and then classifying them into different groups: colors, buttons, type, icons, form fields, page types, modules... Later, I focused on merging similar design components, and I redesigned a completely new and consistent UI — the aim was to make Zooplus look fresher and more modern while maintaining the brand recognition.

We iterated on various designs (especially on major modules, e.g. the header) and mocked layouts to make sure the components worked together in various combinations. Following the current standards, all the new design components were converted into a design system in Sketch. We used shared libraries at first, later we switched to Abstract to version, manage and collaborate on our sketch files.

zooplus-ui

fresh, new UI components

Integrating "design"

Defining where the new design team was positioned in the company's organigram was important, not only to determine the communication flows and understand who the main stakeholders were, but also to outline the design processes.

Due to the characteristics of our undertaking, we defined 2 phases: in the first phase we placed the design team close to the development teams (the technical implications of the full responsive redesign were determinant), and in the second phase we moved closer to the business, in order to foster an earlier involvement in discussions.

We defined our internal processes and outlined different workflows for different types of tasks. Later, we created a design backlog, alongside with a Kanban board in Jira that contained said workflows. We had become an autonomous design team, but we were integrated in the development teams, too. We instaurated a "UI and usability review" stage in the development sprints and we gave support during the full responsive transition.

METHODOLOGY

Iterative approach: do it, then make it better.

Redesigning the platform

Since we already had our new components, we were ready to start with the major redesign. We defined different products/product groups and divided the website into:

We were only 2 designers, so we decided to go for the two most important parts first: catalogue and checkout.

We designed the new header and footer, and in close collaboration with our engineers, we figured out a way to make the concept work full responsive.

Considering that the platform was a huge monolith with lots of dependencies, we agreed with the engineers that they would develop the catalogue and the checkout separately — we would then merge both parts later. Following this idea, the catalogue was developed based on the codebase that was available for the www. domain, the checkout used the m. domain.

zooplus-before-after-01

product detail page before (dedicated sites) and after the redesign (full responsive)

Catalogue

In order to cause the littlest impact, we decided to begin the work in the deeper levels. We redesigned the product detail page and its subpages first (reviews, customer pictures, stock reminder), and later we made our way through the product lists, the category overviews and the main product groups; the homepage was the very last page in our catalogue roadmap.

catalogue redesign iterations (product list page and product detail page)

the new catalogue — a clear and structured shopping experience

Checkout

The checkout wasn't funneling the customers. There were many CTAs on every step of the process that invited the user to leave without concluding the purchase, and the flow from cart overview to payment was not very intuitive.

For this matter, we organized a user lab and invited Zooplus users to show us how they went through the existing checkout process. Subsequently, we asked them to test a first version of the redesigned process and requested their feedback, which was then used in a second design iteration.

the new checkout process — a funnel with no distractions

User account

The user account required a special care, as it was one of the areas where returning customers were engaging the most with the platform. We designed a new responsive menu and arranged the navigation items in groups; by doing so, we achieved a clearer navigation structure, especially on mobile.

All in all, the account area was rebuilt from the ground up. We improved the UX by getting rid of redundant sections and replacing some of the old modules with new, understandable ones (e.g. parcel tracking, special discounts module, loyalty program...) and developed the account area by adding new features (e.g. rate your order, refer a friend program...)

the new user account — designed to engage returning customers

FAQ & Contact

Zooplus had no FAQ section. Instead, users were referred to a long, cluttered and very confusing "help" page or encouraged to contact customer care via the contact form below or making a call. The cost of the external call center had been rising, so we decided to tackle this matter with a new design solution.

We designed a new page that was divided in 3 sections: the FAQs (based on data from the calls), a contact form (in case the customer had an issue that was not answered in the FAQs), and as the last option, quite hidden at the bottom of the page, the phone details.  

Additionally, we removed the phone number from the header and replaced it with a link to this new page. With this solution, the number of calls was reduced to a minimum, and hence the cost of the call center. Customers had now a way to find their answers — or contact Zooplus if needed.

zooplus-before-faq

before the redesign, customers only had this joyless page at their disposal

the new checkout process — a funnel with no distractions

FEATURED DESIGN PROCESS

Search

Around 80% of the customers ended up using the search to find the products they came looking for — unfortunately, the search pages weren't optimized nor were they responsive, and so we redesigned them and improved its UX along the way.

Amongst the first concepts I designed at Zooplus was one that considered the use of filters across the whole shop (e.g. to filter product variants in the shelves). This initial concept was abandoned, but it became the foundation for the redesign of the search.

Check out this featured design process!

zooplus-search-oldstate-1

the search pages before the redesign

the new search — because filtering products can be fun

Key results & impact

711M € → 1.342M €

in Sales

0 → 4

Design team members

Product

Not only did the new full responsive platform provide a modern and seamless shopping experience across all devices, it also transformed Zooplus and its subsidiary brands into better, user-friendlier places to shop. The company's brands now have a fresh and modern UI, a consistent, reusable and scalable design system in place, and an intuitive state-of-the-art UX across all devices.

This transformation set the base for further feature development and conversion rate optimization, and subsequently for the future growth of Zooplus as a reference in the european e-commerce: Zooplus aims a sales target of 2 billion € in 2020.

Business growth

Zooplus achieved a double-digit growth in all 30 regional markets, year-on-year. Albeit these numbers are obviously influenced by more factors than just the shop platform itself (e.g. marketing campaigns, price margins, stock market, etc.), I'm convinced that the user-centered approach and the redesign of the UI and the UX across all channels have contributed heavily to these results.

Sales

  • 2015
  • 711M €
  • 2016
  • 909M €
  • +28%
  • 2017
  • 1.111M €
  • +22%
  • 2018
  • 1.342M €
  • +21%

Sales retention rate

  • 2015
  • 94%
  • 2016
  • 92%
  • -2%
  • 2017
  • 93%
  • +1%
  • 2018
  • 95%
  • +2%

New customer acquisitions

  • 2015
  • +16%
  • 2016
  • +26%
  • 2017
  • +38%
  • 2018
  • +21%
  • (still 722K)

Average bounce rate

  • Q4 2015
  • ≈ 45%

when I joined Zooplus

  • Q4 2018
  • 31%

just before I left Zooplus

Mobile traffic

Mobile share of orders has rised to >30% and is growing steadily. Mobile will probably be the dominant channel in a near future.

Design team & design culture

3 years after joining Zooplus as the first UI/UX designer ever, we had a team of 3 design experts working from Munich and Madrid — before I left the company, we hired an experienced user researcher as the fourth team member and there were plans to continue scaling the team.

In this time, the perception of "design" has changed at Zooplus. There is the awareness now of how a user-centric approach can be beneficial for the company, and there is also a better understanding of design as part of the strategy to help business fulfill its goals.

Learnings

I'm thankful for having met so many great and talented people (friends), and I'm happy of having been part of Zooplus in such important and exciting times of growth and change for the company. I take pride in having contributed to the success of Zooplus to the best of my abilities.

I learned a lot about the design process, gained valuable leadership experience and learned to work efficiently with remote teams. I discovererd that things aren't always as easy as they seem, and that the biggest difficulty in such projects lies not solely in the design activity itself, but in achieving the objectives within a given (not always favorable) situation or environment.

Likewise, I learned quite a lot about myself during the process.