A new theme for Jira Service Desk Portal - Warfighter Made - Part 7

Without a doubt, Jira Service Desk is one the best products that Atlassian is releasing to the market. It has evolved with every new release and the Portal for end users and Confluence knowledge base is absolutely clean and easy to use. Moreover considering hundreds of add ons available in the Atlassian Marketplace.

As I mentioned on previous posts the Warfighter Made platform that we are developing has three pillars: Confluence collaboration environment, Jira project tracking and finally the Help Center based on Jira Service Desk. However, when we started showing the out of the box portal to WFM CEO, Robert Blanton, we noticed that it was a disconnection between their website and the new Help Center. That particular situation motivated the search for a theme for Jira Service Desk portal and I found Refined Theme for Jira Service Desk from RefinedWiki.

The add-on easily and in matter of minutes allows the customization and branding of the portal, It was really exciting to see how both environments started sharing the similar look and feel.

Before and After

 The Warfigther Made Help center has three sections: one to assist veterans, one for those that are trying to assist and finally the last one for the IT team. In other blogpost we will discuss how we address some particularities about the first one, for now I will focus my discussion on the look and feel of the portal.

 

JSD1.jpg

 Need Assistance options in the out of the box portal view

JSD2.jpg

 I want to Assist option in the out of the box portal view

 

 JSD3.jpg

Need Assistance option expanded after verification of the veteran. Once the veteran is verified by Warfighter Made staff the options to Customize Vehicle, Shop Therapy, Trip Therapy and others are activated. (we will explain how we did it in an upcoming blog post)

 As you see on the previous screen-captures the user experience out of the box is good enough and it could fulfill any type of need for a self service portal. The challenge for us was that the user will be landing here from a link that we will add to the regular organization website.

The theme for Jira Service Desk will help us filling the gap between functionality and branded look and feel.

Warfighter Made screen2.png

 

 JSD4.jpg

The new branded portal after configuring RefinedWiki theme for Jira Service Desk. Notice on the screen capture the additional modules added for Support our Veterans and Our Projects. This is after the verification of the veteran.

JSD5.jpg

I Want to Assist section with the new header background using the new customized theme.

1,2,3... Done!

Yep, is that easy, it is really amazing, when you have time crunch, to find an add on that has a straight forward configuration. Kudos to the team behind this product. (Confluence theme requires a little bit more effort to accomplish the same, but it is due to the complexity of the supporting product itself). Let's go behind the scene to explore the configuration of this particular theme.

theme-jsd-config.jpg

System Administration / Atlassian Marketplace / Add-ons / Refined Theme / Configuration

theme-jsd-config-general.jpg

First of all, verify that you have the right Theme selected as global and then work on the theme with the customization and look and feel changes.

theme-jsd-config-2.jpg

Configuring the theme consists on the selection of style, colors and overall layout.

theme-jsd-config-viewedit.jpg

From the actual project you can visit and edit the portal to narrow the theme from the global layout.

The Customer Portal Editor that is part of the theme for Jira Service Desk allows you to work on the landing page for the user by adding components to the page and modifying the layout of the information. You can start from a template, add sections, split sections and add modules that will contain different type of information.

 

theme-jsd-config-3.jpg

Portal Editor parameters

theme-jsd-config-3-b.jpg

Final outcome of the Search Highlight section based on parameters above

theme-jsd-config-3-c.jpg

Parameters for the Request Types block

 

theme-jsd-config-3-d.jpg

Outcome based on parameters: Layout: List / Columns:2

theme-jsd-config-3-e.jpg

Different outcome by changing parameters to: Layout:Icons / Columns:3

 

 In addition to the regular information for the self service portal, the add-on allows you to add more sections and modules for navigation content. For this particular project I added one section with two columns, one for Donation and other for Projects.

theme-jsd-config-modules.jpg

Parameters for the Navigation content modules.

theme-jsd-config-modules2.jpg

Outcome based on parameters above.

In summary

I personally think that the user needs to enjoy the experience and find what they are looking for quickly. I hope this brief post can show you the potential of this add on that we are using. I understand that there are others similar on the marketplace,  but we decided to use Refined Theme due to the user friendly configuration.

As we approach to the launch day we are finding more features that add value to the final product. As I mentioned on the previous blog about using RefinedWiki products I would like to emphasize the high quality of the team behind the product. They are actively participating on this project, not by just donating the license, but also reviewing the design and verifying the final configuration. In addition to that, and despite of the time zone difference they were able to have a conference call with me to help me with the basics. Another needed jump start. Thanks RefinedWiki Team!.

 

 

More about this project

The goal is to share on this series of blog-posts how we are building the new collaboration platform for Warfighter Made. See below the list of completed and planned blog posts.

 

 

 

 

 

 

 

TAGS
AUG Leaders

Atlassian Community Events