Client

Legends Sports, a Panama-based online gaming company

Role

Graphic Designer, Web Developer, Creative Lead

Project Brief

Legends Sports changed its URL and logo and needed to launch a completely new website, in time for the start of its high season, to create better engagement with traffic driven to it; the new website had to be both scalable and optimized for search engines (SEO ready) from a content standpoint

Key Insight

The former website design was very dark and somewhat hard to read, and the front end was built entirely on standalone HTML; the new website needs to be built using a lighter design that can compete with the top sites in the industry and which is built on a content management system (CMS) to allow non-technical stakeholders to make updates and which is set up to efficiently manage SEO components of each page

Solution

Design and develop a net new custom theme for WordPress with a completely fresh look and straightforward experience to improve engagement metrics; leverage WordPress to facilitate the management of SEO components natively and offer a practical UI for non-technical users to make updates to the website; in addition, deliver a set of email templates, magazine ads and banner ads with updated branding

Specialties Used

UX/UI design: Wireframes and pixel-perfect prototype comps, website architecture and site mapping, user-centered planning, persuasive design
Graphic design: Web and print graphics, banners and ads, landing page and email templates, design composition
Web development: HTML front and back end web development, CSS modules, custom CMS theming on WordPress, JavaScript snippets, PHP and MySQL for CMS

Technologies Used

Adobe Photoshop (Adobe Creative Cloud)
Adobe Illustrator (Adobe Creative Cloud)
HTML
CSS
JavaScript snippets
PHP
MySQL
WordPress

Results

Process

To prepare for this large web development project, I started by interviewing stakeholders to understand the challenges with the former website and I also did research to recommend the optimal content management system (CMS).

I quickly understood that the former website (versions 2.0 to 5.0 below) felt too dark, was hard to read, did not stand up well to competitors’ websites, was hard for non-developers to update (as it was built using plain HTML), which also made the process of launching new pages quickly entirely dependent on developers.

The company needed a new website (iterations shown in versions 6.0 to 8.0 below) that resolved those challenges; it also needed to help support the initiative for implementing search engine optimization (SEO) best practices.

The goal was to improve the user experience, both for actual customers and internal stakeholders, but also deliver a modern website with the back end to handle SEO and ultimately improve engagement.

WordPress, a content management system (CMS), was recommended because it:

• Offered a solid open-source publishing platform that was highly customizable.
• Included a series of native parameters for SEO friendliness that would facilitate optimization.
• Provided a platform that internal non-technical users could use to manage the website.
• Had high security standards and easily integrated with the back end server environment the company had.

Design & Development

To start designing the website and WordPress theme, I relied on UX/UI design principles and visual design best practices. I began with sketched wireframes that I reviewed with leadership early and often to make sure the design was going in the right direction without diving too deep. And once approval was received from the CEO plus marketing and sales management, I began translating the sketches into Photoshop designs.

I heavily leveraged grid systems (marked with black and red lines above) to cleanly distribute the design and information elements of the website for composition. The design rationale, in summary, proposed:

• A design based on light gray that intentionally uses highlights of colors to emphasize the most important sections of the site.
• Attention to typography, color, and graphic design fundaments to minimize navigation effort on the user’s end.
• A thin header that features the company’s contact information and a login area for account holders.
• A top navigation menu with the main 6 pages visited by users.
• A rotator as a main / hero banner that offers the marketing team a vehicle for showcasing the latest offerings and news.
• A call to action (CTA) in the boldest color to drive users to join or create an account.
• A colorful and lively area highlighting the latest deposit bonuses and major sporting events coming up.
• A discreet live feed section pulling in the last 2-4 news stories and events.
• A comprehensive footer providing users quick paths to the most important pages as well as contact information and social media channels to provide the user with more ways to engage.
• A section at the bottom of the website to include a brief “About” text for SEO optimization purposes.

With designs approved, I started development for the custom WordPress theme. The front end development strategy I utilized was to arrange elements (text, images, multimedia, etc.) to enable fast loading time; I used CSS for all text instead of making texts parts of images as a best practice and kept images at a minimum.

I developed all the HTML for the theme.

Branding Updates

As the website was being designed, and after months of negotiations, the company finally acquired the Legeds.com domain; it had been using Legendz.com (with a “z”) for many years. This meant a soft re-branding was needed, to update the spelling of the company name. Leadership did not want to lose the brand equity they had built over the years, so the logo was simply updated to use an “s” instead of a “z”.

The brand’s color palette, however, did go through a bigger makeover. Moving away from the orange-gold and black theme of the previous websites created the opportunity to introduce new colors that would complement the logo and become actual resources that could be used in visual design.

The new colors were strategically used throughout the website to draw attention to high-priority traffic targets, such as the “Join” or “Deposit” CTAs.

The primary font was replaced with Helvetica. I selected it primarily for its clarity, neutrality, and readability. The simplicity of Helvetica strikes a balance with the somewhat ornate logo, which was one of my strategic reasons for choosing it.

Promotional Assets

A series of new marketing materials were prepared for the new website launch: email templates, banner ads, magazine ads. All assets were made with the same user-centered design concept of simplicity and updated branding.

Email templates were designed and developed to highlight the benefit to the user, in this case bonuses and offers. The header and body copy are meant to provide easy ways for the user to get in touch.

Banner ads placed on display networks are, again, simple and feature upcoming events. Color was used to draw attention to the banner. In some versions created, animated .gifs with subtle animation were implemented to increase attention to the ad when displayed on websites.

Magazine ads placed in sports and gaming publications feature the new color palette but also include darker, black elements to leverage the brand equity built under the previous brand guidelines.

After its launch at the start of the football season, the new Legends website generated increases in user visits and page views and decreases in bounce rates. Leadership was satisfied with the progress and excited as search engine rankings increased and customer acquisition grew.