A free QR menu,
priced in two currencies
Visit website
The client
Ristario is a free QR menu for restaurants in Venezuela: prices in bolívares and dollars at the BCV rate, orders through WhatsApp, and everything edited from a phone.
Full ownership, by one person: the brand identity, UI system and visual assets, then the website built in Next.js and launched to production.
- Client
- Ristario
- Sector
- Restaurants · SaaS
- Scope
- Design & Development
- Role
- UX/UI Designer & FullStack Developer
- Stack
- NextJS · TypeScript · TailwindCSS · ReactJS
01The challenge01 / 06
Prices in Venezuela change every day, in two currencies. Restaurants needed a menu that keeps up: free, edited from a phone, read without an app, and easy to find on Google.
02Process02 / 06
From a restaurant's problem
to a live product
How the product's site was made end to end: the brand, the interface and the website, designed, built, tested and launched by one person.
- DiscoveryStart from the restaurantPrices that change daily in two currencies, printed menus out of date, and orders lost in chats.The client getsA brief built on the restaurants' real problems
- IdeationA page for every searchThe product pages, plus one page per city and per kind of business, so each search lands on its own page.The client getsSitemap and wireframes to review
- DesignA brand that feels localBrand identity, UI system and every visual asset designed in Figma: warm paper, one orange, Inter throughout.The client getsA clickable prototype, revised and signed off
- DevelopmentDesign into codeBuilt with Next.js, TypeScript and Tailwind CSS, with the city and business pages generated from data.The client getsA preview link to follow progress
- TestingCheck it before anyone else doesEvery page checked on phone, tablet and desktop, then measured with Lighthouse for speed, SEO and access.The client getsA tested site, ready to go live
- LaunchLaunch and measureDeployed on Vercel at ristario.com, with analytics and a sitemap of every page from day one.The client getsThe live site, on its domain
03Visual identity03 / 06
Warm paper,
one orange.
A tool for restaurants should feel like a good menu: warm, clear and quick to read. The identity keeps to paper, ink and one orange, and lets the food photos bring the rest of the color.
One family, every weight
Inter from Regular to ExtraBold: heavy and tight for headlines, plain for everything read in a hurry.
Paper, ink and one orange
One orange marks every action; the flag's colors appear once, where the site says where it's from.
04Responsive04 / 06
Built for the phone that scans the QR
The menu is read on a phone at the table, and the owner edits it on a phone too. Every screen starts there.
Layout
One design, three sizes
The same content, ordered for each screen instead of shrunk to fit it.
- Desktop · 1440
- The message beside a live phone preview of a real menu.
- Tablet · 768
- One centered column, with the phone preview under the text.
- Mobile · 390
- Full-width actions and the menu behind a single tap.
05Technology05 / 06
A stack chosen for speed and scale
Forty-one pages from one set of components: the stack turns a list of cities and businesses into pages that load fast and stay easy to update.
- Next.jsEvery page built ahead of time, cities and businesses included.
- ReactOne component library behind all 41 pages.
- Tailwind CSSThe brand's tokens, written once as theme values.
- FigmaBrand, UI system and every visual asset.
- VercelDeploys from Git, served from the edge.
06Search06 / 06
Built to be found
A restaurant owner searches for a QR menu in their city, or for their kind of business. Ristario has a page waiting for each of those searches.
Speed
Fast is part of being found
Google favours sites that open quickly, and nobody waits at a table for a slow page.
- 95/ 100Speed
- 100/ 100Search
Across the site
A page for every search
Pages written for the searches owners actually make, so the right one shows up for each.
- A page for every city
- A page for every kind of business
- Answers to what owners ask
- Who Ristario is, for Google
- A map of every page
- Previews when a link is shared