Port of Peri Peri

Context

In the summer of 2019 I was hired as a manager at a restaurant called the Port of Peri Peri in Frisco, Texas. I was managing the restaurant, so I saw the ordering funnel from the counter: which regulars ordered the same thing every week, where phone orders went wrong, and how often a queue at the register turned into a lost sale.

My co-manager, a software engineer between jobs, had been commissioned by the owner of the business to develop an online ordering app for the restaurant. I came in as an early UX consultant, doing some preliminary research and competitive analysis, delivering low-fidelity wireframes, and designing a high-fidelity prototype to illustrate the look and general flow of the app.

The app aimed to serve as a customer portal, allowing for rewards account management, online ordering, payment management using the internal Apple Pay or Google Wallet API, gift card management, and more.

Research

I studied the apps people already had: DoorDash, Grubhub, UberEats, even Starbucks. They share two things.

The first commonality I noticed was a masthead along the top, within which branding, primary account access, and settings access all remained consistently available. I noted that this same masthead could be used to contain internal navigation elements, separate from the main navigation used between primary screens. This is visible on the "Order" screen, in which the masthead contains the secondary navigation of the screen for the menu.

The fixed menu along the bottom was another commonality I observed, a design choice pushed primarily by iOS influence. This became the primary navigation between screens. The client asked for the logo to serve as the home icon.

Decisions

The "front page" of the app follows similar principles to a number of restaurant apps. As the Port of Peri Peri was deploying their gift card system alongside the app, the service was given top billing in the information hierarchy.

The "Order Again" selection has very obvious functionality, as the restaurant has a number of regular customers who rarely deviate from ordering the same thing. In my prototype the "New Order" action was a small, compact plus icon that opened the checkout cart and pulled up the menu to make selections from.

Insofar as aesthetic, I followed the internal style guide provided by the company, and maintained clean lines and white space to create a bright, cheerful look when paired with the signature Port of Peri Peri red.

Prototype

The high-fidelity prototype below illustrates the look and the general flow: the front page with gift cards on top, the order screen with its secondary navigation in the masthead, and the rewards account.

What shipped

Later in the development cycle, the "Featured Menu Items" were cycled to a horizontally scrolling block on the front page, and the "New Order" control shipped as a labelled button rather than the compact icon.

Further on, delivery ordering was completely removed from the app. Instead DoorDash came to an agreement to allow users to make their selections in the Port of Peri Peri app, but complete delivery orders within their own payment portal. Before that, however, we were still advertising for users to download and install the DoorDash app as a companion to our own.

The restaurant, and the ordering it runs on, are at myperiperi.com.