Case Study: Theming & Navigation of an Analytics App

Enhancing the user experience of an analytics application by redesigning the navigation & theming.




Introduction

The analytics application displays charts and visualizations on the key performance indicators of a business like profit & sales, and organizes them into slides for easy access.

Scope of Work

The broad scope of this project is:

  1. To empathize with the users and understand their pain-points

  2. To understand the design system of the application

  3. To redesign the application towards a more seamless experience for the users

Identifying High-Level Problems


1. Application was not adaptive to usage at night

Many customers used the application after the sun went down, especially in times of pandemic when they managed their business working from home. But the application was not developed keeping low light surroundings in mind.


2. The menu system was not optimized for quick navigation

Switching from one page to another in the dashboard took two clicks. It added up to a lot of time that needed to be optimized.


3. Repititive tasks like switching between slides were not efficient

If a customer wished to switch back and forth between two slides, it involved a lot of friction in using the application.



Competitive Analysis

I analysed Microsoft Power BI, SAP Analytics, Google Analytics, and Salesforce Analytics and tried to understand their interfaces.

Insights


1. Adoption of dark theme: Enterprise or B2B applications that serve large-scale business have not yet adopted dark theme as readily as the direct-to-consumer applications.


2. Extensions for theming: There are various extensions available on the browser extensions webstores which can help you force a dark mode a website that does not have a dark theme, by overriding certain CSS properties.


3. Multi-tasking at night: If the customer is working on multiple applications together, some of which support dark theme, it creates friction for the customer in terms of changing the screen brightness every time they switch apps.


4. Collapsible sidebar for navigation: There were various services like BitBucket and JIRA which I frequently used and found their navigation to be extremely convenient. The switch from one page to another is simple on them and takes just one click.


5. Various orders for sorting: Multiple playlists present in one's Spotify library can be sorted with different orders like recently played, recently added, etc.



Understanding the app design system

I discovered the official design system of the company—BlueWater, and understood its colour schemes and design guidelines.





1-Click Navigation Menu


Problems with the Old Design

The navigation menu of the application had some problems like:

  • If a user wished to navigate from one page to another, they needed to first click on the menu icon, wait for the menu to open, click on the desired page, wait for the menu to close, and then the page loaded. A lot of time was being taken in an action that the user performs multiple times every single day.

  • Because the names and icons of the menu items are not visible unless the user clicked on the menu icon, the users who are relatively new to the application might not have a clue of which place to go to access a particular page.

  • Although the major navigation items were visible in the menu, there were some navigation items like profile, navigation, log out, which were present separately in the top bar. This meant that there was not just a menu for navigation, but there was a top bar as well. It took up a lot of space and was redundant.


Solution

  • A sidebar can solve the problem of space as well as visibility. Every oage would be visible on the screen at all times with an icon and if a user wishes to view the name of the page as well, they can expand the menu.

  • The menu icon can act as a toggle to expand and collapse the sidebar.

  • Everything can be included in the sidebar and the topbar can be completely eliminated.


Design Process

I started off by creating an expanded state of the sidebar which was very similar to the existing menu. I also got rid of the topbar by including all the topbar items like notifications, profile, about, log out into the sidebar.


I created a collapsed state of the sidebar in which the items remained at the same place but the text would not be visible so the sidebar would be less wide.





Dark Theme Toggle


Problems with the Old Design

The exiting theme of the application had some limitations like:

  • The majority of the area on all the screens was white background which affected the eyes at night.

  • Although the main screens were in white background, elements like the menu and the topbar were in dark theme, so it was possible that a simple switch of light to dark and vice-versa would not suffice.

  • Some elements had drop shadows so that a sense of difference could be created between elements but showing shadows on dark backgrounds is a tough practice.


Solution

  • An option to switch the theme to dark can solve the problem. The theme will have a colour pallete which not only support working in low light but also are an extension of the existing theme.

  • Elements with plain light backgrounds can be replaced with dark backgrounds.

  • A simple toggle switch can be given to the user for easy switching between the themes.


Design Process

I started off with the swatches. I collated the foreground and background colours of all the pages to create a spectrum of swatches. I simply swapped the colours to get an idea of how can the swapped colour scheme look like.


I created a switch to toggle between light and dark themes. I found the sun and moon combination the best implementation to switch themes.





Deck Ordering


Problems with the Old Design

The existing way of deck listing had some flaws:

  • If a customer was tracking a metric which requires them to switch back and forth between two slides, and if the two are some places apart in the horizontal scroll, it resulted to an increase in the friction in using the application.

  • The customer could drag the other slide and drop it close to the first one but it wasn't the ideal solution to drag and drop in a long horizontal scroll.

  • The user did not have control over how they wanted to view the decks—would they like to view the ones they recently modified first or the ones they recently created first.


Solution

  • If the user sorts the slides with the 'recently opened' order, they would not require to scroll back and forth to access their last opened decks.

  • If the desired sort has been applied, the user would not require to drag & drop the slides close to each other to access them frequently.

  • The user has the complete control over how they want to view the decks—custom order, recently created, recently opened, recently modified, alphabetical order.


Design Process

I started with designing some sort of a sorting selector that could show 4-5 different types of sorting options. I had two options for this: either all the sorts are mentioned directly on the screen, or are displayed in a dropdown menu.


The drag & drop functionality should be active only when the 'Custom' order has been selected. If the user tries to drag & drop in other orders, the user would be notified with a popup that if they wish to customise the order, they can do so by switching to custom sort.




Check out the Figma Prototype of the application :



Conclusion

This project was great in terms of learning as it made me charter into undiscovered areas of product design & development.


Key Learnings

The highlights of this project that were sources of key learning for me were:

  • Understanding & modifiying components of an application in the analytics & visualizations space

  • Performing competitive analysis to understand the market and trends

  • Working within a company-wide design system and adapting it for your application


Takeaways

  • Optimisizing tasks which are the most repititve can save a lot of time of the users and enable them to be more productive

  • Staying up to date with modern trends can help understand the market patterns and user behaviours


And it's a wrap!


This was an exciting project to work on, especially since I had been involved with the application for more than a year.

Do message me on Twitter or LinkedIn if you want to discuss further. 😄


I also designed a Website for a Kidney Doctor. Do check it out!