About the project
Problem
The digital age has transformed the way citizens interact with their local governments, and a user-friendly, intuitive, and accessible website is now a fundamental aspect of delivering effective public services. Our county government's current website, while functional, is not living up to the high standards of the modern user experience. It is often criticized for being outdated, cluttered, and difficult to navigate, which results in a frustrating experience for residents seeking essential information and services. The primary objective of this UX/UI design project is to reimagine and redesign the website to enhance the user experience, making it easier for citizens to access and engage with government resources.
User Insights and Pain Points
Through extensive research and interviews, we have identified several key challenges faced by users of the existing website. One significant pain point is the difficulty in finding relevant information quickly. Users often report feeling overwhelmed by the sheer volume of content and lack of clear categorization, which leads to confusion and increased time spent searching. Additionally, the website's design is not mobile-responsive, which is a critical issue in our increasingly mobile-first world. This limitation hinders the experience for those accessing the site from smartphones or tablets, which can be particularly challenging for the elderly and those with disabilities who may rely on these devices. Another common complaint is the complexity of certain online forms and services, which can be cumbersome and time-consuming to complete, causing unnecessary frustration and potential abandonment.
User Needs and Wants
Our target audience is diverse, encompassing residents of all ages and technological abilities. Users want a website that is visually appealing, intuitive to use, and provides quick access to essential services and information such as public transportation schedules, permit applications, and community event calendars. They also seek a platform that is accessible and inclusive, catering to those with visual or hearing impairments and complying with ADA standards. Users need a clear pathway to contact their local officials and provide feedback, fostering a sense of transparency and community engagement. Furthermore, they wish for a more personalized experience, where they can easily find information tailored to their specific needs, such as neighborhood-specific news, emergency alerts, and tailored service recommendations based on their location and preferences.
My Role & Deliverables
User Experience Design
User Interface Design
User Research & Studies
Design System Creation
Wireframes & Prototypes
Web Design
Objective
To address these challenges, our UX/UI design project will focus on creating a user-centered website that caters to the needs and wants of our residents. This will involve a thorough analysis of the current website's architecture, content, and user flow, followed by the development of user personas, journey maps, and wireframes to inform the redesign. The new website will be designed with a clean, modern aesthetic and feature a responsive layout that adapts seamlessly to various devices. It will have a simplified navigation structure, with clear categorization and a prominent search function to help users find what they need quickly. We will also implement user-friendly forms and online services, with step-by-step guidance and clear instructions.
Priorities
The redesign will prioritize accessibility features, such as high contrast color schemes, text resizing options, and screen reader compatibility, to ensure that all users can interact with the site effectively. To foster community engagement, we will include an interactive map showcasing local events and services, a section dedicated to town hall meetings and public notices, and an integrated social media feed for real-time updates. Finally, the project will deliver a comprehensive style guide and content strategy to ensure consistency across the website and facilitate future updates and expansions.
Outcomes
By the end of this project, we aim to create a county government website that not only meets but exceeds user expectations, serving as a model for other government entities seeking to improve their digital presence. Through an enhanced user experience, we hope to boost public trust, encourage civic participation, and ultimately, improve the quality of life for residents by providing them with the tools and resources they need to interact efficiently and positively with their local government.
Goals
Improved User engagement
Improved User Satisfaction
Modern UX/UI
Improved Market Awareness
Improved Process Efficiencies
Increased User Attraction
Research
User Analytics
User Studies
User Surveys
User Interviews
Competitor Analysis
User Journey Map
Personas
Competitor Analysis
The St. Louis County website presents users with a straightforward design, aiming for ease of use and clarity. Upon first glance, the homepage is organized into distinct sections, allowing residents to quickly locate essential services and information. However, when compared to its competitors, such as Kansas City and Jefferson Counties, the overall aesthetic appears somewhat outdated. The use of large text and basic color schemes suggests a preference for functionality over visual appeal. Navigating the site is generally intuitive, with a main menu that is easily accessible from any page. Yet, the content can be overwhelming due to the sheer volume of information available, making it difficult for users to discern the most relevant options. The search function is robust and provides accurate results, but the lack of a sitemap or breadcrumb navigation could leave some users feeling lost in the sprawling digital landscape. Despite these challenges, the website does offer a mobile-responsive design, catering to the increasing number of users accessing the site from their smartphones and tablets.
Competitor #1
Turning to KC County's website, we find a more modern and visually appealing user experience. The design is clean and uncluttered, with a focus on user-centered content. The use of images and videos adds vibrancy and helps guide visitors to popular services and events. The navigation is also more intuitive, with a well-structured main menu that groups related items together. The inclusion of a sitemap and breadcrumbs makes it easier to navigate through the website's various pages and departments.
Moreover, the site features a strong emphasis on accessibility, with options to change text size, color contrast, and language, which is not as prominent on the St. Louis County website. The search function is equally efficient, but the advanced search options allow users to refine their queries, leading to a more precise and satisfying experience. Additionally, the Kansas City website offers a chatbot for immediate assistance, which is a feature that sets it apart from St. Louis and the other competitors, providing users with real-time help and reducing the need for phone calls or emails.
Competitor #2
Jefferson and St. Charles Counties offer experiences that are more closely aligned with St. Louis in terms of design and navigation. Both websites have a traditional government website feel but manage to maintain a certain level of user-friendliness.
Jefferson County's website boasts a well-defined hierarchy and clear call-to-action buttons, making it easier for users to find what they need. The homepage features a rotating banner that highlights important updates and events, which adds a dynamic element to the experience.
Competitor #3
However, the overall layout is not as visually engaging as Kansas City's. St. Charles County's website has a more modern look, with a clean layout and the use of icons to represent different departments. The main menu is well-organized, and the content is concise, reducing the information overload that can be found on the St. Louis site. Yet, both Jefferson and St. Charles lack a dedicated section for frequently asked questions (FAQs), which St. Louis includes. This feature is beneficial for users looking for quick answers to common inquiries. In terms of accessibility, while all three competitors offer some degree of customization, Kansas City remains the leader with its more comprehensive set of options.
Analysis Summary
In summary, while the St. Louis County website is functional and provides a decent mobile experience, it lags behind its competitors in terms of visual appeal and user-centric navigation. Kansas City and Jefferson Counties offer more engaging interfaces, with Kansas City taking the lead in accessibility and innovative features like a chatbot. St. Charles County presents a more modern aesthetic but could benefit from the addition of an FAQ section. To enhance the user experience, the St. Louis County website could consider incorporating some of these best practices to streamline content, improve visual design, and provide additional support tools for users with varying needs.
Persona Analysis
Persona #1
Maggie Thompson, a 78-year-old retired librarian, brings a wealth of experience and wisdom to the digital landscape, yet her interaction with the local county website is often fraught with challenges. Her basic technology comfort level allows her to use email and search for information, but the nuances of navigating complex, poorly designed websites can be a source of frustration. With a penchant for staying informed and engaged, she frequently visits the site to find details on senior-related events, manage her property taxes, and connect with local services like healthcare and recreation. Her sharp mind, honed by a lifetime of learning, is reflected in her motivations to remain self-sufficient and contribute to her community through digital channels.
However, the barriers she faces due to the website's accessibility issues, such as small font sizes and poor contrast, make it difficult for her to read and absorb the information she needs. Outdated content that often requires additional verification calls further complicates her online experience. Despite these obstacles, Maggie's resilience and pride in adapting to new technologies drive her to persist, as seen in her recent endeavor to join a virtual book club and pay her taxes independently. Her hope for a more senior-friendly website resonates with her desire to maintain her autonomy and continue participating in the community she cherishes. As a vibrant individual who thrives on learning and staying active, Maggie exemplifies the need for accessible and user-friendly digital platforms that cater to the diverse needs of an aging population.
Persona #2
Mike Jenkins is a 34-year-old software engineer with a high proficiency in using computers and the internet. As a married man with two young children, his digital world revolves around efficiency and family-centered resources that help him manage his life smoothly. He frequently visits the local county website to stay informed about community events, local schools, and health services, aiming to provide the best for his wife and kids. However, his experience with the website is often marred by an outdated design that clashes with the modern interfaces he is accustomed to in his professional life. The sluggish load times of the website are a significant source of annoyance, causing him to abandon his searches in frustration.
Mike's motivation is convenience; he dreams of a digital platform that allows him to handle government-related tasks online, such as vehicle registration and personal document renewals, without the need for time-consuming in-office visits. His ideal website would offer content tailored to his family's interests, with clear instructions and a user-friendly layout. Despite his tech-savvy nature, he appreciates simplicity and ease of use, as his busy life leaves little room for navigating through complex digital mazes. The current county website's lack of clarity and relevance often leads him to feel like he's fighting through a "jungle of links and dead ends." As a new resident seeking to engage with his community, Mike longs for a digital space that reflects the vibrancy and transparency of the area he now calls home. His hope is that the website will evolve to meet his needs, offering a user experience that mirrors the modern and dynamic life he leads as a professional and a parent.
Personas Summary
Both Maggie and Mike represent the diverse tapestry of users seeking to connect with their local government through the digital realm. Their shared hope is for a website that doesn't just serve up information but becomes a bridge to community engagement, tailored to the unique needs of each user. As we strive to build a more inclusive digital world, it's essential to remember that a well-designed website isn't just about aesthetics; it's about empowering individuals to stay informed, active, and independent, regardless of their age or technological prowess.
User Survey
This UX/UI study for the STL County Website has revealed a plethora of insights that will undeniably enhance the user experience and interface design. Engaging with a diverse group of residents, business owners, and tourists, we've gained a profound understanding of the needs and expectations of the website's primary audience. The survey, which drew a robust response from participants, has highlighted several areas of opportunity, as well as aspects of the current website that are performing well.
The findings indicate that while the existing website is appreciated for its wealth of information, navigating through the multitude of pages and finding specific content remains a challenge for many users. A common thread among the feedback is the desire for a more intuitive layout that simplifies the user journey. Respondents emphasized the need for a more prominent search bar and a better categorization of services, allowing them to quickly locate essential resources such as online bill payments, job listings, and community events. The homepage was also noted as an area for improvement, with users expressing the need for a cleaner, more visually appealing design that clearly presents the most frequently accessed services and highlights important updates or emergency information.
In terms of usability, mobile responsiveness emerged as a critical factor for a significant portion of the participants. With an increasing number of users accessing the website via smartphones and tablets, it's essential that the site is optimized for these devices. The survey indicated that the current mobile version could be more user-friendly, with larger buttons, easier-to-read text, and a more navigable menu structure. Additionally, participants expressed the need for a more personalized experience, suggesting features such as user accounts where they can save favorite pages or receive notifications for services relevant to them.
The study also uncovered a strong interest in accessibility enhancements. Users with varying abilities, including those with visual impairments or who use screen readers, highlighted the importance of adhering to ADA guidelines and improving the overall accessibility of the website. This includes the use of clear, high-contrast fonts, alt text for images, and consistent navigation throughout the site.
On the positive side, the survey revealed that users value the website's comprehensive content and the effort made to provide a one-stop-shop for all county-related information. However, there is a clear demand for a more engaging and dynamic platform that reflects the vibrant spirit of STL County. Users are seeking a more interactive experience, with the integration of multimedia elements like videos and infographics to present information in a more digestible and engaging format.
Taking these insights into account, it is important to implement the necessary changes to create a website that truly serves the needs of the STL County community. The redesign will focus on simplifying the navigation, enhancing the visual appeal, and prioritizing mobile functionality. We're committed to crafting a user-centered experience that not only meets the current demands but anticipates the future needs of residents and visitors alike. The updated STL Website will be a tool that empowers citizens and fosters a stronger connection with their local government.
The Solution
Embarking on a journey to enhance the digital presence of the STL County official website, the goal is to create a user-friendly, accessible, and visually appealing platform that reflects the vibrant community it serves. These comprehensive UX/UI solutions, including the implementation of a new style guide, accessibility enhancements, wireframes, prototypes, contribute to the overall success and evolution of the STL County brand and promote the anticipated outcomes of this modernization project.
The New Design System
The cornerstone of the revamped St. Louis County website is a modern Design System that will set the visual and interactive tone for the entire platform. Drawing inspiration from the region's rich history and natural beauty, the new style guide will incorporate a vibrant color palette, clean typography, and a user-centric design language that resonates with residents and visitors alike. This cohesive design system will ensure that the website remains consistent across all devices and browsers, providing a seamless experience. It will include detailed guidelines on the use of images, videos, icons, and interactive elements to maintain brand identity and improve content readability.
Accessibility Enhancements
A key focus of this project is to enhance the accessibility of the website for all users, including those with disabilities. By adhering to the Web Content Accessibility Guidelines (WCAG) 2.1, the aim is to create an inclusive digital environment. The new website will feature improved color contrasts, keyboard navigation, screen reader compatibility, and closed captions for multimedia content. It will also support dynamic text sizing and be optimized for users with varying levels of visual and auditory acuity. These enhancements will not only cater to individuals with special needs but also contribute to an overall better user experience for the general audience.
Wireframes
A series of wireframes were developed that serve as the blueprint for the website's structure and functionality. These wireframes meticulously outline the layout of each page, the hierarchy of information, and the navigation flow. They provide a visual representation of the content organization and user interactions, ensuring that the final product is intuitive and easy to navigate. The wireframes have been designed with scalability in mind, allowing for future expansion and adaptation as the needs of the community evolve.
Prototypes
Based on the approved wireframes, interactive prototypes were created to bring the vision to life. These prototypes enabled others to experience the website's functionality and usability before it is fully developed. By iterating on the prototypes, refinement may occur in the design and identify any potential issues early in the process. This iterative approach ensures that the final website meets user expectations and aligns with the project's objectives. The prototypes will be tested with a diverse group of users to gather feedback and insights that will inform further design decisions.
Expected Outcomes
The revamped St. Louis County website is expected to deliver several significant outcomes. Firstly, the new design will improve the overall user experience by providing a more engaging and intuitive interface. The enhanced accessibility features will cater to a wider audience, ensuring that all residents can easily access and interact with the information and services provided by the county.
Secondly, the implementation of the style guide will result in a consistent and recognizable brand identity that reflects the community's values and spirit. This will foster trust and familiarity among users, making it easier for them to find and use the website.
Thirdly, the improved navigation and information architecture will make it simpler for residents to locate essential services, such as emergency alerts, public transportation, and community events. This will increase the website's usability and encourage more people to engage with the local government.
Lastly, the website's responsive design will ensure that it is accessible on a range of devices, including smartphones, tablets, and desktop computers. This will cater to the increasing number of users who rely on mobile devices for accessing information and services, thereby increasing the reach and effectiveness of the platform.
Conclusion
The new St. Louis County website could become a benchmark for government digital platforms. Through the integration of a comprehensive style guide, accessibility enhancements, and thoughtfully crafted wireframes and prototypes, there is confidence that the website will serve as an invaluable resource for residents and visitors. The anticipated outcomes of these modern upgrades include an improved user experience, increased community engagement, and a more inclusive digital presence for the county.
Research
Define
My Process
Design
Deploy
Measure
