Crunchies Online

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

UI/UXCodingNext.js

[ TIMELINE ]2024

[ ROLE SCOPE ]Lead

[ SERVICES ]4 Tracks

[ STATUS ]Production

LIVE EMBEDLIVE

crunchiesonline.com

Fetching crunchiesonline.com...

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.

Strategic Goals.

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

Engineering Process.

Problem Discovery[PHASE 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.

Friction Mapping[PHASE 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.

Solution Direction[PHASE 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.

Build and Rollout[PHASE 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.

DELIVERABLES & METRICS

Measurable Outcomes.

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.

"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."

← PREVIOUS CASE STUDY

7Star Unisex Beauty Palace7Star Unisex Beauty Palace

NEXT CASE STUDY →

MerphilsMerphils

More Work.

Explore the rest of the archive.

Kadric Ltd

B2BIndustrialBrochure Site

The Iroko Circle

EditorialCommunityPublishing