Restaurant website redesign

case study

UI/UXVisual design
Two Mediterranean plates — a tuna crudo scattered with micro herbs and a hummus crowned with crisp chickpeas — served on blue mosaic-patterned dishes, set against flat cream with two rust rules.

Aba is a Mediterranean restaurant located in Austin, Chicago, and Miami. It captures guests with unique and intriguing interior design and follows to impress by innovative Mediterranean menu.

Problems & solutions

Problems

  1. The dark color scheme and crowded layout of the website complicates the navigation.
  2. Insufficient contrast between background and text colors affects accessibility.
  3. A lack of hierarchy in the page layout leads to confusion, failing to provide proper guidance.

Solutions

  1. Implement an improved color scheme featuring a clean background color and vibrant accents for attention guidance.
  2. Ensure readable and accessible buttons and fonts to enhance user interaction.
  3. Establish a clear layout by adding more space, introducing hover effects on buttons.
The old design — a dark, photo-heavy page — with a hand-drawn arrow curving across to the new design: a light homepage with a navy header, the aba wordmark, an Austin introduction and plated Mediterranean dishes.

UI kit

The UI kit: the rust #BB3204, cream #EFE8DA and navy #042A57 palette shown as overlapping circles, a Sorts Mill Goudy and Montserrat type scale at 48, 24, 20 and 18 px, blue mosaic motifs, and four button treatments in default, hover and selected states.

Key changes

Four redesigned screens on a peach panel, annotated with dotted callout lines: illustrative elements to add flavor; plenty of whitespace for a clean look; the use of photos as design elements to enhance user experience; decorative separation elements to signify page sections; and a clear and neat footer with schedule information.

Final design

The finished product: the full desktop homepage with its navy header, Austin introduction, signature dishes, Celebrate with us and Design sections and hours footer; the group dining and inquire page; the reserve and FAQs page; the Our Menus and Dinner Menu pages; and mobile versions of the homepage, menus and dinner menu.