Web Design · Toronto, ON
Northbeam Coffee Roasters — One-Page Site
A single-page site for an independent roastery that needs foot traffic, wholesale enquiries and online bean orders from one short scroll.
The business problem
Small roasteries usually live on Instagram. There is nowhere to explain the roast programme, publish hours a customer can trust, or capture a wholesale café enquiry, so those enquiries land in DMs and get lost.
Target customer
Local coffee drinkers within a few kilometres of the shop, plus café and office managers looking for a wholesale bean supplier.
Before / after reasoning
The “before” column describes the typical situation for this kind of business. The “after” column describes the design decisions made in this concept and why.
Typical before
- Hours and address only available on a third-party listing
- Wholesale enquiries arriving through social DMs with no record
- No way to show the roast profiles or the story behind the beans
In this concept
- Hours, address and directions visible above the fold
- One wholesale enquiry form that lands in the ProHub360 CRM
- Roast range presented as scannable cards instead of a caption
Mobile and desktop
Real screenshots of the published concept page at 1280px and 390px wide.
Lead-generation strategy
- Primary action is a wholesale enquiry form, not a generic contact page
- Secondary action is directions/visit for walk-in traffic
- Local SEO signals: city, address and opening hours in structured page content
- Email capture for a roast-drop list so repeat customers can be reached again
Features built
- One-page responsive layout with sticky navigation
- Roast/product cards
- Enquiry form wired to the CRM lead pipeline
- Hours, location and directions block
- Review and story sections
- Metadata, canonical tag and social preview tags
Performance and accessibility
93
Performance
96
Accessibility
100
Best practices
100
SEO
Measured 5 September 2026. Google Lighthouse 12, desktop preset, run against the live published concept page on this site. Scores vary with network conditions and are re-checked when a concept changes.
What is a concept versus a real result
Concept — invented for demonstration
- The business name, logo, photography, staff and reviews are invented for demonstration.
- Every number shown inside the demo page (ratings, job counts, prices) is illustrative sample content.
- No client hired us to build this page — it was designed in-house to show a design direction.
Real — verifiable on this page
- The page itself is real, published and fully responsive — you are viewing the actual code, not a mockup image.
- The performance, accessibility, best-practices and SEO scores are real Lighthouse measurements of that live page.
- The layout, booking/quote flow and lead capture pattern are what we build on paid client projects.
ProHub360 does not publish client conversion figures or revenue claims from these concepts. When we complete client projects and receive permission to share the results, they will be published separately and clearly labelled as client work.