Mike Franke
Senior UX Designer

Information Architecture for a content-heavy site

Our client had an unresponsively-designed website (didn't work on mobile). We improved "Choices in Recovery” into a trusted resource for mental health.

Image alt tag

The details.

WHO: Janssen Pharmaceuticals

THE PROBLEM: A website that was seeing low usage from healthcare professionals

MY ROLE: UX Audit, Card Sorting, Information Architecture, Sketching, Wireframes, Design

RESULT: A launched website that is being utilized by nurses and counselors for their mental health patients

Over a few weeks we got to know the teams, nurses and field teams.

Over a few weeks we got to know the teams, nurses and field teams.

Stakeholder Interviews

We started by interviewing various stakeholders including our client teams, field teams and nurses in the field of mental health. 

Key Findings:

  • Nurses utilized the site as a resource for patients.

  • The field teams wanted to feel more empowered in engaging patients with treatment options.

We poured over Google Analytics and client-supplied data and metrics.

We poured over Google Analytics and client-supplied data and metrics.

Looking at the Data

After we interviewed various stakeholders on the project we took a look at the site's current metrics. 

Key Findings:

  • We confirmed that visitors were mainly coming for informational PDFs. 

  • Return visitors only accounted for 11.4%, how do we increase this?

  • We discovered that there were (3) topics rising to the top of interest other than informational PDFs, this helped us form what new content to create.

Card Sorting Exercise

Card Sorting Exercise

Information Architecture

Our team did a card sorting exercise to better group information on the site and identify any gaps. This led us into developing our sitemap and introducing new content.

Key Findings:

  • We found many gaps that needed to be filled for healthcare professionals.

  • We were able to better cater to our personas.

  • We organized our site to tell a story from start to finish.

Our Sitemap based off of Card Sorting Exercise

Our Sitemap based off of Card Sorting Exercise

Early wireframes started with quick whiteboards and moved into digital.

Early wireframes started with quick whiteboards and moved into digital.

Wireframes

Key Details:

  • Collaborated closely with the development team.

  • We continuously iterated and adjusted to new data and business needs.


Information Architecture for a content-heavy site

Design and Rapid Prototyping

Like our wireframing process, I worked hand-in-hand with our development team throughout design. 

Key Findings:

  • We setup design systems early: breakpoints, grid-system, style-guide, etc. 

  • Any interactive elements were quickly prototyped, iterated, then handed-off to the dev team. 

  • Many collaborative sessions with development and design helped speed the process. 

A successful relaunch, establishing a trusted resource for mental health.

Looking Toward the Future

While we were able to update a very content-heavy site to be responsive... it still has a lot of content. We would love the opportunity to reduce the overall amount of content and think through the best/easiest way to present it to users.