pizza.de is the pioneer of online food ordering in Germany and one of the household brands of Delivery Hero. With the new app for both iPhones and iPads we wanted to make food ordering an easy and satisfying experience. Order food easily and quickly without leaving home:
1. Choose a food category
2. Select your location
3. Choose a restaurant
4. Select your dishes (with lots of cool customization features)
5. Checkout
pizza.de has a wide variety of restaurants and dishes. Choose out of 16 different kitchen categories in more than 5000 restaurants.
Many restaurants offer deals, special lunch discounts on a daily basis.
Only pizza.de offers a variety of dishes with the possibility to customize your meal until you’re happy.
The main flow was divided into different user stories, which became the main path for design and development: Onboarding, filtering and scanning, making the perfect choice, seamless ordering and follow up and engagement. After we finished redesigning the main flow and tested it with users in one-on-on interviews, we could finally concentrate on improving all the small details which add to an amazing customer experience. For example on the menu pages the menu structure of some restaurants was so complex, that you could add extras to your extras to your extras etc…We consolidated 3-4-level menus to to an easy to navigate 2-tier accordion. Customizing a dish was made easy by deleting complicated bundle deals and making a consistent experience for all restaurants. The deals found their place in a deals/image carousel and in the dashboard of the user account.
The navigation structure was a burger menu, which we replaced through a handy tab bar. I created a sitemap in order to enhance communication between mangers, designers and developers. We printed out all the screens and put them up on the walls, so we had a real user-flow, which could be updated easily and could be seen by all team members. That helped development a lot.
Before we started the redesign, we tested the former brand colors and went from a not readable lemon yellow to a warmer tone, which works well as a UI color. The CTA color is a bright orange, which can used for links, too. White was chosen by the brand team as the main color, which makes the app look even more clean and minimal.
Location search made easy with a seamless google API integration. Bonus: Logged in users can edit their saved addresses directly, when choosing location. They don’t have to go over their account settings. Delivery address input is clean and seamless. If typing is too painful for users, geolocation is on the same screen.
The restaurant menu was consolidated into accordions, so that even complex restaurant menus felt light and easy to navigate. The customer reviews were made accessible from all important touch points, e.g. on the restaurant menu you can already see the last 3 reviews in order to help making the perfect choice.
Customize your dish! Sounds easy? Well, some restaurants offer their customers a all sorts of choosing mandatory and optional additives. When we were redefining the ux, we had to keep in mind a lot of different use cases. E.g. dependencies on sizes or meal bundles had to work without errors for other restaurants.
Tired of calculating? An intelligent cart tells you, when you reach the minimum order value and how much discount you get, when there is a deal available.
Last but not least the checkout should be as seamless as possible. We settled for a structured list instead of a step by step checkout, simply because the customers where already used to it from the old app and we didn’t want to introduce too many changes. In the end it tested better in the user testing sessions anyways.
When I joined the company a team of ux-designers and researchers already had a functional prototype for the iPhone and iPad app ready, which was tested regularly through one-on-on interviews with actual users. My task was to convert the prototype into a beautiful and usable design and establish a new design system along the way. Later in the product cycle I also worked on the prototype and optimized ux flows.
We had 3 users coming in every 4 weeks and held an intense 1 hour 1-on-1 interview with them, whereas 6 colleagues from the product team, where observing and taking notes from another room. My part was observing, taking notes, sorting the notes and learning, learning, learning! We not only tested the basic user flow.
Later, when we already developed the main user flow, we went out on a uni campus to do rapid user testing. We installed lookback – an amazing app for taking videos of the user, while using the product – and asked 5 students, which fit into the pizza.de persona profile to simply order food quickly. Why 5 is the magic number? Because after 5 usually the results begin to repeat. The out take we’ve got from this small test was amazing. For example the freshly designed dish details didn’t work, because the users didn’t see the difference between the dish details and the menu. As the app is held in similar colors and a consistent UI, we figured out, that it was a bit too consistent in some parts 🙂 So we optimized again. And the iterative product design cycle began once more.
Lana Criggs – UX Designer
Eleanor McKenna – UX-Designer
Ana Da Costa – Product Owner
+ 1 awesome iOS dev team
Mobile UI/UX Designer
2016
Available @ iTunes App Store
