Ramsey County
Ramsey County is the second most populous county in Minnesota. The 508,640 people that live there are a diverse group. The approach we took focused on task-based solutions that were inclusive and accessible.
Live site - https://www.ramseycounty.us/
How I Contributed. Sales Support ( pitch ) | Design Strategy & Leadership | UX & UI Design | A11Y Leadership
The Opportunity.
Ramsey County suffered from a legacy system that lacked the opportunity for a modern, inclusive web offering.
Discovery.
We knew that one of the most diverse counties in all of Minnesota would require a fully accessible, inclusive offering.
WCAG 2.0
Our audience was extremely diverse and we ensured that ALL groups of site visitors were able to have a great experience when trying to find important information. We used the POUR method.
Perceivable – Information and interface elements must be presented in a way that all users can perceive. This means offering text alternatives for images, making sure there’s enough contrast, and allowing content to be adjusted to different needs.
Operable – User interface components and navigation must be operable by all users, including those who rely on keyboard-only navigation or assistive technologies.
Understandable – Information and the operation of the user interface must be understandable. This includes clear language, predictable navigation, and error suggestions or corrections.
Robust – Content must be robust enough to work well across a wide variety of user agents (browsers, assistive technologies, etc.) and future technologies.
Level AA
Level AA tackles issues that significantly improve the user experience for a wider range of users, including people with visual, auditory, cognitive, and motor impairments. Doing so ensured that we had an inclusive offering. We focused on contrast (text and background), text resize, forms and inputs, accessible navigation, and error suggestions/prevention.
Setting the design “mood” with some thoughtful boards early in the process.
Partnering with Ramsey County to Help Evolve a Fresh Re-brand Thoughtfully
We wanted to start early with having discussions around design. Rasey County had just gone through a robust rebrand and we had a responsibility to carry it forward into the digital realm.
Our team was given the green light to really push the brand when it came to the execution in the digital world. We were able to seamlessly execute their vision into our work.
Our Objective.
Create a task-based, modern experience predicated on being accessible while allowing for quick wayfinding.
UX/UI Direction.
Robust commerce-like information hierarchies coupled with page layout templates did the trick.
Ramsey County had a lot of meaningful content and that content would be managed in a modern CMS for the first time in county history. We developed a series of page templates that patterned itself after a commerce-like shopping experience. They were essentially shopping for products (content) and since the audience was so diverse, things like category pages and detail pages were core to our solution.
Each page type had a corresponding template and the final deliverables gave comprehensive instructions and tutorials for site managers to be able to continue to maintain the page pattern effectively and efficiently.
Our dynamic information hierarchies and consistent templating was key.
Wayfinding with purpose.
When you have a diverse audience of users, everyone might be looking for something slightly different, but they all have a common goal. Find it quickly. We leaned on left to right scanning to give users multiple opportunities to start their user journey. Whether segmenting by type of user they are (1), quickly accessing a list of county curated links that are based on user requests (2), starting a search in a robust google-like appliance (3), or a set of links that are determined seasonally based on analytics (4), all users had the opportunity to find success on their journey to the content that matters most to them.
Gnarly Challenges.
Building a web presence that caters to ALL personas (equally) was a formidable design challenge.
1.
Balancing accessibility vs. a slick UI design.
When we started, we were unsure how “slick” of a user experience we would be able to create because of the strict accessibility guidelines we were going to follow. Information hierarchies flourish when color can be used to distinguish different types of content or different areas that you want the eye to travel. When you can’t use the entire color spectrum, you have to think differently about how you approach design.
Mitigation.
Lean on Photography – The county is known for certain landmarks and a variety of activities. On top of that, with the recent rebrand Ramsey County had a huge new library of photos. We took advantage of that and used a lot of photography to showcase the diversity and beauty of the county, while also adding a ton of visual interest.
Test Every Color Everywhere – As part of our process, we were very thoughtful on creating pattern libraries for color. Headlines, buttons, backgrounds, etc. all had to be extremely thoughtful, as well as tested thoroughly to ensure we are adhering to the visual acuity guidelines we had set as a mandatory for the project. We found a variety of free tools that allowed us to do these activities with ease.
We constantly tested our color usage when creating our system of design.
2.
Everyone is looking for something different and they all want it quickly.
Trying to build a website that captures the user journey is how great experiences are created. When there are thousands of user types with thousands of their own journeys, you have to lean on a really great page hierarchy, coupled with quick access to a variety of content types.
Mitigation.
Wayfinding - As we illustrated above, we provided visual elements in a vertical, left to right fashion that allowed users to be presented quickly with options that they could identify with. Those category pages would then funnel users down to relevant content.
Centralize Search - We knew that users were more and more accustomed to searching when they have a question or need. This pattern was especially useful with mobile and we decided to put a significant amount of effort into the search appliance and we presented it as a prominent piece of functionality on the home page.
Project Impact.
A crap ton of engaged visitors and an equal ton of A11Y process enhancements.
The site averages 7.9 million visits per year with a time on page of 1 minute 13 seconds, which exceeds the average across all industries of 54 seconds.
We provided a meaningful way to support the great content that the county already had and by creating a modern, accessible offering, more users were able to enjoy the great experience that Ramsey County had to offer. Metrics have risen year over year as they have leaned on analytics to improve the ecosystem.
Clockwork bolstered our A11Y standards and process by a staggering amount.
We knew that we built accessible websites, but this amount of accessibility specifically targeting those with disabilities was a new level. Our front-end development team went above and beyond to achieve something amazing. The design team painstakingly sought to ensure that we were following all AA contrast guidelines and probably wore out color testing websites. The work we did became a table-stakes moving forward on any design project.
Featured Work.
Corvex Connected Worker
Corvex Connected Worker is an IoT cloud SaaS platform for operational excellence, facilitating connectivity and activity management within industrial environments.
Park Tool
Park Tool holds a global leadership position in bike tool manufacturing, yet its digital offerings were overly complex and outdated.