Dark mode



Introducing dark mode for HappyFox helpdesk

The Brief

Agents spend most of their time on the ticket details page & one of the most important things for an agent is finding the right information while responding to the customers. The average response time to customer support tickets is 7 hours 4 minutes. Response time is probably the most important metric & it should always be as low as possible despite the company or industry specifics.

The Process

The Problem

Since there are no in-build dark mode options available, a certain group of users are using a third party plugin to enable dark mode for HappyFox helpdesk. To enable third party plugin, users have to compromise & grant permission to sensitive customer data which is an issue. To address this problem, we decided to provide DM as a default option.

What the design looked like before

HappyFox Help Desk is a complex tool & all the messages are formatted for a light background. To provide a seamless experience, all the messages should be formatted for a dark background. By considering the above scenario, switching between modes should be extremely easy to view the content in original format

1. Requirement Gathering

Preliminary research

Competitors like Zendesk & Freshdesk have third-party extensions has lot of reliability issues e.g. not performing consistently .Relying on some extension isn't a valid solution as it doesn't work in other browsers (safari, edge, etc) and there will always be problems because they don't know exactly what elements to change. Usually these chrome extensions just rely on changing white objects to dark and changing black text to white. So the focus should be building a DM as a default setting.

In-terms of scope, considering it from user & business standpoint, focusing on most used modules will reduce development effort & take lesser time to build & ship the feature. Providing a DM for all modules doesn't make sense, because it is essential to provide DM for ticket modules alone where agents spend most of the time.

2. Define & Design Alternatives

Conducting survey

Gathering Initial Insights via usage metrics

Data shows nearly 33% of our Help Desk users work during night-shift & we conducted a survey to validate if Dark Mode(DM) will be useful. Out of 5,214 total votes, an overwhelming 71.9% of Help Desk users prefer using DM in dark environments. 19.9% said they’re somewhere in between dark and light mode, 8.2% said they don’t use dark mode at all.

Customer demo

We reached out to some old and new customers to get their views about design and usability. At this stage our focus is to demo a few screens & validate some design decisions. Majority of early feedback was positive about the creation experience. But there were concerns about how formatted messages can be displayed in dark mode. Which was a priority for us as well.

We ended the customer demo on a note to get back to them with more complex text formatted messages.

Key Findings: What they Love

  1. Contrast & readability is good in brighter environment

  2. It enhances visual ergonomics by reducing eye strain

  3. Facilitating screens to adjust according to current light conditions and providing comfort of use at night

  4. Retaining the interaction in light mode instead of making all element in grey on black background

Key Findings: What they don't

Even thought quick reply section has basic text formatting options, still users suggest to retain default theme design

  1. In detail page, identifying different type of updates are tough to distinguish. In default mode different type of updates can be identified using subtle background color without skimming through status labels.

  2. Not able to customize the themes like changing font color, background (Complex feature request - Adding more themes should address this)

  3. Not providing DM for 3rd party integration data (Not in our current scope)

  4. Not having DM for Knowledge base quick preview inside ticket detail page. Out of our scope for release 1, but metrics shows this is frequently used feature & we added to release 1.

The Results

What was shipped 🚀

While working on this project was really interesting because customers often confused with a general colour theme customisation/personalisation feature vs an accessibility focused high contrast dark mode. First is cosmetic need while the second is functional need. It is a conscious decision we removed one of the option to personalise the UI while migrating from older version to the new version.

© 2023 shankar.design

Built by Shankar Murugesan

© 2023 shankar.design

Built by Shankar Murugesan

© 2023 shankar.design

Built by Shankar Murugesan

© 2023 shankar.design

Built by Shankar Murugesan