New Jersey Department of Health

Incorruptible.us


New Jersey

Department of Health

Incorruptible.us

Client

Client

New Jersey Department of Health

New Jersey Department of Health

My role

My role

Lead Product Designer

Lead Product Designer

Responsibilities

Lead team & end-to-end design process

Facilitate collaboration

Lead team & end-to-end design process

Facilitate collaboration

Methods

Methods

User Research

User Interviews

Job Stories

User personas

Information Architecture

User flows

Style guide

Wireframes

User Research

User Interviews

Job Stories

User personas

Information Architecture

User flows

Style guide

Wireframes

Tools

Tools

Figma

Wix

Sketching

Figma

Wix

Sketching

01 I Problem & solution space

01 I Problem & solution space

Problem

Problem

Teens fighting big tobacco needs a web presence that represents them,

informs people about their club, their goals , and makes it easy to join.


Club communication and sharing of social media assets needs to be streamlined.


The teens need to be able to maintain the site and update the content themselves

post-launch.

Teens fighting big tobacco needs a web presence that represents them, informs people about their club, their goals , and makes it easy to join.

Club communication and sharing of social media assets needs to be streamlined.

The teens need to be able to maintain the site and update the content themselves post-launch.

Solution

Solution

A custom Wix site that represents the diversity of the Incorruptible.us teens, their club, shares resources, and makes it easy for new members to join.


Handoff onboarding materials with a PDF guide, Loom videos & a live presentation

with Q&A to teach current and future YTAG members how to maintain and update

their custom site.


A TikTok integration that allows students to update content on their site by

using #IncorruptibleUs

A custom Wix site that represents the diversity of the Incorruptible.us teens,

their club, shares resources, and makes it easy for new members to join.


Handoff onboarding materials with a PDF guide, Loom videos & a live presentation with Q&A to teach current and future YTAG members how to maintain and update their custom site.


A TikTok integration that allows students to update content on their

site by using #IncorruptibleUs

Outcomes

Outcomes

Happy clients


The students loved their new site, were successfully onboarded, and are now updating

content and making it their own.

Happy clients.


The students loved their new site,

were successfully onboarded, and

are now updating content and making

it their own.

02 I Get to know Incorruptible.Us

02 I Get to know Incorruptible.Us

Youth Tobacco

Action Group

Youth Tobacco

Action Group

Middle and high school students who educate their peers about the dangers of vaping, tobacco use prevention and cessation. They advocate for policy change.

Middle and high school students who educate their peers about the dangers of vaping, tobacco use prevention and cessation. They advocate for policy change.

YTAG members

YTAG Coordinators

Parents & Caregivers

Needs & considerations

Needs & considerations

They want to

do it on their own

They want to

do it on their own

The teens requested we hand-off a

custom-coded Wix site that they

would continue to maintain and

update with fresh content.


A new

set of challenges

A new

set of challenges

Wix is built for templates. It

doesn’t like customization.

Design and engineering

worked hand-in-hand to troubleshoot along the way.

They want to

do it on their own

The teens requested we hand-off a

custom-coded Wix site that they

would continue to maintain and

update with fresh content.


They want to

do it on their own

The teens requested we hand-off a

custom-coded Wix site that they

would continue to maintain and

update with fresh content.


A new

set of challenges

Wix is built for templates. It

doesn’t like customization.

Design and engineering

worked hand-in-hand to troubleshoot along the way.

They want to

do it on their own

The teens requested we hand-off a

custom-coded Wix site that they

would continue to maintain and

update with fresh content.


03 I Research & Discovery

03 I Research & Discovery

How can our designs

support the club?

My team used a variety of research methods to better understand the problem space: our users, their goals, and challenges.

Research methods

Interviews with users, workshop on empathy mapping, evaluating heuristics, analysis of competition, secondary data research,

User Interviews

Data Coding & bucketing

How can our designs

support the club?

My team used a variety of research methods to better understand the problem space: our users, their goals, and challenges.

Research methods

Interviews with users, workshop on empathy mapping, evaluating heuristics, analysis of competition, secondary data research,

Data Coding & bucketing

User Interviews

Our users say...

04 I Synthesis

Putting together what

we learned

We used the Jobs To Be Done and How Might We frameworks to make sense of our research

data and create actionable insights.

Jobs to be Done framework


This framework helps us focus the problem solution on things that are an added value for the user and help them accomplish their task.

How Might We workshop


We brainstormed and created many How Might We statements to focus and define our design goals. I then had my team discuss and position them under Too Broad, Too Narrow, and Just Right and then found the perfect statements.

05 I Design

Ensuring our designs

represent them

Ensuring our designs

represent them

We created design principles that guide our product values and that we can always refer back to while designing to make sure we stay on target.


These principles help us give Life Experienced users the best experience possible.

We created design principles that guide our product values and that we can always refer back to while

designing to make ure we stay on target.


These principles help us give Life Experienced users the best experience possible.

Working with WIX

& its constraints

At the outset, creating a WIX site seemed simple, but it presented many more challenges than we anticipated. WIX is made for using its templates and doesn’t adapt well to going outside of them with custom code.


The site would frequently break during the implementation process. My team’s designers and developers worked hand-in-hand during the hi-fi design phase to troubleshoot any issues. Here are some steps we took to create a custom site that the teens could take

over later.

Choosing a template

for customization

We started by finding a template with similar features that could be more easily adapted to our custom-coded site.


Then, we collaborated on FigJam to create a rough anatomy of the template, left comments about where features might live, and their requirements.

Comparing &

choosing plugins

After creating lo-fi sketches, we researched and compared the plugins that most closely satisfied our feature requirements. We compared plugins for events, TikTok, Instagram and many widgets.

Information architecture

Ideation & lo-fi wireframes

Mid-fidelity wireframes

Final Design & Implementation

Design & engineering

collaborate to meet challenges

Creating traditional hi-fi wires for this project didn’t makes sense. WIX is not designed for going outside its templates. Our developers and designers, found that WIX becomes very temperamental when trying to customize with code.


Hi-fi meant building the website within the editor because we were constantly running into unforeseen technical limitations that would effect our ultimate designs. Designers and developers collaborated closely to make adaptations along the way.

Engagement Highlight

One of our biggest priorities was to design a site that the teens feel represents them.

We knew that the teens were active on TikTok, so we created an Incorruptible TikTok challenge.


When someone uses the assigned hashtag their TikTok video is showcased on the Who We Are page.

06 I Onboarding & Handoff

Pass it on

Once the final site was live, we had to make sure YTAG had all the knowledge, guidance and tools to maintain the site for years to come. We handed over the site and knowledge of maintaining it in several ways.


Handoff guide

Contains crucial site information

and detailed instructions for updating

content and maintaining their website.

Loom videos

We created video tutorials with Loom

that can be watched, downloaded, and

kept on file for the future.

Zoom tutorials

A live demonstartion was hosted

with YTAG members and

coordinators so that we could

discuss their site and how to work

with it live.

Drew Van Diest

Design