Au Lac Restaurant

Background

Au Lac is an AAPI, woman, and family-owned vegan Vietnamese fusion restaurant with locations in Downtown LA and Fountain Valley, California. With 2000+ reviews averaging 4.5+ on Yelp and 17k+ followers on Instagram, Au Lac draws acclaim for expanding the boundaries of vegan cuisine and growing a community of devoted customers passionate about health and environmental sustainability.

Problem

In the increasingly digital pandemic landscape, Au Lac wants to ensure their customers have no problem ordering online, viewing QR code menus, and making reservations.

Solution

Use Design Thinking to redesign the website to better serve customers' needs and reflect Au Lac's brand.

Role

UX Research. Content Strategy. Web Design.
Timeline of 4 weeks.

Empathize
Scope

I spoke with Linh, the manager of the DTLA location and Au Lac's overall web presence to identify some goals:

Client goals translated into HMW statements

Competitive Analysis

To learn more about the restaurant space, I started by looking at 4 other upscale restaurant websites located in downtown LA, including 2 that the client mentioned specifically. Here's what I found:

Affinity map diagram showing common links on competitors' homepages

Hero Image

Big hero image showing food, drink, or dining areas. Some static, some carousels.

Navigation bar

Always horizontal. Solid, semi-transparent, or transparent depending on the hero image. Submenus common.

Links and Pages

Important CTAs like "Order online" and "Reserve" are listed both in the nav and on the homepage itself, making it more visible on mobile.

Provisional Personas

Through my conversation with Linh, I was able to gather more information about Au Lac's clientele:

Provisional Personas: Health conscious, family, office worker, artist/foodie

Interviews & Surveys

In total, I had 36 participants. I wrote one set of questions for customers focusing on Au Lac and another set of questions for non-customers focusing on the last restaurant they discovered:

Research participants and sample questions arranged in quadrants

Define
Synthesis

To synthesize results, I made an affinity diagram in Miro of all the different responses, grouped together by theme:

Brand

Here are some insights and recommendations I took away from my research:

Insights

Au Lac creates a warm, welcoming environment that makes its customers feel like part of a community.

Au Lac's food is creative, unique, and inventive, in a class of its own.

Customers want to support family and minority owned small businesses like Au Lac.

Recommendations

Ensure themes of family and community reflect in the copy throughout. Keep tone casual and intimate.

Highlight unique dishes, creative process, and thoughtful touches.

Add more portraits of the staff and dedicate a page to their bios. This will also help bolster the family/community feel.

Website

Insights

Menus are by far the most often visited portion of the website.

Customers are moderately more likely to eat at a restaurant that offers reservations.

Customers want to see lots of photos of food when visiting a restaurant's website.

Recommendations

Emphasize the word "Menu" and give menus the first spot on the nav.

Make "Reserve now" a CTA button in the nav and on the homepage.

Highlight popular dishes on the homepage, create a gallery, and include photos on the menu.

Ideate
Sitemaps

Their original website was a single-page design, with the nav linking to anchor points throughout a long scrolling homepage. Since the restaurant has 2 locations, this resulted in a lot of redundant sections and opportunities for confusion between them.

I wanted to convert the site into a multi-page experience, so that customers would always be looking at the information most relevant to them.

Original and revised sitemap diagrams side by side

Original:

- Redundant "Order Online" and "Menu" links
- Extra step for direct pickup orders
- Links are not in order of importance
- No option for gift cards

Revised:

+ Used submenus to separate locations
+ Removed extra step for direct pickup orders
+ Ordered links by importance
+ Added a "Gift cards" link

Visual Design & BRanding

Coming out of interviews, I knew I wanted to communicate Au Lac's themes of creativity, community, and compassion.

Au Lac's brand color is maroon. The client asked to keep the palette neutral aside from the maroon, so I used a simple palette with warm undertones to match the warmth of the brand.

I also nixed their secondary orange color (pictured in the menu header below) because it didn't work with the maroon and because the contrast did not meet WCAG accessibility standards.

For typography, they were using Raleway, which I thought matched their elegant but quirky brand perfectly.

3 swatches: Black, cream, and maroon

Logo versions starting with portal sketches on paper, ending with the Adobe Illustrator vector with Z connected.

Nixed the orange header color, kept the Raleway type.

Wireframes

Here are some quick wireframes I made to figure out the order and hierarchy of content. Scroll in the mini-browsers:

Desktop

Mobile

Design

Finally, I brought the website to life in SquareSpace.

You can see the live website here: www.aulac.com

Before & After

Original:

