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.
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.
Use Design Thinking to redesign the website to better serve customers' needs and reflect Au Lac's brand.
UX Research. Content Strategy. Web Design.
Timeline of 4 weeks.
I spoke with Linh, the manager of the DTLA location and Au Lac's overall web presence to identify some 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:
Big hero image showing food, drink, or dining areas. Some static, some carousels.
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.
Through my conversation with Linh, I was able to gather more information about Au Lac's clientele:
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:
To synthesize results, I made an affinity diagram in Miro of all the different responses, grouped together by theme:
Here are some insights and recommendations I took away from my research:
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.
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.
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.
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.
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.
- Redundant "Order Online" and "Menu" links
- Extra step for direct pickup orders
- Links are not in order of importance
- No option for gift cards
+ Used submenus to separate locations
+ Removed extra step for direct pickup orders
+ Ordered links by importance
+ Added a "Gift cards" link
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.
Here are some quick wireframes I made to figure out the order and hierarchy of content. Scroll in the mini-browsers:
Finally, I brought the website to life in SquareSpace.
You can see the live website here: www.aulac.com
- 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
+ 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!
- Carousel indicators crowd and stack
- No CTAs or copy
- Orange header color fails Web Content Accessibility Guidelines (contrast ratio: 2.37)
- Gift Cards prioritized
+ Replaced with static image
+ Added CTAs and copy
+ All text colors pass AAA level (contrast ratio: 10.34)
+ Reservations and Order Online prioritized
- 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
+ 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
- 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
+ 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
- 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
+ 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
- Information overload
- Redundant contact forms since both forms go to the same email address
- "Powered by SquareSpace" footer doesn't match patterns
+ Removed maps and moved downtown parking options to its own column for cleaner alignment
+ Consolidated and moved contact forms to the "Contact" navigation link, added a dropdown to select location
+ Replaced "Powered by SquareSpace" with copyright for a more professional look
- Client said customers often miss the sections at the top (SquareSpace only shows part of the menu based on what's selected)
- Client mentioned customers requesting photos on the menu
- Allergens legend only at the bottom
+ Re-organized the menu to create 5 categories and used custom CSS to turn them into prominent buttons with hover animation
+ Added 12 food photos relevant to the menu
+ Allergens legend both at the top and the bottom
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:
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.
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.
"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