Sugar and Spice

A web application for a restaurant which handles online food orders and table reservation.

Role and Responsibilities:

UI-UX Designer, Visual Designer

As a UI/UX designer and web developer, collaborated with a restaurant owner to redesign the website, integrating online ordering and payment features. Reduced customer costs by 30% by transitioning from third-party platforms to an in-house solution. Utilized user-centered design methodologies to enhance user experience and optimize business growth.

Research and Analysis

  • Primary research
  • User Interviews
  • Competitor Analysis
  • User Persona
  • Empathy map
  • Task Flow Diagram

Design Deliverables

  • Wireframes
  • Mock-ups
  • Design System
  • Component Library
  • Clickable Prototype
  • Design Hand-off

Tools

  • Figma
  • FigJam
  • Wireframe.cc
  • Zeplin

Problem Statement:

Restaurant owner wanted to increase their sales and gave their customer facility to order the food online direct from their website. Also they wanted to streamline their food deliveries and pick-up service. They wanted to increase their profit margin by avoiding use of third party apps and hence able to deliver food to their customers at lower price.

Solution

  • We have introduced a new system handle to all the issues together.
  • An online food ordering system featured directly on restaurant website so that customers do not need to use any app for the food order.
  • This system also manages food delivery and pick-ups.
  • This way owner can reduce the delivery cost and customers can also enjoy their favorit food at lower price hence order frequently and more items which increases the sales and profit margin.
Online food order

User Research

Primary User Research

By primary user research, I systematically gathered all the information from restaurant owner. I also took personal interviews of system users like owner and customer. I have  defined pain points of both the types of users.

Use Cases and Process Flow

Use cases

To implement solution, I have defined three use case scenarios.

  1. Online order system
  2. Food delivery system
  3. Table reservation system

User flow

Conducted detailed process analysis, created different process flows for different systems like online order, table reservation and self pick-up systems.

Design and Prototyping

Web redesign and Branding

Enhanced the website’s landing page with a fresh design, incorporating new branding colors that resonated with the restaurant’s identity.

User flow refinement

Implemented user-centric design principles to simplify the menu bar, ensuring easy access to the online ordering feature.

Responsive Design

Ensured a consistent experience across devices by applying responsive design techniques, allowing customers to place orders seamlessly on mobile devices and desktops.

Visual Enhancement

Introduced captivating graphical elements using Adobe XD software, enhancing the visual appeal and engaging users throughout the ordering process.

Figma Prototyping

Leveraged Figma for comprehensive design prototyping, enabling rapid iteration and seamless visualization of user interaction flows.

WooCommerce Integration:

Developed a functional web application using WordPress and WooCommerce, enabling secure online orders and seamless payment processing.

Performance Optimization

Utilized optimization techniques to ensure fast loading times and smooth user interactions, enhancing overall user satisfaction.

Testing and Iteration

Conducted thorough testing across browsers and devices, addressing user feedback and refining the interface for optimal usability.

Result

The redesigned website successfully streamlined the user journey and introduced a cost-effective online ordering platform. By bringing the process in-house, the restaurant reduced customer costs by 30%, fostering greater customer loyalty and business growth.