Sugar & Spice

As a UI/UX designer and web developer, collaborated with a restaurant owner to redesign the existing website introducing new features and enhanced functionalities.

I designed and developed a dynamic restaurant website using WordPress, incorporating a seamless table reservation system and an efficient online ordering system to enhance customer convenience. The website features an intuitive and visually appealing design, ensuring a user-friendly experience across all devices.

 

Role and Responsibilities

UI-UX Designer, Visual Designer

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

  • The table reservation system allows customers to book tables in advance, reducing wait times and optimizing restaurant management.
  • The online ordering system enables users to browse the menu, place orders, and make payments effortlessly.
  • Additionally, I optimized the site for SEO, speed, and responsiveness, ensuring smooth navigation and high performance.
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.