Au Lac Restaurant

Website Redesign

Background

Client

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 has cultivated a community of devoted customers.

Context

Au Lac wanted to improve their customers’ experience ordering online, viewing QR code menus, and making reservations.

My role

I redesigned their website in SquareSpace to better serve customers' needs and reflect Au Lac's brand.

You can view the live site here!

Discovery

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

  1. Increase online orders —> “How much we encourage people to eat with Au Lac?”

  2. Reduce scrolling for the right information? —> “How might we make important information easier to find?”

  3. Add more photos of the food —> “How might we help people understand what Au Lac offers?”

Goals

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:

Competitive Analysis

Here are a few of the industry norms I took away:

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

  • Horizontal navigation that is solid, semi-transparent, or transparent depending on the hero image, often with submenus.

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

Research

Research Goals

To better understand Au Lac’s brand and customer needs, I conducted some lightweight research through surveys and phone interviews.

Here’s a breakdown of participants and sample questions:

Methodology

To synthesize results, I made an affinity diagram in Miro of all the different responses, grouped together by theme. Here are some of the themes that came from the question “How would you describe Au Lac to a friend?”

Synthesis

Insights:

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

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

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

Recommendations:

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

  2. Highlight unique dishes, creative process, and thoughtful touches.

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

Brand

Insights:

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

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

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

Recommendations:

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

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

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

Website

Ideation

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:

Sitemap

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 removed their secondary orange color (pictured in the menu header below) because it didn't work with the maroon or meet WCAG accessibility standards.

For typography, they were using Raleway, which already matched their elegant but quirky brand.

Brand identity

Final Deliverable (view live here)

Before & After

Before:

  1. Lengthy, crowded navigation bar

  2. Poor contrast on navigation links, worse for some carousel images

  3. No CTAs or visual hierarchy

  4. Hero image gives "fancy brunch" vibes, which doesn't necessarily match with the brand

  5. Photos displayed in an automatic carousel with 22 slides, most of which won't be seen

  6. Default image could scare away people with nut allergies

After:

  1. Simplified navigation bar with submenus

  2. Better contrast on a static hero image

  3. Prominent CTAs and informative copy

  4. Hero image reflects Vietnamese cuisine and brand better

  5. Added all images to a new Gallery navigation link for faster, more immediate browsing

  6. Nut allergy friendly!

Before:

  1. Lacks visual hierarchy, 6 sections are not well differentiated, hindering findability

  2. Gift cards are easy to miss

  3. Image and text are misaligned

  4. "About Us" and "Our History" are separated, creating a disjointed experience

  5. Location is in the middle of the homepage, which does not fit patterns that usually place it at the top or bottom

After:

  1. Prioritized COVID-safety at the top and made copy language more friendly

  2. Moved gift cards to navigation bar

  3. Added more food imagery that aligned with the copy (both narratively and visually)

  4. Emphasized the inspiring story of Au Lac, starting with "Our History" and ending with "About Us" for narrative continuity

  5. Moved Location to footer

Before:

  1. Client mentioned that customers often miss the headers at the top

  2. Customers requested photos of the menu

  3. Allergens legend at the bottom

After:

  1. Re-organized the menu to include more categories and used custom CSS to make headers more prominent

  2. Added menu gallery

  3. Added food allergen menu to the top and bottom

Challenges

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):

Big changes

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:

When disagreeing, it's still important to provide a 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.

Disagreement

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.

Recruiting