INTRO

Rebrand = Redesign.

Berkeley Legends is a competitive and beginner friendly gaming club at UC Berkeley, officially sponsored by Riot Games, Twitch, MSI, HyperX, and more.

Following a rebranding of their club, Berkeley Legends requested from my team at Innovative Design to design and fully develop a new website to reflect the branding changes, as well as improve the website UX, catering to those who are new to their club.

01 DISCOVER

Breakdown of the current experience.

After getting survey responses from current club members and interviewing representatives from Berkeley Legends, we found that their current website was, at times, confusing to navigate for those who were unfamiliar with the organization, and it also didn’t fully reflect their active community.

They had many parts to their club (how to join, etc.) that was not clearly conveyed in their current website.

Style Guide.

My team was provided with the style guide of the club rebrand to guide future iterations.

Moodboard.

We also established a more definitive and stylistic summary for the new website with visual aids.

02 DEFINE

Design Direction: Welcoming, Friendly, & Exciting.

My team began to synthesize our insights, as well as organize our tasks based on the level of priority and amount of time needed for each feature/page. We also structured a design direction that would *direct* the course of our fidelities.

Problem Statement.

Gathering all of our presented and sourced resources so far, we started to lean towards the goal of facilitating the discovery of Berkeley Legends. Those who are already interested in joining might be more motivated to dig through the website over someone who was simply curious and undecided about joining.

So…

HOW MIGHT WE make Berkeley Legends easier to navigate and more enjoyable for newcomers?

03 DEVELOP

Iterations & Improvements.

Working with 2 other designers on my team, we each iterated on our ideas and convened during our weekly stand-ups to collaborate further.

After reorganizing the information architecture of the website, I explored low-fidelity layouts, created mid-fidelity wireframes, and then developed high-fidelity screens, as well as implementing major improvements along the way.

Reorganizing the Information Architecture.

The old organization of the website made it confusing for new users to find what they were looking for, so we adjust the pages shown on the navigation bar and the information displayed on each page.

Some Low-Fidelity Layout Explorations.

In this stage, we explored multiple ways to design our layouts. Examples include explorations with how we should display the “games we represent” section to highlight their top played games but also indicate more possibilities.

Mid-Fidelity Wireframes.

Development Constraints.

When designing the Shop Page, iterated on a few designs in collaboration with our team. We first designed Iteration 01, but our developers suggested an idea for Iteration 02 that they communicated would be more feasible. After compromising, we made the tradeoffs to continue with Iteration 03 based on the reported feasibility of development and amount of the time we had left.

Iteration 01