HO

Hans Oheneba

Bubble Bliss Ordering Platform

I upgraded Bubble Bliss from an older ordering flow that did not scale well on larger screens into a more responsive, more intuitive ordering experience. The update focused on improving navigation, making cart and checkout actions clearer, and reducing the number of steps customers needed to complete an order. I also built an admin side for managing orders and products, and integrated SMS notifications through Hubtel plus payments for smoother order confirmation.

Tech Stack

Tailwind • TypeScript • Flask • MySQL • Hubtel (SMS) • Payments

TypeScript

TypeScript

Tailwind CSS

Tailwind CSS

Python (Flask)

Python (Flask)

MySQL

MySQL

Hubtel (SMS & Payments)

Hubtel (SMS & Payments)

Project Overview

The goal was to make ordering feel effortless on mobile and desktop, while giving the business a reliable admin workflow for operations.

The previous ordering flow worked on smaller screens but became frustrating on larger devices. The upgraded version introduced a layout that scaled cleanly, improved spacing and hierarchy, and made the most important actions obvious: add to cart, edit cart, and checkout.

I redesigned the ordering journey so customers could browse, customize items, and confirm delivery or pickup without getting lost. I also added structured loading states so the interface stayed stable while menu data and cart state were updating.

On the business side, I built an admin dashboard to manage orders and products. Orders could be tracked from creation to fulfillment, and the team could update product availability and pricing without touching code.

Customer goal

Order fast

Clear cart and checkout path

Business goal

Fulfill smoothly

Admin view for operations

Notifications

Hubtel SMS

Order received and updates

Payments

Integrated

Reduced cash friction

What changed

  • • Responsive layout that worked better on larger screens
  • • Clearer ordering steps with stronger visual hierarchy
  • • Better cart usability with quick edits and totals always visible
  • • More structured checkout with delivery or pickup selection
  • • Loading states to reduce layout shift and improve perceived speed

Updated Ordering Flow

The flow was rebuilt to reduce friction, keep users oriented, and make checkout feel like a simple two-step finish.

1

Browse and search the menu

Customers could scan categories, use search, and find items quickly without long scrolling. The layout stayed readable on both mobile and desktop.

2

Customize items with realistic options

Customers could choose size, sweetness level, and toppings for drinks, and add notes where needed. This matched how people ordered in real life and reduced clarification calls.

3

Review cart with fast edits

Cart changes were quick and obvious: increment, decrement, and remove actions were near the item, and totals stayed visible to reduce surprises at checkout.

4

Checkout with delivery or pickup

Checkout captured contact details and a delivery method. For delivery, the user could use their location, search a landmark, and add optional directions to help riders.

5

Pay and confirm

Payments were integrated so confirmations happened immediately after a successful transaction. This reduced failed orders and made the process more consistent.

6

SMS notification via Hubtel

After checkout, the system sent SMS updates to confirm the order and keep the customer informed. This improved trust and reduced support messages.

Admin Workflow

The admin side focused on day-to-day operations: order handling, status updates, and product management.

1

Order intake

Incoming orders appeared in the dashboard with customer details, items, notes, delivery method, and payment state, so staff could confirm quickly.

2

Order status updates

Orders were updated through stages like received, preparing, out for delivery, and completed. This kept fulfillment organized and helped the team coordinate.

3

Product management

Products could be added and edited, prices updated, and items marked as available or unavailable, so the menu stayed accurate without developer involvement.

4

Operational visibility

The dashboard supported quick checks on what was pending, what was in progress, and what had been completed, which reduced missed orders during busy periods.

Screenshots

Add your old flow vs new flow shots, plus key UI screens like cart, customization, checkout, and admin.

Old Bubble Bliss ordering flow (not optimized for larger screens)

Old flow: ordering experience before the responsive upgrade.

Replace image paths with your actual screenshots in /public.

New Bubble Bliss ordering flow with improved layout and navigation

New flow: responsive layout with clearer ordering steps and better usability.

Replace image paths with your actual screenshots in /public.

Cart panel showing items, quantity controls, and checkout CTA

Cart: quick edits (increment, decrement, remove) with a visible total and a single checkout CTA.

Replace image paths with your actual screenshots in /public.

Checkout screen showing delivery or pickup, contact details, and delivery location inputs

Checkout: delivery or pickup selection, contact details, and location capture with optional directions.

Replace image paths with your actual screenshots in /public.

Item customization screen for a drink with size, sugar level, and toppings

Item customization: size selection, sugar level, and toppings to match how real customers order.

Replace image paths with your actual screenshots in /public.

Admin dashboard showing orders and product management

Admin: order management plus products editing, pricing, and availability control.

Replace image paths with your actual screenshots in /public.

Architecture & Data Flow

I kept the ordering experience fast on the frontend while making the backend the source of truth for orders, products, payments, and notifications.

The frontend was built with TypeScript and Tailwind to keep the UI consistent and responsive. The backend API was built with Flask and connected to MySQL for durable storage.

Orders were written to the database and then used to drive both the admin dashboard and customer-facing status updates. SMS notifications were triggered through Hubtel to keep customers informed without relying on email delivery.

Loading states were used across key surfaces such as menu loading, cart updates, and checkout submission so users stayed oriented and the interface felt stable during network delays.

Data path

  1. 1Customer browsed menu and customized items
  2. 2Cart updates synced and totals recalculated
  3. 3Checkout captured delivery or pickup details
  4. 4Payment was processed and order was stored in MySQL
  5. 5Hubtel SMS was sent to confirm the order
  6. 6Admin dashboard displayed the order for fulfillment

Outcome & Impact

The redesign improved the ordering experience across device sizes, reduced confusion during checkout, and made cart actions easier to understand. On the operations side, the admin dashboard made it simpler to track incoming orders, update fulfillment status, and maintain the menu without delays. Combined with payments and Hubtel SMS confirmations, the system supported faster customer feedback and a smoother handoff between online ordering and real-world fulfillment.

Tip: Put images in /public/projects/bubble-bliss/ and update the screenshots array paths.