Valley Community Services Board: Begin With Hope
Designing a landing page for a non-profit
Problem:
Per the OCME, Fatal Overdoses between 2015 - 2017 for VCSB's catchment area had the highest rate of Methamphetamine Fatal Overdoses in Virginia. The rate of overdose is more than double compared to their region’s overall rate, and 4 x higher than the state rate.
The campaign’s goal is to raise awareness around the dangers of methamphetamines and point users to a variety of resources through the website.
Scope:
This was a freelance project done over a 2 month period. The actual design portion took about 2 weeks. I collaborated with a design agency, who provided me with one other UX designer, and a developer.
Methodologies & Deliverables:
Prototype created using Figma. The prototype was delivered to the developer, who used WebFlow to create it.
Solution:
A landing page that’s easy to navigate, featuring racially diverse images and supportive language. All resources are easily accessible and the page features many call to actions buttons that present resources in a helpful manner.
The Client
The mission of the Valley Community Services Board is to provide community based mental health, developmental disability, and substance use disorder services to citizens in the Counties of Augusta and Highland and the Cities of Staunton and Waynesboro.
Prevention Services Mission: The mission of the Prevention Services Department is to provide best practice prevention strategies and evidence-based prevention programs, pertaining to substance abuse prevention, suicide prevention and mental health promotion in the communities of Augusta, Highland, Staunton, and Waynesboro.
Client Interviews
We were provided with a “Website Discovery Doc” the design agency had created with the client to better understand expectations and content for the page. The above shows a few pages of the 11 page doc.
The key takeaways were that the campaign’s goal is to direct users to useful resources through the website. The client wanted users see their message through a “lens of hope”. It was important that the language and images used were not stigmatizing or judgmental and instills hope for prevention, treatment, and recovery. They also wanted the page to have a modern look and feel to gain user’s trust.
Wireframes
The wireframes were created by the other UX designer, I came into the project after she had finished them and built the high fidelity prototype based on client feedback and original wireframes.
High Fidelity Prototype
I was responsible for the entire high fidelity prototype. Mockup.io was used to gather client and agency feedback until both were satisfied with the final design.
What I Learned
This was a great practice in accessibility since the website used Userway to keep is accessible for all users. Userway lets the user change contrast, colors, text size, etc to comply with ADA & WCAG guidelines. This was also my first time working with a government contracting agency on a freelance project, and I gained a lot of knowledge on the content and processes required for building a website for a government entity. If there was more budget and time allocated, I would’ve liked to do user research and conduct usability testing.