Narcan website

redesigned rethought expanded on with a human-centered approach.

Client

NARCAN® (naloxone HCI) Nasal Spray

Industry

Pharmaceutical & Healthcare

Challenge

Redesign the NARCAN® website experience to focus on consumers and break the stigmas of Opioid abuse.

My Role

Discovery, Research, User Testing, Stakeholder Interviews, Information Architecture, Wireframing, Prototyping
https://www.youtube.com/watch?v=RulypB3cyv0
Watch Now

Narcan Campaign Commercial

Play Video

What We Delivered

The redesign of the Narcan website was a mobile-first approach backed by a full discovery and research process. Every aspect from the information architecture to the design and development serves a purpose for the users.

Our Process

This is the UX process we typically follow when starting a new project.

  1. Research: will include everything from UX  & accessibility audits to competitive analysis work. We will do as much preliminary research as possible before moving to the next step.
  2. Define: includes user research, stakeholder interviews, user journeys, feature ideation workshops and defining a north star.
  3. Design: we actually begin with wire framing and designing in UI.
  4. Prototyping: if the schedule permits, we will build prototypes in order to do additional user testing.
  5. Validating: we will take our learnings after validating with users, internal resources and the stakeholder themselves and reiterate if necessary.
  6. Build: this is where we move into development.
  7. QA Test: we will test internally as well as with the client and send links within a staging environment.
  8. Launch: this is where the product goes live.

The Research & Discovery Phase

Like most projects, I started with the research and discovery phase. This way we were able to identify our north star and make sure it aligns with the client’s business goals.

  • Full UX & Accessibility Audit of current website
  • Competitive analysis
  • Content audit (Keep, Kill, Modify exercise)
  • Content inventory (content, images, documents & applications)

Competitive Analysis

A competitive analysis was done during discovery so we could assess any competitors or aspirational websites outside of the industry.

UX & Accessibility Audit

One of the first things we did was conduct a full user experience audit on the current website. We also checked all of the accessibility issues it was currently facing that the client was unaware of.

The Define Phase

Based on the discovery phase, we move into the defining the problems and roadblocks users have. This is where we align with the client on problems and proposed solutions.

  • User Interviews
  • Define jobs to be done
  • Personas
  • Feature ideation
  • Develop north star

User Interviews

We conducted user interviews in order to get an understanding of the current pain points and identify user needs.

Personas

Based on the user interviews we created personas.

Jobs To Be Done

We used the jobs to be done methodology in order to extrapolate relevant data from the user interviews and turn them into problems we solve.

Feature Ideation

Based on the problems we uncovered, the next step was to ideate around any features for the website that may help engage the users.

Develop North Star

All of the research combined was used to workshop the north star for the website experience. We presented this to the client to get their buy in and make sure they were aligned.

The Design Phase

After all research, discovery and our north star has been determined, we move into the design phase. This is where we will iterate on wireframes and those will evolve into a fully baked UI design.

Below are some of the key wireframes that informed the UI.

  • Wireframes
  • UI Design
  • Client Presentations
  • Dev Alignment