Merchant Back Office

Company

Project

Overview

Back office tools designed for seamless setup and management of merchants' online ordering platforms.

Role & Responsibilities

Senior Product Designer
User Research
Prototyping & Testing
Product Direction
Interaction Design
Interface Design

Prelude 01

Some Background

This is a two-part case study on restaurant online ordering. In Part 1 of the case study, we delve into the modularity and functions of the online ordering system.

In Part 2, come along the design journey for a merchant-centric online ordering management system.

Foundation 02

Information Architecture

Reimagined information architecture to streamline merchant onboarding and store management.

Brand Color

Developed a one-color palette system for easy, custom-branded website creation.

Transparency overlays enabled the one-color palette system to adapt the colors for various applications.

Primary (#5E6C84)
Hover (Primary + 20% #FFFFFF)
Pressed (Primary + 20% #000000)
Border (Primary + 40% #FFFFFF)
Background (Primary + 60% #FFFFFF)

Sample Colors

Product Direction Analysis

Employed a SWOT analysis to guide the content management system’s development.

Ideations

Informed by SWOT insights, the two CMS concepts are explored through detailed sketches.

After careful consideration, the simple CMS was chosen because it caters better to the needs of small and mid-size restaurants.

Sophisticated CMS — Website builder w/drag and drop interface

Simple CMS — Predetermined framework w/form inputs, widgets and preview panel

Designs 03

Initialize Online Store

Onboarding

Task-oriented onboarding guides the merchants through the tedious process of setting up their digital storefronts.

Setup Wizard

The setup wizard is presented in a focused popup format. It features a tri-column layout for simplified navigation and settings configuration.

Brand Setup

The one-color palette system and other essential elements simplified the personalization process for merchants.

Menu Setup

Seamless integration with Re:Tech’s POS allows for effortless menu setup in the online store.

Fulfillment Setup

By offering customizable automation rules for efficient order processing, we can cater to the diverse merchant needs.

Fulfillment Modules

Store Hours Settings

Flexible store hours settings empower merchants to tailor online and physical store timings.

Holiday Hours Settings

Annual holiday hours accommodate merchants’ needs in planning for recurring or one-time events.

Quote Time Rules

Dynamic calculation of order preparation times enhances operational efficiency.

Base Time + (Order Cost / X) * Y

Where:

X = Money spent
Y = Time added

Last Call Rules

Provide merchants the flexibility to set cut-off times for online orders, optimizing operations without customized store hours.

Order accept Rules

Allow merchants to tailor their establishment's operational style.

Notifications Setup

Customizable notification settings keep restaurant staff and customers promptly updated on order progress and status updates.

Payment Setup

Configure the in-store payment options, set default tipping percentages, and connect the preferred payment gateway.

More Designs 04

Store Management

Homepage

Post-onboarding, merchants enter a comprehensive dashboard, offering a snapshot of their store's sales, operational status, and quick availability management.