top of page

Lawton Family of Restaurants

Responsive Website Redesign

August 2024 - September 2024

A restaurant group was ready to overhaul their outdated website to keep up with a changing market in San Antonio. 

​

This redesign includes a digital branding overhaul and major updates to the site's usability and readability.

Problem

The Lawton Family of Restaurants is a restaurant group that has been operating in San Antonio since the 1970s. The five restaurants currently operated by the company have excellent brand recognition within the community, and showcase a strong and consistent brand experience within the physical restaurants.

 

However, the restaurant group lacks consistent presentation of their own branding and the branding of subsidiary restaurants across web assets. The company’s website did not translate the restaurants’ brand experience, the site’s design suffered from a lack of visual hierarchy, and some accessibility issues throughout the website seriously impacted user experience.

Solution

The company’s director of communications hired me to redesign the website. After meetings to identify issues with the old website, set the scope of my redesign, and prioritize changes for the new design, we established some goals for the project:

​

  • Increase the Website’s Usability: This goal primarily consisted of applying color, grouping, spacing, and other basic design principles in order to provide a comfortable, accessible, and seamless experience for website users. I also needed to correct some contrast issues and add alt text to images to increase the site’s accessibility, as well as add utility features throughout.

  • Reflect the Company’s Brand: This goal included entirely reevaluating the site’s typography, color palette, and graphics in order to create a seamless experience of the company’s brand across physical and digital assets.

Brand Assessment

Because this project was so focused on brand storytelling, I kicked off with a stakeholder meeting to discuss brand values, catalog existing assets, and identify areas of the website that felt most disconnected from the brand. 

These are the logos for each of the company's restaurants. While each of these designs are strong, they weren't being used effectively on the company's website.

Brand Values

mature
comfortable
classic
timeless

warm
comforting
upscale
casual

These four colors made up the site's palette.

​

The site was using both a true black and a true white, creating a cold and flat impression of the brand.

Examples

This screenshot shows the website's home page. 

The header is overly tall, and the oversized logos next to the low weight heading font fail to guide users through this section effectively.

This hero section suffers from poor contrast. The background is too busy and the text's weight is too light for this composition to be effective.

Here is another section from the home page. The typography here is very cramped and difficult to read.

From a branding perspective, these photos are inconsistent both in quality and style.

This example from the site's shop showcases an accessibility issue. This text is really difficult to read, and a quick contrast check confirms that these colors fail to meet WCAG standards.

Stakeholder Management

For this project I needed to collaborate and share resources with the company's director of communications, its CEO, as well as an outside contractor advising the company on SEO and advertising.

 

Below is a calendar summarizing my stakeholder engagement strategy, process updates, and meeting agendas.

August

Kickoff Meeting

Update Meeting

Update Meeting

Update Meeting

September

SEO & Marketing

Wrap-up

Meeting

Kickoff Meeting

Who: me, DoC, CEO

Agenda:

  • present website issues

  • set scope and timeline for redesign

  • ideate branding images

  • discuss website platforms / builders

Update Meeting #1

Who: me, DoC

Agenda:

  • present homepage layouts

  • write new copy for 'locations section'

Update Meeting #2

Who: me, DoC

Agenda:

  • restructure 'get in touch' form

  • present and discuss new site colors and logo

  • present 'careers' page layouts

Update Meeting

Who: me, DoC

Agenda:

  • identify graphics assets from shop and homepage for redesign

  • solicit feedback and changes

  • finalize images for homepage

SEO & Marketing

Who: me, DoC, SEO consultant

Agenda:

  • edit copy for SEO

  • discuss ad strategy using new assets

  • plan domain name transfer

Wrap-up Meeting

Who: me, DoC, CEO

Agenda:

  • present final website screens

  • present new branding assets

  • identify final changes

Design

I began my design process by sketching quickly and simply with pencil and paper, then selected layouts from these sketches for the website.

I also designed some simple graphics and guided the direction for marketing images on the site.

​

