DBHDS Site Redesign
Role:
UX Researcher, UX/UI Designer (Individual)
Time:
4 weeks, Spring 2023
Overview:
The Virginia Department of Behavioral Health and Developmental Sciences
This was created as a part of the Columbia University UX/UI Design Bootcamp program, with the objective being to redesign the user interface of a government website.
Context
The Virginia Department of Behavioral Health and Developmental Sciences website presents significant challenges in navigating key information, leading to wasted time for users. The overly complex user interface not only hampers efficiency but also undermines the user experience, making it difficult for individuals seeking essential resources and support to find what they need quickly and effectively.
By reorganizing the original site map and implementing straightforward visual design enhancements, I aimed to optimize user flows in a modern and responsive manner.
Current User Interface
Understanding the problem
To better understand the struggles users face while attempting to navigate the Virginia Department of Behavioral Health and Developmental Sciences site, I conducted usability testing on both the web and mobile versions over Zoom. The objective was to determine if users are able to navigate the core features of the site through the following tasks:
Task 1: Locate Crisis Services
Task 2: Call the department
Task 3: Find FOIA request page
Results:
The web version received a System Usability Scale (SUS) score of 55.8, ranking “Poor."
What it does well:
Breadcrumb trails clearly illustrate the user’s navigation path from the home page to their current location, enhancing their understanding of the site structure.
There is a consistent method for users to easily return to the home page, ensuring a seamless navigation experience.
What could be better:
The layout is cumbersome and lacks fluidity.
The design is inconsistent, with buttons, links, and fonts varying in style and appearance.
Excessive text overwhelms users; it should be broken into manageable content chunks for better readability.
The presence of jargon makes it difficult for users to understand the information presented.
Key content needs to be more prominently highlighted to capture user attention.
Incorporating a search bar would significantly enhance the ability to locate specific information.
Users are confronted with an overload of information at once, which can be overwhelming and counterproductive.
Proto Persona
In order to begin restructuring the site’s information architecture, I created a persona in order to design my site with a real person in mind. While I reorganize the site’s content, I will be approaching from Lynn’s angle, who is keeping her clients’ needs in mind as she navigates through the site.
User Path
User Scenario:
Lynn is a social worker looking to provide her client, who has a family member with developmental disabilities, with government aid in their area, including waiver options, assistance with housing, information about providers, and connections to support networks. Site must be navigable for both social worker, who has an understanding of this field’s jargon and abbreviations, as well as for the client who may not have the same knowledge.
Site Mapping
The original site presents the user with too many subpages all at once, leading to confusion and information overload. In order to improve the site’s information architecture so that the user could find key content more easily, I created a brand new sitemap. Using card sorting, I categorized each of the subpages into alike groups to break down the site’s content.
Low-Fi Prototype
Homepage Wireframes
Navigation Wireframes
Visual Design
For this brand, the feeling the site evokes in the user is equally as important as its navigation elements. Using a mood board I created, I curated a style tile in order to conceptualize a potential website interface.
I referenced other professional mental health sites and found that the common thread throughout each of the UI elements was a sense of peace and restoration. These sites achieved this with simple and professional layouts, clean sans serif fonts, and calm imagery.
Thought went into the choices for each of the elements I chose – for example, the colors green and blue are scientifically proven to be the most comforting colors as they remind people of nature.
After I was content with the state of my style tile, I applied the components to my prototype.
