Lieferheld.de
Completed at: Lieferheld, Delivery hero
Location: Berlin, Germany
Role: Head of Product Design
link: www.lieferheld.de (No longer live)
Lieferheld was one of Germany’s online platform for takeaway and food delivery. There was a fierce German market at the time consisting of Lierferando, Deliveroo, Pizza.de and Foodora - all offering similar services with similar restaurants. I joined the design team in August 2018 as head of product design to embark on the exploration of a more competitive product and win the German market.
Lieferheld had a digital product suite encompassing website and mobile apps. We create engaging experiences that encourage fast ordering for our customers across Germany.
Its important to note that this project sadly never went live. 3 months after I began Lieferheld was sold to Takeaway.com and the whole team transitioned across. This is the awesome journey the team and I created in just 3.5 short months. This is a story of fast and unified team work and creative realisation.
The final design
Brief
The first project I was handed was to improve the conversion rate of the Restaurant listing page, which they had been trying to lift for the previous 7 months. From my experience at hungryhouse, my short stint at Just Eat and with the understanding that the German competition was fierce, it was clear the product suite severely lacked a competitive edge. The product looked tired and out of date. I also paid attention to the problems that the designers felt were high priority - most people I spoke to said we needed a redesign to win the market. Aligning closely with the research department and product owners, we began the first steps into understanding the main problems with the current interactions.
We began to create a vision for the future of the restaurant list and that was to evolve into a rebrand project.
The image to the right is how the restaurant listing page looked when we began the project. The goal was to transform this.
Project Kick-off
Understanding the problem(s)
Our kick off meeting was a full day workshop to define the problems of the task at hand. The workshop began with lightning talks from various departments such as research, marketing, SEO and analytics.
We gathered the information that we had and broke off into groups sketching and then presenting our ideas for a better solution for the restaurant list.
We broke the page down into sections and assessed all the use cases that we knew of to test that concept. At the end of the day event, we had a simple whiteboard sketch on our ideal vision for the restaurant list page.
Our solution involved:
Addressing the filters and search functionality as we knew this created higher conversion rates
Reviewing the restaurant list tile
Addressing the global postcode input component
Redefining how restaurants would be displayed in the list based on their opening ours
Reviewing how cuisines were presented to users
Then figuring out how we were going to get there…..
This was the result of our workshop.
Project Elevation
How do we future proof our concept to ensure we beat Lieferando?
In a half day workshop following our kick off, on top of defining how we wanted this page visually be, we also took a hard look at ourselves as a team and company as a whole.
Trends were evolving within the design industry and we were not up to scratch. To have a competitive edge and to future proof our product, we needed to evolve as a team in our work processes. We wanted consistency, efficiency and collaboration and that meant creating a design system. While it may slow us in the beginning setting this up, in the long run we knew it would pay off.
And since we were considering the design system, let’s talk about design ethics. What would our team look like if we were to build in accessibility into our design system? No other platform in Germany had a design system nor were they accessible. This would give us a competitive edge.
We stretched ourselves and decided to go all out and create a whole vision for the future of Lieferheld, just incase management liked it.
Designed version of what we pitched to management
The pitch to management
We decided that we were onto something amazing and we wanted to pitch the new Restaurant Listing page to management and demonstrate how it fit into a larger vision that we had for our team and what that potentially meant for Lieferheld as a whole. We were pitching:
1) A new concept for the restaurant list user experience, which we needed to test and validate
2) If that worked out…
A new Lieferheld brand vision (including colour palette)
The first Design system in Delivery hero and for Lieferheld
An accessible design system and testing approach
New research integration
New user interface design
New user experience
Dream it.
Management loved our concept. They threw in full support of our vision and the future of Lieferheld products.
Build it.
We were also fortunate to hear that a backend migration was due to happen and that would support our vision for a design system integration.
As a result, our strategy for execution was to split UX and UI into 2 separate operational streams, because we didn’t want a “big bang”, which would take approx 2 years, but continuous improvement and iterative updates to the products.
The beginning of user testing
To start our user tests, we needed to validate if users were even open to having teh design changed. We stripped back the UI of the new concept and applied our existing components to the new UX and tested these side by side. The results were positive and indicated that our users were open to us evolving the products. In addition, we also asked our users how they wished for the page to be designed if they were to design it using cut out pieces of paper.
Here is the feature sorting activity users created during the user test. We tasked them to design their ideal restaurant list.
From this user test, we confirmed we were able to start moving toward our future vision of Lieferheld.
Execution: From old to new
Focusing on the goal of continuous improvement, we used analytics to guide us on which component of the results page to focus on first. The cuisines, filters and search component was the highest priority according to management and analytics so we started there investigating a variety of ways to implement this.
Process: Team structure
One member of the design team began working in the migration team, building out the design system, UI design and supporting accessibility, while the others focused on designing and testing within the current UI library in the order of the diagram above.
Our team worked together to create simultaneous designs
1. One that used our existing UI and validated the UX changes
2. One that incorporated the validated UX changes into the new UI and design system.
Denis and Jay discussing the evolution of the concepts for order pending into the new design system
Further workshopping for future pages
Soon after, we began collaborating with the central team for the order tracking solution.
A new look for Lieferheld
The evolution of our brand was starting to take shape. Our design system, new UI and component libraries we being created in the new back end migrated system. Marketing stepped in to support with a new look for Lieferheld also. Our plans were to completely transform the brand with new brand colours, new fonts, new components and all new icons by the end of 2019.
Accessibility
Our first accessibility tests!
With ethical design firmly planted into the vision, we began working closely with the research department and we took our user testing to a whole new level. We tested our competitors websites with blind people to understand the habits, needs, expectations and opportunities this presented to us. Lieferando was totally unusable. This created an amazing opportunity for Lieferheld. This user testing also enabled us to set up our first user testing station that Denis would use to test all the components within the design system.
The accessibility integration meant a new way of working and education across the board. Checklists for each department were created to ensure everyone knew what their role was.
… and then we were SOLD 😔
Just 3 months into our amazing project that we were all incredibly invested in, we got news that Takeaway.com was to purchase Lieferheld.de, Pizza.de and Foodora Germany. With this, Deliveroo and UberEats exited the market. A game changing situation that was out of our control. This was devastating news for the team. We had bought about to much creativity, vision and motivation to the team and everything changed overnight.
The (would-be) future of Lieferheld…
New Lieferheld Home screen
With new branding and new face of Lieferheld
With support from marketing we created an amazing SEO and user friendly home page that directed users straight into their desired channel - whether it be area, cuisine or searching with their postcode.
Restaurant List page
The ultimate restaurant list page
The restaurant list page fully tested, supporting returning users into fast reorder and allowing expansive exploration through search and cuisine filters.
Order pending and tracking
Working with the central team we concepted a slick order pending state and order tracking flow.
On a positive note, I have since learned that all was not lost. Massive parts of our vision and ethical design standards have been transferred into other subsidiaries of Delivery Hero and they are still in use today.