Creative Lead | Branding | Digital Design
Creation of a personalised shopping experience from the moment the app loads, with a welcome animation tailored to the time of day, a dashboard customised based on pet type, and much more.
zooplus
2021–2022
Project Duration
11 month
Sitemap
User Flow
Branding
User Experience Design
User Interface Design
Design Systeme
Store Screens
Illustration
Graphic
Animation
Step by Step Implementation Guide
Creative Lead, Brand, UX, UI
Brand, UX, UI
Line Art Illustration, Animation
Brand
zooplus | Vector Illustration
zooplus | Development Sparring
zooplus | Creative Director (Digital)
zooplus | Creative Director (Brand)
zooplus | App APO
zooplus | App PO
zooplus | App PO
Etribes | Creative Director
Etribes | Account Manager
Etribes | Account Manager
What was the biggest challenge faced in this project?
Our task was to reimagine the zooplus online shopping experience for both web and app by adopting a more customer-centric approach that considers user goals alongside the business vision. Key areas of focus include personalisation, customer engagement, and communication.
With a customer base of approximately 5.8 million active customers, zooplus is the leading online retailer for pet supplies, achieving a total revenue of 1.111 € billion across Europe in 2017. The product range includes over 8,000 items.
As of 2022, the company operates in 35 countries, with a strong presence particularly in Germany, Austria, Switzerland, the United Kingdom, France, Italy, Spain, Poland, and the Netherlands.
Source: Wikipedia
The first challenge for me was to create a personalised shopping experience right from the initial loading of the app.
The status quo I needed to work on is illustrated above: it features excessive text, overly technical interfaces, and numerous input fields.
As you can see, this environment is not conducive to fostering an emotional and user-friendly customer experience.
At least, that's the impression I got at first glance. To determine how to improve the product, I needed to deepen my understanding of the project. I conducted a detailed analysis of the current products from the end customer's perspective and visualised my findings in a clear user flow. This flow serves as a roadmap for systematically enhancing the customer experience.
Side note: I am a strong advocate of (abstract) user flows, as they enable the team to navigate the process collaboratively.
After identifying the weaknesses in a part of the current user flow (onboarding part), I designed an improved version.
Only after this step did I create wireframes and UI designs. For the conceptualisation, I relied on the user research checklists I have compiled over the years.
Current Weaknesses:
- A complicated cookie banner appears abruptly, overwhelming users with excessive text.
- Log-in fields hinder users from fully experiencing the app from the outset.
- No registration option is available.
- There is no automatic language selection feature.
- Language and country selection are tied together, meaning that users in Germany cannot select English as their language.
- The brand comes across as overly technical, despite being centred around beloved pets.
Improving the onboarding experience was my first task, but it's not only that. Changing it will also have an impact other areas, including:
- Registration
- Home Segmentation
- Pet Profile
Therefore, I view the onboarding as merely the starting point for enhancing the app experience through personalisation and user engagement.
This is why I am beginning this portfolio case with the onboarding process.
The idea is to make the entire journey more emotional and to eliminate unnecessary steps. To achieve this, I start with a friendly and, if possible, personalised greeting for the user.
The special detail here is that the greeting is based on the time of day at the location where the user is likely situated and is accompanied by corresponding background illustrations.
If the user has already downloaded the app, they are greeted by name before being taken to the home screen.
.jpg)
To infuse even more emotion and warmth into the designs and foster a personal connection to the brand, when the user launches the app for the first time, a cat animation is displayed on the splash screen. This continuous animation will accompany the user until they reach the home screen.
The idea is that also the cat is designed in various ways to reflect different times of the day. For instance, in the morning, she is shown stretching, while at night, she sits calmly and relaxes.
The goal was to try something we've never seen before: a continuous animation that connects multiple screens and steps, telling a brief story.
To brief the final illustrator and animator, we created an animatic that showcases the precise sequence of the animation, seamlessly linking all onboarding screens into a harmonious short film.
In this sequence, the cat stretches, and then a product from zooplus—a ball for cats—rolls by, catching her attention. She follows the product to the next screen, where she plays with it. Once the user selects their pet, the playful interaction with the ball continues, and it enlarges to serve as a backdrop for an interesting fun fact about the selected pet, which is displayed to the user before they enter the home screen.
In order to be able to move from the concept and wireframe phase to the UI design phase, it was now necessary to search for an illustration style together with zooplus.
So let's define the style!
Keep in mind:
The use of illustrations is becoming increasingly popular for enlivening and adding emotional depth to various topics. While the existing social media illustrations of the animals (see below) have been effective thus far, the rise of competitors using similar styles has diminished the uniqueness and recognisability of the zooplus brand.
Our challenge:
Identify a distinctive and mature illustration style for the brand with a strong conceptual basis. Picking up on brand-defining elements such as zooplus eyes, colours and typography to establish a natural, happy, friendly, harmonious and healthy animal character for each pet category.
Perception:
Our illustration concept and style were greatly appreciated by zooplus because we incorporated the distinctive large zooplus eyes found in the logo. Currently, there is no adaptation of the googly eyes within the company.
With the introduction of new illustrations, zooplus has the opportunity to strengthen this connection to the logo.
.jpg)
The ideation process involved three parties: the internal graphic design team, the external design studio Sinnema, and us (Meloncats).
Studio Sinnema has submitted these designs for consideration.
In the end, zooplus chose a practical approach by adopting the established style that is currently used on the social media channels, ensuring consistency and recognisability in the branding.
This decision led us to request the graphic design team to create illustrations in a "social media style."
Now, let's bring everything together.
New Users:
When the user downloads the app for the first time, they are greeted with a standardised welcome message, accompanied by an animated splash screen. The text and illustration on this screen change slightly depending on the time of day.
Registered Users:
For registered users who have already entered information about their pets, an animation corresponding to their selection will be shown.
Next Steps:
The plan is that once the MVP is published and evaluated, each of the six to seven pet categories—such as dogs, reptiles, birds, and fish—will have its own unique splash screen. Each time the app is launched, one of the animals from the selected category will be displayed at random.
To streamline the process for developers, we created concise briefs for each use case, along with click dummies where necessary. Additionally, we developed a skeleton for each required screen, incorporating the new font style, container sizes, and other essential elements.
It was essential to establish the future placements of the animals for the illustrations needed today in order to avoid additional work later on.
We have planned animation sequences for all six to seven pet categories; however, for the MVP, only the cat will be implemented initially.
Other animals will be added following a successful practical test.
Challenges – Resolved:
1. Cookie Banner: This is another re-design task which will be displayed later.
2. Login Fields: To enhance the user experience, the login screen has been removed from the onboarding process. This allows users to discover the quality of the app first, without being interrupted by account-related topics. The login and registration screens have been transitioned to premium feature areas.
3. Registration Option: A registration option has also been added to the premium feature area.
4. Automatic Language Selection: An automatic language selection feature has been implemented, enabling the app to detect the user’s preferred language based on their smartphone settings. This enhances accessibility and user comfort.
5. Decoupled Language and Country Selection: The separation of language and country selection has been successfully implemented, allowing users in Germany to choose English as their language. This flexibility significantly improves the user experience. Additionally, the country selection is now automated based on the user's estimated location.
6. Brand Perception: The brand communication has been revised to present a less technical image and focus more on the emotional connections with beloved pets. By adopting a warm and engaging tone, the brand is now perceived more effectively and resonates better with the target audience.
Challenge Reminder:
Creation of a personalized shopping experience from the moment the app is first loaded.
Concept:
What happens after the welcome screen? First, an introductory screen appears, followed by a screen that allows users to personalize their store by selecting a pet or pets, or to skip this step.
Case 1: Personalization
If the user chooses to personalize the app, they can select their type of pet, and the search will be tailored accordingly. Each time the app is launched, the splash screen will feature their selected pet.
Case 2: No Personalization
If the user opts not to personalize the app, they can skip this step and will be redirected to the default search or home screen. Each time the app is launched, the splash screen will display randomly selected pets.
Regardless of which path the user chooses (personalisation or not), the animation is designed to continue smoothly.
This is the final screen design for the onboarding steps, including the welcome screen.
When the user presses the “save” button, a fun fact about the first selected pet is displayed.
The UI design and animation are specifically tailored to the chosen pet. For instance, the cat plays with a ball that gradually increases in size, featuring a quote on its surface. Then, the cat’s tail reaches out to grab the ball and pulls it off-screen, revealing the home screen.
Even though this feature is rather far away, because the priorities and needs are elsewhere, we had the opportunity to deal with the dark mode.
To streamline the process for developers, we created concise briefs for each use case, along with click dummies where necessary. Additionally, we developed a skeleton for each required screen, incorporating the new font style, container sizes, and other essential elements.
We have already considered animations for all the animals. This allows the illustrator to make clever and efficiency-enhancing decisions while creating the static illustrations. In the initial stages, we will likely work with static illustrations; however, knowing the animation preferences in advance enables us to design them in a way that allows for reuse later on.
Here you can see a before and after screen design once again.
Creation of a personalized home feed tailored to the selection of specific pets during the onboarding process. The design of the home feed is conceptually grounded in the "Five Freedoms" of animal welfare, which include: access to nutritious food, sufficient space to interact and play with other animals, a safe and secure shelter, appropriate health care, and protection from fear and stressful situations.
"We needed additional team members, especially experienced designers in app development. Nadine, Killian, and Mi exceeded my expectations. The team demonstrated great commitment to advancing zooplus by identifying challenges and offering new ideas for addressing them. Thanks to their personable approach to integrating with the team, I never felt like I was working with external experts, but with true team members."
Christian Haase | Creative Director | zooplus
"Nadine brought a modern and friendly approach to the table, always offering fresh ideas and advocating for the best in mobile design. The difference in the quality of our designs is clear, and I’m confident that the app we’re developing will be far more engaging for our customers thanks to her contributions."
Lara Escudero | Product Owner | zooplus
"Working with Nadine, we were able to leverage her expertise in benchmarking research and her ability to generate original concepts that aligned with best practices, while still simplifying the experience in a way that was unique to our customers. She has a great ability to develop ideas quickly, taking into account the research data we provided, and she creates solutions that engage customers without overwhelming them."
Alexander Playford | Product Owner | zooplus
How did you acquire the project?
A colleague recommended me to the agency Etribes. Through Etribes, I was then introduced to the Creative Director of zooplus. He liked my work and personality and brought me on board along with a colleague I suggested (Kilian) for the project. Over time, I was able to bring two more Meloncats (Mi and Willze) onto the project as well.
