Empathizing with the community through visual storytelling
A responsive web redesign for CCED.
INTRODUCTION
Role
Brand design
Visual Design
Prototyping
UX/UI design
Copywriting
Tools used
Figma
Optimal Workshop
Lyssna
Vowel
Framer
Goal
Reintroduce CCED with a modern website focused on a seamless user experience for prospective volunteers and engaged community members.
Solution
A responsive website that provides a frictionless navigating experience which will allow users to easily learn about the organization, organizing efforts, and volunteering opportunities.
Note
This is an ongoing web design.
BACKGROUND
LA Chinatown's future is at stake
Chinatown Community for Equitable Development (CCED) is a grassroots organization based in Chinatown, Los Angeles. What started out as a fight against the opening of a Wal-Mart Neighborhood Market in March 2012, CCED has expanded their organizing, civic engagement, and policy advocacy work with goals of equitable development towards a better Chinatown—specifically in the area of tenant organizing.
Chinatown Community for Equitable Development (CCED) is a grassroots organization based in Chinatown, Los Angeles. What started out as a fight against the opening of a Wal-Mart Neighborhood Market in March 2012, CCED has expanded their organizing, civic engagement, and policy advocacy work with goals of equitable development towards a better Chinatown—specifically in the area of tenant organizing.
PROBLEM
Prospective volunteers and curious community members struggled to understand CCED’s purpose, work, and ways to get involved
The client’s website design and content is outdated and does not reflect the years of its community organizing efforts.
Its navigation menu items is disorganized and not intuitive. There is heavy usage of large text blocks without supporting photos.
The client’s website design and content is outdated and does not reflect the years of its community organizing efforts.
Its navigation menu items is disorganized and not intuitive. There is heavy usage of large text blocks without supporting photos.
These reasons can make it difficult to learn about the organization, stay engaged and updated on their work, and empathize with their cause, resulting in decreased community involvement and potential volunteers.
These reasons can make it difficult to learn about the organization, stay engaged and updated on their work, and empathize with their cause, resulting in decreased community involvement and potential volunteers.
HYPOTHESES
With an initial website audit, I found the following areas had room for improvement:
Information architecture and site structure could be more organized. How can CCED make navigating their website as effortless and straightforward as possible to prospective volunteers, their organizers, partners, community members, and donors?
Prioritize relevant content. What does their current work look like? How can users access their past work?
Build credibility and trust by showcasing impact. What is their vision and goal? How can the organization utilize photos to connect and engage users with who they are and what they do?
Information architecture and site structure could be more organized. How can CCED make navigating their website as effortless and straightforward as possible to prospective volunteers, their organizers, partners, community members, and donors?
Prioritize relevant content. What does their current work look like? How can users access their past work?
Build credibility and trust by showcasing impact. What is their vision and goal? How can the organization utilize photos to connect and engage users with who they are and what they do?
UNDERSTANDING CURRENT USERS' PAIN POINTS
How do current CCED members and community members navigate the website?
I decided to perform an initial usability test on users who are familiar with CCED and test their ability to navigate and locate content in a scavenger hunt. Here are the questions I asked to guide my research.
I decided to perform an initial usability test on users who are familiar with CCED and test their ability to navigate and locate content in a scavenger hunt. Here are the questions I asked to guide my research.
KEY FINDINGS
They struggled to use the website
I was not surprised to learn that the CCED folks I conducted my initial usability test with were unable to locate certain content, stated that information was outdated, and had quite a few ideas for overall improvement. Out of the feedback, I prioritized the three main frustrations:
I was not surprised to learn that the CCED folks I conducted my initial usability test with were unable to locate certain content, stated that information was outdated, and had quite a few ideas for overall improvement. Out of the feedback, I prioritized the three main frustrations:
Advocate and organize might be lacking content.
Advocate and organize might be lacking content.
I don't like sitting and waiting for the text to change. It's frustrating.
I don't like sitting and waiting for the text to change. It's frustrating.
Not everyone knows what CCED stands for. Text and logo is a bit fuzzy. It should be bigger.
Not everyone knows what CCED stands for. Text and logo is a bit fuzzy. It should be bigger.
I want to see more about what this organization is before going into details below.
I want to see more about what this organization is before going into details below.
The 8 min video seems like a commitment and a big investment.
The 8 min video seems like a commitment and a big investment.
About Us, Values, and Our Demands should be higher so its the first thing people see and learn about.
About Us, Values, and Our Demands should be higher so its the first thing people see and learn about.
Users were frustrated and impatient with the hero section.
Advocate and organize might be lacking content.
I don't like sitting and waiting for the text to change. It's frustrating.
Not everyone knows what CCED stands for. Text and logo is a bit fuzzy. It should be bigger.
I want to see more about what this organization is before going into details below.
The 8 min video seems like a commitment and a big investment.
About Us, Values, and Our Demands should be higher so its the first thing people see and learn about.
Users were frustrated and impatient with the hero section.
Knowing how you could help/where to plug in if you have a wide range of committees and different personalities and skillsets.
I think "Volunteer" deserves its own page like what we're looking for in volunteers and what volunteers would actually do.
If we can quickly direct people to things, it would be easier to capture people to volunteer.
Volunteering options are not clear nor available.
There should be a whole page of "Our Work" with tenant associations and all their demands and news updates on it.
No info about recent campaigns.
What are we currently doing? There could be a page for current and past work and even a page of all the site fights.
COVID-19 info isn't the most important thing we're working on right now and shouldn't be on the home page.
A lot of text and it's hard to read.
I think the navigation has kind of become sprawling. There is no consistent organization.
Disorganized and outdated content.
There should be a whole page of "Our Work" with tenant associations and all their demands and news updates on it.
There should be a whole page of "Our Work" with tenant associations and all their demands and news updates on it.
No info about recent campaigns.
No info about recent campaigns.
What are we currently doing? There could be a page for current and past work and even a page of all the site fights.
What are we currently doing? There could be a page for current and past work and even a page of all the site fights.
COVID-19 info isn't the most important thing we're working on right now and shouldn't be on the home page.
COVID-19 info isn't the most important thing we're working on right now and shouldn't be on the home page.
A lot of text and it's hard to read.
A lot of text and it's hard to read.
I think the navigation has kind of become sprawling. There is no consistent organization.
I think the navigation has kind of become sprawling. There is no consistent organization.
Disorganized and outdated content.
Knowing how you could help and where to plug in would be helpful seeing if you have a wide range of committees and different personalities and skillsets.
Knowing how you could help and where to plug in would be helpful seeing if you have a wide range of committees and different personalities and skillsets.
I think "Volunteer" deserves its own page like what we're looking for in volunteers and what volunteers would actually do.
I think "Volunteer" deserves its own page like what we're looking for in volunteers and what volunteers would actually do.
If we can quickly direct people to things, it would be easier to capture people to volunteer.
If we can quickly direct people to things, it would be easier to capture people to volunteer.
Volunteering options are not clear nor available.
WHO IS THE WEBSITE FOR?
Empowering prospective volunteers to join the cause
I used the feedback from my initial usability tests to design for Nik, an LA transplant looking to utilize her urban planning education to fight for housing justice because she is concerned about the social and cultural impacts of gentrification displacement. Nik came across CCED on TikTok and after watching a few more TikToks on the organization’s profile, she wants to learn more about CCED and see how she can contribute her time to her community.
I used the feedback from my initial usability tests to design for Nik, an LA transplant looking to utilize her urban planning education to fight for housing justice because she is concerned about the social and cultural impacts of gentrification displacement. Nik came across CCED on TikTok and after watching a few more TikToks on the organization’s profile, she wants to learn more about CCED and see how she can contribute her time to her community.
User Persona
User Persona
STEP-BY-STEP ACTIONS
Visualizing Nik's journey
To kick things off, I focused on two goals Nik has for checking out CCED’s website and began thinking about the steps she would take to complete them.
Sign up to volunteer
Learn more about CCED's work with the 920 Everett Street Tenant Association
To kick things off, I focused on two goals Nik has for checking out CCED’s website and began thinking about the steps she would take to complete them.
Sign up to volunteer
Learn more about CCED's work with the 920 Everett Street Tenant Association
Task Flow 1: Sign up to volunteer
Task Flow 1: Sign up to volunteer
Task Flow 1: Sign up to volunteer
Task Flow 2: Learn more about CCED's work with 920 Everett Street Tenant Association
Task Flow 2: Learn more about CCED's work with 920 Everett Street Tenant Association
Task Flow 2: Learn more about CCED's work with 920 Everett Street Tenant Association
CATEGORIZING CONTENT
Content that is intuitive for users to navigate
I conducted a hybrid card sorting exercise to improve the content structure with 10 participants - CCED organizers and volunteers. I used 47 cards and 7 categories.
We determined the 6 categories in the main navigation:
About Us
Our Work
Tenant Associations
Resources
Media
Education
Donate
I conducted a hybrid card sorting exercise to improve the content structure with 10 participants - CCED organizers and volunteers. I used 47 cards and 7 categories.
We determined the 6 categories in the main navigation:
About Us
Our Work
Tenant Associations
Resources
Media
Education
Donate
Results from hybrid card-sorting exercise
Results from hybrid card-sorting exercise
Using the feedback from the card sorting exercise, I created a sitemap to strategize the content and navigation. In order for Nik to learn more about the 920 Everett Street Tenant Association, I categorized that site fight under Tenant Association, and nested Tenant Association under “Our Work.” The original “Beware of Vu & Fink” page was content determined as part of the 920 Everett Tenant Association fight.
Using the feedback from the card sorting exercise, I created a sitemap to strategize the content and navigation. In order for Nik to learn more about the 920 Everett Street Tenant Association, I categorized that site fight under Tenant Association, and nested Tenant Association under “Our Work.” The original “Beware of Vu & Fink” page was content determined as part of the 920 Everett Tenant Association fight.
Sitemap
Sitemap
DESIGN
Exploring initial design concepts
Lo-fidelity wireframes: Home page, Volunteer, Our Work
Lo-fidelity wireframes: Home page, Volunteer, Our Work
Home page
To provide users with a positive first impression of the client's website, I explored a home page with the following content: Story, Vision, Demands, and History. My goal is that this content will communicate the client's purpose, engage users, and guide them to relevant content.
I also explored a Donate button as something actionable users can take when landing on the website.
To provide users with a positive first impression of the client's website, I explored a home page with the following content: Story, Vision, Demands, and History. My goal is that this content will communicate the client's purpose, engage users, and guide them to relevant content.
I also explored a Donate button as something actionable users can take when landing on the website.
Volunteer page
To address users' concerns about unclear volunteer opportunities, I explored a page where users can learn about the organization's committees and what volunteering looks like.
I was intentional about utilizing white space to include more photos to capture the organization's community culture as well as balance out the usage of text.
To address users' concerns about unclear volunteer opportunities, I explored a page where users can learn about the organization's committees and what volunteering looks like.
I was intentional about utilizing white space to include more photos to capture the organization's community culture as well as balance out the usage of text.
Our Work
I strategized the content under "Our Work" into ongoing work and past work due to the organization's work spanning from the past decade. I think this will also give users the ability to access their work more efficiently.
Since Tenant Associations is considered ongoing work, I explored designing sub-pages for each of the 9 associations, including 920 Everett Street Tenant Association.
I strategized the content under "Our Work" into ongoing work and past work due to the organization's work spanning from the past decade. I think this will also give users the ability to access their work more efficiently.
Since Tenant Associations is considered ongoing work, I explored designing sub-pages for each of the 9 associations, including 920 Everett Street Tenant Association.
SOLUTION
From initial design concepts to real life
Hero Section: Before and After
Hero Section: Before and After
Engaging hero section that communicates a sense of urgency and gives the user options to take action
The top of a webpage, also known as the hero section, is the first thing users will see. To ensure the client captures the users attention, I included:
Enlarged logo with legible text.
Value proposition that creates a sense of urgency and description that communicates the client’s core message.
A striking photo from a recent action that shows CCED’s diverse community members: organizers, volunteers, tenants, and allies.
Two call to action buttons to prompt users to take action based on the client’s goal of obtaining new volunteers and obtaining donations from community members.
New and improved navigation menu for seamless navigation.
The top of a webpage, also known as the hero section, is the first thing users will see. To ensure the client captures the users attention, I included:
Enlarged logo with legible text.
Value proposition that creates a sense of urgency and description that communicates the client’s core message.
A striking photo from a recent action that shows CCED’s diverse community members: organizers, volunteers, tenants, and allies.
Two call to action buttons to prompt users to take action based on the client’s goal of obtaining new volunteers and obtaining donations from community members.
New and improved navigation menu for seamless navigation.
About Us: Before and After
About Us: Before and After
Humanizing the cause and building connection by fostering a sense of community
The client needs to capture the multi-ethnic and intergenerational community that represents CCED. After sifting through the client’s Dropbox, I put together a collage that displays years of organizing through impactful actions, day-to-day organizing, tenant and community outreach, celebrations, and much more.
The client needs to capture the multi-ethnic and intergenerational community that represents CCED. After sifting through the client’s Dropbox, I put together a collage that displays years of organizing through impactful actions, day-to-day organizing, tenant and community outreach, celebrations, and much more.
Redefining the organization's work and restructuring the site's content
I divided up content about the organization into their own separate pages under About to minimize scrolling and empower users to choose what they want to read.
Since the original dropdown for Our Work included words and phrases that may be unfamiliar to prospective volunteers and new site visitors, I used feedback from my card sorting exercise and sitemap to improve the overall information architecture by categorizing the organization's work into these 5 items: Tenant Associations, Fighting Luxury Developments, Small Business Campaigns, Power Up, and COVID-19 Response.
I divided up content about the organization into their own separate pages under About to minimize scrolling and empower users to choose what they want to read.
Since the original dropdown for Our Work included words and phrases that may be unfamiliar to prospective volunteers and new site visitors, I used feedback from my card sorting exercise and sitemap to improve the overall information architecture by categorizing the organization's work into these 5 items: Tenant Associations, Fighting Luxury Developments, Small Business Campaigns, Power Up, and COVID-19 Response.
Dedicated page to direct people to volunteer with the organization
I designed a single volunteer page with information on committees to attract new volunteers so they can explore opportunities to get involved and organize.
I worked with the client to source impact photos to add a human touch and create a sense of community.
I designed a single volunteer page with information on committees to attract new volunteers so they can explore opportunities to get involved and organize.
I worked with the client to source impact photos to add a human touch and create a sense of community.
An organized footer to find specific content more easily and to enhance navigation
I used visual hierarchy and negative space to arrange Sitemap, Our Work, and How You Can Help into three columns that would make it easy for users to navigate.
Right above the footer, I opted to direct users to subscribe to the client’s newsletters.
I used visual hierarchy and negative space to arrange Sitemap, Our Work, and How You Can Help into three columns that would make it easy for users to navigate.
Right above the footer, I opted to direct users to subscribe to the client’s newsletters.
TESTING
Validating designs
After conducting a moderated usability test, I categorized the following insights into a feedback grid which helped me understand designs that worked, any changes I can make, questions users had about the redesign, and discovering new ideas to incorporate.
After conducting a moderated usability test, I categorized the following insights into a feedback grid which helped me understand designs that worked, any changes I can make, questions users had about the redesign, and discovering new ideas to incorporate.
Feedback Grid
FINAL ITERATIONS
A modern design that captures the community's real lives and resilience
Small changes to the hero section
Feedback from the client noted that the main call-to-action they want users to take is to sign up to volunteer and then eventually become organizers. Thus, in this final iteration, I prioritized a Volunteer call-to-action over a Donate call-to-action in the main navigation and opted for the copy Join the Fight call-to-action in the hero section to evoke more sense of urgency (this will take the user to the volunteer page).
Simplified the brand colors by eliminating the use of the blue secondary color (seen in the Volunteer call-to-action button). The use of imagery throughout the redesign gives the website a lot of color, thus, other usage of colors was no longer necessary.
Eliminated the use of a pure black (#000000) by opting for a lighter hue (#212121) for better readability and reducing eye strain issues.
Minimized headline text to create more balance between the text on the left with the imagery on the right.
Feedback from the client noted that the main call-to-action they want users to take is to sign up to volunteer and then eventually become organizers. Thus, in this final iteration, I prioritized a Volunteer call-to-action over a Donate call-to-action in the main navigation and opted for the copy Join the Fight call-to-action in the hero section to evoke more sense of urgency (this will take the user to the volunteer page).
Simplified the brand colors by eliminating the use of the blue secondary color (seen in the Volunteer call-to-action button). The use of imagery throughout the redesign gives the website a lot of color, thus, other usage of colors was no longer necessary.
Eliminated the use of a pure black (#000000) by opting for a lighter hue (#212121) for better readability and reducing eye strain issues.
Minimized headline text to create more balance between the text on the left with the imagery on the right.
TESTING RESULTS
How successful were users able to complete tasks?
REFLECTIONS
What I learned
Users have very short attention spans so it's vital to design an engaging hero section to pull users in, make them care, and take action.
Appropriate use of tone, copy, and photos of the community help create a sense of urgency for users to take action.
Know your client and empathize with users to offer a balance in your design. As I was going through this redesign, I found that the original web design was not designed for prospective volunteers or community members, but actually for organizers and volunteers. As a result, the content on the website may be poorly communicated to new users without context.
Prioritize most important content to communicate to users. It was easy to go overboard and start redesigning all kinds of pages for the client. I had to re-focus my attention to the most important pages and information the client wanted to communicate such as an effective hero section, sufficient landing page, effective volunteer page, and an easy way to learn about some of the organization's work by designing a straightforward navigation bar.
Users have very short attention spans so it's vital to design an engaging hero section to pull users in, make them care, and take action.
Appropriate use of tone, copy, and photos of the community help create a sense of urgency for users to take action.
Know your client and empathize with users to offer a balance in your design. As I was going through this redesign, I found that the original web design was not designed for prospective volunteers or community members, but actually for organizers and volunteers. As a result, the content on the website may be poorly communicated to new users without context.
Prioritize most important content to communicate to users. It was easy to go overboard and start redesigning all kinds of pages for the client. I had to re-focus my attention to the most important pages and information the client wanted to communicate such as an effective hero section, sufficient landing page, effective volunteer page, and an easy way to learn about some of the organization's work by designing a straightforward navigation bar.
THE FUTURE
What's next?
I will continue to work with the client to redesign the remaining pages: Donate and Education.
Design Media page with photo library and videos
Once final designs are complete, I will work with the client to build out these pages using Framer.
I will continue to work with the client to redesign the remaining pages: Donate and Education.
Design Media page with photo library and videos
Once final designs are complete, I will work with the client to build out these pages using Framer.