New Jersey Department of Health

Incorruptible.us

New Jersey Department of Health

Incorruptible.us

Client

New Jersey Department of Health

New Jersey Department of Health

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

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

Figma

Wix

Sketching

Figma

Wix

Sketching

01 I Problem & solution space

01 I Problem & solution space

Problem

Problem

Teens fighting big tobacco need 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

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 members

YTAG members

YTAG Coordinators

YTAG Coordinators

YTAG Coordinators

Parents & Caregivers

Parents & Caregivers

Parents & Caregivers

Needs & considerations

Needs & considerations

Needs & considerations

They want to

do it on their own

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.


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

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.

Wix is built for templates. It

doesn’t like customization.

Design and engineering

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

Onboarding

is key

Onboarding

is key

Onboarding

is key

We needed to create an onboarding

experience that teaches current and
future YTAG members to maintain their site and update content without breaking our custom design.

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?

How can our designs

support the club?

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.

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

Research methods

Research methods

User Interviews

Empathy Map Workshop

Competitive Analysis

User Surveys

Secondary Research,

Data Analysis

Data Coding & bucketing

User Interviews

Our users say...

Our users say...

Our users say...

04 I Synthesis

04 I Synthesis

Putting together what

we learned

Putting together what

we learned

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.

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

data and create actionable insights.

How Might We workshop


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.

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.

Jobs to be Done framework


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.

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

05 I Design

05 I Design

Ensuring our designs

represent them

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 sure we stay on target.


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

Design Principles

Include & Empower

Design for diversity. Make sure teens feel

seen & represented. Give their voices

power to influence their communities.

We can relate

Our tone is conversational, friendly, open &

non-judgemental. The teens can closely relate

with our references

Engage in action

Signifiers, labels, controls, and directions

are prominent. They hold a user’s hand

and make primary actions explicit.

Design Principles

Include & Empower

Design for diversity. Make sure teens feel

seen & represented. Give their voices

power to influence their communities.

We can relate

Our tone is conversational, friendly, open &

non-judgemental. The teens can closely relate

with our references

Engage in action

Signifiers, labels, controls, and directions

are prominent. They hold a user’s hand

and make primary actions explicit.

Design Principles

Include & Empower

Design for diversity. Make sure teens feel seen & represented. Give their voices power to influence their communities.

We can relate

Our tone is conversational, friendly, open & non-judgemental. The teens can closely relate with our references

Engage in action

Signifiers, labels, controls, and directions are prominent. They hold a user’s hand and make primary actions explicit.

Working with WIX

& its constraints

Working with WIX

& its constraints

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

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.

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

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.

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.

Ideation & lo-fi wireframes

Ideation & lo-fi wireframes

Ideation & lo-fi wireframes

Information architecture

Information architecture

Information architecture

Mid-fidelity wireframes

Mid-fidelity wireframes

Final Design & Implementation

Final Design & Implementation

Final Design & Implementation

Design & engineering

collaborate to meet challenges

Design & engineering

collaborate to meet challenges

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.

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

Engagement Highlight

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.

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

06 I Onboarding & Handoff

Pass it on

Pass it on

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.

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

Handoff guide

Contains crucial site information and detailed instructions for updating content and maintaining their website.

Contains crucial site information and detailed instructions for updating content and maintaining their website.

Loom videos

Loom videos

We created video tutorials with Loom that can be watched, downloaded, and kept on file for the future.

We created video tutorials with Loom that can be watched, downloaded, and kept on file for the future.

Zoom tutorials

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.

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

Drew Van Diest

Design