In this case study, I delve into the specific enhancements and design decisions we undertook to simplify and enhance the user experience for our fellow employees. Join me as I walk through our challenges, solutions, and the impact of our improvements.

As you can see, the redesigned dashboard boasts a cleaner, more contemporary aesthetic. We've incorporated well-defined cards as background containers for various components, ensuring a stark contrast in the UI elements. Our tabs now have a modernized appearance, and we've enhanced the action buttons to make them more prominent and intuitive.

A significant aspect of this redesign was the initiation of a modern design system from scratch, which played a pivotal role in updating the dashboard's look and feel. In terms of technology, we primarily used the Angular front-end framework. While the table component is from a third party and not Angular-specific, all other elements are built using Angular. We also extensively utilized Angular's out-of-the-box components in conjunction with the 'Angular Material' library.

Before

After

Navigation

Prioritizing a non-intrusive navigation that seamlessly integrates with the user's workspace and logically groups product sections was paramount. Anticipating future expansions, we recognized that a top navigation would inevitably run out of space. Rather than waiting for this issue to arise and then overhauling our product's design, we proactively devised an elegant solution.

Before

After

We introduced a collapsible left navigation structure for the dashboard to streamline the report-building process. Our primary users, the research analysts, rely heavily on our dashboard to produce an average of 10–15 reports daily. Their typical report-building workflow is as follows:

1. Date Range Selection: Begin by choosing the desired date range.
2. Metrics Selection: Opt for multiple metrics relevant to the report.
3. Metrics Grouping: Decide on the grouping of these metrics, whether by days, weeks, etc.
4. Filter Application: Apply specific filters to hone in on pertinent data.
5. Report Generation: Initiate the report, which typically requires a 10–15 second wait time for loading.

‍

Before

It's evident that users must navigate a series of form fields just to generate a single report, highlighting the complexity of the current process.

After

‍

Introducing Shortcuts:To expedite the report-building process, we introduced keyboard shortcuts:

• Tab: Navigate through fields.
• Arrow Keys: Select values from dropdown menus.
• Enter: Confirm selections.With these shortcuts, users can now build reports much faster using just their keyboards.

Saved Reports:Upon observing our users, we identified a recurring pattern: they often created similar reports multiple times a day. Our solution was straightforward — offer a set of saved report templates that users can quickly access and utilize.

Optimizing Space:The number of Metrics, Filters, and Groups varies significantly across different reports. Allocating fixed space to each field was inefficient and led to wasted space. To address this, we transformed our query design into a fluid flow, resembling the structure of paragraph text.

Overview Statistics:These statistics provide users with a broad perspective on the data, highlighting potential problem areas at a glance. In our context, the overview stats display the total user installs and uninstalls, along with a PNL summary for the selected time range, as illustrated below:

In the previous UI, we recognized that certain numerical relationships, which are crucial for understanding, were not adequately emphasized or highlighted.

Pie Charts:To better highlight the relationships between key metrics such as Installs, Uninstalls, and Recovery, we incorporated pie charts. These visual aids make it easier to discern and understand the interplay between these numbers.

Grouping of Related Metrics:We've visually grouped related metrics using separators, ensuring that users can easily identify and understand related data points at a glance.

Action Buttons:Buttons are essential for facilitating user actions within the interface. By applying the Gestalt principle of proximity, we've optimized the style, placement, and spacing of these buttons. This design approach ensures that users can intuitively find and understand related actions based on their visual presentation.

Categorization of Actions:

1. Pre-Report Actions: These are the steps taken before generating a report.
2. Generate: Initiates the report creation process.
3. Cancel: Aborts the report creation.
4. Post-Report Actions: Once the report is generated, users have several options.
5. Save: Allows users to store the report for future reference.
6. Download: Provides an option to download the report for offline use.
7. Share: Enables users to share the report with others.
8. Report View Actions: These actions determine the format in which users prefer to view the report.
9. Table: Displays the report in a tabular format.
10. Graph: Visualizes the report data in a graphical format.

‍

Below, you'll find a glimpse of the design library we meticulously crafted.

A consistent family of buttons and their logical placement throughout interface makes easier for the user to get their job done. Micro-interactions: Loaders

Any interaction taking more than 3 seconds on your screen needs feedback. Depending on what is happening in your UI and the time it's taking you can use a variety of solutions.

Progress bars: Looping Gifs cant be everywhere! (especially when your request takes a long time to process) Our users faced the similar issue, Progress bar helped users get a fair idea about the load time

Loading animations: An interesting loader animation helped us manage wait times for the user. It gave us an opportunity to surprise and delight while still maintaining simplicity

Skeleton screens: A skeleton screen gives a visual cue to the user. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. Improving Tables

Horizontal scroll: Scrolls helped navigate through tables that had more column than that could fit on the screen

Fixed header: Floating headers on the table make a lot easier to figure out the columns that user is viewing when scrolling down

Row hover: Too many columns make hard for the user to keep track on the rows, Rows that highlight on hover makes horizontal viewing at ease

Date picker

Date range set up in one go: It was clear that user had to navigate through 5 different fields to set up their date range. Our solution was to help the user set up the date range all in one place.

Time range slider: Selecting time of the day was also a problem typing text for time range was also a problem. We decided to introduce a time slider which can simply be dragged around by the user to select the right time range

Zero state screens :

Tips: We utilized zero state screen for using shortcut tips that can enhance users efficiency and start building reports swiftly

Error screen: An Error screen that guides the user to possible next action improves the user experience. In our case, we used action button “Try again” to re-run the command. 

Graphs :

Finally coming to the heart of the dashboard-graphs. A good visualization of the data can give powerful insights to the users. On the other hand, they can equally obscure the user's vision if not presented properly. Below examples will cover some things we did for our graphs :

Horizontal bar charts: Vertical bar charts are best for time series they do not go well with longer labels we introduced horizontal bar charts that provide enough room for labels

Limiting Pie charts to maximum 6 values: Adding more than 5 values to a pie chart prevent the user from comparing the values visually rather use stack chart in case you have many values

Added stacked charts: In order to see the breakup of values over a time series we added Stacked charts to the interface

I should add that this process really uncovered a lot of design insights which I would have never known if I made these improvisations based on my perception about the users.