Pizza.de Responsive Web

A team of 8 developers, 1 project manager and 1 UX designer were tasked with taking the old pizza.de (desktop web and mobile web) and turning this into a responsive design that ran off an updated backend, and with more modern front-end technologies. The reasons for the redesign were that on the old platform, it was not possible to add any kind of tracking - so we could not tell at which points our customers were bouncing.

About Pizza.de

Pizza.de is a food ordering platform that operates within the German market. It has a very large, strong and loyal customer base. When it was time to redesign the website, this was one of the most important considerations. It was decided, in order to reduce the shock to our existing loyal customers, that the UX would be kept largely the same as the old website. For this reason, it was a bigger design challenge than creating a website from scratch.

Planning

During the planning stages, we went through each feature on the website, and decided what was going to be in scope, and what would be taken out for another iteration. One of the main challenges of moving to a new backend was that the system now required the full address information from a customer. This would mean that we had to ask the customers for their full address before proceeding with the order - a completely new behaviour that we had to introduce. For a project with such a loyal existing customer base, this was not an easy step to introduce, and it became a primary focus of a lot of our user testing.

Challenges

One of the main challenges of this particular project was the fact that we were going to change the user behaviour from asking for the user's postcode at the beginning of the flow, to asking for their full address (postcode, house number and street name). For this reason, the 'address flow' became one of the biggest design challenges, and required several iterations, along with being the primary focus of the user testing sessions.

User Testing

In order to ensure the product was the right fit for both new and loyal customers, we carried out a series of user tests both with prototypes and early local versions of the website as it was being developed. User testing was crucial in assessing whether the design would satisfy both the loyal customers and attract new. We used a tool called Lookback to record the sessions on the mobile device, and Skype to transmit the session to the rest of the team.

The outcome of the user testing sessions provided us with user feedback that both highlighted flaws in the design, as well as giving us validation on certain decisions that had been made. One of the things that we learned was to include food photography, and how our customers were drawn to images of delicious food.

Menus

The menu page needed to communicate if the restaurant was open or closed, and show what sort of food the restaurant provides.

Payment Flow

The payment flow was challenging, as it was required to have the checkout on the same page as the menu. For this reason, it is handled inside a modal on mobile devices.
Payment is mostly handled with third party platforms- credit card and paypal validation are handled externally.

Order Confirmation Page

The order confirmation pages for the 3 possible outcomes: order in progress, order successful and order failed.

Design System

The project continues with the refinement of the design system and the optimisation of the checkout process. After the deployment of pizza.de, I inherited the UI side of the project. Currently I am leading an optimisation process, I will refine the mobile checkout and refine the design in the next few months. Some of the feedback we have received were to do with the shades of grey that are being used - some were too light for some users with visual impairment - and the use of placeholders as a text field label - this gives the indication that the field is filled. These are design flaws that are easily remedied, and I look forward to continue the optimisation of the website.

Redesigning pizza.de was a great opportunity for me as a designer to reinforce a refreshed brand. You can view the current live site here.