tato.

Tato-008 · Case Study · Restaurant · 2014

Designing Mostaza's website, wireframe to final screen

Mostaza is a fast-food burger chain. Low-res wireframes marked up with implementation notes carried the interaction logic through review, before the final high-res screens were built out.

Role: UI/UX Designer Tool: Photoshop Tool: Illustrator Tool: Balsamiq Year: 2014
↓ Begin the tour
—

Overview

Mostaza is a fast-food burger chain in Argentina. This case study shows both ends of the process for their website redesign: low-resolution wireframes marked up with implementation notes, and the final high-resolution screens that shipped.

I.

Process — Annotated Wireframes

Every key screen went through a wireframe pass first, marked up with notes calling out exactly how each interactive element should behave — slider timing, share-icon hover states, image sourcing — before any visual design work began.

Annotated wireframe of the Mostaza homepage with notes on the image slider and share behavior Annotated wireframe of the homepage with the main menu open Annotated wireframe of the Quienes Somos (About Us) page Annotated wireframe of the Campañas (Campaigns) page Annotated wireframe of the Locales (Locations) page Annotated wireframe of the FAQ page Annotated wireframe of the Franquicias (Franchises) page Annotated wireframe of the national franchise contact form Annotated wireframe of the international franchise contact form Annotated wireframe of the Trabajá con Nosotros (Careers) page Annotated wireframe of the Menú (food menu) page Annotated wireframe of the Club Mostaza loyalty program page Annotated wireframe of the Contacto (Contact) page

II.

Final Screens

The finished high-resolution designs for the same set of key pages, ready for build.

Final homepage design with hero image slider
Home
Final homepage design with the main navigation menu open
Menu open
Final homepage design with the hero video playing
Home — Video playing
Final food menu page design
Menú
Final FAQ page design
FAQ
Final franchise information page design
Franquicias
Final contact page design
Contacto
—

What this demonstrates

Annotating the wireframes directly, instead of writing a separate spec document, kept every interaction note attached to the exact element it described, so nothing got lost in translation between design and build.

Next projects
Assorted Early Work Mixtape · 2014–2015 → Big Time — full UI system Online RPG · 2025 → Pet Time — systems layer Mobile Game · 2025 →