FOOD ORDERING CONSUMER FACING WEB DESIGN

hyperflyer

HYPERFLYER MAIN IMAGE.png

OVERVIEW

FOOD DELIVERY AND ORDERING WEBSITE

ROLE

LEAD PRODUCT DESIGNER

TEAM

HEAD EXPERIENCE DESIGNER, PRODUCT DESIGNERS, DESIGN INTERNS

TOOLS

FIGMA

DURATION

4 MONTHS
PART-TIME CONTRACT

background

001

ABOUT HYPERFLYER

Hyperflyer is an ordering service directly connecting businesses to their customers without crazy service fees. The company aims to create a stronger sense of connection within communities that is lost with other 3rd party competitors. 

HYPERFLYER LANDING PAGE .png

THE TASK

Currently, the website's main feature is to search restaurants and order food. The design team's goal was to redesign the consumer website to further drive home the mission of creating connections in communities through immersive story telling. 

user research

002

PERSONAS

Before any design work was done, the team each created persona's by stepping into the shoes of the targeted audiences. We broke up the users into 3 potential groups: gen Z, millennials, non-tech savy. While the focus was to aim the product towards younger users, the pandemic has caused older individuals to utilize food ordering apps, and we needed to make sure that our product was inclusive for users of all ages. 

GEN Z

GEN Z.png

MILLENNIAL 

MILLENNIAL.png
NON TECH SAVY.png

NON-TECH SAVY

AFFINITY MAPPING

After gaining insight from researching the target audience, we all completed market analysis of the existing food ordering apps on the market. We individually created themes and features for the proposed product and came together to combine and flush out our initial ideas.

HF Affinity mapping.png

ideation + design

003

LO-FI WIREFRAMES 

We created 6 different sections for the landing page. The first 3 sections further explains the company and mission of Hyperflyer: it's overall purpose, the ordering food aspect, and the social and community importance. The last 3 sections explain how the product works and provides the user with additional information and allows them to sign up for updates.

1. Main Value Proposition
2. The Product Value Proposition
3. The Social Value Proposition
4. How it works
5. Contact us 
6. Footer Information

HF LOFI.png

DISCOVERY

I focused on the discovery portion of the landing page, while the other designer focused on the social validation section. I created user flow's and lo-fi wireframes of how users would search and discover restaurants, create an account, personalize their account and suggest favorite local business to be available on Hyperflyer.

HF DISCOVERY.png

redesign

004

A SHIFT IN DIRECTION

The company decided to make a change in direction for the consumer facing website. It's main purpose would be to function as a 'blog' style site, that allows users to learn about the company and discover restaurants. The ordering feature for the site could not be implemented until further funding was obtained.

VISUAL DESIGN

The branding behind Hyperflyer is a retro 90s theme. We played off that concept by incorparting pop art elements. Bright colors, large photos and typography.

HF HI-FI WIREFRAME.png

final design

005

HI-FI WIREFRAME

The final design for the consumer site is an immersive story telling experience that utilizes motion, large typography and imagery. All of these elements were designed to keep the user engaged and continue scrolling to learn more about Hyperflyer and the restaurants it supports. 

NH VISUAL UPDATES1.png
NH VISUAL UPDATES2.png
NH VISUAL UPDATES3.png
NH VISUAL UPDATES4.png
NH VISUAL UPDATES5.png
NH VISUAL UPDATES6.png
NH VISUAL UPDATES7.png

WHAT'S NEXT

Unfortunately due to lack of funding, Hyperflyer has put a halt on the design efforts that we developed. The company's main focus is to set up businesses and restaurants within their system and have a simple feature for customers to shop from them for discounted rates.

Hopefully in the future, the company will grow and gain funding to be able to implement the above ideas.