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.
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.
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.
I find their website hard to use and I wish some information, like phone number, was available on all pages.
The site looks empty and and needs an update… it should be more relatable to college students.
If their site matched their physical restaurant and their great tacos, then they'd get much more business.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.