Taco Run Website Design and Development

A demonstration of clean, simple web development and design

Figure 1 — The logo for my fictional restaurant

This project is the culmination of multiple assignments across my Coursera and UCSD classes.

The initial assignment was an exercise in UI design, primarily for mobile web. It would later dovetail into a desktop web design and eventually a scripted website.

The resulting project spans fundamentals in web design for mobile and desktop as well as the writing essential HTML and CSS needed to build a basic website for a local mom ’n’ pop restaurant.

A successful web project begins with a project brief and market research, so the first step for Taco Run was to do exactly that.

Project Outline —

URL: www.tacorun.com
Description: This restaurant offers delivery of simple, authentic street tacos, glass bottle soft drinks, and in limited markets, cerveza.

Audience: This restaurant delivers to busy professionals too caught up to step out of the office; especially for people working in areas unserved by taco trucks.

Location: situated in Fremont neighborhood of Seattle, Washington, the main clientele might be late night workers at Google, Facebook or Amazon

Estimated Cost: $-$$; $1.50/taco, $7/burrito, $4/beer or agua fresca

Sample Menu:

• Tacos: tortilla (corn or flour), filling (asada, pastor, carnitas, chicken tinga, or roasted poblanos and cheese *v*), toppings (onion/cilantro or pico de gallo), salsa (verde, rojo, crema)
• Drinks: Mex. Coke, assorted Jarritos, agua de jamaica, agua de horchata, Modelo Especial (21+)

Pitch: If you love great cheap street tacos, Seattle is an underserved city. Busy professionals working late to meet that Friday deadline can indulge in classics like rich al pastor or charred carne asada, along with a refreshing agua fresca or cerveza, all at the low, accessible price tacos were meant to be.

Audience Research —

Roles:

Tech Employees: late-night, working grunt, project team lead, homesick intern

Demographics:

• Male, 22–30, bachelor’s degree or higher, software engineer, single, low six figure income, inner Seattle neighborhoods
• Female, 30+, MBA, project manager, mid six figure income, married, lives in first- or second-ring neighborhood

Psychographics:

• Values authenticity and bold flavors in food, even over organic or farm-to-table
• Adventurous eater
• Moderately liberal, but socially progressive
• Values short term pleasure over long term planning (ergo delivery)
• Works long hours

User and Client Needs —

User Needs:

• Find out if restaurant delivers to their area
• View hours
• Peruse menu
• See happy hour
• Order food online
• View pictures of the food
• Read about restaurant owners and history
• Read about employees

Client Needs:

• Sell food online for delivery
• Provide a system for order customization
• Create a sense of loyalty in potential customers
• Convey authenticity and consistency
• Provide an outlet for customers to contact
• Easy to navigate and provide compelling evidence for restaurant quality

Outline of Scope —

Content requirements:

• Static map showing delivery radius
• Hours of operation, happy hour
• Full menu with descriptions and example photos
• About us/history/staff page
• Contact page with phone number, email and facebook
• Display top reviews with photos
• Delivery time estimating tool/address check (can tell user if their address is within the delivery radius)
• Full order customization and checkout
• Advance ordering system with specified delivery time up-to-date order status/location tracker
• An area for users to submit reviews and photos

Flow Diagram /Sitemapping—

From there, I created a flow diagram to outline the possible tasks a user could complete on the website, given the specific content requirements I generated from the user and client needs.

Figure 2.1 — A user flow showing all possible activities the website needs

Wireframing —

I used Balsamiq wireframing tools to create wireframes for each necessary page, referring to the user-flow diagram as a sort of sitemap.

Figure 3.1 — Balsamiq-made wireframes detailing the ordering process on mobile.

In addition to mapping out the flow for the delivery process, I created a single wireframe to demonstrate how the desktop version may look.

Figure 3.2 — A Balsamiq wireframe showing the delivery page in desktop mode.

Mood Boards and Developing Brand Identity —

The next step was to develop a visual language and identity for the website, which would inform the next process of adding visual fidelity to the wireframes.

I used Pinterest to create a mood board containing images that I could triangulate to the visual identity befitting this project.

Figure 4.1 — A Pinterest mood board for exploring the aesthetic direction of the project

I was inspired by hand-painted signs, flat, primary and pastel colors, blocky or scripted type mixed with tasteful illustrated flourishes.

When choosing a color palette, I wanted to invoke bright colors reminiscent of many neighborhoods in Latin America

Figure 4.2 — Colorful homes somewhere in Mexico

Figure 4.3 — The chosen color palette for the project

Figure 4.4 — The Taco Run logo consists of an agave illustration and the logo in simple type.

For the logo, I brought in a simple vector illustration of one of my favorite desert plants: the Agave Americana, in full bloom. I also drew some slight inspiration for the use of the plant from the logo for a now-closed Chicago mezcal bar, Quiote, but went less minimalist in the execution.

Figure 4.5 — A talavera-inspired design recreated in the site’s color palette.

The tile pattern at the top of the page is inspired by Mexican talaveras, but recreated in the color scheme I chose for this project.

Visual Mockups —

With a color palette and some graphic assets to work with, I could begin adding visual fidelity to the web layout. Again, I focused on mocking up a complete user flow in the mobile environment, as well as a single static moockup of the desktop environment, pulling directly from the work I did in Balsamiq.

Figure 5.1 — A food order and delivery user flow with visual fidelity added.

Figure 5.2 — A static mockup of the Taco Run website in a desktop environment

Front End Website Development —

Later on, I had the opportunity to build out the website as an exercise in scripting in HTML and CSS. I decided to flesh out the desktop version as it would be a less complex place to start.

The visual direction is decidely more pared down than the original desktop mockup, in the spirit of code simplicity.

It consists of four pages: Home, Menu, About and Contact.

You can interact with my project in real time using codepen.io (though the links work, just note that the nature of the service means each link will open a nested codepen).

The home page demonstrates inline embedding of an externally-hosted video, while the contact and menu pages use forms to achieve their respective goals.

Figure 6.1 — A screenshot of the home page, feat. the hero video

Figure 6.2 — A screenshot of the menu page, the order form is further down that page

About makes use of a drop-down menu with anchor points to navigate the user around a single page.

Figure 6.3 — The about button is a drop down menu containing anchor links to various sections of the page.

Figure 6.4 — A simple contact page

Though of the graphic assets are original for this project, the images are not my own and the names used are fictional.

Conclusion and Lessons Learned —

This project marks one of the best opportunities I’ve had to take a website and brand concept all the way from inception to implementation. It provided a chance to learn and practice the web design process and then bring my designs into fruition using HTML and CSS.

As I progressed through my UX education, I became more cognizant of the importance of simplicity; less is more when content delivery is the primary aim of the design. The next iteration of this project will include improving the mobile visual mockups. I would simplify the design with a more readable typeface and a pared down use of color, similar to the evolution that the desktop environment underwent.

Thank you for reading this exposition of my web design process.

If you are interested in more of my work within brand and web design development, take a look at my Kino Brand and Web Design project!