2017

Food ordering mobile app redesign

As Internet mobile usage increases continuously, so do all the online activities people undertake from buying products and ordering food to reading news and listening to music. As a result, digital products are expected to offer people the same experience even if the medium changes.

To help them adapt to this shift in user behaviour, I was approached by Presto Pizza, the #3 pizza delivery company in Romania, to redesign their mobile app and encourage people to place more orders from their mobile phones.

The problem

The current app did not perform as well as expected compared to competitor apps and it wasn’t offering a great experience for users as measured by tests with users, a usability audit and the feedback received on App Store and Google Play platforms.


Project setup

The team was composed of 6 people: a visual designer, a product manager, two front-end developers, one back-end developer and me, filling the UX designer role. As in other projects, I was responsible for designing the new product, which included going through the research, creating the new architecture, designing the prototype and validating the final result.

I started the project meeting the stakeholders and building a quick interview, going through questions about the company, the products, the customers, the current app, to better understand why the redesign was happening and what was going to make it successful from their perspective.

Analysing the competition

Learning more about the company and its goals allowed me to continue and analyse the market. I made a competitive analysis with the 4 most likely competitors: Domino’s Pizza, Jerry’s Pizza, Pizza Hut Delivery and Speed Pizza and placed orders on all of them, helping me understand what we were up against.

It revealed the fact that Pizza Hut Delivery was by far the best app right now, offering a balanced set of features and a very good overall experience. The rest of the apps were modest.


Usability audit

Applying the usability guidelines developed by David Travis from Userfocus for their consultancy work, I was able to better understand the current state of the app. The review was split into 5 categories: Task orientation & Functionality, Help, Feedback & Errors, Navigation & IA, Forms and Data entry and Page layout & Visual design.

The results weren’t great. The app was lacking a system for handling errors, offered poor feedback to the users, navigation suffered because of inconsistency and the structure of the forms was far from ideal for a mobile application where space and users’ attention is limited.

But there was also great news! The overall functionality of the app turned out to be very good, offering a nice set of features, which meant we had a solid foundation to start from.


Visiting the call center

In order to learn a bit more about the flow of the current ordering process I decided to also visit the company’s call center. Using a third party system, this is where all the orders were centralized, whether they were made by phone, on the website or through the mobile app, and sent to the nearest restaurant.

It was a pretty revealing experience for me since I got to interview the support staff and see the entire system at work, from the moment a customer placed an order until the delivery was sent and marked as completed.

Customer survey

Not all my questions about the customers were answered during the interviews, so creating a survey proved to be a great call. It was composed of 20 open and closed questions, asking about specific ordering habits and the current experience with the company.

1254 people responded and the insights were priceless. I was able to understand that 72% of the customers choose only one or two types of pizza every time they place an order, 56% order for more than one person, while 40% avoid ordering from mobile because they find it complicated and slow. Open questions also revealed that people had a negative experience with the delivery of the orders.

Persona profile

I do not usually build personas unless the data is backed by at least two types of research that reveal some kind of relevant patterns about the customers. Fortunately, in this case, the interviews and the survey helped identify a few.

It was exciting to find out that a lot of the clients worked in tech and that the problems they had right now, like finding the mobile app too complicated or not being able to order faster, were things that can be solved by a redesign.

Brainstorming new ideas

Having a good overview of the product, competition and challenges, I was able to come up with several new features that would improve the app and meet the expectations of the users identified during research.

I can mention, for example, the order status after users place the order and the possibility to see the delivery car on the map, in real time, which would eliminate the anxiety caused by not knowing where your order is and decrease the number of calls made to the call-center or adding favourite products, thus making it easier for those 72% of the users mentioned earlier to place the same order.

Analysing cognitive biases

Adapting my designs to meet common human cognitive biases is one of my long-term goals when creating new products. It’s a powerful way to ensure that what I design is as human-centered as possible.

For this purpose, I developed a bias analysis, an extra step in which I use psychological biases as the basis for building specific features that can positively influence the user experience and improve the product performance.

Mapping the customer journey

To make sure I do not miss vital steps, I also mapped the entire journey of the customers, both online and offline. When ordering food, both mediums can have a massive effect on the overall experience.

It also helped to identify opportunities that are harder to spot when dealing with individual steps. For example, waiting for the order seemed like a high impact yet very neglected step because of it’s proportion to the total journey time. It had the potential to enhance or spoil the experience, so I took advantage and introduced the order status and deliver car map features.

Mapping the features

Going through the previous steps generated a lot of ideas so I gathered all and built a feature map. This is usually where I filter everything and transform good ideas into specific components inside the product.

As a do for most designs, I used the map as a basis for the new app structure, breaking it up into a few main sections: Intro, Navigation, Food and Cart and going into very specific details for each.

Mapping the interactions

Once I had the features filtered and categorized I went further and mapped the interactions of the app, rethinking some of the app flows. For example, asking users for the delivery address before placing the order, as this would help us display location sensitive offers, estimate delivery time and make the checkout a lot faster.

Building this diagram helped me keep track of every link between components and it proved a valuable asset when communicating the design to the developers and stakeholders.

Building the wireframes

I had ideas on how to actually design the app constantly throughout the entire process and made a habit of sketching some of them or making short notes to keep track of them for when I get to this step.

I used Adobe Experience Design (XD) to create the wireframes. It’s lightning fast compared to other tools, extremely easy to iterate with and lets me focus more on function and less on form. As a result, I created 57 screens that proved extremely useful both for the visual designer and the developers. You can see some of them below.

A lot of decisions were made here as I was able to simulate them and better understand if they fit within the overall design. Offers, filters, products and profile were all redesigned while things like favourite products and order status were added and prioritized.

Building the prototype

Another advantage of using Adobe XD was that building the prototype from the wireframe artboards was super easy so I was able to simulate the app functionality pretty well. Beside the main purpose of testing with users, I also used the prototype to communicate the design to the stakeholders, visual designer and developers.


Testing with users

Armed with the prototype, I went on and tested the design with users. And since the budget was limited, I chose to conduct several guerilla usability testing sessions inside a local anticafe, rewarding the people by paying for an hour of their time. (anticafes charge people based on the time they spend inside).

So, using the Adobe XD mobile app installed on my mobile phone, I had people going through a set of tasks I created prior to going out. The list included tasks like “Choose a product and mark it as a favorite”, “Add 4 custom toppings to a pizza of your choice” or “Add a new address in your user profile”.

I had a total of 12 tests which actually took me 3 separate sessions, as I made iterations of the design once I found things that did not work as well as I expected. For example, I had to reorganise the profile menu links several times until it got to the current version or show an order history summary in order for them to be useful for the users.

Visual design

I was mentioning at the beginning that we had a visual designer involved in the project, so once the final iterations to the wireframes were made, he was able to work on the design. We collaborated closely throughout the process, making decisions and answering questions whenever needed.

In the end, the visual design itself went through several iterations, mostly coming from the client, which insisted in maintaining a few elements from the previous version of the app. Below are some of the resulting visuals.

Want to get in touch?

Email me at david.teodorescu@gmail.com
or call me on +40.720.003.043

Next case studyBack to home