Big Red Rooster

Web Design
Project Overview
Big Red Rooster is one of the top retail brand strategists companies in the country. They needed to refresh their outdated website, and replace it with something more modern and fresh to reflect their brand.
My Contributions
I was the lead designer of this project. My responsibilities included: User journeys, user flow, information architecture, low fidelity wireframes, high fidelity wireframes, prototypes
Big Red Rooster is a retail brand strategist company that was acquired by JLL in 2016. They were in need of a website redesign, as their current website did not reflect their brand, and had a number of pain-points. We met with the Big Red Rooster team to gather requirements and goals for their website redesign.

The team described to me that they felt their website was lacking in many departments. Some of the pain points included...

1. No established user flows, missing strong CTA, weak usability
2. Weak branding that didn't quite feel like "Big Red Rooster"
3. No clear understanding of the company's mission
4. Needed to have a balance of JLL branding vs. their own branding

With the main pain points understood, we began the design process
The Problem
Web Designer

Old Website

Aside from the usability issues and lack of CTA, their old website was lacking in creativity, harmony, and modern flair. The Big Red Rooster team felt that their website looked too dated and lacked any "wow" factors that their competitors websites had.

Heuristic evaluation & user journeys

Taking a look at the old website, I conducted a heuristic analysis to identify potential flaws and usability issues. I used Jakob Nielsen's 10 general principles for interaction design as a guide. After identifying the heuristic issue, I was able to come up with a valuable solution, which I would use for the final designs.

After the analysis, my team and I identified the users this website would target. We came up with a total of 3 users: New clients, new talent, and internal JLL employees. 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 able to find what they’re looking for with ease.

Information Architecture

It was imperative to the Big Red Rooster team that their new website presented a streamlined journey to a new user exploring their page for the first time, while previous clients could come back and access whichever page they needed to with ease. Prior to creating the low user flows, I established an information architecture that ensured a new user could be taken through a linear journey of the website, while ensuring all important links and pages were visible.

Low fidelity wireframes

Once the user journeys were established, I came up with 4 low fidelity designs, that would meet each of the different users goals. After presenting them to the BRR team, we narrowed it down to 2 designs.

Final Designs

The final designs were carefully curated after approval meetings with the BRR team. Once the established user flows/wireframes were completed, we could now make decisions on what elements we wanted to bring as the "wow" factor.

Landing & About page

The previous landing page didn’t have a lot of indication as to what Big Red Rooster does as a company. The company really wanted to express their practices & services as a design retail firm, so we put their practices/services up front on the header. To make the header more dynamic, we decided the background should be a simple video gif.

As the user scrolls down there’s an immediate call to action to the about page, something that was absent in their old site. Further down the landing page is a variety of work and case studies, with accurate descriptions and consistent design styles.

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

Leadership

I extracted the leadership section and put it in its own page. In the old website, the leadership section was included in the about page, which caused an enormous amount of scrolling down the page. The simple solution was to dedicate a separate page to the leadership team.

I also included an additional page, which would included a simple about page for the individual.

Showcasing the Work

I redesigned the work page to display 8 projects, as opposed to the endless scroll model the previous webpage used.

The work page is restructured to walk the user through the project “journey”. It was important that we structured the page in a way that retained the users attention, and didn’t require work from the user to navigate the page. The old site displayed one large paragraph of information about the project at the top of the page. In our redesign we made the decision to break up the text, prompting the user to scroll down the page.

Additionally we included an image gallery about 2/3 down the page. We recognized most users want to see the pictures of the results, so providing a gallery to access all the photos of the project was the best way to achieve this.

Integrated Practices

Since the company has many practices & services they offer, it was essential that we displayed these in a thoughtful way, avoiding information overload and crowding as much as we could. To establish hierarchy we put each practice/service in it’s own tab, that way the user can dig into each tab to learn about that specific practice, whereas beforehand every practice was displayed on the same page.

Careers

One of the key users we had previously identified was the “new talent” user. This meant I had to restructure the careers page in a way that made it easy for new talent to explore an open position. The previous design utilized cards, and users would have to click into 3 card levels to view one position. I deemed this as inefficient. Instead, I opted to display all the job openings in one page and organize them by their relevant categorizations.

If users wish to narrow down the options, they can do so by filtering by location or department.

Thank you!