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.
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.
- Usability Testing
- Front-End Coding
- 462+ Hours
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.
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.
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.
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.
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.
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.
Final Design & Layout
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.