Here is a quick re-statement of my priorities for these designs:

  • organize and group information to maximize readability

  • increase accessibility

  • add utility to improve user experience

  • declutter visual design

  • translate company's brand to web experience

Sketches

Graphics

During a meeting about marketing images on the site, I noticed a series of watercolor paintings hanging throughout the office. 

I pitched using them in the homepage's hero section gallery, since they addressed all the issue we had identified with that section:

  • the paintings use a consistent and distinct visual style

  • they beautifully showcase each restaurant 

  • they convey the brand's sense of relaxed luxury​

​

Here are those paintings as they appear on the site, after some quick reformatting from me.

I also created updated product images for gift cards in the site's shop.

Color and Typography

For my design, I used Playfair Display in a heavy weight for headings and Brandon Grotesque for body. 

​

Here is some sample text to showcase the difference in the site's typography before and after my redesign.

Before

After

Our Family

After studying business and engineering at UT Austin and having a successful career as an aeronautical engineer, Cappy Lawton entered the restaurant business. Following a career in real estate, Suzy Lawton quickly realized her true passion was in restaurants. Together they have designed, developed, and operated 31 restaurants throughout Texas. The husband and wife team share a passion for food and traveling, and have spent many years in Mexico and Ireland. Their son, Trevor Lawton, serves as the CEO. Today the Lawtons own and operate five beloved restaurants in San Antonio: La Fonda on Main, Cappy's, Cappyccino's, Mama’s Cafe, and Jingu House at the Japanese Tea Garden. These restaurants are San Antonio icons and favorites of both locals and visitors alike.

This is the palette I used for the redesigned website.

The blue is now more vibrant, the white is now a light pink, and the black is a very deep blue.

Final Screens

I added a new tab to the site's top-level menu, allowing users who want to visit specific restaurant sites to get to their destination quickly.

As this was one of the most problematic sections of the original site, I made some major changes here.

  • removed low quality photos, used brand logos instead

  • condensed text, created two rows to reduce visual crowding

  • added buttons linking to reservations or restaurant menus

The testimonials section of the careers page was another area that suffered from visual crowding. I reformatted all the text significantly, and used a slideshow.

I shortened this form significantly.

Originally, the form exactly matched a physical comment card used throughout the restaurants. 

After I brought it up in a meeting, we were able to identify some fields thats weren't necessary for the digital version of the form.

Feedback and Changes

This section of the website went through multiple iterations following stakeholder feedback. 

This is my first design for the section. My priority was to reduce crowding here, and this design represents an extreme version of that.

​

Stakeholder feedback:

  • the section takes too long to scroll through

  • logos are too large

  • collapsed text is unnecessary

  • Director of Communications wanted to try using branded colors for restaurant names

Here is my design incorporating the feedback I received on the previous iteration.

​

Stakeholder feedback:

  • branded colors are distracting, not cohesive

  • dislike stroke on card containers

  • text feels crowded within each card

This is the final design, incorporating the feedback from the last round.

Reflection and Next Steps

Stakeholder Management

This was my first design project working and communicating with real stakeholders, and I found myself relying on my background as an educator to navigate these conversations. 

​

I went into meetings with agendas, visual aids, and relevant questions prepared, but I quickly realized that these stakeholders weren't accustomed to talking in detail about design in the way that I am. I had to quickly develop strategies that would enable these key players to communicate their feedback to me in actionable, specific ways.

Branding

My role on this project was an interesting hybrid of web design, branding consulting, and visual design. I'm used to working with more research-based UX methodologies, and it felt scary at times to be working on a project with no resources allocated to research.

​

My work on this website's branding felt incredibly fulfilling. I was working with people who had a very strong sense of their company's brand values who just hadn't had the resources to translate them into this format, and it was great to help them pinpoint the ways in which their branding could extend most effectively into their website.

Next Steps

  • develop a logo for the company

  • create new product images for gift coins in the shop

  • extend web branding across other web materials, such as the company's newsletters and email promos

bottom of page