Skip to main content

Hop Hub – Hop Discovery & Delivery App

A mobile app concept for discovering hop varieties, finding nearby shops, ordering hops and tracking delivery in one connected flow.

Tools:

Tools:

Figma

Category:

Category:

UI/UX Design

Hop Hub app screens mockup showing onboarding, login, shop browsing, and delivery tracking screens on a green gradient background
Hop Hub login and registration screens featuring hop imagery and the Hop Hub logo
Hop Hub login and registration screens featuring hop imagery and the Hop Hub logo
Hop Hub login and registration screens featuring hop imagery and the Hop Hub logo

Overview

A clearer way to discover and order hops

Hop Hub brings shop discovery, hop browsing, ordering and delivery tracking into one mobile experience, developed through research, user flows, wireframes, prototyping, usability testing and accessibility checks.

Problem

Discovering hop varieties, finding nearby shops and tracking an order can involve separate steps and disconnected information. The challenge was to bring that journey into one clear mobile flow.

Solution

A map-led discovery flow connects nearby shops with category and product browsing, while favourites, order history and delivery tracking support the journey after purchase. Usability testing and accessibility checks informed targeted refinements.

Onboarding sequence showing the Hop Hub welcome screen, a delivery area map and a fresh hop cone photo before entering the app.
Onboarding sequence showing the Hop Hub welcome screen, a delivery area map and a fresh hop cone photo before entering the app.
Map screens for browsing nearby hop shops, viewing a shop's location and following an order's delivery route and ETA.
Map screens for browsing nearby hop shops, viewing a shop's location and following an order's delivery route and ETA.
Shop list and category browsing screens showing the Hop Hub shop directory and the Hop Heaven shop page with its hop category listings.
Shop list and category browsing screens showing the Hop Hub shop directory and the Hop Heaven shop page with its hop category listings.
Product list and detail screens for American Hops, showing the Amarillo product page with tasting notes, rating and an add to bag confirmation.
Product list and detail screens for American Hops, showing the Amarillo product page with tasting notes, rating and an add to bag confirmation.
Favorites, order history and profile screens showing saved shops, past product purchases and the user's account details.
Favorites, order history and profile screens showing saved shops, past product purchases and the user's account details.
Before and after comparison of the add to bag button, changed from a light orange fill to a darker green for stronger colour contrast.
Before and after comparison of the add to bag button, changed from a light orange fill to a darker green for stronger colour contrast.
Before and after comparison of the American Hops product list, replacing add to bag buttons with simple arrow chevrons after a usability study.
Before and after comparison of the American Hops product list, replacing add to bag buttons with simple arrow chevrons after a usability study.
Full case study poster for Hop Hub covering market research, user personas, flow diagrams, wireframes, high fidelity screens and an accessibility check.
Full case study poster for Hop Hub covering market research, user personas, flow diagrams, wireframes, high fidelity screens and an accessibility check.

Contact

Good design starts with a conversation.

Whether it’s a visual identity, an editorial piece or a digital experience, I’d love to hear about what you’re working on.

Contact

Good design starts with a conversation.

Whether it’s a visual identity, an editorial piece or a digital experience, I’d love to hear about what you’re working on.