A german food portal

Berlin. The city of european startups. The city where everybody wants to make the world a better place. For 2 years, I had the opportunity to work as a product designer for one of the most important food delivery company. Delivery Hero is operating in 32 countries and they promote delivery service in the digital age. 

One of the main point of interest was to work in an environment that takes into consideration different cultural aspects of user experiences and interactions. I was the product designer for the global brand team which means that I was not dedicated to one and only product. When a team needed input or support for their product, I was the person of contact.

computercomputer

PRODUCT OWNER:
Patrick Stieber 

ART DIRECTOR:
Vincent Riess

 

What platform?

Lieferheld — Lecker liefern lassen.
Lieferheld is one of the most important food delivery website in Germany. I was working mainly on the web platform with a mobile first focus.

 

 

The platform did undergo a UI re-design in mid-2015 but no UX nor design researches have been done at that moment. It was a quick alteration and nobody was really happy about it. We decided to solve UX issues feature by feature and operate a slow UI transformation at the same time. 

 

THE PROBLEMS WE NEEDED TO SOLVE

  1. A high bouncing rate of the homepage.
  2. Lost users when brought by google searches.
  3. A restaurant list cramped with practical information and marketing features
  4. 4 different colours used without any consistency
  5. A not so much working web-font 

Typeface

The typeface used by Lieferheld in all its material is Corpid. In terms of display, we faced many issues with this font, such as non-lining numerals or not contrasted enough type-weight.

Therefor, we decided to move away from the brand typeface in terms of content and choosen a web-font that is more coherent on display: Open sans. 

Corpid is always used for the h1.

I love rainbows but not for a site.

THE PROBLEM

Lieferheld has a primary colour -- red -- and an accent -- green. However, It also had 3 other ones to play around with. There was no established rules on which colour to use and when. The old version of the platform was filled with inconsistency and colours splashes everywhere.

THE SOLUTION

Just one verb : reduce.
Keep the primary, the accent and a secondary. We decided to decline the red in several different shades to use as different UI elements.
We also took the opportunity to change the hue and the saturation of the accent colour to give it a slightly more modern feel. 

restaurant_desktoprestaurant_desktop

A case study : the restaurant list

We all know how it happens. We have a page. A page with important content and many stakeholders are pushing for new features. The latest ones were:

  • keep all current features
  • add price range
  • add new "6€ menu" feature
  • add live tracking or delivery time

Restaurant List 2015 version

The main challenge here is to add a lot of features in an already cluttered screen. At this point, the product team gave me several wireframes. They user-tested the comprehension of the new features.

The user-test showed that :

  • the iconography of live tracking/delivery time/location was not always clear
  • the cuisine type are not visible enough
  • the award badge is not visible enough
  • the price range is well-understood
  • the review are easy to define
  • menu badge is clear

Since the user-test had pretty bad result, I decided to reorganise completely the design of this feature. 

  • more space was added to de-clutter
  • more space by reducing the logo
  • award feature stands out
  • replacement of icons for text
  • all text left-align
  • reorganisation of the content with logo on the left

 

The result was highly positive with some small issues on some corner cases such as the live tracking.

I can't finish this case study without acknowledging the annoying talented Denis Sritar who took over this project when I decided to move back in Belgium. I can see the platform is still improving thanks to him.