Challenge

As the esports market continues to grow, many teams, guilds, and organizations are moving to sell merchandise and form lucrative gaming industry partnerships. A well-executed esports website design can help brands take their business to the next level.

Bloodfang Raiders (BFR) is an MMORPG gaming guild that has been around for over a decade. They wanted a responsive website to help promote future team merchandise, affiliates/sponsorships, and livestreams. Additionally, they needed a new logo. Deliverables were to include wireframes, mockups, and a 3 page prototype website with mock content.

Approach

Website Discovery Questionnaire

In order to plan my design and determine what problems the site needed to solve, I had a BFR team member fill out a website discovery questionnaire to provide me with information such as:

• Organizational Background. Who the team is, what are they trying to promote, and what is their marketing strategy.
• Website Goals and Objectives. The primary purposes for their site, their key messages, and their measures of success.
• Target Audience. Who the team is trying to reach, how they will use the site, and what are their browsing habits.
• Content and Functionality. What content is needed for the site and what types of things users should be able to do.
• Design. What is the current or desired branding strategy.
• Competitor Information. Qualities from similar organizations to either emulate or distinguish the site from.
• Timeline and Site Constraints. Any deadlines or specific concerns to consider.

Content Creation

Based off the answers from the website discovery questionnaire, I put together mock content for the website, including pages, text, and images. I researched the team’s competitor websites to help determine what pages would be included in the navigation as well as what 3 pages I wanted to develop for the prototype. Next, I chose the home page, contact, and store page because these would showcase a variety of important features and goals of the team website. I then selected eye catching, industry relevant stock images from Pexels and Adobe Stock for each of the pages.

Content specific to the home page included:

• An about section with a button to link to an application page for recruiting new team members
• A partnerships section with logos from various industry brands as placeholders
• A call to action to subscribe to the team newsletter
• A news section featuring adapted copy from an existing news article to serve as a placeholder
• A call to action to shop in the team store

Content specific to the store page included:

• Filters to navigate through the different types of merchandise options
• Mockup images of store merchandise using base images from Stream Labs Merchandise Store

Content specific to the contact page included:

• Contact form with a drop down menu to distinguish the purpose of the message, such as sponsorship/partnership opportunities, media/public relations, business opportunities/collaborations, store, and other

• 

• 

Solution

Mood Board

Firstly, I began with a mood board to help me determine the style for the logo and site design. In addition, I included some visual research on design elements from the main game the team plays, World of Warcraft. The team also gets their name from this game, therefore incorporating these elements would hearken back to their guild roots. I also drew inspiration from other Esports team logos, so that I could emulate similar elements. For example, the use of multiple strokes and two-tone text were features I wanted to include.

I selected a type called Germania for the logo text due to its strong appearance and historical yet modern feel. To maintain a contemporary look and easy readability on the web, I also chose two sans serif types for the website headers and body. To clarify, the image featured next to the text was auto-generated from a website that displays a guild’s tabard and is not an actual logo. It was included on the mood board for inspiration.

Wireframes

Subsequently, I created a series of wireframes for three pages: the home page, the store, and the contact page. Moreover, each page required a wireframe for mobile, tablet, and desktop screen sizes. As a result, I completed a total of 9 wireframes. For the header, the navigation bar was designed to be responsive and turn into a hamburger menu at smaller screen sizes.

• 

• 

• 

Mockups

Similarly, 9 mockups were created and feature the brand’s colors and the actual text and image content, with the exception of the logo. A placeholder image of the guild banner was used instead because the logo design was not yet complete. 

• 

• 

• 

Revised Mood Board

After completing the mockup, I determined that certain colors in the original palette did not offer enough contrast for legibility. So, I adjusted the color palette for more accessible combinations and the mood board. Then I revised the mood board.

Logo Design

The team wanted a simplistic logo design that could also read well on a t-shirt and on other merchandise. Firstly, I created a rough sketch of my idea for the logo. The sketch features the guild wordmark, the guild tabard on a banner, a shield, chains, axes, spikes, and feathers. Then in Adobe Illustrator, I designed the logo using my own created assets as well as modifying free assets from Canva.

Result

Finally, I coded the prototype live site using validated HTML and CSS. Click here to view the prototype live site. It features responsive and accessible styling for mobile, tablet, and desktop screen sizes. In short, I am happy with the project. I enjoyed creating an Esports team logo and finding a way to make it distinct from other brands and true to the BFR brand. If I were to change anything, it would be to revamp the header navigation to have its own background to provide additional contrast for the gradient background. The change in the color palette did help with contrast. However, that extra step would likely improve the organization of the header and distinguish it more from the content. Similarly, it would make the design that much more accessible.

Share:

Contact Me

Interested in my services? Let’s get in touch.