Project Background
This website redesign was undertaken as part of Code the Change, a school organization that provides pro-bono tech consulting to nonprofits. ASLA's outdated website was hindering their ability to effectively share renter testimonials and educate the public on LA housing. As student consultants, we approached this project with the dual goals of delivering professional-grade work to our client while gaining real-world experience in applying our technical skills to address social issues.
The Old Website
The initial Affordable South LA (ASLA) website, while well-intentioned, had become outdated and functionally limited, hindering its ability to serve the community effectively. Key issues included:
Limited functionality: The testimonials page lacked interactivity, making it difficult for users to navigate and connect with individual stories effectively.
Outdated design: The site's UI was not in line with modern web standards.
Discovery
I interviewed my client to define success criteria and target users.
Target Users
General public: residents, visitors and community members
Policymakers: researchers, advocates, or organizations
Goals and Considerations
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 Considerations
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 problem
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.
insights
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 implemented 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.
insights
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 problem we faced
Encouraging users to engage deeply with individual voices
Our challenge was to find a way to slow down the user experience and promote more meaningful engagement with each individual voice.
insights
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.
For the exploration and understanding stages of community engagement, 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!
Retrospective
Learnings
Information Architecture
I learned the importance of creating a flexible, intuitive structure that could accommodate diverse stories while maintaining clear navigation and relationships between different pieces of information.
Cross-Functional Collaboration
Working with ASLA 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.
Balancing Innovation with Feasibility
While striving for innovative solutions, we sometimes encountered technical limitations or resource constraints. Finding the right balance between creative ideas and practical implementation was a valuable learning experience.
If I could do it again…
Mobile-First Design
Many users, especially in underserved communities, primarily access the internet through mobile devices. A mobile-first approach would have ensured a more seamless experience across all platforms and potentially increased accessibility for our target audience.
Accessibility
We recognize the need for a more comprehensive approach to accessibility. This includes considerations for users with various disabilities and those using assistive technologies.
Post-Launch Data
One limitation we faced was the lack of access to post-launch data. This data would have been valuable for assessing the real-world impact of our design decisions and making informed iterations.
