Brentwood, CA
Village Community Resource Center
About Village Community Resource Center
Village Community Resource Center (VCRC) is a nonprofit organization in Brentwood, CA, dedicated to empowering underserved communities by providing essential resources and services. VCRC offers a comprehensive range of programs, including educational workshops, health services, and emergency assistance, accessible both online and in-person. Their mission is to create opportunities for growth, self-sufficiency, and community connection, ensuring everyone has the chance to succeed. With a focus on holistic development, they strive to address the unique challenges faced by our community members in and around the Brentwood and Contra Costa Bay Area.
Original Premise of Project
The original premise of our project consisted of 3 components:
Designing an interface to suit needs of users who want to utilize all resources in their local library
Identify and create solutions for guest who seek additional resources their library offers
Develop and design process for college and remote worker seeking quiet work environment
Role in Design Process
UX/UI Designer and Researcher
Mar. - Nov. 2023
Tools Used
Figma, Miro, Whimsical, Google/Microsoft Suite Applications
Research and Synthesis
3 Interviews
7 Survey Responses
We began by constructing surveys and reached out to volunteered individuals for interviews.
We concluded by obtaining:
3 interviews
7 survey responses
Concluded that users wanted to utilize and gain access to more online and in person outreach and education resources, and to improve pain points especially in the categories of accessibility, simplicity, and functionality.
We determined that 80% of our users were overwhelmingly unaware of the many local resources that were available to them, resources such as career coaching, educational, as well as after school and educational programs for their families.
Affinity Mapping
Affinity Mapping presented some invaluable information - most users deemed that the VCRC was a location for communities to reach out for help and search for resources, as well as helping students with educational and after school opportunities
Some points the users noted:
“I use VCRC and nonprofit organizations for additional resources”
“I use this organization for afterschool education for my children”
“I feel that a place for study and making connections in imperative in our community”
“I think I would like the resource to provide more languages so my family members can utilize the program more effectively.”
Having compiled the gathered information, we proceeded to delineate our strategy along three distinct paths, wherein we meticulously crafted wireframes and designs tailored to cater to the distinct needs of resource seekers, a comprehensive approach for after schooling and event activities, and concurrently, a dedicated pathway specifically tailored for homepage layouts and accesibility.
Problem and Solution
Problem Statement
VCRC’s Solution
The Village Community Resource Center (VCRC) is a pivotal non-profit organization that provides essential resources and support services to the local community. Despite its critical role, the VCRC's online presence is outdated, lacking modern UX design standards and failing to adequately serve the diverse linguistic needs of its audience. The current website struggles with user engagement, accessibility, and visibility, hindering the center's ability to reach and assist more community members effectively.
The goal is to revamp and refresh the VCRC's online website to align with contemporary UX design principles, enhance online presence, and ensure accessibility across multiple languages. This will involve a comprehensive redesign focused on user-centered design, improved functionality, and inclusive content to cater to a broader audience.
Key Issues:
Outdated Design and User Experience:
The current website has an antiquated design that does not meet modern UX standards.
Navigation is cumbersome, making it difficult for users to find information quickly and efficiently.
The website lacks desktop responsiveness, leading to a poor experience for users on desktop and laptop devices.
Limited Online Presence:
The existing site does not effectively engage users or drive traffic.
There is minimal integration with social media and other digital platforms, limiting outreach and visibility.
SEO practices are not adequately implemented, reducing search engine rankings and discoverability.
Accessibility and Inclusivity:
The website does not cater to the diverse linguistic needs of the community, particularly for non-English speakers.
Accessibility features for individuals with disabilities are insufficient or missing, excluding a significant portion of potential users.
Content is not optimized for readability and comprehension across different literacy levels.
Site Map
Ideation and Sketches
-
Original Website Homepage
The VCRC's homepage was not user-friendly, presenting significant challenges to visitors trying to navigate the site. The cluttered layout and inconsistent navigation elements made it difficult for users to find essential information quickly. The color scheme and design aesthetics were outdated and did not align with contemporary UX standards, leading to a visually unappealing interface. Users frequently expressed dissatisfaction with the design, citing its lack of coherence, poor readability due to low contrast, and an overall confusing experience that detracted from the site's usability and effectiveness.
-
Revised Website Homepage
To address the issues with the VCRC homepage, we undertook a comprehensive redesign focused on user experience and accessibility. We established a UI kit and design system that incorporated a harmonious color palette and design elements tailored to our clients' preferences. This system ensured visual consistency across the site, creating a more cohesive and appealing interface. By adhering to proper UX standards, we optimized spacing, simplified navigation, and enhanced readability. Accessibility was paramount in our design process, with features such as high-contrast text, keyboard navigation support, and multilingual options to accommodate users with diverse needs and abilities. The result was a significantly improved, user-friendly homepage that resonated well with our audience.
VCRC Design System
Our design system encompasses a meticulously chosen color palette, typography, spacing, and logos that align with our design ethos and resonate with our users. We conducted extensive research and user testing to identify the most user-friendly colors, ensuring they are both aesthetically pleasing and accessible to all users. The typography was selected for its readability and clarity, providing a seamless reading experience across various devices. We paid close attention to spacing, creating a balanced and organized layout that enhances navigation and user interaction. The logos were redesigned to be modern and reflective of our community-centric values. Together, these elements form a cohesive and intuitive design system that enhances the overall user experience and accessibility of our website.
Accessibility Improvement
-
Original Homepage Accesibility
The old homepage of the VCRC website was notably deficient in accessibility features, creating numerous challenges for users. One of the primary issues was the poor color contrast within the page, which made the text difficult to read, particularly for individuals with visual impairments. This lack of readability significantly detracted from the overall user experience. Additionally, the absence of language options posed a considerable barrier to entry for non-native speakers in our community. Without the ability to easily switch to their preferred language, many users were unable to access essential information and resources, feeling excluded and unsupported. This exclusionary design not only limited the website’s reach but also undermined our mission to serve the diverse needs of our community effectively. Consequently, the website failed to provide an inclusive and user-friendly experience, highlighting the urgent need for a comprehensive redesign focused on accessibility and multilingual support.
-
Revised Homepage Accesibility
The new redesigned homepage of the VCRC website has effectively addressed all previously identified accessibility issues, resulting in a significantly enhanced user experience. One of the most notable improvements is the use of a teal and white color contrast for the text and backgrounds, which ensures optimal readability for all users, including those with visual impairments. This high-contrast color scheme not only enhances clarity but also reduces eye strain, making the website more visually appealing and easier to navigate.
In addition to the improved color scheme, we have implemented a language navigation icon that allows users to effortlessly translate all text into their preferred languages. This crucial feature breaks down language barriers, making the website more inclusive and accessible to non-native speakers within our community. By providing easy access to information in multiple languages, we ensure that everyone can benefit from the resources and services offered by the VCRC.
Moreover, the overall design has been meticulously planned to align with contemporary UX standards, including enhanced typography and strategic spacing. These elements work together to create a cohesive and intuitive layout that guides users smoothly through the site. The redesigned homepage not only looks modern and professional but also reflects our commitment to accessibility and user-centered design.
By addressing these key issues, we have transformed the VCRC website into a welcoming and user-friendly platform that effectively meets the diverse needs of our audience, reinforcing our dedication to serving the community inclusively and effectively.
Visual Consistency and Design
-
Original Website Footer
The old website's footer section was another area plagued by design issues that hindered user experience. The use of a lime green background created poor visual contrast with the white and light-colored text, making it difficult for users to read important information. This lack of contrast not only strained the eyes but also led to significant usability problems, particularly for users with visual impairments. Additionally, the information layout in the footer was cluttered and poorly organized, making navigation challenging. Users struggled to find key links and contact details, which detracted from the overall functionality of the site. The confusing and visually unappealing design of the footer section underscored the need for a comprehensive redesign to improve readability and user accessibility.
-
Revised Website Footer
The new website's footer section has been thoughtfully redesigned to provide better color contrast and a more intuitive visual hierarchy, adhering closely to UX guidelines. We replaced the lime green background with a more subdued color that offers a stark contrast against the white text, significantly enhancing readability for all users, including those with visual impairments. The layout of the footer has been reorganized to create a clear visual hierarchy, making it easier for users to locate key information such as contact details, social media links, and important site navigation links. By implementing strategic spacing and grouping related elements together, we have created a clean and user-friendly footer that guides users effortlessly to the information they need. This redesign not only improves the overall aesthetic appeal but also ensures that essential information is accessible and easy to find, contributing to a more seamless and enjoyable user experience.
Homepage Navigation Menu
-
Original Homepage Navigation Menu
The original homepage navigation drop-down menu was a major pain point for users due to its unintuitive design and lack of helpful guidance. It did not provide clear or descriptive labels, leaving users guessing about where to click to find the resources they needed. This ambiguity made it challenging for visitors, especially those unfamiliar with the site, to navigate effectively. Additionally, the drop-down menu lacked a coherent structure and visual hierarchy, presenting a cluttered and confusing array of options. Without a logical organization or visual cues to distinguish between primary and secondary menu items, users found it difficult to identify the most important links and often felt overwhelmed by the sheer number of choices. This disorganized layout not only hindered efficient navigation but also detracted from the overall user experience, making the site feel unwelcoming and cumbersome. The confusing design of the drop-down menu highlighted the urgent need for a redesign that prioritized user-friendliness, clear navigation paths, and a structured visual hierarchy to guide users seamlessly to the information and resources they sought.
-
Revised Homepage Navigation Menu
The new homepage navigation drop-down menu has been meticulously redesigned to comprehensively address the issues of its predecessor, offering users a vastly improved and seamless online experience. Clear and descriptive labels now guide users effortlessly to the resources they need, eliminating the confusion and guesswork that previously hindered navigation. The drop-down menu features a well-organized structure, with a logical flow and visual hierarchy that distinguishes primary categories from secondary options. This intuitive layout ensures that users can quickly find and access the most important links without feeling overwhelmed. By providing a vast array of navigation options, the new menu caters to the diverse needs of our users, making essential resources just a click away. The redesigned menu is not only user-friendly and visually appealing but also efficient, incorporating modern UX principles that enhance overall usability and accessibility. This thoughtful approach ensures that every user, regardless of their familiarity with the site, can navigate effortlessly, resulting in a more welcoming and functional online presence that effectively supports the community's needs.
Iterations and Revisions
The journey to redesign the VCRC webpage homepage involved a thorough process of revisions and iterations, driven by extensive user feedback, meticulous research, and a steadfast commitment to UX design principles. From the outset, we engaged closely with our community through surveys, usability testing sessions, and feedback loops to understand their navigation behaviors, preferences, and pain points. This user-centered approach informed our initial designs, which underwent multiple rounds of refinement based on iterative feedback. Throughout the process, we meticulously followed established UX design heuristics and standards, ensuring every decision—from color choices and typography to information architecture and interaction design—was grounded in enhancing usability and accessibility.
Over the course of development, we iteratively refined the homepage design through a total of 11 revisions. Each iteration was a response to insights gleaned from user testing sessions and qualitative feedback, aiming to address specific user concerns and improve overall user experience. Adjustments were made to optimize visual hierarchy, streamline navigation paths, and enhance content accessibility. For instance, user feedback highlighted the need for clearer navigation labels and more intuitive placement of essential links, prompting us to restructure the menu and improve the visibility of critical information.
The iterative nature of our design process allowed us to incrementally enhance the homepage’s functionality and aesthetics while aligning with user expectations and needs. We integrated feedback loops at key stages to validate design decisions and ensure that our solutions resonated with diverse user demographics. This collaborative approach not only facilitated the development of a more user-friendly homepage but also laid the groundwork for a cohesive digital experience across all pages of the VCRC website.
Upon achieving consensus on the final design, we meticulously implemented these refinements across all other pages, maintaining consistency and usability throughout the entire website. This holistic approach not only improved the visual appeal and functionality of the website but also reinforced our dedication to delivering an inclusive and accessible online platform for the VCRC community. The culmination of our iterative design journey resulted in a homepage that not only meets but exceeds user expectations, setting a high standard for digital engagement and community support.
Finalized Homepage
Finalized Homepage Iterations
Created a new UI kit and design system from scratch, defining consistent typography, colors, buttons, and other UI elements.
Improved visual hierarchy to prioritize important content by utilizing clear headings, subheadings, and section breaks.
Implemented WCAG-compliant color contrasts and text sizes to enhance readability and accessibility.
Introduced a dedicated section on the homepage highlighting VCRC services with interactive elements and call-to-action buttons.
Integrated a dynamic news section to keep users updated, featuring a carousel or grid layout for displaying news articles.
Designed a testimonials section to showcase user feedback and success stories, utilizing a carousel or grid layout with personalized visual elements.
Redesigned outreach forms for improved user experience, simplifying form fields and adding tooltips and validation checks.
Incorporated subtle animations and interactive elements like hover effects and clickable icons to enhance user engagement.
Optimized design for seamless viewing on various devices and screen sizes, ensuring cross-browser compatibility with popular web browsers.
Integrated user feedback mechanisms (surveys, feedback forms, etc.) to iteratively refine design elements based on qualitative and quantitative insights.
Conducted usability testing sessions to validate design decisions and optimize the homepage layout for usability and user preferences.
Task Summary
Village Community Resource Center Task Summary
The Village Community Resource Center (VCRC) website redesign project involved a comprehensive overhaul to address significant usability, accessibility, and design issues. Our goal during the duration of our project was to create a modern, user-friendly, and accessible website that effectively serves the diverse needs of the VCRC community.
Project Scope:
UI and Design System Development:
Created a new UI kit and design system from scratch.
Defined consistent typography, colors, buttons, and other UI elements to ensure visual consistency across the website.
Visual Hierarchy Enhancement:
Improved visual hierarchy to prioritize important content, utilizing clear headings, subheadings, and section breaks for better readability.
Accessibility Improvements:
Implemented WCAG-compliant color contrasts and text sizes.
Added alt text for images and improved keyboard navigation.
Ensured compatibility with screen readers and other assistive technologies.
New Homepage Services Section:
Introduced a dedicated section highlighting VCRC services with interactive elements and call-to-action buttons for easy access to service details.
VCRC Latest News Integration:
Incorporated a dynamic news section with a carousel or grid layout for displaying news articles, linking each item to its full article.
Testimonials Display:
Included a testimonials section featuring user feedback and success stories, utilizing a carousel or grid layout with personalized visual elements.
Outreach Forms Enhancement:
Redesigned outreach forms for improved user experience, simplifying form fields and adding tooltips, validation checks, and confirmation messages.
Interactive Elements and Animations:
Incorporated subtle animations and interactive elements like hover effects and clickable icons to enhance user engagement.
Mobile Responsiveness and Cross-Browser Compatibility:
Optimized design for seamless viewing on various devices and screen sizes.
Ensured compatibility across popular web browsers (Chrome, Firefox, Safari, Edge, etc.).
Feedback Integration and Iterative Refinement:
Integrated user feedback mechanisms (surveys, feedback forms, etc.) to gather insights.
Conducted 11 design iterations based on qualitative and quantitative feedback.
Conducted usability testing sessions to validate design decisions and user preferences.
Final Review and Implementation:
Conducted a comprehensive review of the final design iteration.
Ensured consistency with branding guidelines and stakeholder expectations.
Implemented the finalized homepage design across the VCRC website, maintaining consistency and usability throughout the entire online experience.
Collaboration and Stakeholder Engagement:
The success of the VCRC website redesign project was largely due to the collaborative efforts between our design team, stakeholders, owners, and developers. From the outset, we engaged with these key players to gather comprehensive requirements and set clear project goals. Regular meetings and updates ensured that all parties were aligned, and their feedback was instrumental in shaping the design iterations. This continuous dialogue allowed us to address concerns promptly and integrate valuable insights, resulting in a website that truly reflects the needs and preferences of its users.
Utilizing Past Experience and Implementing New Insights:
Leveraging our extensive past UX experience, we applied proven principles and techniques to the redesign process. Simultaneously, we remained open to new insights derived from user research and feedback. This dual approach allowed us to create a balanced design that was both innovative and grounded in established best practices. Each of the 11 iterations brought us closer to a final product that not only met but exceeded user expectations. By integrating new design trends and ensuring compliance with modern UX standards, we were able to deliver a state-of-the-art website.
Outcome and Impact:
The final design of the VCRC website has been met with positive feedback from users and stakeholders alike. The enhanced visual hierarchy, improved accessibility features, and intuitive navigation have significantly boosted user satisfaction and engagement. The new homepage, with its clear sections for services, latest news, testimonials, and outreach forms, provides a comprehensive and user-friendly experience. This redesign has not only improved the aesthetic appeal of the website but also its functionality, making it a more effective tool for the VCRC community.
In conclusion, the VCRC website redesign project exemplifies the power of collaborative effort, user-centered design, and iterative improvement. By focusing on the needs and feedback of our users, and working closely with stakeholders and developers, we have created a website that is both visually appealing and highly functional. This project stands as a testament to our commitment to excellence in UX design and our ability to deliver impactful digital solutions.
Next Steps and Lessons Learned
Next Steps and Lessons Learned
Looking ahead, the next steps for the VCRC website involve a continuous process of refinement and improvement. We plan to closely monitor user feedback and website analytics to gauge how the recent changes are received by the community. This ongoing observation will help identify areas for further enhancement and ensure the website remains responsive to the evolving needs of its users. The clients have expressed a strong commitment to making the website increasingly user-friendly, incorporating user suggestions, and adapting to new trends and technologies as they emerge. By regularly updating the site and introducing new features based on user interactions, we aim to maintain a high standard of usability and accessibility.
Throughout this project, I have learned the immense value of working closely with clients. Understanding their vision, listening to their feedback, and aligning our design approach with their expectations was crucial in delivering a successful product. The iterative design process, driven by user research and feedback, highlighted the importance of flexibility and responsiveness in UX design. Additionally, collaborating with developers provided me with a deeper appreciation for the technical aspects of web development and the challenges involved in translating design concepts into functional, user-friendly interfaces. This collaboration fostered a more holistic understanding of the development process, emphasizing the importance of seamless communication and teamwork.
Engaging with the VCRC community, particularly within the education sector, was profoundly rewarding. Working to provide students with the resources they need to succeed, especially in an underprivileged and low-income community, underscored the impact of thoughtful and inclusive design. It highlighted the role of digital platforms in bridging gaps and creating opportunities for those who may lack access to essential educational resources. This project reinforced my commitment to designing with empathy and purpose, ensuring that the end-users' needs and experiences are at the forefront of every decision.
In conclusion, this project has been a significant learning experience, enhancing my skills in client collaboration, iterative design, and developer coordination. It has also deepened my understanding of the transformative power of UX design in supporting communities and making a positive difference in people's lives. Moving forward, I am excited to continue applying these lessons to future projects, continually striving to create digital experiences that are not only visually appealing but also accessible, user-friendly, and impactful.