Riot Games

Non-standard customization of Zendesk solutions

Customized Zendesk for Riot Games

About

Riot Games is an American video game developer, publisher, and esports tournament organizer. It’s best known for League of Legends, a multiplayer online battle arena game that has gone on to be the most-played PC game in the world.

We customized two Zendesk help centers for Riot Games, one was an early concept, and another one was the rebranded final version.

Challenges

“We asked for many customizations that were not standard Zendesk out of the box solutions and Lotus Themes were able to build them cleanly.”

Darcy L.

Riot Games wanted to customize their help center because standard Zendesk out-of-the-box solutions didn’t meet all their needs. As web development professionals, they had detailed requirements for their knowledge base. They prepared desktop and mobile wireframes illustrating their perfect help center. It was also crucial for Riot Games to be able to maintain it easily, and improve the mobile experience.

One of the challenges was that the company had strict safety requirements, and they couldn’t give access to their websites to third parties. To help them maintain their customized support site on their own, we prepared instructions where they could find answers to their questions and make changes by themselves fast and easy.

Solution

Zendesk Help Center #1: Early concept

When Riot Games approached us for the first time a year ago, they chose the Clover theme as their base template because it’s more similar to their design, and they liked animations for the icons. This Zendesk theme is responsive, so there were no problems with mobile optimization. We also made sure that the images and icons were lightweight to load quickly on different devices.


To build all the customizations which were restricted by the default Zendesk Guide functionality, we used JavaScript and Zendesk API.


We started with branding and a new header and footer to make the help center in line with the main website and added the hero unit to inner pages. To customize the homepage according to Riot Games’ requirements, we changed the layout, added the background, custom blocks, icons, and custom text to the category list. To provide a more engaging experience, icons on custom blocks have the 360 hover effect.

Icons have the 360 hover effect

Icons have the 360 hover effect

The homepage also had two blocks at the bottom: the first one displayed ‘Helpful articles’, and the second one showed ‘Fun stuff’, with articles categorized by labels. When there are important messages for users, the help center can display Alerts.

We also used the Side navigation extension on category and section pages and Table of contents in articles to make information easier to navigate. The user can share an article using different options, like social media or simply by copying the link. Articles on the ‘Search results’ page are centrally aligned in contrast to the default two-column alignment for the knowledge base and community.

Search results are centrally aligned

Search results are centrally aligned

Riot Games needed a multilingual help center, and we organized additional testing for several languages: English, Arabic, Greek, Simplified Chinese, Thai, and Russian.

Dynamic ticket form

We created a dynamic ‘Submit a ticket’ form. The button led to the section with six tiles describing possible problems. When users clicked on one of the tiles, they got to an article page with four links (platforms). After choosing the platform, there appeared an accordion with further steps. By clicking the accordion, the users saw an answer, a description, or a call to action and a button to the corresponding ticket form.

Feedback form

We added an option to leave feedback if the user decided that the article wasn’t helpful. It was possible to enter text in the field and submit it via the button. Then the user was taken to the ‘Submit a request’ page where the entered text was automatically added to the custom field.

Zendesk Help Center #2: Rebranded final version

Riot Games rebranded the main website and needed the same for their help center to stay in line with the new brand. We kept the same header and footer and made a few adjustments to the appearance and functionality of the support site.

We adjusted the hero unit by customizing the search box, making diagonal graphics for the hero unit, and removing the text. We changed icons on the custom blocks, redesigned the category list, and added icons to new category tiles. The final version of the help center also displays the ‘Can’t find what you’re looking for’ block.

Customized category list on Zendesk

Customized category list on Zendesk

We also restyled ‘Helpful articles’ and ‘Fun stuff’ blocks and added a switch for the most popular and most recent articles. A label script lets Riot Games’ team choose the relevant articles manually. The lists are also displayed on standalone pages that are hidden from users/agents and the category tree.

Helpful and Interesting articles with a switch for most popular and most recent

Helpful and Interesting articles with a switch for most popular and most recent

The list of sections and articles was redesigned. ‘Helpful articles’ and ‘Interesting articles’ (former ‘Fun stuff’) blocks on category and section pages are absolutely the same as on the homepage. Article pages have a customized ‘Related articles’ block at the bottom that has a switch for most popular and most recent. We also added Alerts and restyled formatting components.

Before

After

Dynamic ticket form

The ticket form stayed dynamic, but the flow was changed. Instead of the six tiles leading to different pages depending on the issue, now the submission starts with a dropdown selector that allows you to choose the request type.

RTL languages

This time Riot Games was especially concerned about Arabic translation because it has to show up as right to left, and this may flip the entire interface. With this problem in mind, we additionally tested the help center for RTL languages and made sure that the Arabic interface had no errors.

Results

Riot Games has a customized Zendesk help center that meets all their non-standard requirements.

Zendesk customization for Riot Games

 

“Not only were Lotus Themes extremely helpful, they were diligent and fast to respond and adapt to any 'on the fly' edits. They were well priced for the level of quality. The developers were by far the best part, they were extremely responsive and creative. I would recommend them fully if you have a site design in mind and want it executed to a fantastic standard.”

Darcy L.

 

Have your Zendesk customized
to a fantastic standard

Get started

How to build a help center capable of reducing tickets?
Read the white paper
We use cookies to provide you with a better service and for promotional purposes. By continuing to use this site you consent to our use of cookies as described in our Privacy & Cookie Policy .
Thank you!

We’ll get back to you within 24 hours.

In the meantime, you may look at the examples of Zendesk help centers we customized.

Bonus: We’ve emailed you “Zendesk Help Center Best Practices from CX Leaders”

Get a Personalized Solution for Your Help Center

Answer 7 questions and get an exact quote. It will take 2-3 minutes, and you'll get a custom help center solution that solves your business problems.

Bonus: Get a compilation of Help Center Best Practices from CX Leaders

What is your Help Center URL, if you have one?

Where can we find your website? *

Add a link to your mockup if you have it.

What problems do you want to solve with the help center?

The better you describe your current situation, the more personalized solution we’ll offer you.

What is important to you in this help center project?

Please describe what is important to you to make a decision (except the price).

Which of our themes would suit your brand best?

Choose as many themes as you like. You may skip the question if you aren’t sure.

What is your budget range for this project?

The higher the budget is, the more customized your help center can be. Lower budgets allow you to get more standard changes.

Enter your corporate email to get your personalized solution and quote

Email *
Name Phone number (optional)
Please submit recaptcha