Marvel App

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

Zendesk Guide for Marvel App

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.

Zendesk Guide for Marvel App before

Before

Zendesk Guide for Marvel App after

After

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.

 Zendesk Guide customization for Marvel App

 

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

Murat M.

 

Would you like to add something to our Zendesk premium theme but not sure if it is feasible?

Contact us

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!
Your information was sent perfectly.

Request a Quote

Fill out this brief if you are interested in Zendesk customization.

If you only want to make the help center match your website, buy a theme and branding in our online shop to save time:

* If you don’t have clear requirements and want to discuss a general question, submit a ticket.

What is your name? *

Thank you for taking this questionnaire. It will take two or three minutes only.

Your answers will help us get a sense of where you would like to go.

Feel free to skip any question.

Where can we find your website*

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

What is the single most important objective of the Help Center project? What can you tell us about your project? Do you have any requests or expectations?

Tell us why you are considering the Support Center update? Do you have extra information, comments or requests you would like us to consider?

Do you have a mockup for a new design of the Help Center?

Do you need the header and footer for your Help Center to be the same like on your main site?

How do you think, which of our themes would suit your brand the best?

Use the link to observe our collection:

Choose as many as you like

What is your budget range for this project?

What is your corporate email address to contact you on? *

Please use your corporate email. In these latter days, we receive too much spam messages from personal emails.

What is your phone number to reach you?

Please add the international call prefix (+1, +44, etc.)

Please submit recaptcha