EL CHUPACABRA
Happy hours, delicious tacos, and a homepage that leaves some scratching their heads.
Grungy burritos
MY ROLE
UX/UI Design
Brand Strategy and Identity
Information Architecture
My role in this project was to rebrand and redesign El Chupacabra’s current website into a responsive one with three separate viewports (Desktop, Tablet, Mobile) and a User Interface that feels welcoming and enjoyable to scroll through.
TOOLS
Figma (Wire-framing, Prototyping), Illustrator
TIMELINE
10 Weeks
OVERVIEW
Based on a creature known as a legendary cryptid, El Chupacabra’s Mexican restaurant mascot has intrigued customers for the past 16 years. A true symbol of “Seattle quirk”, their locations at Alki Beach and Greenwood have a reputation for their customer service and overflowing happy hour drinks that make the table tops sticky. The tacos and enchiladas are guaranteed to hit the spot every time, but their homepage leaves many people wondering if it’s been modified in recent years.
Despite being a household name and loved by the community, El Chupacabra’s website leaves much to be desired. In order to get a better sense of the website’s redesign look and feel, I visited their Greenwood location to get a proper experience. I enjoyed one of their famous margaritas from their happy hour menu, and began to understand the culture and clientele base that they are known for: grungy and quirky, but family-friendly and an escape from the real world. I wanted to make sure these traits were captured during the designing process, while also adding a modern feel to the overall brand.
The Problem.
El Chupacabra’s grunge helps to keep the Seattle quirk alive, but the website shouldn’t be stuck in the ‘90’s, too.
ACCESSIBILITY
Chupacabra’s homepage incorporates lots of color and a variety of type choices, however, it lacks legibility causing problems especially for people who are visually impaired. Even with my great vision, I had a difficult time reading the bright red header.
MULTIPLE HOMEPAGES
Although a single franchise with only two locations, Chupacabra made the decision to occupy two separate domains for each location: http://www.elchupacabraseattle.com/ and http://www.elchupacabraalki.com/. This caused a lot of confusion for me as a new visitor on their site, especially when clicking on the individual locations only took you to a dedicated page on the same domain - not to its dedicated domain like I had expected.
The above screenshot is of their Alki website, not to be confused with their Greenwood site (see left).
A MESSY MENU
Navigating through Chupacabra’s menu was challenging, as information was not properly structured. Add-ons and duplicate information were found at almost every category, and it missed a crucial mark: evoking appetite.
The Goal.
Build a website that is responsive to 3 view ports and create a rebranded identity that will cater to modern restaurant aesthetics and invite a wider net of patrons looking for an “LA” experience.
RESEARCH
COMPETITIVE ANALYSIS
For my competitive analysis, I used El Catrin’s homepage as a reference for my design direction. I wanted to use a similar modern art style using texture and illustration to achieve the look I wanted for the new site. The bright colors made me think of tacos and margaritas, and I wanted to evoke this vibe in Chupacabra’s design as well.
For the site map, I went with a one-page design to really narrow down the focus to just the high-level information: recent updates, menu, an expandable bio, and location information.
BRANDING + DESIGN
To start, I came up with a few words to describe El Chupacabra’s current brand. This dictated the mood of my style board, which later helped in establishing the idea of using color-filled geometric shapes to represent the various foods from their menu.
WIREFRAMES
When wireframing each of the view ports, I began with mobile first in order to model a bottom-up approach which helped mitigate component resizing issues.
From top to bottom right: Desktop, Tablet and Mobile viewports.
During the stages of moodboarding, I had thought of using soft, geometric shapes as elements within the branding. Each shape represents a unique food or beverage from their menu. The colors evoke appetite, and are also inspired by the papel picado banners which are hung across the inside of their restaurants. I used the illusion of neon lights to modernize the theme and to fit the hip, LA Mexican bar aesthetic.
Choosing the right type was important in the design process as it dictates a large part of the brand’s identity. When I found Greycliff CF, I knew it was the perfect type family. Its circular, geometric shapes matched the design elements and shapes I wanted to implement. It became the face of the logo and the main font throughout the website’s redesign process.
The flat icons used for the different food items on the menu share a similar color and branding scheme as the colors + shapes theme (above), and also adds a flavor of fun personality and a nod to modern design.
FINAL DESIGN
Header + CTA
The importance of an eye-catching header hero image was in the forefront of the design choices for Chupacabra’s final website design and was something the original website lacked. The colors + shapes pop thanks to the dark backdrop making the site easier to see/read, and the visitor is now able to view the menu and order with ease.
New Menu
A brand new layout broken down by the different categories that Chupacabra offers. Clicking on a menu category will unfold its contents on the same page without the distraction of it opening a new window. The two-column grid makes for efficient reading and is a refreshing upgrade from Chupacabra’s disorganized menu page.
Two Locations in One Place
Chupacabra’s website caused confusion when it came to their two locations, especially because they had two separate web links. The business operated the same for both restaurants, so to cleanup the confusion I placed the location information in one simple layout, found towards the bottom of the homepage.
PROTOTYPE
The prototype video below walks through a user’s journey of browsing through the single-page homepage on a tablet viewport and seeing what’s on the Lunch + Dinner and Weekend Brunch menus.