Ernie's Mexican Restaurant

Ernie's is a local Mexican restaurant near my boyfriend's house. We were in the car trying to figure out what to order when we got into a bit of a disagreement. While he was driving, I couldn't find the burritos on the menu. As a lover of eating out (and eating in general), I realized I hadn't had a positive experience looking at menus on my phone for many restaurants I frequent. This problem needed fixing—stat!

Date: Summer 2020
Client: Personal Project
Role: UX/UI Designer and Art Director

Problem Statement—

Project Goals—

Ernies_Logo+Homepage_Visual

Updated logo and homepage for reference.

Research

Approach—

User Interviews
User Personas
Empathy Maps
User Experience Maps
Information Architecture 
Competitive Research
Paper Wireframing
Digital Prototypes on XD

I interviewed about nine people and received feedback on Ernie's current site (I stopped there, because I started seeing patterns). From the feedback, I could pinpoint three different "types" of people and the ways each interacted with the site. This information provided great insight as to how to organize and build this site that can suit all audiences. 

Ernies_UX_Map

I created this map based on the feedback from one of the questions asked during the user interview. Participants, like myself, had a difficult time locating a popular menu item. Seeing the information in this way identified key "Pain Points", and in turn, design solutions (listed under "Insights & Opportunities") to alleviate them.

There were two levels to the information architecture on this project: the higher, the website and the lower, the actual menu. This is the before and after of the website's information architecture. The biggest change was reducing the number of tabs and the amount of repetion, particularly with the footer. 

I introducted subsections to the menu system. In theory, by reducing the amount of main sections, it would reduce the amount of scrolling. If users weren't interested in the main section, they wouldn't have to be forced to scroll through its contents. I was concerned that users might miss information this way, but In later user testing sessions, this concept was deemed a positive, accepted change. 

Note: I liked how the original menu included the Spanish translations of the menu categories, but for the sake of this project, I chose to keep the menu in English. 

Ernies_Wireframes

Select hand-drawn wireframe sketches for the restaurant menu and website menu. On desktop and mobile, the restaurant currently uses a modular organization system. I knew I wanted to keep it modular, but more interactive using levels of collapsable/expandable modules. Users could weigh their options as they would on a larger screen or in person, but not feel the frustrations of using a smaller device. For the website's menu, I chose to separate the "MENU" from the actual website navigation, because it is what user's immediately want to see, and I didn't want it to get lost. 

Ernies_XD_Prototypes

Entreé menu prototype visualized how categories, subcategories and individual items interacted with each other. During this step, I had to rethink how to display images wihtin individual menu items. I started with a carousel approach, but during testing, users didn't respond well to that particular interaction. 

Solution

Personal Constraints—

→ Design mobile responsive site first in order to ensure positive user experience on the smallest possible screen.

→ Keep copy the same from the original site (for the most part). I trimmed it down to reduce excess and repetition, but did not change the voice. This could be a future consideration.

→ Keep the ordering platform separate from the site. It's not clear if it would be easier to have ordering capabilities within the website or if it would be worth it money-wise. (From my findings, the users I interviewed seem to be used to using outside platforms for ordering/delivery, but that's a double-edged sword!) This could be a future consideration.

Branding refresh: refined logo to make it feel less corporate and less tiki bar. The updated the color palette reflects the restaurant's vivacity. The new font balances the geometric, quirky shapes of the "ERNIE'S" logotype. It is also clear and legible—ideal for digital formats.

Ernies_Homepage_Visual

Top banner presents pickup information for user to find immediately. Enticing food image reels customers in, without any text overlay hindering legibility. The "Delivery" and "Pick-Up" buttons are visible above the first breakpoint. The two content banners contain short descriptions and links to high-priority website sections. Footer information is housed in the footer with the telephone, email and address link out to the phone, email app and maps app, respectively. 

Ernies_Menu_Visual

Updated mobile navigation. It enters from the right and partially covers the page as to not disorient users when it is active. High priority pages are located at the top. 

Ernies_EntreeFlow_Visual

Interacting with new restaurant menu is now a tactile experience allowing users to browse categories and subcategories, scan information and make decisions about their meal quickly and efficiently. Users have more control over what they want to see and what’s relevant to them. The boxes expand and collapse when tapped and the page stays in same position. Menu items and boxes self-collapse when other options are pressed. 

Ernies_BreakfastFlow_Visual

Directly under the individual menu item are any images to display. This reduces any uncertainty as to which image is with which meal option. 

Ernies_EventsContact_Visual

"Event" and "Catering" pages lead to one "Contact" page that funnels all information into one form, regardless of the page. The user can also access "Contact" from the main navigation menu. 

Ernies_Homepage_Visual

Further Considerations—