NorthShore University Healthsystem

Bringing empathy to the user experience for their cancer center.

NUH Kellogg Cancer Center

Introduction

NorthShore University Healthsystem is a Chicago-based healthcare non-profit spread over four local hospitals. I was recently given the opportunity to interview for a position involving design, development, and especially content management. From the meeting came a post-interview assignment to take the main page of their Kellogg Cancer Center and redesign it as I saw fit.

Research and Discovery

With only seven days to fully design and code the webpage, time was not on my side, and I had to be efficient in managing this project. I designated three days for design and then the remaining four to development and quality assurance.

Now I had no real data, analytics, or other deeper information about the user base who might have been coming to their current webpage, so I had to mainly think in terms of best practices and what I could discern from their current page based on my experiences in UX and design.

After thoroughly examining their page, I had these observations:

  • There is a lot of content hitting the user, and its current layout made it hard to scan.
  • Too many menus and choices that could potentially drive the user away as opposed to exploring.
  • The Web 2.0 thinking on the main and sub menus creates more confusion, especially in mobile where you end up with two hamburger menu dropdowns.
  • I also felt the current page lacks empathy with the potential user (a cancer patient or the relative of a cancer patient), and the video stories presents an opportunity to fix this.
NorthShore’s old webpage

NorthShore’s old webpage

Sketched wireframes

Quickly Wireframing

After making my observations, I spent a day looking over websites for cancer centers, medical practitioners, and hospitals, wanting to see if they too carried so much information and how they organize it. I also poured over articles, case studies, and suggestions for websites with large, complex navigation.

With little time to put into polished wireframes, I took to my Moleskine with a pencil, sketching out an idea of how I wanted to reorganize the content, what to remove, and how to rethink the navigation. I like the notebook as a starting point be it a rush job or a longer project, as you’re not bound to making polished layouts but instead penciling thoughts.

Final Designs

Final Design

Now that I had an idea on how to organize the content, I took my last day for design and laid it all out. While I was given total freedom to redesign anything I wanted, I still felt continuity with the rest of the NorthShore website should be maintained for the sake of a solid user experience. Hence why the header and footer was barely touched in terms of look and feel.

The big change was to bring that secondary navigation menu into the header as a dark gray bar with dropdowns similar to those of the main navigation. Going to mobile, I actually chose to remove all the added sub-menus because every one of those choices has its own landing page, and I wanted to make it easier on the user, especially when on mobile.

The content itself was condensed and reorganized with a solid message to greet the user and then lead them down the path of the primary information, followed by the video stories on a carousel to bring in that empathy that was so needed. The news articles also made for good content to have on this page as a means to drive interest. The rest can be easily explored within the site as the user sees fit.

Results and Takeaways

I spent the last four days of my week painstakingly coding the page and testing it, then handing the files to NorthShore for review. While I have not heard yet a decision on the position, the feedback has been overwhelmingly positive. Should I land the job I’m hoping to further explore how we could better organize and condense the content to make it easier on the user.