About

I was tasked with giving Quantum Health's intranet a new look. I am not only a user of this intranet but I became the owner of the code and it's directories when I was hired. Yet there was a section, both visible to me and otherwise that I had no access to.

Strategy

Up to this point, I only updated a few things of what employees here know as Q-Base, QH's intranet. So the first thing I did was figure out what was currently visible to QH's employees and what was going on behind the scenes. Once I proposed that a portion of Q-Base remains as Q-base and that the portion I owned breaks off to be rebranded as QDash, we agreed the design needed to reflect the new client-facing QH branding.

Industry:

Healthcare

Project Duties:

  • Research
  • Design
  • Usability Testing
  • Front-End Coding
  • QA

Working Hours:

  • 462+ Hours

The Intranet

Nevermind the various pages that were actually visible, what about all of the hidden code? The folders that are hidden from the public eye? I dove into each directory, page, folder, etc and made notes of what it was, who used it, why it was visible or hidden, when it was last updated, who owned it, or at the very least was responsible for creating the content, and where it was located.

Original Q-Base Landing Page

I started with the Q-Base landing page, making note of how things were grouped, the types of content on various pages, the design, the similarities, and outliers. From which I went to into the actual network of folders and files. This allowed me to create a site and content map of Q-Base from which I started to card-sort. Some documents had gotten lost in the mix of things over the years, where hard to find and in the strangest areas. Someone may have dragged and dropped it into these folders by accident.

Card Sorting

Board of post-it notes of me sorting categories
I took two stabs at how the information within Q-Base could be sorted for organization purposes before I went around the building to test out my labeling.

Information Architecture

Paper with post-it notes labeled with categories and documents or directories underneath

First, I asked employees if they used the Q-Base landing page. Not all did, some even felt like they couldn't. For those who did, they told me what they typically accessed on a daily basis. I then conducted a think-aloud exercise for them to find those very things within the few categories I had created. This helped to shed light on the way they grouped things, and where they expected to find various documents. I thought it best to place some things in multiple places.

PSR interacting with the wireframes

I created wireframes of the landing page using Bootstrap, with no additional styling. I focused my attention on the information architecture. It was the quickest way for me to display my ideas, make the wireframes interactive, and get feedback from a variety of QH's employees. I went through five different variations until I created a labeling system that everyone could navigate and find what they're looking for.

Design

I hit a creative block for weeks. QDash wasn't a pure dashboard and it couldn't be, it needed to be both a dashboard and an intranet. I had a hard time figuring out a design that would merge the two in a way that fit the QH culture. I'd create one or two concepts a day, not look at them for at least 48 hours, come back and hate it.

First design concept was very colorful.
Second concept only used three two main colors.
Fifth concept had a very bright yellow background
Sixth concept I thought more about how information could be presented
Seventh concept I wanted to bring in more of the QH culture and its branding
Ninth concept I took another look at incorporating other colors of the QH brand that aren't used often

By the fourteenth concept, I favored the dashboard navigation over the traditional top website navigation bar. I focused on the way information was presented and how to make the QDash fit in with the new client-facing QH sites. I tried to go dark but I wanted to be sensitive to those with eyesight disadvantages, so my heart wasn't totally into making that concept work.

Tenth concept I stepped away from the traditional website approach and looked more towards a dashboard navigation
Fourteenth concept incorporated the new quantum health website branding
I tried to go dark with the theme but I wanted

Final Design & Layout

Final design and layout of QDash.

My favorite part of this was creating the settings menu. This menu allows users to customize their own dashboard, showing their most used things. I hope in the future the system will learn each user and show the things they use the most based on interaction. The settings menu also allows the user to show and hide information throughout the entire site based on their role/department within QH.