Information Architecture Revamp

12 mins read

Introducing Multi-Level Navigation for Medly Admin Dashboard

Introducing Multi-Level Navigation for Medly Admin Dashboard

How an un Information Architecture Redesign Sped Up Hospital Admin Workflow by 30%

Information Architecture

UX Experiment

SaaS

Client

Medly Health

Industry

Healthcare & Insurance

Published Date

02 February 2024

Overview

Role : Product Designer 2

When : March 2022 - July 2022

Platform : B2B , B2C SaaS Webapp

Responsibilities : UX Research, UI Design, A/B Testing, User Testing, Prototyping, Handoff Documentation

Key Deliverables :

  • UI Design

  • Wireframes & Prototypes

  • Information Architecture (IA)

  • User Flow Diagrams

  • Usability Testing Reports

  • Implementation Plan

  • Design Handoff Documentation

NOTE : In-depth details under NDA

Redesigned Left Navbar

Context

Medly: A Healthcare Management Platform

Medly's platform simplifies the complex world of healthcare management, empowering hospital and pharmacy administrators across the US.

It does so by helping streamline drug procurement, allocation, and distribution for optimal efficiency.

A user-friendly navigation bar is crucial for the platform's success, allowing administrators to move seamlessly between selected hospitals and pharmacies to monitor data and metrics on the Admin Dashboard.

Key Entities: Hospitals and Pharmacies:
In the US healthcare system, hospitals and pharmacies work in tandem. A single hospital often partners with multiple pharmacies to expand its reach and manage drug distribution.

Medly's platform reflects this relationship, allowing hospital admins to manage and interact with all their associated pharmacies. And, allowing super admins to manage tasks, support and govern the roles and workings of all it’s clients (both hospitals and pharmacy chains)

The Navigation Challenge: Medly's original navigation system made accessing pharmacies inefficient. The hospital admin dashboard, one of the key pages and the most important as it served as an action centre for all operations in one glance, relied heavily on this navigation. Admins had to select a hospital first, followed by the specific pharmacy – a process that was cumbersome and prone to errors, especially since many admins might not know which pharmacies are linked to a specific hospital. This system caused delays and increased frustration for users.

Opportunity for Improvement: While a navigation redesign wasn't initially prioritized, I recognized the urgent need to address this critical pain point. User feedback and my own observations made it clear that a streamlined navigation system would significantly enhance platform usability and the overall user experience for busy healthcare professionals.

Taking Initiative: I proactively took the lead on this project. I envisioned a navigation system that facilitated effortless switching between hospitals and pharmacies, directly boosting efficiency and reducing errors.

NOTE: This started off entirely as an experimental project with no guarantee of success. However, I began exploring potential solutions to see if I could find tangible improvements and implement them to enhance the platform's usability.

Entity relations between Medly Super Admin, Hospital Admin and Pharmacies

Problem

Medly's platform, while designed to streamline healthcare operations, was hindering user efficiency.

Initial analysis revealed specific page level errors and increased time taken to select pharmacies.

This bottleneck created a cascade of challenges:

  • Complex Navigation & Cognitive Burden: The requirement to remember specific hospital-pharmacy pairings and navigate multiple dropdowns led to

    • Delays and Errors : Users were prone to selecting the wrong pharmacies or hospitals, slowing down critical operations.

    • Frustration and Dissatisfaction: Administrators felt the system was fighting against them, rather than supporting their work.

  • Lack of Flexibility: The separate two-step navigation process (hospital selection followed by pharmacy) added unnecessary friction:

    • No Direct Search: Users couldn't simply find the pharmacy they needed, increasing task completion time.

    • Difficulty Switching: Moving between pharmacies for quick comparisons was a cumbersome and error-prone process.

  • Impact on User Experience and Operations

    • Dissatisfied Users: Support tickets and direct feedback reflected widespread frustration with the navigation, harming the overall platform experience.

    • Slowed Workflow: Excessive clicks, task times, and errors were negatively impacting operational efficiency for a time-sensitive sector.

    • Strained Support Resources: Customer support was overwhelmed, dealing with navigation-related issues rather than more strategic needs.

    • Quantitative Evidence: Analytics reinforced these observations, showing high click counts, long task completion times, and frequent navigation errors. This data made a clear case for redesign.

Key problems identified

What I did

  1. Identifying the Bottlenecks: Initial observations of the platform personally using admin and super admin level test access accounts revealed an inefficient navigation system.

  2. Validating the Issue: Collaborating with colleagues confirmed that the navigation was a widespread pain point. This prompted me to conduct my own research, delving into analytics and user feedback to quantify the problem's impact.

  3. Taking Initiative: Recognising the critical nature of this issue, I proactively presented my findings to the team, advocating for a redesign despite it not being on the year’s product features roadmap.

  4. Establishing Benchmarks: I developed clear metrics for evaluation to establish a baseline and track the impact of potential solutions. These included

    • Ease of use (scale of 5)

    • Ease of development (scale of 5)

    • Ease of Implementation (scale of 5)

    • Adoption %

    • Effort vs Impact scale

    • Time taken to complete task

    • Number of errors

  5. Experimental Approach: Balancing my primary design responsibilities, I launched a focused experiment to explore alternative navigation structures. This involved:
    Thorough IA research informed by both quantitative and qualitative data.
    Multiple iterations (10+) and analysis guided by parameters listed above in the benchmark metrics.

  6. User-Centric Testing: Setting up a core user group and conducting multiple rounds of usability and A/B testing were central to my process.

