Non-standard customization of Zendesk solutions
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.
“We asked for many customizations that were not standard Zendesk out of the box solutions and Lotus Themes were able to build them cleanly.”
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 support site. 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.
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.
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
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.
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.
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.
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.
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.
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.
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.
Riot Games has a customized Zendesk help center that meets all their non-standard requirements.
“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.”