Big Red Rooster

Big Red Rooster is a multidimensional brand experience firm with clients like Under Armour, Krispy Kreme & Fedex. Big Red Rooster is a global top 5 retail brand.

Timeline
4 months
Role
UX Design, UI Design
Tools
Figma, Miro
img

The Problem

Big Red Rooster was acquired by JLL in 2016. After a few years, they were in need for a website redesign. Their previous website design did not reflect their mission and practices, and had numerous usability issues. After meeting with the team at Big Red Rooster, the following were identified as the main pain points: weak usabillity without established user flows or CTA’s, and no clear understanding of the company’s mission.

The Solution

The website's objective is to embody the company's mission by attracting clients through improved SEO, compellingly narrating their story, and attracting a broader clientele of high-tier customers.

Interface Inspiration

I gathered Interface Inspiration with four brand descriptors in mind: Bold, Modern, Minimal, & Playful. An interesting challenge was to find playful elements while not crossing the line into “whimsical.”

img

Heuristic Evaluation

Examining the previous website, I performed a heuristic analysis to pinpoint potential deficiencies and usability challenges. Following Jakob Nielsen's 10 general principles for interaction design as a framework, I identified heuristic issues and proposed effective solutions, incorporating them into the final design to enhance overall user experience.

img

Competitive Analysis

Big Red Rooster had two websites in mind that they wanted to use as inspiration. With 14 total opportunities found, I chose 6 of them with the most impact. Siegel & Gale used mixtures of large images, headers, and illustrations while emphasizing their company’s mission using playful language. M Moser has scannable content with information broken down into categories.

img

User Journeys

I focused on four main user journeys: New Talent, Internal JLL employees, C-Suite Levels first time on site, and Director looking on behalf of C-Suite levels first time on site. I combined those into one main one shown on the right. The goals of the flows were to ensure that new talent and new clients are able to take a streamlined journey throughout the website to learn all about BRR's mission, and at the same time ensuring that returning clients are easily able to find relevant information to their company.

img

Information Architecture

The Big Red Rooster team aimed to make their new website easy to navigate for both first-time users and returning clients. Before creating simplified user flows, I designed an information structure that guides new users through a clear path on the website while keeping all essential links and pages easily accessible for returning clients.

img

Wireframes

img

High Fidelity - Home

The company wanted to express their practices & services as a design retail firm, so their practices/services were placed front and center in the hero section. To make the hero more dynamic, the background is a simple video gif.

While scrolling, users are prompted to visit the about page, a call to action lacking in their previous website. As one continues down the landing page, a diverse range of projects and case studies are showcased.

img

High Fidelity - About

The about page highlights the company's mission. This page consists interactive features, where the user is instructed to use their mouse to hover over certain elements on the screen.

img

High Fidelity - Individual Projects

The restructuring of the work page guides users through the project's "journey." It was crucial to maintain user engagement and streamline navigation without requiring extra effort. Unlike the previous site, which presented a single lengthy paragraph about the project at the page's top, our redesign features segmented text, encouraging users to scroll down.

We incorporated an image gallery positioned approximately two-thirds down the page. Acknowledging that most users are keen on viewing project results through images, the inclusion of a gallery serves as the optimal means to access all project photos.

img