OneSpring Government Page and Accessibility Audit
.svg)
OneSpring, a design agency based out of Georgia with an impressive portfolio of both government and commercial work, approached us with two requests:
- Build a government page for their website to better showcase their capabilities, past performance, and thought leadership for potential partners and government contractors
- Enhance the accessibility of their website, making it as close to 508 compliance as possible without compromising brand integrity
This was a project for General Assembly's User Experience Design Intensive.
Project Timeline
- 3 Weeks
Role
- Project Manager
- Accessibility Consultant
- UX Writer
- Design Assistant
Tools Used
- Adobe XD
- Miro
- Google Drive
- Zoom
- Canva
- WAVE Accessibility Checker
- HHS Checklist
Initial Research
Getting off on the wrong foot
We knew from the beginning research was going to be tough, but we decided to jump in guns a blazin' nonetheless, immediately rounding up friends and family to test the current website and complete user interviews.
Once the data was synthesized, it was suddenly clear:
The users we had interviewed weren't just unqualified, they were so unqualified that this research was completely unusable.
Fear not, our amazing client was here to save the day! Since government workers were off-limits (their involvement could be perceived as bias), he was willing to set up interviews with his partners. We just had to earn those interviews by providing high-quality questions.
As the writer on our team, I linked up with our researchers to compose the most effective and professionally phrased questions possible. And after several rounds of back-and-forth with our client, we were given the green light.
Looking to the competition
With no users to interview yet, our competitive analysis served as the bedrock of our design process going forward.
Accessibility
A website for all
I was so excited to dive head-first into the accessibility audit. One problem: I had no clue where to start. Through a lot of research and consulting some connections who currently work in accessibility with the federal government, I figured out the best tools for the job: the WAVE accessibility checker and the HHS's accessibility compliance list for websites.
The main issues I discovered were:
- Links that lacked adequate description for screen readers
- Autoplaying videos that the user cannot pause
- Lack of adequate color contrast
- The TypeForm program used for the contact form was completely inaccessible to screen readers
Contact SOS
Upon further research, I could not find any sort of accessibility kit on TypeForm, which OneSpring uses for all of their contact forms. I was able to locate a recent forum post about their commitment to making their forms accessible soon, which prompted our developer to reach out to his community for more answers. He was able to find that there are, in fact, ways to make TypeForm screen reader-accessible, and they are going to implement those changes in the future.
Feeling Blue
One key problem emerged from the accessibility discoveries: OneSpring's signature blue wasn't 508 compliant. We'd need to find a different blue. With this colorful dilemma in mind, we hopped into...
Design
Collage Time
Before we hopped into designing the Government page of OneSpring's dreams, we wanted to get a better idea of what they wanted in terms of information architecture and UI elements.
To visualize this, we turned to something we called "the Burger" because you could build your own burger, or Government page. Screenshots of different competitors' Government pages were chopped up into their individual elements and dumped into a Miro board. Then, we had users collage them into their ideal page. This gave us a great foundation for our initial sketches.
The key components were:
- Values/ about section
- Contract vehicles (a streamlined method the government uses to buy goods and services) along with other specific qualifications
- Federal past performance
- Commercial past performance to showcase OneSpring's commercial innovation to Government contractors
- Thought leadership articles
Bring it down low (fidelity)
With our collages in hand, we leapt into designing. We started with a design studio. We refined those designs into wireframes before selecting the version that reflected the design found in 75% of our collage results.
Design over-medium
After showing our wireframes to one of our clients and receiving the green light, we proceeded onto something that looked closer to the real thing.
The biggest addition here: the anchor bar.
This style of navigation was present on many of our competitors' pages, so we decided to include it and see what our client thought.
Slimming down
Our client connected with our design and sent us into our next iteration with a ton of food for thought. But there was one element he wasn't quite sure of: the anchor bar. He thought it looked clunky, and wondered if it was even necessary.
Meanwhile, our research team discovered even more support for the anchor bar. Users wanted to be able to navigate quickly and the anchor bar would enable targeted navigation that a page with only scrolling would not.
We needed to show our client that the anchor bar could be both functional and a sleek design choice.
Iteration two
You can never have enough options
Our plan was simple: give our client enough options that he could not only pick and choose elements, but also see how each of those elements looked side by side.
Finally, we changed the blue and used dark text to bring it up to AAA compliance.
And our client liked it! Success! He requested that we continue designing two options: anchor bar option C and option A, which has no anchor bar so that he could conduct internal A/B testing.
Even though we had the green light for our anchor bar, there was another issue: our client didn't like the dark text on the blue buttons and wanted to go back to the white text.
50 shades of blue
I thought finding a shade of blue that provided enough contrast with both the dark charcoal and white would be impossible. We tried blue after blue after blue. And then finally, I looked to the right of my prototype...
The blue Adobe XD used for selected items. It was perfect.
It was AA-level compliance for everything but small text, so we made sure all of the text on the page was above size 18. My goal was to bring the entire site up to AAA, but I lost this battle for the sake of preserving OneSpring's signature look.
Final Iteration
Final Changes
- Change globe graphic to focus on The United States of America
- Make Commercial and Federal past performance sections match each other to create a visual connection
- Darken filters on background images to provide an accessible amount of contrast with white text
The final prototype effectively showcases all of OneSpring's contract vehicles, commitment to human-centered design, and vast experience in both the Commercial and Federal sectors.
Wrapping things up
Next steps
- Due to the lack of qualified testers, our client wanted us to rely more on his approval as our KPI rather than user testing results. After the hand off, our client is going to be testing the different versions of the Government page internally, and we look forward to seeing the final result on their website
- Implement accessibility improvements around the site, bringing them closer to 508 compliance
Key takeaways
- Qualified users are hard to find, and adaptability is key
- 508 compliance is important, but also a large undertaking that will take place over time
- Sometimes client wants will clash with accessibility, but data and an imaginative mind are the best solution
If I could do it again...
- I'd want to have stayed in wireframes longer. The quick jump to high fidelity worked out, but it isn't good practice
Check out my wonderful team mates
- Richard Tran
- David Bieschke
- Elizabeth Venorsky
