Crunchies Online

Rebuilt the ordering experience around speed, clarity, and delivery confidence.

UI/UXCodingNext.js

Project Visual

Crunchies Online

Project Overview.

I took the lead on this exciting project, where I completely redesigned the UI to make it more intuitive and visually appealing for users.

Using my skills in Next.js and Tailwind CSS, I built a responsive, fast-loading site that reflects my passion for performance optimization.

One of my favorite parts was integrating the Google Maps API—I added a feature that lets users pick their delivery location and find nearby Crunchies outlets with ease, enhancing the overall user experience.

Goals.

Make ordering and outlet discovery easier for first-time and returning customers.
Redesign the interface so the product feels clear, trustworthy, and fast on mobile.
Turn location selection into a core part of the journey instead of a point of friction.

From Idea To Launch.

A walkthrough of how the work moved from framing to execution.

Milestone 01Problem Discovery

Problem DiscoveryStep 01

Find the exact moments where ordering confidence drops.

The early framing centered on reducing confusion in the ordering flow, especially around delivery choices and outlet discovery.

Instead of treating the redesign as a visual refresh alone, the product direction focused on making the next action obvious at every step.

Milestone 02Friction Mapping

Friction MappingStep 02

Trace the decisions customers struggle to make mid-journey.

The UI was redesigned to create a more intuitive structure, clearer hierarchy, and stronger calls to action across key customer journeys.

Location-aware interactions were brought forward so users could choose delivery points and discover nearby Crunchies outlets with less effort.

Milestone 03Solution Direction

Solution DirectionStep 03

Rebuild the flow around simpler choices and clearer next steps.

The experience was refined around the moments where customers choose how to receive an order, where it should go, and what outlet makes sense for them.

That made the product feel less like a generic menu surface and more like a guided ordering journey that answers practical questions early.

Milestone 04Build and Rollout

Build and RolloutStep 04

Ship the faster experience and location-aware tools.

Next.js and Tailwind CSS provided the foundation for a responsive, performance-minded build that was easier to scale and maintain.

Google Maps integration connected interface decisions to a practical customer need, making delivery planning part of the product experience itself.

Results .

Delivered a cleaner ordering journey built around the decisions customers actually need to make.
Made delivery selection and nearby outlet discovery feel like natural parts of the product instead of hidden edge cases.
Created a faster, more modern digital experience that better matched the brand's ambition and operational needs.

Reflection.

The strongest e-commerce improvements usually come from removing uncertainty. Once customers know what to do next, conversion and trust become much easier to earn.

More Work.

Explore the rest of the archive.

The Bakistry

E-commerceFoodBrand

The Developer Marketing Book

MarketingPublishingNext.js