Design Guide (HCI) — Cali GastroWeb

1 · Value proposition

How does it help solve the problem?

First-time visitors to Cali easily find trendy restaurants, but they don't know what is truly traditional, where to try it or how much it costs. That information exists, but it is scattered across maps, social media, blogs and official websites. Cali Gastro Web organizes it around cultural discovery, not just commerce.

"Discover Cali through its flavors: what to eat, where to try it and the story behind it."

What makes it new for the user: a single page brings together the dish (what it is, ingredients, history, short recipe) with the traditional places to try it, their dated price list and directions to get there. It also changes its content according to the city's season (Feria, Petronio, Semana Santa).

Visitor need	Cali Gastro Web	Google Maps	Tripadvisor	Social media	Travel guides
Know what is traditional in Cali	Yes	No	Partial	Partial	Yes
Dish history and recipe	Yes	No	No	Partial	Partial
Where to try each dish	Yes	Partial	Partial	Partial	Partial
Prices with date and source	Yes	Partial	Partial	No	No
Content by season/event	Yes	No	No	Partial	Partial
Map and "near me"	Yes	Yes	Yes	No	No

2 · Changes after feedback (UCD)

What changed in the system concept

Before	Now	Why
General restaurant platform	Guide to Cali's traditional food	Narrows the problem and avoids competing with Google Maps.
Audience: anyone	Domestic and international tourists and event visitors	They are the ones who know the least about the local food culture.
Only recipes and a map	4 ways to explore: What to eat · Where to go · Near me · Season	Matches how a visitor with little time makes decisions (N1, N2, N4, N5).
Places without prices	Price list per place with date and source	N3 (knowing how much it costs) and RNF06 (do not show old prices as current).
2 restaurants on the map	15 verified places by official area, with filters	RF03, RF04, RF06 and RF08.
Data without visible backing	Official source for every figure and data status (verified / reference)	N7 trust · RNF05.

3 · Color palette

Colors with a purpose

The palette is inspired by the land and cuisine of the Valle: the green of its rivers and mountains, the warmth of salsa and the cooking fire, and the gold of panela and manjar blanco. Contrast ratios were measured with the WCAG 2.1 formula.

Primary

Teal

#0D7377 · 5.6:1 contrast with white (AA)

Trust and freshness; evokes the rivers and mountains of the Valle. Used for navigation, main buttons and everything "safe": actions and verified data.

Accent

Fire orange

#FF6B35 · 2.8:1 → large or decorative text only

Stimulates appetite and conveys Cali's energy. Reserved for emphasis (key words in headings, current season). For small text, its dark version #E55A2B is used.

Support

Panela gold

#F59E0B · 8.4:1 with night blue

Recalls sugarcane, panela and manjar blanco. Marks price levels and highlights without competing with the primary color.

Background

Tablecloth cream

#FFF8F0 · text #1E293B = 13.9:1 (AAA)

A warm background that sets sections apart and is less tiring than pure white for long reads (recipes).

Contrast

Night blue

#0A1628 · light text = 17.3:1 (AAA)

Data blocks ("Did you know?") and the home hero. Gives weight to official figures and makes the dish photos stand out.

States

Trust traffic light

Green #15803D and amber #B45309 · 5.0:1 (AA)

Green = verified price, amber = reference data from previous years, gray = no data. Always paired with an icon and text, never color alone (accessible for color blindness).

4 · Icons

A single set: Lucide (line icons, 2 px stroke)

We chose a single set of free, open-source line icons (RNF08). One style gives consistency (RNF07) and, unlike emoji, looks the same on any phone or computer. Each icon uses familiar metaphors (recognition rather than recall) and always comes with a text label.

Icon	Meaning	Where it's used	Why this icon

5 · Typography and HCI principles

Readable first, with personality

Decision	Rationale
Outfit for headings	Geometric and friendly; gives dish and section names a modern personality without losing clarity.
Inter for body text	Designed for screens; very readable at small sizes such as prices, addresses and sources.
Mobile-first (RNF02)	Tourists look things up on the street: single-column filters, buttons at least 44 px (RNF03) and one-tap "Get directions" actions.
Consistency (RNF07)	The same place card in the list, the map and "Where to try it"; the same price states across the whole site.
Recognition > recall	The 4 ways to explore are always visible on the home page; selected filters are kept in the URL and the session (RF09).
Trust (N7, RNF05, RNF06)	Every figure links to its source; every price says when it was checked and whether it is verified or reference.

6 · Iteration after the heuristic evaluation

What we changed after testing with users

The heuristic evaluation (Nielsen + Tognazzini, Nov 4, 2026) scored 80.3% usability. These were the findings and the design response:

Heuristic	Finding	Change
10 · Help and documentation	There was no help or FAQ.	New Help page in the menu: getting started, how to search, how to read prices, FAQ and a Cali food glossary.
8 · Error prevention	The search didn't tolerate missing accents or typos (“champus”, “sancoho”, “pan de bono”).	Search ignores accents, capitals and spaces and accepts 1–2 wrong letters in the name; it also searches by ingredient.
7 · Diagnosing errors	A search with no results left the screen empty.	A “We couldn't find…” message with suggested dishes and a button to clear the search and filters.
1 and 13 · System status	No feedback when adding favorites or filtering recipes.	A pop-up notice when saving or removing a favorite (with a link to Favorites) and a “Showing N recipes” counter.
11 · Saving state	“Got it” checks were lost on reload.	They are saved in the browser, with a “You have 3 of 8” progress indicator and an “Uncheck all” button.
12 · Color and readability	Text smaller than 12 px on phones, faint grays and no options for low vision.	Minimum 12.8 px on phones, grays with AA contrast and an accessibility button with large text and high contrast.
2 · User's language	Terms like “cholado” or “champús” weren't explained before opening the dish.	Each card says “What it is” in one line; glossary in Help.
2 · User's language	The audience includes foreign visitors, but the site was only in Spanish.	A full English version (/en/) with an ES \| EN switch in the menu; it opens in English when the browser isn’t set to Spanish and remembers the choice. Dish names stay in Spanish, with a short explanation.
9 · Minimalist design	Long recipe details and dense price lists.	A summary at the top of each recipe with jump links to Ingredients, Preparation and Where to try it; each place shows 3 prices and the rest under “View N more prices”.
4 · Consistency	The menu order changed on Where to eat; links in the text were hard to see.	The same menu on every page; links within text are underlined.
15 · Latency	The map didn't show that it was loading.	A “Loading map and places…” message with an animation until the map tiles appear.

Design guide for Cali Gastro Web