UX / UI Design & Development · Case Study
Rock & Bloom
Coffee App
Order ahead. Skip the form.
View live site
UX / UI Design & Development · Case Study
Order ahead. Skip the form.
View live siteThe Project
Rock & Bloom runs an espresso bar for clients and team members ahead of meetings at the office. Orders used to come in through a Google Form — slow to fill out and disconnected from whichever room people were actually meeting in. I designed and built a web app that lets a whole group order together from one shared cart, styled to match the agency's brand identity exactly.
The front end was designed and built in Framer using React and TypeScript, while Make.com handles everything behind the scenes — routing every submitted order straight into the team's Slack channel with no manual steps required.
User Flow
On opening the app, the main menu prompts the user to choose their meeting location — Lounge, Nintendo Room, or Small Room, configurable in RoomStorage.tsx. This locks in the location for the entire group.
Users browse the menu and tap the plus (+) button on any drink to open a customization page for temperature, milk, syrups, and special notes — built in CustomizeForm.tsx and TeaCustomizeForm.tsx.
Drinks are added to a shared group cart, so multiple people can add their own orders without re-selecting the room each time. Handled in GroupCart.tsx.
Clicking Submit Order sends the data to Make, clears the cart, resets the room choice, and shows a success screen confirming the order is on its way.
How Make.com Does the Work
Make.com connects the Framer front end directly to Slack — no custom backend required.
Make provides a unique webhook URL. The moment a user clicks Submit Order in Framer, the app instantly sends the order details to that link.
Framer does the heavy lifting — formatting every customized drink, the total drink count, and the selected room into one clean text block (slackText).
Make instantly catches the package and posts it directly into the Slack channel using a clean, consistent message template.
Once the message posts to Slack, Make.com gives Framer a digital thumbs up — a success handshake — so the site knows it's safe to show the client the success overlay.
First-Time Activation Note
The very first time this system is deployed, a quick test order must be run to "redetermine" the data structure in Make. This lets Make map the new layout elements cleanly into the Slack module. Once that initial test succeeds and the Make scenario is toggled on, the connection to Slack runs completely automatically in the background for every future order — no redetermining or manual triggering ever needed again.
See it live