Mike Franke
UX | CX | Design

Our site doesn't work on mobile?!

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

The details.

  • WHO: Janssen Pharmaceuticals
  • WHY: Revamp an existing property to support mental illness
  • WHAT: UX Audit, Card Sorting, Information Architecture, Sketching, Wireframes, Design
  • RESULT: A successful relaunch of “Choices in Recovery” and creating a trusted resource for mental health

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:

  • For nurses, the current site was helpful but could do much more for mental health
  • The client wanted the site to become a resource destination for the mental health community.
  • 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 (3) personas and found many needs for nurses in the field.
  • We organized our site to tell a story from start to finish, which made it easier to understand. 


Early wireframes started with quick whiteboards and moved into digital.

Early wireframes started with quick whiteboards and moved into digital.

Wireframes

While moving into wireframes, our timelines were accelerated to meet new client deadlines. 

Key Findings:

  • To cut down on review cycles, I often collaborated with the development team during wireframing.
  • This collaboration also helped keep our estimated dev time to fit within our new timeline... fast! 
  • Any ideas were already vetted by our developers, so they knew what to expect every step of the way.


Design and Rapid Prototyping

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

Key Findings:

  • To ensure smooth hand-offs, we setup the design systems early: breakpoints, grid-system, style-guide, etc. 
  • Any interactive elements were quickly prototyped, iterated upon, 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.