SP
The Community Art Center
website redesign
Year: 2023
Role: UI/ UX Designer
Tools: Figma, Miro, Wix
The Community Art Center, Inc. (CAC), is a non-profit organization that provides arts programs to K-12 age participants after school year round "engaging community of youth whose powerful voices transform their lives, their neighborhood, and their worlds."
The Challenge
As an organization with an impressive 86-year history and a diverse range of programs, the Community Art Center website holds a wealth of information. Despite the website's rich content, it was not attracting sufficient traffic or effectively utilizing its calls to action to engage specific user types.
The Impact
The enhanced website significantly boosts awareness of the organization and its profound impact on the community. By attracting a larger number of visitors, the website effectively cultivates potential donors and fosters valuable partnerships within the community.
Target User
The Community Art Center has multiple users including parents, youth, and members of the board,
but we started by prioritizing funders, donors, and volunteers
who exclusively rely on the website for credibility and transparency of the center's work, goals, strategies, initiatives, and opportunities to get involved. These users don't often have a direct link or relationship with the center like the youth, parents, or board members.
Our Goals
Redesign the home page and donation page
to make them more appealing, intuitive, and user-friendly, encouraging
visitors to engage and contribute.
Restructure the overall website IA
to organize and ensure that visitors can easily find the desired information, improving their browsing experience and reducing confusion.
Rethink and recommend improvements to the style guide
to enhance its branding and visual appeal as it aligns with the center's mission, goals, creating a consistent and engaging visual identity across the website.
The Design Process
RESEARCH
Generative User Testing
To achieve the set goals, I initiated the design process by conducting user testing on the current website. I involved a group of board members and external individuals to gather their insights and identify significant issues. Their primary task was to explore various donation methods available on the site while also highlighting any potential obstacles that impacted their user experience.
Heuristic Analysis
Also, conducted a thorough heuristic analysis of the homepage, and donate page to identify potential issues with content layout, navigation, and visual consistency.
Home Page
Donate Option Page
Sponsors and Supporters Page
IDEATE
Based on the heuristic evaluation and generative usability tests, I identified
these pain points and opportunities to help improve the website.
Pain Points
1
Cognative Overload
Opportunity
Prioritize key information so users can find what they are looking for based on the user's goals and needs.
2
Inconsistent Layout Design
Opportunity
Establish a comprehensive style guide that reflects the organization's identity and redesign the landing page to captivate the user.
3
Poor Navigate
Opportunity
Organize and restructure the navigation, for the user to have a more seamless, easy, and efficient experience.
Site Map
I created a site map to help me visually organize and structure the website's content and pages. In a few cases, I re-organized the pages to avoid confusion in navigation. This hierarchy of information provided a clear overview and informed the design of individual pages and overall user experience.
DESIGN
Sketches
To begin our creative process, we begin by sketching out multiple versions of the home page re-design as a way to explore the prioritization of information and establish an effective visual layout. This allowed us to engage in a discussion of how information could be presented in an engaging and intuitive manner.
.jpg)
Before & After: Home Page
Before
Improvements:
Used spatial composition to organize the banner and enhance the user experience for readability and clarity. Also added the new logo.
Optimized the menu bar to reorganize and consolidate website pages by grouping related content, decreasing them to four topics, so user can find what they are looking for efficiently.
Added a slow-motion video to captivate the users and create an immersive experience, making the homepage visually appealing and compelling.
Reduced the copy to make the home page scannable, helping users to find relevant information at a glance.
After
Before & After: Donation Page
Before
Improvements:
-
Embedded forms so that the users can seamless interact with the form without being taken away to a separate page.
-
Created a unified support hub by centralizing all the ways to support on one page for a comprehensive and inclusive experience for all users.
After
Solution
Created a clear and intuitive navigation structure that guides the users to their desired information and calls to action.
Made it easy and simple to explore volunteer and donation opportunities.
Streamlined the layout to simplify the homepage to provide a clean and organized design, prioritizing essential information and highlighting key elements such as the organization's mission, impact, and calls to action.
Established the brand identity by improving the overall visual design aligned with the history, mission, and impact of the art center on the community.