- Lengthy, crowded navigation bar
- Poor contrast on navigation links, worse for some carousel images
- No CTAs or visual hierarchy
- Hero image gives "fancy brunch" vibes, which doesn't necessarily match with the brand
- Photos displayed in an automatic carousel with 22 slides, most of which won't be seen
- Default image could scare away people with nut allergies

Revised:

+ Simplified navigation bar with submenus
+ Better contrast on a static hero image
+ Prominent CTAs and informative copy
+ Hero image reflects Vietnamese cuisine and brand better
+ Added all images to a new Gallery navigation link for faster, more immediate browsing
+ Nut allergy friendly!

Original:

- Carousel indicators crowd and stack
- No CTAs or copy
- Orange header color fails Web Content Accessibility Guidelines (contrast ratio: 2.37)
- Gift Cards prioritized

Revised:

+ Replaced with static image
+ Added CTAs and copy
+ All text colors pass AAA level (contrast ratio: 10.34)
+ Reservations and Order Online prioritized

Original:

- Lacks visual hierarchy, 6 sections are not well differentiated, hindering findability
- Gift cards are easy to miss
- Image and text are misaligned
- "About Us" and "Our History" are separated, creating a disjointed experience
- Location is in the middle of the homepage, which does not fit patterns that usually place it at the top or bottom

Revised:

+ Prioritized COVID-safety at the top and made copy language more friendly
+ Moved gift cards to navigation bar
+ Added more food imagery that aligned with the copy (both narratively and visually)
+ Emphasized the inspiring story of Au Lac, starting with "Our History" and ending with "About Us" for narrative continuity
+ Removed Location from middle

Original:

- Redundant
- Easy to get confused between locations
- "Click To Order For Pick-up!" link destination is unclear (and whether it is a link or a header)
- Background images reduce legibility
- Formatting does not delineate between headers and body

Revised:

+ Put both locations under the same Order Online link in the navigation bar
+ Added logos and buttons for easy differentiation between services/locations
+ Labeled "Direct" for pickup, separated for those who want to support the business
+ Solid background
+ Added headers and color contrast

Original:

- Information overload
- Image and text are misaligned
- Same as hero image, redundant
- Outdated information
- No differentiation between quotes and accolades
- Yelp reviews don't fit the "Press" category, inconsistent with patterns

Revised:

+ Picked the best quotes and bumped the size, moved the rest into "About" nav link
+ Stacked image and text vertically to separate from the "story" section
+ Used a "community" oriented image that matches the brand
+ Removed dates but kept hyperlinks
+ Gave accolades its own column
+ Removed Yelp reviews

Challenges & Lessons
Explaining Big changes

This was the first version of the hero that I showed the client (I tried to showcase one of their new and very popular dishes, the mushroom calamari):

After seeing it, she asked if we could switch it back to the original full bleed carousel with the transparent header. I should've explained my reasoning for making such a drastic change that admittedly was way less eye-catching.

I explained the legibility problems with the carousel and recommended 3 options that might accomplish the same goals (with examples of each one):

- A static image with a transparent header
- A carousel with a semi-transparent header
- A carousel with a solid header

The client chose the first option, and the result turned out better than both of our original designs:

Disagreeing with the client

When disagreeing, it's still important to provide an agreeable solution that addresses the client's concern. The client also requested that we add a navigation link for "Locations." This made me worry about redundancies. Would we have to create a separate landing page for each location? I explained my concerns and asked whether changing the wording from "Menu" to "Menus" might accomplish the same goal of suggesting multiple locations? The client agreed.

Choosing the least disruptive option

Lastly, when I asked the client for a 30-minute Zoom call with a few of their customers, one of the managers thought that was too much to ask. I'd also had trouble recruiting non-customers when asking for a Zoom. After changing my request to a 15-minute phone call or a survey, participants poured in. The data I got was more than enough.

Feedback

"Working with Cat was the step I needed to take my online presence to another level of functionality for my current patrons and visibility to new audiences.

From the start, I was thoughtfully guided through her research and development process, building on my core concept, ideals and most importantly, my future goals for the business.

Cat’s design process is well oriented in artful visuals, creativity and creating solutions. Cat offered a personalized and results-driven approach to guest outreach, allowing me to better understand my guest needs, preferences, and what should be a priority in developing our new site.

Since the site launch, the ease of viewing menus, making reservations and placing online orders has been an essential driver in my operation and the assistance I’ve needed to focus on the restaurants opening in greater capacity.

I recommend other small business owners to consult Cat as well, allowing proper representation of their business and the right platform to connect owner and client. You’re in good hands with Cat. I’m excited to see her next projects."

- Linh Nguyen, manager of Au Lac: Downtown Los Angeles