Context / Background of the engagement
Organization:
US Digital Response is a nonpartisan volunteer organization dedicated to helping government agencies better serve their constituents.
As a volunteer member since 2021, I had the privilege of working with three other seasoned volunteer UX professionals (a project manager, a fellow Sr. UX researcher, and a UX writer) in the summer and fall of 2024 to improve the Maryland Department of Veterans and Military Families website.
Brief: Client with a problem
The state Department of Veterans and Military Families receives a high number of phone calls from veterans and their family members everyday, who struggle to find the information they look for on the department’s website. The organization commissioned US Digital Response to conduct discovery research and design for an updated website that reflects the needs of staff, veterans and their families looking for resources and services.
We uncovered several systemwide problems, or service problems, not originally discussed with the client organization, but the scope of this project was limited to the website.
The work I did
Phase l
I only joined the team for the second phase. I am providing this information as a background:
Based on interviews, comparative analysis of Veteran websites by other states, and phonology analysis, the main issues veterans had problems with are as follows:
Analysis of phone logs showed that 50% of the calls were either about benefits and claims or burial services.
Interviews with veterans revealed that this happens because
- important content is missing (e.g., when and how certain benefits can be accessed)
- the individual pages are difficult to scan as they mainly consist of solid blocks of text, or a listing of large number of links, with limited information scent
- the site’s information architecture makes it challenging to locate the relevant pages
Phase 1 of the project focused on determining the scope of the project, and the specific pages to be redesigned. They were:
- Home page
- About
- Employment
- Benefits
- Burial services
- Housing
- Education
- Employment
Phase ll
My role
- As a designer, I created clickable prototype pages (I created 5 of them in Figma), using the department’s new page template.
- As a content professional, I wrote content in plain English for easy comprehension.
- As a researcher, I conducted all the concept and usability testing sessions in this phase.
I learned from some veterans we talked to during Phase 2 that they regularly set up tables in VA clinics and assist others in navigating the system.
Problems
- Have limited computer access
- Lack basic computer skills
- Get lost in the byzantine system of organizations (federal and state levels, non-profit and volunteer organizations, plus volunteer groups on social media)
Our solution: the website need to (be)
- easy to navigate
- scannable
- easy to read
- focus on the job to be done, and not on the system component addressing the job.
Design work
Before starting the design work, I conducted 10 in-depth interviews both with departmental employees and veterans in order to validate the jobs veterans expect to be able to accomplish on the website. With the jobs in mind, I collaborated with another UX designer and created interactive prototypes for the most important pages. We divided up the pages and provided each other with critiques on the work-in-progress.
First Iteration
For each page, we identified what job(s) veterans want to accomplish by visiting the website for. The evaluation of the effectiveness of was also based on the JTBD framework. Here are the thumbnails for some of the first iteration of designs, designed with the templates developed by the department.
You can see a higher resolution png by double clicking on these thumbnails.
Concept Testing
As I was not able to travel to the veteran event held in another state, I developed a test script that was used by departmental employees. The usability tests revealed a few areas for further improvement:
- The suicide hotline message on the top of each page made the primary navigation hard to notice, and were often missed. For the second iteration, I changed the background colors of both the hotline and the main navigation in a way that establishes clear hierarchy and easy navigation.
- While the readability difficulty level decreased from college level to 10-12 grade level, when compared with the initial text, the Gunning fog index still found it “very difficult to read”. I have re-written the text in plain English for easier comprehension.
- Veterans were still overwhelmed by the need to deal with two systems (federal and state) and the corresponding two websites. The second iteration partially combined the pages of the state and federal websites so that site visitors would have all the relevant information in one place. The limited scope of the project did not allow for a more in-depth content audit and re-design at this stage.
Second Iteration
There is no gallery selected or the gallery was deleted.
User testing (again, conducted by a departmental employee) after the second iteration showed that the change to use Plain English, with bulleted points increased the ease of comprehension. The UI change of the navigation bar (along with the hotline information) significantly improved way finding.
Reflection
Reflecting on our deliverables (the Figma files), I have mixed feelings. We produced designs that were superior to the original version.
We found that it was significantly easier to navigate and comprehend, and users found it more aesthetically pleasing. However, a lot of the deeper work remained unfinished. Why?
- our volunteer team had only 1 part-time UX designer and 1 UX researchers beside me
- extremely limited access to relevant user participants
- infrequent communication and collaboration within the team