Key steps and iterations

Methodology: My approach was a data-informed UX experiment, continuously seeking to improve upon the original navigation and followed the design>test>analyse> process for the iterations.

Process

Iteration 1: Enhanced Search or Global Search

Concept: Cross-entity search (hospital + pharmacy) with unified results.

Reasoning: Addressed lack of direct search and the forced two-step process allowing a one stop solution to find and setup pharmacy

Limitations:

  • While potentially faster, this demanded significant search optimisation and could still involve a long list of results.

  • Users struggled with search terms, especially in navigating complex hospital-pharmacy relationships.

  • Instances of "no data found," even when pharmacies existed, led to frustration and wasted time as users assumed they made errors.

Iteration 1 : Global Search


Iteration 2: Secondary/Tertiary Navigation (Left, Left, Top)

Concept: Hospital as tabs then pharmacies displayed as tabs.

Reasoning: Addressed the memory recall issue for hospital-pharmacy associations.

Limitations:

  • Limited tab space hindered growth and would affect scalability (if a hospital has many pharmacies).

  • Cluttered the dashboard, reducing space for other important content.

  • Was still confusing for users, especially with multiple hospitals and pharmacies.

Iteration : Left, Left, Top Navigation


Iteration 3: Left-Hand nested secondary and tertiary list (Left, Left, Left Nested)

Concept: A vertical list of all pharmacies on the left side of the dashboard.

Reasoning: Aimed to make all pharmacies visible at once, single space for vision fixation

Limitations:

  • Overwhelmed users with data

  • Added a scroll for long list results dropdown

  • Was visually cumbersome.

Iteration 3 : Left Left Left Nested Navigation

Iteration 4: Multi-Layer Menu (Winning Solution) (Left, Left, Left)

Concept: Vertical sidebar navigation with expandable sections for hospitals and pharmacies

Reasoning: Prioritized findability, scalability, seamless dashboard integration, and quick access to commonly used pharmacies.

Research Backing:

  1. Why vertical side bar over tabs

    • Increases findability and decreases interaction cost.

    • Removes the visual design constraints that limit number of categories thereby allowing growth

    • Allows for easier addition of new categories without full redesign.

    • Allows scalability when hospitals add more pharmacies to their contracts

    • Improves scanning efficiency compared to horizontal navigation.

  2. Supporting Studies:

    • Eye-tracking research finds that users looked at the left half of the screen 80% of the time (https://www.nngroup.com/videos/attention-leans-left-websites/)

    • Additionally, research in psycholinguistics shows that visual search in a list is more efficient if the list is vertical than if it is horizontal — people are able to find an item of interest with fewer eye fixations, simply because much more information can be derived from a single fixation.


  3. Some key insights on time to completion of the given task
    Left Left Left saved 23 seconds
    Left Top Top saved 17 seconds, and
    Left Left Left(nested) saved 9 seconds.
    Faster navigation lead to better task accomplishment and greater satisfaction.

    Add ons for improvements a star for "favorates" section for quick access to top pharmacies.

Iteration 4 : Left Left Left Navigation

Impact & Analysis

The final designs and improvements were compared with the initial and phased implementation

  1. Efficiency & Reduced Cognitive Load:

    • Task completion time decreased by 30%, with specific tasks showed even greater time savings (e.g., switching pharmacies down by 23 seconds).

    • Simplified selection in the sidebar directly reduced clicks and decision points, improving speed and mental effort.

  2. Improved Workflow & Error Reduction

    • Reduction in navigation-related errors by 32%.

  3. Enhanced Visibility

    • Relocating the dropdowns freed up valuable real estate in the main area. This created space for displaying other key metrics related to pharmacies and the hospitals.

    • Improved information architecture and visual hierarchy allowed users to quickly scan and absorb larger amounts of relevant data at a glance.

  4. Scalability:

    • While not explicitly mentioned, the sidebar likely provided room for more pharmacies to be added in the future. This allowed for business expansion without redesigning any core components of navigation.

  5. User Impacts: Enhanced efficiency, satisfaction, and better decision-making with easier data access.

  6. Business Impacts: Potential user retention gains driven by improved admin experience. Time savings translated to:

    • Faster admin onboarding (measurable in training time reduction)

    • Potential revenue impact from faster admin processes leading to better pharmacy support and more efficient operations.

Further details of this case study are locked. Feel free to reach out to me for the password to access the detailed case study.

Further details of this case study are locked. Feel free to reach out to me for the password to access the detailed case study.

Further details of this case study are locked. Feel free to reach out to me for the password to access the detailed case study.

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar

Let's work together

Get in touch

I'm currently open to new opportunities.
Feel free to reach out for your next design project.

Last Updated February 2023. Designed by Nikhil Thakkar