Case Study: Pizza 4Ps - UI/UX for Delivery Online Application.

Client

Pizza 4Ps used to be a purely restaurant food service offline. But the Covid and the quarantine did its bit and it became necessary to use the service to deliver not only readymade food from restaurants, but also food from their online shops. Its objective is to effectively connect restaurant and customers expecting the order to set perfect conditions and timing for delivery with fresh food.

Overview

Our task is to develop delivery (mainly from restaurant) in the Pizza 4Ps application. Improving the existing interface to improve key metrics.

Project Stages

To work on this project, we follow the design thinking process with modification for user-centeric product design as a basis and here we can see the process.

User Research

For our research process, we decided to interviews & surveys to better get to know what our users need. Surveys are a great first look at the customer environment because they provide quantitative data.
Also, we like to do qualitative research (interviews) to fully understand how to approach the design.

The most important finding from the interviews are:

Research competitor analysis

A competitive study in UX design assists in identifying rivals’ strengths and shortcomings in relation to order food.

The scheme of information Architecture

User Flow

Now we’re creating a user flow that will clearly depict the sequence of activities the user takes to solve his problem. We decided that we would initially focus on the order creation and confirmation flow.

Because these are the phases with the biggest challenges, and by resolving them, we can aid our segment, enhance user experience, and raise product business metrics. As a result, our User Cycle solely shows the order formulation and confirmation flow.

Low-fidelity wireframes

We always focus on the wireframes first because this part decides the High fidelity Prototypes. It’s perfect for target the pain points that users faced in app.

High-Fidelity wireframe

UI design: Create a Pizza

A typical food ordering app for restaurants usually features the pizza of the fixed formulation. Pizza 4Ps pushes the limits: it suggests users not only customize the existing pizzas by adding or removing ingredients but also create their own pizza by choosing the half & half pizza in stock. Adding one more favor, users can see how the price is changing relatively.

Choose the half and half pizza

The menu shows actual positions and special foods that the restaurant or service has at the moment. Users may see item photos and basic price. Color accents highlight the half and half button and calls-to-action for quick scanning. What’s more, the system of categories at the top of the screen enables a user to see the more menu and find a needed position faster.

Having chosen a specific button – called half and half – and moving to the choosing the left half screen, users see the list of product photo with the right half, core information about pricing and the CTA button enabling them to add the position to the cart. Then users are driven to the right half and picked the other.
Also, the screen looks clean – it isn’t overloaded with details about ingredients which isn’t interesting for users who buy this position regularly or don’t care about the details and want to make an order asap.

Variety of Choices

Those who do care about the toppings, use the button “Add more” in the middle part of the screen. Just tapping it, they pull up the popup and check the contents of the topping. To make the visual performance of the list effective and appealing, the interface features photos of all ingredients. The cart icon features one more important UX affordance: an orange dot with the quantity on it gives a quick prompt that it’s getting the food.

Pizza 4Ps app design process was an exciting creative challenge for the ALIVE design team: it was a cool attempt to broaden the horizons of food order applications with extended functionality, and strong usability.