menu

Friends eating fries and pizza.Abstract. Grid of squares.

03

Ano Delivery

Client

Ano Delivery

Business Type

Online food ordering and delivery platform

Completed

2202

Status

Managed by client

In small-town Ellensburg, Washington, food delivery options were limited. Two college friends endeavored to fill that gap. They put together a simple one page website and provided a phone number for customers to text their order from any restaurant in the surrounding area. With their exceptional and reliable customer service, word-of-mouth fueled the growth of the business.

After several years of success, Ano Delivery was ready to expand. They reached out to a talented backend developer to build out a platform that would streamline their process, to make it easy for customers to place their order, restaurants to receive the order, and drivers to deliver the order.

That backend developer, in turn, reached out to me to create a design that was simple, cohesive, and user-friendly, and to implement it on the front end.

Grid of plus symbol.

Contributions

UI Design


Wireframing


Website Redesign


Front-end Development


HTML


CSS


Environment & Tools

    HTMLCSSBootstrapGithubAdobe XD

The Set Up

The environment was established by the backend developer. With many years of experience in the field, he worked with a language and a framework that would support the needs of the project and ensure stability.

Before implementing the design created in Adobe XD on the front end, I updated an outdated version of Bootstrap and cleaned up and restructured the existing HTML and CSS.

Original Structure

Although highly skilled in backend development, design and front-end development were not in the developers' wheelhouse. So, he structured the website with one goal in mind: make it work.

Screenshots of original website structure.

Style Guide

The color pallete was inspired by the company's logo. Typography and font styles were selected for readability.

Typeface

Screenshots of typeface.

Styles

Screenshots of font styles.

Colors

Screenshots of colors. Yellow, black, gray, and white.

Buttons

Screenshots of buttons.

Laying Down the UI

The user interface was designed for simplicity, so that a user may be able to quickly locate a restaurant, select their meal, and place an order. HTML and CSS were used to implement the new, visually appealing design that would entice users with images of food options.

Ano Delivery home page.Ano Delivery restaurant page.Ano Delivery cart page.

Designing for multiple users

The platform has three types of users: Customers, Restaurants, and Drivers. In addition to ensuring that customers are able to easily place an order, I designed a user interface for restaurant owners that enabled them to update their store information, and quickly view and manage all incoming orders.

Ano Delivery active orders page.
Ano Delivery edit restaurant section.
Screenshots of original website structure.

Contact

Let's create something together...