Online Ordering Pro

The only online ordering service that showcases you and your brand.

At a Glance

My Role: Project Lead
Platform: Web Application
Type: Online Ordering Program
Date: Dec 2016 - Mar 2017
Client: Ordereze
Team Members Referenced:

  • My project teammate
  • The company's Director of Operations
  • The company's CTO
  • The company's President / CEO
  • The company's international development team
Highlights:

SURVEY

COMPETITION ANALYSIS

USER JOURNEY

INFO ARCHITECTURE

WIREFRAMING

SKETCHING

PERSONA

PROTOTYPING

The Challenge

During the winter of 2016-2017, Ordereze was looking to completely overhaul its online ordering platform. The challenge was to create a dual-prong experience: an online ordering environment that could be enjoyed by the patrons ordering food, as well as the restaurateurs operating the back-end.  

While Ordereze knew they wanted a modernized version of their current offering, their primary goal was clear: provide a seamless experience that could accommodate the branding of any restaurant possible.

The Solution

Research

After discussing vital goals, analyzing the competitive landscape, and receiving feedback from ideal users, we constructed the application's information architecture: a natural progression predicting needs and desires at every step. 

Construct

Through rigorous trial and error we created the perfect structural format for the platform: a highly accessible landscape with minimal navigational requirements.

Design

The ultimate design decisions were uniformly agreed upon: a modern, yet welcoming experience that could accommodate restaurant-specific branding via customizable typefaces and color selections. 

The Results

Presentation & Development

After we presented our final proposal to all necessary company personnel it was clear they loved everything they saw. The President's rarely-seen excitement made proved that we provided everything they were looking for.  

Once the international dev team was ready, the CTO flew out to Greece help them launch their development efforts. After months of hard work, a prototype of the application was upon us in the form of a company-wide presentation. Seeing our ideas come to life in the form of a fully functioning program was outstanding. The highlight, was the reaction of our coworkers during our presentation — they were thrilled with our final product and of our understanding of their clients' methods and needs. 

Personal Takeaway

The goal of this application was very humbling. Online Ordering Pro has exceptional potential to change the lives of thousands of small-business owners across North America, while also potentially revolutionizing the experience of millions of patrons. Nothing makes a UX venture more rewarding than enjoying the effect your project has on others.  

Company Results

After generating a huge buzz around the incoming product, Online Ordering Pro was released mid-July. The products popularity has quickly begun growing into the company's flagship feature. You can learn more about Online Ordering Pro on Ordereze's website.

Full Case Study: The Process

1. Research

Discover

Focus Group

Competition Analysis

Survey

Empathize

Persona

User Journey

Define

Features

Info Archit

2. Construct

Ideate

Sketch

Wireframing

Validate

Usability Testing

3. Design

Stylize

Customization

Finalize

Hi-Fi Prototypes

RESEARCH:
DISCOVER

Internal Focus Group

Purpose:

Before beginning anything else, my teammate and I held a kick-off focus group with heads of the company: the DOO, CTO, and CEO. The goal was to lead an in-depth discussion regarding the current online ordering system's strengths & weaknesses, our available access to development department members, as well as any specific expectations they had of the new platform. After a couple of hours of constructive feedback, we got what we needed.  

Insight:

  • The Current Disaster: Whether assaulting patrons with endless screen-switching or making menu-editing nearly impossible for restaurateurs, the current online ordering software exuded convolution.  
  • Dev Team Gone Missing: With the international development team's plate full for the next quarter or more, any feedback on the platform's developmental limitations would be scarce. 
  • Expecting it all: The President was determined for us not to come an inch short of his "pie in the sky" anticipations. The pressure was on.

Competitive Analysis

Purpose:

To better understand the patron-facing platform was up against, we set out to understand our competition. From similar companies like Eat24 to specific restaurant chains like Panera Bread, we dove into the best online ordering experiences in order to beat them at their own game.

Insight:

After aggregating key features and aspects, we generated a competitor analysis matrix to fully comprehend the attractions and flaws of each. By re-configuring this data into a visual structure, we could better digest the competitors' strengths and flaws. This information would prove to be vital later on in the research phase.

OO Competition Chart 1.png
OO Comp Keynote.001.jpeg

Survey

Purpose:

The purpose of our survey was to better understand the expectations held by the current customer base regarding the application's restaurateur-facing side. We carefully structured the survey's questioning to ensure a lack of bias, as well as a prioritization of time-sensitivity. After several months of email marketing exposure, I was able to launch a campaign that was met with a 42.7% open rate and 9.3% click rate. Our survey email campaign gained insight into the following:  

  • Impressions on the company's current services.  
  • Expectations for future offerings from the company. 
  • The potential interest in enhanced online ordering. 
  • Online ordering feature preference. 
  • Preferred method of order/notification reception.  

