Project Background
This website redesign was undertaken as part of Code the Change, a USC student organization that provides pro-bono tech consulting to nonprofits in LA. ASLA's outdated website was hindering their ability to effectively share renter testimonials and educate the public on LA housing.
The Original Site
The initial Affordable South LA website, shown below, had a few key issues:
Limited functionality: The testimonials page lacked interactivity, making it difficult for users to navigate and connect with individual stories effectively. Users are unable to sort and filter, and it was not possible to find other community members with similar issues.
Outdated design: The site's UI was not in line with modern web standards.
Discovery
I interviewed my client to define target users and goals.
Target Users
General public: residents, visitors and community members
Policymakers: researchers, advocates, or organizations
Notes from my client interview
Goals and Objectives
Primary Goal
How might we create an interactive platform that allows South LA residents to share their housing experiences, empowers the public to understand neighborhood-specific issues, and facilitates the exchange of helpful resources, while ensuring content authenticity?
Key Objectives
Design an effective way to showcase individual testimonials
Allow users to see the distribution of testimonials across different neighborhoods
Implement a filtering system to allow users to sort testimonials by relevant criteria
our biggest Challenge
Structuring diverse personal narratives into meaningful categories for different audiences.
With a large collection of individual testimonials spanning various housing issues, we faced the challenge of organizing these voices into a coherent structure that could serve both the general public and policymakers effectively.
Our task was to create a system that could categorize testimonials into themes and broader categories while maintaining the impact of individual stories. We ended up with the structure outlined below.
insight A
Personal stories needed contextualization within broader themes to be truly impactful.
Individual voices gained more significance when grouped into themes, allowing users to see patterns and shared experiences.
DESIGN SOLUTION
Theme Selection Sidebar
We designed a theme selection bar in the left side panel of the interface:
Visual Organization: Themes are displayed as clickable elements in a vertical list, providing a clear overview of available categories.
Interactive Exploration: Users can click on a theme to filter testimonials related to that specific topic.
Contextual Information: When a theme is selected, a pop-up appears with a brief description of the theme, offering users broader context before they dive into individual stories.
insight B
Two distinct user groups required different approaches to data presentation.
The general public sought understanding and connection, while policymakers needed actionable insights for future initiatives.
Balancing "Community Voices" with "Different Futures" was crucial.
The system needed to showcase both current issues and aspirational visions to provide a comprehensive view of the community's situation and desires.
DESIGN SOLUTION
Dual-Purpose Filter System
We implemented a filter system in the left side panel:
Checkbox Selectors: Two main checkboxes labeled "Community Voices" and "Different Futures" allow users to toggle between these categories.
Color Differentiation: Points on the map are color-coded - one color for Community Voices and another for Different Futures, providing immediate visual distinction.
Customizable View: Users can select one or both categories, allowing for focused or comprehensive exploration based on their needs.
Adaptive Content: When a category is selected, the theme selection and other UI elements adjust to show relevant options for that category.
Another Challenge we faced
Encouraging users to engage deeply with individual testimonials.
Our challenge was to find a way to make the design more interactive, promoting more engagement with each individual testimonial.
insight
Visual prominence could influence user behavior.
We realized that the presentation format could significantly impact how users interacted with the content.
Design solution
Implementing a modal pop-up to highlight individual voices.
To address this challenge, we designed a modal pop-up feature:
Activation: The modal appears whenever a user clicks on a specific voice or testimonial.
Focus: By dimming the background and presenting the story in a centered, prominent window, we created a focused reading environment.
Intentional interaction: Users now had to make a conscious decision to close the modal before moving to the next story, encouraging them to spend more time with each voice.
Final Solution
An interactive map that showcases individual voices.
Our interactive map with modal pop-ups highlights individual stories while providing geographical context.
This solution balances the need for broad data visualization with deep, personal engagement. By implementing an interactive map with story-focused UI, we created a platform that encourages thoughtful exploration of community voices while providing valuable insights into the housing challenges faced by South LA residents.
Hand-off
After finalizing our design solution, we proceeded with handing off the project to our development team, and the project is now live!
Learnings
Cross-Functional Collaboration
Working with Affordable South LA and our diverse team of designers, PMs, and developers highlighted the importance of clear communication and aligned goals. I learned to navigate differing perspectives and balance various stakeholder needs.
