Marvel App

There is nothing in Zendesk customization that Lotus Themes could not do

About the Company

Marvel is the collaborative platform for wireframing, design, prototyping and developer handoff. It puts the power of design in everyone's hands and provides everything you need in one place to bring ideas to life.

Challenges

Marvel’s team came across our premium themes which they liked, but their additional requirement for Zendesk customization was to display embedded Wistia/YouTube videos on the homepage of their knowledge base. They wanted to put videos front and center of the theme.

Also, Marvel liked Braden and Mink and wanted to mix some elements of these Zendesk templates. In particular, they desired to have some components from Mink on the homepage and keep the article layout of Braden.

They also provided us with a prototype for Zendesk customization, which isn’t surprising at all for a powerful and easy-to-use prototype tool like Marvel App :)

Solution

Phase 1

We took Braden as a basis for Zendesk customization, realized its potential regarding additional formatting components that are included in all our premium themes and branded it to match Marvel’s style guide. We decided to start with basic changes in the template and keep the spacing and layout so that we could make additional changes after Marvel’s team tested the demo Help Center.

We kept a sticky header which is part of the Braden template for Zendesk Guide, removed the ‘Sign in’ button and added the third custom block with a hover effect like all the other blocks in this theme. We also renamed ‘Promoted articles’ to ‘Selected articles’ and added ‘Still have a question’ block to all pages. As for the footer, we kept the default Braden one. To help Marvel display notifications on their Help Center, we suggested using our alert extension for Zendesk.

The article page also has some changes: we removed the author, date, comments, and ‘Recently viewed articles’. Moreover, we added the table of contents extension for Zendesk to the right to allow end-users to jump to the relevant section of the article in a moment without having to scroll the page up and down.  

 

Phase 2

After the first round of revisions, Marvel provided us with a list of changes they wanted to add to the existing custom theme for their Zendesk Guide. Their wish was to make blue links in 'Selected articles' black and make them change to blue on hover. Also, they would like to copy this style (black, blue on hover) for all the links in ‘Articles in this section’ and categories. Additionally, we added an underline under the h1 and h2 titles. Finally, we made the callout edges rounded.

There were some issues with the placement of Table of Contents and ‘Articles in this section’, so we recommended keeping the former on the right and the latter at the bottom. Mobile version features Table of Contents as an accordion menu at the top of the article by default in Braden.

Video tutorials

One of the main Marvel’s requirements for Zendesk customization was related to video tutorials. We added them to the homepage under the custom blocks. All video tutorials have short descriptions and open in a lightbox.

 

Results

After we completed Zendesk customization, Marvel installed the custom theme on their Help Center successfully on their own, and since then their users and staff have been enjoying the new great experience.

 

“Thanks! Looks great now. You've been super helpful!”

Murat M.