01
A menu organised by context
Categories help visitors quickly find the kind of item they are looking for.
Três Grãos
An ordering experience that balances atmosphere and simplicity.
Três Grãos shows how a menu can become an interactive experience, allowing people to explore products and build a bag without the complexity of a real checkout.
More than the finished interface, this tour looks at the decisions that shaped the experience.
The challenge
Ordering interfaces need to balance discovery, selection and bag control without interrupting the journey through the menu.
The objective
The experience brings visitors closer to the products and gives them control over a selection, without suggesting that a real purchase is taking place.
- Make products easy to discover
- Allow filtering by category
- Offer immediate feedback
- Keep the bag easy to understand
- Adapt the experience for mobile
- Make the demo's boundaries clear
The user journey
People keep the context of the menu while turning interest into a selection they can review.
Explore the menu
Filter products
Add to bag
Adjust quantities
Review the order
Confirm the simulation
Key decisions
The interface balances an editorial atmosphere with direct controls for every action.
02
An accessible bag while browsing
Visitors can review and change their selection without losing the context of the menu.
03
Feedback at every interaction
Adding, removing or changing a quantity produces an immediate visual response.
04
Planned states
The experience accounts for an empty bag, removing items, clearing it completely and a simulated confirmation.
What happens behind the interface
The interface keeps the bag in sync while the visitor browses. Quantities, items and the summary update immediately after every action.
A filterable menu and mobile-first quick ordering.
Accessibility and experience
Filters, quantity controls and messages are organised to make every action obvious and easy to resume.
- Controls with understandable names
- Keyboard navigation
- A visible focus state
- An updated count and summary
- A clear empty state
- Feedback after every action
Responsive design
On smaller screens, the menu and bag stack into one column with comfortable touch targets. On wide screens, the bag follows the journey without competing with the menu.
What this demonstrates
The concept shows how a commerce experience can stay simple even when it involves several small decisions.
- Bag logic
- Consistent interaction control
- A considered empty state
- Subtle microinteractions
- Mobile adaptation
- No payment or real order
The standard behind this project
The demo follows principles that make a digital experience more useful, trustworthy and comfortable to use.
- A clear experience
- Works across screen sizes
- Keyboard navigation
- Feedback after actions
- Localised content
- Predictable behaviour
- No unnecessary complexity
- Clear boundaries for the demo
Technical details
Implementation in focus
- The menu and bag share one local source of truth so items, quantities and the summary stay consistent.
- Categories only change which products are shown; they do not discard an existing selection.
- Removing an item, clearing the bag and the simulated confirmation each have their own state and feedback message.
- Each language is kept in dedicated content files, with equivalent routes for the demo.
What this demo does not do
The demo explores the ordering decision without simulating an operation that does not exist.
- Does not place orders
- Does not include checkout
- Does not take payments
- Does not request an address
- Does not send or store data
View the project
Explore the menu, filter products and build a demo bag with no checkout or real order.
View projectNext project
Next, see how a few short choices can produce a clear recommendation for a professional services context.
Explore next project: Northbound