Before (Click to view)
After
Client
Denver
Public Schools
Scope
3 Weeks
Team Members
Mariam Abdalgadir
Molly Hodson
Main Role
Research Lead
UX Designer
The Denver Resource for Awareness and Prevention (Denver RAP) was developed to help meet the need for substance abuse prevention information and resources. Denver RAP is transitioning into Denver SUPP (Substance Use Prevention Program), to focus on working with parents/staff of Denver Public Schools.
The previous website, shown above, was designed with the intention to outreach to youth directly, and the resources were emphasized with animated illustrations and youth-oriented design.
However, they realized that it would be more effective to provide resources to parents and caring adults to have conversations with kids about substance use, and is now refocusing, and rebranding their website to be still accessible to youth, but more geared towards adults.
To kick start our research, we conducted a couple task analyses and asked our participants to navigate the site as if they are a parent or caring adult for a teen in their life. We gathered our participants comments and grouped them into these main impressions:
Website seems useful and legitimate
Parent toolkit seems like a very useful resource
Needs to build more trust
Mission of website is unclear
Website is difficult to read and navigate
Activity calendar is confusing
From here, we started to wonder:
How might we make this site feel like a trusted resource parents/caring adults can rely on?
&
How might we make the most trusted resources easily apparent and accessible for the users of this site?
We gathered our research and created two main personas, or users, whose needs became the center of our redesign:
Personas
Natalie
Joe
Natalie is a first-time Denver Public Schools mom who is not very active in the school community, and unfamiliar with local resources regarding substance use prevention for kids.
Goals & Motivations
Natalie is concerned because she found marijuana in her thirteen year old daughter’s backpack. She wants to have an open conversation with her daughter about the dangers of early substance use, but doesn’t know the best way to approach her.
Needs
Natalie needs to be able to communicate with, and help, her daughter in a way that’s loving, but also informed. She wants to connect with a trained professional to learn how to best approach this situation.
Pain Points
Natalie’s main pain point is that because this is her first experience in this type of situation, she doesn’t know what resources are the most useful for her, and has a difficult time knowing what to trust on the internet.
Joe is a middle school English teacher at Denver Public Schools. He has been teaching for several years, and has seen many different kids struggle with substance use and home/family issues.
Goals & Motivations
Joe is concerned because one of his students has become drastically withdrawn within the last couple weeks. From his experience, he’s seen other kids similarly withdraw and eventually drop out due to substance use and unstable home security. He wants to know what resources he can share with his student that would be helpful and bring practical change.
Needs
Joe needs to be able to easily access resources that he can share with his students and fellow teachers, so that more students can receive the help they need.
Pain Points
Joe’s main pain point is that his school doesn’t have a section on their website or some kind of set teacher guidelines to approach this situation. He’s not sure how he can share resources with his student, when there are limited resources for himself as a teacher.
Here’s a journey map of Natalie’s experience using the previous website- as you can see, although there is definitely a need for these resources, she is confused by the mission and navigation of the website.
Likewise, Joe has a lot of interest in seeking resources and is aware of the website. However, he has a difficult time seeking information that is applicable for his situation as a DPS teacher.
Problem Statement
In other words,
The current website for the Denver Substance Use Prevention Program has a lot of useful resources for parents/staff, but is difficult to navigate and overall directed towards young children.
Natalie and Joe need a way to easily access useful resources regarding substance use prevention, so they can educate themselves and share the resources with their kids in a way that’s informed and effective.
Solution Statement
In response to this,
We believe that by revamping the UI, restructuring the information architecture, and adding features like email newsletter sign ups, appointment scheduling, and webinar recordings, we will make the Denver Substance Use Prevention Program website more comprehensive of parent/faculty needs, and make the resources more convenient and easy to understand.
Design
Process
Information Architecture
With our goals in mind, we restructured the website’s information architecture. The purpose of this reorganization was not to recreate/rewrite content, but to keep the existing content while making it much more intuitive and accessible for users.
Sketches
Design Studio
We sat down as a team, and sketched and discussed which designs could lead to the smoothest navigation for our users.
Mid-Fidelity Wireframes
Professional and Reliable
UI Design Our greatest concern for this project, apart from easy navigation, was conveying reliability. In order to make our website better fitted for caring adults, we eliminated the alien illustrations that were created for children. Instead, we used vibrant colors and actual images of students at Denver Public Schools to show parents and teachers that the program is legitimate and cares about its students as much as they do.
In three weeks, my team and I researched, designed, migrated content, and set up an entire live website to be ready to use by the parents, teachers, and students of Denver Public Schools.
dpsprevention.org
Next Steps
In the next couple months, we are planning on conducting usability tests with users, and update the website according to their feedback and corresponding site analytics.