Eli Goldberg

Flowers

El Taco Web Redesign

1

Overview

For my user interface design class, we were tasked with redesigning an existing website. I chose El Taco because of its great business presence in the community, while it's current website was lacking visually. My redesign included created mobile, desktop, and tablet versions of the El Taco site, as well as getting feedback from users on how the redesign compares to the original.

Why El Taco?

El Taco plays a large role in the community as a small business and was even chosen by Door Dash to educate and train other minority-run businesses. While their great food has rewarded them with return customers and positive reviews online, their website does not reflect all that El Taco offers. For my user interface design class, we were tasked with redesigning an existing website. I chose El Taco because of its great business presence in the community, while it's current website was visually lacking.

2

Research and Testing

To understand how to improve the site, I looked through the perspective of the target audience, Philadelphia college students. Since Drexel University students lived in dorms and off campus housing located in close proximity to the restaurant's location, I decided to prioritize that population.

Original Site

El Taco's existing site consisted of immensely empty space and haphazardly placed content. This site does not represent El Taco's story and well-deserved reputation for delicious food. This version of the site was shown to users while testing and was used to gather information on menu items and the owner's background and story.

Description of the image

Heuristic Analysis

El Taco plays a large role in the community as a small business and was even chosen by Door Dash to educate and train other minority-run businesses. While their great food has rewarded them with return customers and positive reviews online, their website does not reflect all that El Taco offers. For my user interface design class, we were tasked with redesigning an existing website. I chose El Taco because of its great business presence in the community, while it's current website was visually lacking.

placeholder
Mobile
placeholder
Tablet
placeholder
Desktop

User Quotes

El Taco's existing site consisted of immensely empty space and haphazardly placed content. This site does not represent El Taco's story and well-deserved reputation for delicious food. This version of the site was shown to users while testing and was used to gather information on menu items and the owner's background and story.

quote I find their website hard to use and I wish some information, like phone number, was available on all pages. quote

quote The site looks empty and and needs an update… it should be more relatable to college students. quote

quote If their site matched their physical restaurant and their great tacos, then they'd get much more business. quote

3

Planning

After gaining key insights from users, I identified problem areas that could be improved and broke them into different categories.

Visual Hierarchy

Most pages, especially the homepage lack clear visual hierarchy. The user may not know where to look first as there is a strange mashup of font sizes and text color. A more organized and structured approach will give the site much more appeal.

Description of the image

Graphics & Colors

During user testing, most users rated the site's visual design very low and made comments about how this factor stood out the most to them upon loading the site.

Currently, the site utilizes a very subtle color scheme with a pale yellow that makes text hard to read and doesn't match logo. By utilizing a brand new color palette, this website could turn its most apparent weakness into its largest strength.

Consistency

The existing site had a footer with simple copyright information and nothing else. This footer could be used to add consistency to every page with relevant information. By adding the same footer to every page, it could unify all the pages and add order.

Description of the image
4

Redesign

Color Palettes

A primary focus on yellows and reds to incite hunger and a secondary focus on blues and teals to represent El Taco's owner's Guatemalan origins (similar blues to the Guatemala flag).

Description of the image

Final Color Palette

Yellow and blue were emphasized for contrast as well as to hint at the playful nature of the restaurant. They also serve to reference how hues of blue and yellow are present in many South American and Hispanic cultural art and celebrations.

Description of the image

Inital Wireframes

While the final product was very different from the sketches, these preliminary explorations supported the final iterations. This style of wireframes was very inspired by color blocking and strong, bold pop art.

placeholder
Homepage
placeholder
About Page
placeholder
Contact Page
5

Final Design

Mobile

The mobile version of El Taco's site proved challenging at first. One challenge was fitting so much information in, while trying not to make the user rely on scrolling. To avoid this reliance on scroll, the promos can be swipes through with a interactive microinteraction. The menu can also be quicked vertically navigated by selecting one of the three main categories in the sticky menu.

Description of the image

Tablet

The tablet version of the site was able to stay consistent with the overall styling established in the mobile version of the site, but had unique features that gave users some distinct variance. For example, the menu on tablet displayed different menu images larger than the standard sizes.

Description of the image

Desktop

On desktop, there was more space to use. Instead of the hamburger menu, the navigation menu and all it's pages were displayed. Another feature unique to desktop sites is hover states. I used different hover states for navigation buttons throughout the site that stayed consistent with El Taco's playful and bold styles.

Description of the image

Final Heuristics

On desktop, there was more space to use. Instead of the hamburger menu, the navigation menu and all it's pages were displayed. Another feature unique to desktop sites is hover states. I used different hover states for navigation buttons throughout the site that stayed consistent with El Taco's playful and bold styles.

placeholder
Mobile
placeholder
Tablet
placeholder
Desktop
6

Key Takeaways

Graphic Usage

This was one of my first projects as a UX design student and while I felt that it was a good start, I believe I could've focused less on the graphic elements of the design and more on the actual experience of the navigation and how the user felt more.

Identifying Problems

One skill I've developed in the course of this project was organizing key problems I've identified and breaking them down into pieces to then hep me work towards solutions.

Comparison

By comparing heuristic analysis data of the original website and the updated redesign, I felt that my design improved overall, but I wish that I utilized this tool more to pinpoint specific issues and user needs.