Creative Lead | Branding | Digital Design
Conception, brand and digital design of a completely new app for DAS FUTTERHAUS – one of the largest pet shops in Germany. Our long-term goal? Personalization around your own pet.
Das Futterhaus
2002–2023
Project Duration
1 month + 3 month
Consultation
Strategy
Data Analysis
Customer Journey
Branding
Sitemap
User Flow
User Experience Design
User Interface Design
Design Systeme
Store Screens
User Testing
Illustration
Graphic
Animation
Creative Lead, Brand, UX, UI
Brand, UX, UI
Brand, Graphic,
Animation
Development
Illustration, Animation
Illustration
(Customer Journey, App Hintergründe)
Animation
(Customer Journey)
User Testing
Data Analytics
Copywriting
What was the biggest challenge faced in this project?
The biggest challenge in this project was the short notice request with an imminent deadline. At the same time, there was a variety of stakeholders, which required intensive and diverse collaboration. It was crucial to establish decision-making ability within this tight timeline. Another goal was to modernize the brand without changing the existing logo.
DAS FUTTERHAUS has been in operation since 1987 and now includes over 430 stores in Germany and Austria. The retail chain offers a range of food and supplies specifically for pets, with 45,000 listed products. To keep up with the times and meet customer demands, the well-known brand had to be transferred to the digital space and reinterpreted.
Source: Wikipedia
Designing the first app for a company, that is in the process of digitizing itself, comes with major challenges. But after almost three months of intensive design and a few more months for minor work, we are now very proud to show our app (in the Director version with, among other things, even more colors than in the live version).
What helped us to digitize Das Futterhaus on a creative level?
- First and foremost, a very proactive way of working and a critical analysis and free interpretation of the briefing in order to get the best out of the app.
- Few meetings: One to two one-hour Design Weeklys per week with all internal stakeholders to enable decisions to be made directly in the meeting.
- One Figma presentation per Design Weekly with markers for the decisions to be made now.
- Hands-on Figma workshops to keep the app up to date within Das Futterhaus.
- Loom How To videos to enable future employees to keep the app up to date.
- A prototype to involve external stakeholders (franchise partners) and give a first impression of the live version.
- And, of course, close cooperation with the development agency novomind.
We had the privilege of designing a comprehensive customer journey for one of the largest pet retailers in Germany.
The Customer Journey describes the process a customer goes through from the initial awareness of a product or service to long-term brand loyalty. It consists of several key phases:
1. Awareness
2. Conviction
3. Purchase
4. After Sales
5. Loyalty
Understanding the Customer Journey helps businesses meet customer needs and expectations, creating a positive experience throughout.
Development Steps:
1. Familiarisation with the Company
2. Goal Definition
3. Research and Analysis
4. Understanding Customer Segments
5. Analysis of the Provided Personas
6. Review of Available User/Customer Data
7. Touchpoint Identification
8. Benchmarking of Representations of Customer Journeys
9. Conceptualisation and Style Definition
10. Development of One Customer Journey for Each Persona
11. Emotional Journey
12. Identification of Pain Points
13. Optimization
-- The project paused here –
14. Implementation and Testing
15. Feedback and Adaptation
For confidentiality reasons, we are only presenting the illustrations here—separate from the actual content of the detailed customer journey. Company figures have also been omitted.
We analyzed the provided personae to gain deeper insights into customer needs and expectations.
Since the personae were emotionally somewhat intangible for us, we supplemented the numerical data for each persona with a user story.
Michael:
"I would like to have "a" dedicated contact person who enables me to have a regional meeting with a community of like-minded, quality-conscious pet lovers and provides us with an informative and application-oriented offer, so that my everyday life is simplified.
In the best case, this allows me to learn how to excellently meet the basic needs of my pet, and both my pet and I can remain physically and mentally fit."
We identified all potential touchpoints where customers interact with the brand.
.jpg)
Unfortunately, the project was paused before we could undertake this important step.
In our effort to improve the customer journey, we aimed to quantify the individual touchpoints with Return on Investment (ROI) values. By doing so, we sought to clarify how each touchpoint contributes to the overall customer experience and its associated financial impact. This approach would not only allow us to identify which touchpoints generate the most value, but it would also help communicate the rationale behind varying levels of investment across different touchpoints to the stakeholders within the company.
It was important for us that stakeholders understand why some touchpoints receive more focus and resources than others. Quantifying ROI would provide a data-driven foundation for these discussions, enabling informed decision-making and prioritization of initiatives that yield the highest returns. However, we recognize that certain aspects of the customer experience, such as emotional connections and brand loyalty, are inherently difficult to measure. Therefore, while ROI values offer valuable insights, we also need to consider qualitative factors that contribute to a holistic understanding of the customer journey. Balancing both quantitative and qualitative metrics is essential for making well-rounded investment decisions that support our overall customer engagement strategy.
After extensive benchmarking of different representations of customer journeys, we decided to take a somewhat different approach (rather than opting for a highly graphical, abstract representation) and settled on a customer journey that is heavily based on illustrations.
Here you can see an early sketch of two touchpoints.
We haven't seen this anywhere else, but we decided on an animated rather than a static customer journey.
Here you can see the development of a single touchpoint, "Group Activities Outdoors," presented in three images for a later animation.
We developed one customer journey for each persona to ensure tailored experiences for diverse customer segments.
During this process, we considered the emotional journeys of customers to pinpoint critical moments.
We also analyzed the journey to identify pain points where customers might encounter difficulties.
We reviewed the available user and customer data to validate our hypotheses regarding customer behavior.
To describe Susanne in a more emotional way than her persona data, we developed the following statement:
"I wish for comprehensive expert advice (based on my criteria) with specific product recommendations that help me navigate the jungle of pet food providers and their products, empowering me to make a clear, feel-good purchasing decision for a product."
.jpg)
Here is an example of the step-by-step creation of the customer journey animation, which can be embedded in in-house presentations by Futterhaus to tell the story of how the individual touchpoints are utilized. This enables a visually engaging representation of the customer experience and communicates the interactions between the customer and the brand more effectively.
Two possible user stories for Das Futterhaus:
"We seek to distinguish ourselves from the grocery retail sector and competitors (including Fressnapf) through professional, intensive dietary consulting with specific purchase recommendations for a pet food product."
"We hope to develop a loyal customer base that stands for our brand and becomes brand ambassadors. Ideally, these customers would also provide services to our clients in our name."
The screens shown here were designed by the development agency.
Futterhaus asked us to use our creative skills to give these designs a distinct branding identity, and, of course, a good user experience.
Challenge accepted!
The loading animation improves the user experience by signaling to users that an action is taking place in the background and bridging waiting times. It helps manage user expectations and can creatively contribute to brand identity.
Here, you can see the concept we developed for our client: a charming app loading animation. The idea is to randomly load one of these animations each time. Conceptually, they each display a toy for an animal, such as a ball, a stuffed carrot, a mouse, or a bone.
Stylistically, the animated graphics match the icons used in the app.
Here we show how the animation can look when embedded in a screen design.
Note: Unfortunately, we were not allowed to alter the logo in its current form and there was no other way to embed it in a slightly more elegant manner.
After the loading animation plays, "new users" begin the onboarding, which introduces them to the key features of the app in a few short steps.
We have used an abstract version of the Futterhaus dog, represented by its eyes, nose, and mouth only, to guide the users through those steps:
1. Great deals
2. Two percent discount – always
3. Exclusive coupons
In the fourth step, it asks the user about the preferred cooky settings.
The dog visually demonstrates a corresponding action for each app feature.
It was especially interesting to give the yellow dog mascot of DAS FUTTERHAUS some new features - like a tongue. Up until now, the yellow dog was only seen from the side in the brochures of DAS FUTTERHAUS. For the onboarding animation in the app we show the dog in a front view, so it directly engages with the user.
As you can see from the illustration tests we experimented with many versions of the dog. In the end, we chose a modern abstract variation that integrated best into the app.
So, no outlines of the head, suggestions of the ears or snout, and also no eyebrows (customer request), and no dog teeth (customer request).
In our favorite software, Figma, we created all the screen designs. The onboarding illustrations are set against the yellow tone of the Futterhaus dog, allowing the body to blend into the background. The headlines are accompanied by small illustrations that reinforce the content. Otherwise, the screens are kept as simple as possible to give the animation room to breathe.
Before the animations were created, we tested individual ideas with static illustrations to ensure that the animation process would require as little effort as possible.
Since it is a lot of work to make an animation like this, good planning is crucial. For maximum efficiency we did animation tests early on in the process.
For the animation, we mixed keyframe animation with frame-by-frame animation.
All of this was done in vectors, so that it can be exported in the Lottie format, which is used in apps and on websites.
Coupon:
The Das Futterhaus Hund has found discount coupons for users in the app. At first, we wanted to display the coupons as a long chain flying through the picture. In the end, however, we decided on a rain of coupons because it looks more exciting. What do you find more visually appealing?
Cookies:
One of our favourite animations in the app is the yellow dog eating its cookie on the cookie note page.
First we wanted to show the dog in a side view, but then we decided on the front view, since all other yellow dog animations are also shown in a front view.
For the app, we designed a modern floating navigation.
Keeping it to only a few menu items ensure clarity.
1. Home
2. Coupons
3. Pet Profile with settings
4. Futterkarte
The Futterkarte is always present and can be swiped up from its hiding place.
Unveiling the brand-new app icons and animations designed to make your experience paw-sitively delightful! We’ve crafted simple yet friendly icons, adorned with charming micro-interactions to ensure navigating through our app is as comfortable as your furry friend’s favorite spot. Swipe, tap, and wag your way through a seamless experience, tailor-made for you and your pets.
Here you can see the charming animation of the floating navigation.
The homepage initially consists of teasers for the MVP.
We have categorized the teasers as follows:
1. Shopping (yellow)
2. Exclusive Brands (depending on the brand)
3. Services (green)
4. Knowledge (blue)
5. Community (purple)
In the future, we would like to customize the home based on the user's pet (personalized shopping experience). However, this was not possible for the MVP, as we had to work with the building blocks provided by the development agency.
For future versions of the app, we would love to create more little animations like this one at the end of the home.
In order for Futterhaus to manage the teasers, we conducted a Figma training session with them to use the templates we provided for the creation of new teasers.
To make things a bit easier for the developers in the run-up to the MVP launch, we will initially omit the floating navigation. This will be implemented later. This means that the bonus card for the pet shop must also be integrated into the navigation for now.
Discounts and coupons everywhere... It can get confusing on the homepages of various apps. For this app, we decided to keep everything neatly separated.
The Futterkarte and the coupons have their own area. This leaves the Home free for everything else related to animals: Futterpost, Podcast, Pet Insurance, etc.
Create a coupon that shows that when purchasing a specific product, a free product will be included as a gift.
In addition to the two primary colors yellow and blue, Das Futterhaus also had other tertiary colors in the style guide that were previously only used for Futterpost and Futterpost Junior. We added further saturations to these colors and used them for the animal profiles, among other things.
We wanted to design an app that has a personal touch and is fun to use. In the new Das Futterhaus app, it is now possible to add your animal. Each animal species is represented by one or two representatives in each category. The special feature: Each animal species not only has a different background color (director's version), but also an individual background illustration.
Here you can see the categorization of the product range of the pet store by animal type. Each category has a background color and an individual background shape.
The backgrounds are designed to be infinitely extendable, making them versatile for various applications.
Content-wise, the backgrounds feature species-specific landscapes, as well as abstract representations of food and toys.
In general, the account area is rarely used and is therefore rather neglected conceptually.
For Das Futterhaus, we didn't want to miss out on the fun here either. Large icons give the technical side a friendlier touch.
The login and registration process was perhaps the most discussed area in the app. The decision-making process has been simplified through the use of user flows. Three of them were available to enable both functionalities.
While designing the user flow, we consistently distinguished between the logged-in user and the logged-out user. As many of the app's features are only accessible with an account, it was necessary to create different screens for each state. It was important for us to communicate the benefits of account creation even on the locked/logged-out screens.
Since the Futterhaus app is based on Flutter, we decided to adopt the latest Material Design system logic and naming conventions to keep everything within the same Google ecosystem and make it as efficient as possible.
User Flows can be helpful during multiple stages of a project or product life cycle. First, they offer orientation by scribbling down, what the users should do or want to do or might end up doing. Later, they help to find out what is actually needed, supporting the definition of the detailed scope for both, design and development. Finally, they help to document a status quo, for instance the MVP. This makes it easier for the whole product team to gain an overview and therefore increases the speed when wanting to review and iterate the product later on.
Our User Flow for this project was iterated multiple times. It started with a couple of generic assets from a library which sparked lots of conversation and discussion with endless comments and loops to define what was supposed to happen where at which exact step. Is a screen going to be native? Is it going to be a web-view? Are we going to build it or does it exist already or is a third-party provider already covering the case? Is it even possible to display this information here? Who covers the maintenance of that? During the development, we retouched the flow with final screen designs in order to document the MVP for its launch. This enables the product team to keep working on improvements with a visual base for in-team alignment and with externals, too.
Our passion for detail shines through in our meticulous documentation of errors uncovered during development in the Quality Assurance phase.
Developing a new app also means promoting it in the App Store and Play Store.
A look at our screens shows the following screen structure:
- At the top, a short text describing the main function of the app with bold typography.
- At the bottom, a screenshot showing the actual product. Often with a highlighted feature.
- Usually a color as a background.
To make everything look more harmonious and uniform, we designed a continuous background for all screens.
We deliberately refrained from using mock-ups in order to increase the longevity of the screens.
It is always exciting to watch and observe users testing your new product or idea for the first time. It is somehow magical and you just hope that they understand how to navigate through every step, find what they are looking for – and maybe even have a little fun.
We recommend to all our clients to test ideas, concepts and products before going into development or launching them.
If you are interested to find out how we can reduce your risks before going live with your product, get in touch with us.
As a special gift at the end of the project, we created a memory game using the app illustrations. This fun and engaging game not only showcases the charming characters from the app but also serves as a delightful way for the client to interact with the brand in a new and entertaining format. We hope it brings joy and adds a playful touch to their experience with Futterhaus!
The development of a modern, functional app was a crucial first step in our digital strategy. What impressed us most about working with Meloncats was their courage to innovate, professionalism, efficiency, and incredibly good communication. The success of our app is
the best proof of the high level of expertise with which Meloncats supported us throughout
the project.
Kristof Eggerstedt
Managing Director | Das Futterhaus
How did you acquire the project?
Michael, the person responsible for the app project, was familiar with my work from a previous client. He was very satisfied with my efficient results and reached out to ask if I would be interested in taking on the creative responsibility for this app project.
We published our app in the app store and google play store. Check it out!
