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.
