Rubios Website Design

Project Overview

Rubios tasked the team to implement a new brand into their digital platforms. As they work to launch their new logo, typography, color and styles, we were to design based off those elements.

Tools used
  • Webflow
  • CSS
  • Adobe Photoshop
Completed
  • 2019
  • @TAG
multi view of rubios homepage on laptop

Project Goals

The goal of the project was to take existing structure, components, and architecture and apply new styling to the homepage. These styles would then be used in a style guide to build out the remaining pages on the Rubios website.

Two Options

With the print brand identity refresh, came some flexibility with the designs. We decided to provide two options for the homepage; one of which had a slight adjustment in some UX structural items, while the other option was similar to what was already live.

mockup of blue version of homepage
mockup of red version of homepage

Accessibility Audit

In conjunction with building out versions of the homepage, it was imperative to check for accessibility for the new brand. Checking to ensure WCAG 2.0 standards were met, an analysis of the existing site alongside the new concepts was completed to flag any potential failures on the site and prepare the new site for success.

screenshot of accessibility contrast checker color passing

Website Update

Process

STEP

01

Review of Brand Materials

The first step was to take a look at the proposed documents from the branding company that was implementing the new assets across printed mediums.

STEP

02

Accessibility audit

After the review and analysis was complete, an accessibility audit was done to ensure those standards would seamlessly transition into a digital environment.

STEP

03

Responsive Design

After all accessibility measures were checked off, the design began. We came up with two different options that were presented for approval before any work was done to the mobile design

STEP

04

Digital Style Guide

Once the homepage was approved, next steps were to provide an updated style guide to be applied to the remaining templates on the website.

We Want You TO Be Next

Reach Out.