viva vegan is a fast casual, plant-based restaurant in Los Angeles, offering authentic Mexican food reinvented using fresh, whole foods from local farms.
The viva vegan-branded website presents its fully plant-based menu in an engaging web experience to make ordering authentic, plant-based Mexican food accessible to all.
My Role
∙ Branding and Print Design
∙ User Research
∙ Information Architecture
∙ Website Design
Deliverables
∙ Desktop and Mobile Website
∙ Interactive Prototype
Brief
∙Sell affordable, authentic vegan Mexican food
∙Showcase entire menu on website, with a native online ordering experience
∙Provide information about company, store location, and store hours
∙Include both English and Spanish to include a more diverse audience
∙Showcase entire menu on website, with a native online ordering experience
∙Provide information about company, store location, and store hours
∙Include both English and Spanish to include a more diverse audience
Goal
Create a fictionalized brand identity and design a responsive desktop and mobile website that communicates the brand tone, allows users to view and order online, and provides information about the restaurant.
Research
Basic User Personas
Information Architecture
Sitemap
Content Inventory
The content inventory helped me make sure I had all necessary content for the website, so that the descriptions of all menu items, both in English and Spanish, could be batch imported for menu cards and other modular interface elements, for example.
It was important to include both Spanish and English translations at the same time whenever possible—in order to make one design accessible to a larger audience and match the target User Personas.
Branding and Print Design
Logo Design
The smaller, leaf-inspired brand mark is used both to make up the primary wordmark, but also used within a pattern to add texture throughout the packaging designs.
Menu and Packaging
∙Stock Illustration sourced for vegetable imagery
∙Illustrations arranged in Photoshop to form central 'V' illustrative mark
Website Design
High-Fidelity Wireframes
These are some of the wireframes that served to lay out the structure for the final website designs. Using a 12-column grid and simple typographic hierarchy during this stage helped me refine the final visual designs, creating an intuitive and visually compelling digital identity for viva vegan.
Design System
Website Design
Home, About, and 'Why Vegan'
∙Stock illustration sourced for vegetables, plants, and food imagery
∙Illustrations arranged in Photoshop to create main above-the-fold image
Menu / Online Ordering
Cart (Your Order)
Contact Us / Map
COVID-19 Information
Mobile Site
Home, About, and 'Why Vegan'
Menu / Mobile Order
Cart, Contact Us and COVID-19 Information
Outcome
This project is one of my favorites—I found that in creating both the branding and website design for the brand, I was able to represent a tone that comes across as fun, playful, friendly, and youthful—attracting the target users and allowing for the site to fulfill user goals.
The site makes ordering the full viva vegan menu intuitive and easy-to-use and presents plant-based eating and a vegan lifestyle in an approachable and positive light. Overall, the branding and website design encourages vegans and non-vegans alike to get a taste of authentic Mexican food, made plant-based.