Insight:

Based on the hundreds of survey responses, we learned the follow:

  • Ordereze's current customers were thrilled with the company's customer service, yet found the company's catalog of services and service effectiveness to be underwhelming. 
  • A new online ordering platform along with all proposed traits (e.g. "ease of use") were highly anticipated. 
  • Regarding notification types, POS-integration dominated (despite a respondent insisting on "interpretive dance, singing telegram, or mime")
  • Shockingly, the actual existence of a current online ordering system came as a surprise to many... Generating buzz for their current application must have been a challenge.

"If the online ordering system could somehow integrate with our POS system, that would be great"
Danielle, Manager at Gadient Hospitality Group

"I'm very nervous to proceed with online ordering, because our staff may not be able to handle this responsibility"

Jane, Manager at Gennaro's Eatery

RESEARCH:
EMPATHIZE

Personas

Purpose:

The feedback we received from the survey allowed us to better empathize with our customers, providing a vantage point for understanding the admin users. That being said, more insight was needed to empathize with the potential end users.

We utilized previously unused end user data collected from the company's CRM - this allowed us to construct a User Persona to represent the average end user. 

Insights:

By aggregating and organizing the survey results we were able to come to the following conclusion: speed and simplicity was of the essence. 

OO Persona Corrected.001.jpeg

User Journey

Purpose:

We then created a user journey map to communicate an understanding of our patron user's stages of ordering. This enabled us to better plan the UI by understanding the user's chronology of thought & action.

While creating the story, I made sure to include examples of forgetfulness. It's essential to instill a sense of realism when dealing with the behaviors of real people.

Insights:

The story was eye-opening: the need for quick-access functionality stood center-stage. 

OO User Journey.png

RESEARCH:
DEFINE

Feature Listing

Utilizing the research's results, it was time to understand what our application needed to accomplish. We took to the white boards and zoned in on both sides: the Patron side and the Restaurateur side.

For the sake of not bombarding the dev team with an extensive laundry list, we decided to divide the features based on prioritization.   

Patron End qualities: 

  • Anticipation: their thoughts & actions to decrease friction
  • Limit steps: Decrease the time it takes to complete an order
  • Customization: Anything a patron could reasonable request in-house should be possible without "additional information" long-text input.  
  • Warm: Warm & welcoming environment
  • Modern: Visually modern and appealing UI

Restaurateur End qualities:

  • Cross-platform notifications: incorporate an advanced alert system applicable to everything from email alerts to POS-integration. 
  • Simplicity: prioritize ease-of-use to ensure a frustration-free experience for all employees. 

Information Architecture

The final step before diving into any UI specifics was the information architecture. This step was possibly the quickest of all.

Notice how the potential inclusion of quick-access capabilities enabled some IA complexities. 

Construct

CONSTRUCT:
IDEATE

Sketching

Time to bunker down and map out the entire UI of both the patron and restaurateur sides. 

To do so, we were granted sole access to Customer Support's sacred training room (a rare occurrence). Using a recipe of 3 computers, 2 whiteboards, a projector, and days-worth of work, we eventually drew up an outline of what we considered to be the perfect interfaces for the company's online ordering platform. 

Wireframing

After completing the sketches, I took to Balsamiq, the company's only in-house wire framing software, to craft the official versions. 

Balsamiq Alt.jpeg

CONSTRUCT:
VALIDATE

In-House Usability Testing

Purpose:

Time to test out what we have so far.
To validate UI design within budgetary restraints, we conducted laminated paper prototyping with Customer Success members. Lamination ensured quick reusability.

Insight:

Quick access was highlighted more so than ever.
Whether unfulfilling edit capabilities within the side-cart, lack of accessibility within the checkout process, or the non-clickable map interface on the location pop-up, the natural tendencies of in-house members were eye opening.

DESIGN:
STYLIZE

Custom Styling

The pre-project decision to allow typography, coloring, text content, and imagery to be dependent on the restaurant-specific branding, this design phase of this project very simple. 

For restaurant-specific branding capabilities, we stuck with functionality identical to other in-house software. 

OEZ UI 3.jpeg

DESIGN:
FINALIZE

Hi-Fi Mockups

Take a look at the final creations! For information regarding final presentations, results, and more just head to the Results section

Let's Talk

Contact

15 All Points Dr., Holbrook, NY 11741
+1 (631) 338-5549
AlexBennettUX@gmail.com
AlexThomasBennett26@gmail.com
Linkedin.com/in/AlexBennettUX

Copyright © 2017 Alex Bennett UX

SIMBLAWebsite Builder