El Chupacabra Website Redesign
El Chupacabra is a comfortable, slightly rough-around-the-edges Mexican joint known for their Mission-style burritos, scratch-made margaritas, and generous happy hour.
The current El Chupacabra web presence is undeniably difficult to use.
El Chupacabra’s current website on desktop and mobile
The site is not responsive and the navigation is confusing. Links to order food are easily overlooked, important information is buried in a lot of text, and visually the site is difficult to read.
My Roles
UX Design
I restructured the information architecture of the site to simplify navigation and drive users to order food from the restaurant online.
UI Design
I redesigned the visual styling and layout of the site using a responsive grid and type scale, and optimized the site for mobile use.
Branding
I shifted El Chupacabra’s existing brand expression and designed a new logo.
El Chupacabra’s existing website is dense.
Current El Chupacabra site map
The navigational structure requires a lot of clicks to access information.
The site doesn’t funnel the user to any particular action, and it’s easy to get sidetracked or lose your place.
I used a single-page design to simplify the navigation and drive users to order food online:
Redesigned single-page site map
Within the page, I sequenced the sections to encourage users to order online first. Location and menu information is secondary, followed by the About and News & Events sections.
Mobile-First Redesign
Mobile wireframe
I optimized the site to best serve the mobile user.
The goal of the site is straightforward - to drive users to order food and share relevant information about the restaurant.
Forming this content into a pageless structure simplifies the navigation and creates an ideal experience for mobile users.
I used a responsive grid to expand the design to tablet and desktop viewports
Tablet wireframe
Desktop wireframe
Brand Expression
Using Oaxacan street art as inspiration, I explored a new approach to El Chupacabra’s punk aesthetic.
El Chupacabra Brand Refresh Moodboard
Instead of a dark, cozy Seattle bar, I reimagined El Chupacabra as a sun-drenched hole-in-the-wall, covered with faded street art worn down by time.
Bold, graphic elements nod to the outsider, ad-hoc aesthetic that punk and street art share. Sun-faded colors remind you of the passage of time through a vibrant, saturated space.
The brand is not about the monster “El Chupacabra”; it’s about the place where the legend originated.
It’s 5 PM somewhere…
Redesigned El Chupacabra website on mobile, desktop, and tablet
The goals of the site are straightforward: drive users to order food.
Beyond that, the user can view location and contact information, explore the menu, read about the restaurant’s history and upcoming events.
If the scroll gets tiring, jump links are available to move the user up and down the page.
The tablet and desktop sites follow the mobile design closely, with slight adjustments in the menu blade.
Menu blade on desktop and tablet
Feedback
I conducted a usability study to evaluate the changes I made to the site.
Simplified Navigation
“Easy to read, navigability looks simple”
Focus on Ordering
“Looks like this restaurant has spent time to make their online order easy”
Brand Shift
“…fun, good cocktails, noisy, friendly people, hip but not snobbish, maybe family friendly, good food”
Lessons & Next Steps
I really enjoyed designing within a pageless structure. The format works well for restaurants and is an effective tool to drive users to specific content and actions.
Designing such a different brand expression was super fun! It was refreshing to take a big swing on this project.