Designing a joint ADU Resource website for the City & County of LA
Live website: laadu.org
Client: City of Los Angeles Information Technology Agency, i-team, LA County Homelessness Initiative
Outcome:
Client: City of Los Angeles Information Technology Agency, i-team, LA County Homelessness Initiative
Outcome:
Decreased confusion from LA County constituents around new Accessory Dwelling Unit (ADU) policies
Decreased calls to various LA departments’ contact centers
Easy to access, centralized location for ADU information
Summary
With a population of 10 million and at least 107 cities, LA County has a big responsibility in providing residents with the latest information about new policies about Accessory Dwelling Units (ADUs). While individual cities in LA County develop and pass their own ADU Ordinances in the next couple of years, most cities are still operating under state law. Representatives from the LA County Homeless Initiative and the i-team in City of Los Angeles thought it would be a great idea to spread this information through a joint website that would act as a clearinghouse and direct people to the respective ADU Ordinance website per city.
With a population of 10 million and at least 107 cities, LA County has a big responsibility in providing residents with the latest information about new policies about Accessory Dwelling Units (ADUs). While individual cities in LA County develop and pass their own ADU Ordinances in the next couple of years, most cities are still operating under state law. Representatives from the LA County Homeless Initiative and the i-team in City of Los Angeles thought it would be a great idea to spread this information through a joint website that would act as a clearinghouse and direct people to the respective ADU Ordinance website per city.
Role
UX + UI Design
Visual Design
High Fidelity Click Through Prototypes
Design Implementation on Drupal
Project Management
UX + UI Design
Visual Design
High Fidelity Click Through Prototypes
Design Implementation on Drupal
Project Management
Timeline
1 Month
Tools
Google Suite (Docs, Sheets)
Adobe XD
Adobe Illustrator
Drupal 7 Editor
Whimsical
1 Month
Tools
Google Suite (Docs, Sheets)
Adobe XD
Adobe Illustrator
Drupal 7 Editor
Whimsical
Challenge
While cities in LA County are writing their policies around ADU development, many Angelenos who are eager to take advantage of incentives and opportunities to build lack the official requirements that are needed within their jurisdiction, often falling prey to misinformation by Googling or hearing from bad actors in the construction industry.How might we design a resource for residents of LA County that directs them to the most up-to-date information surrounding new policies around ADU development in their jurisdiction?
Design Direction
With this being our second website about ADU development, we didn’t want to create more confusion with already competing websites. Some criteria:-
Be simple (act as mainly a clearinghouse) and not have too may pages
- Not look like the LA ADU Accelerator Program in style, color palette, and branding
- Promote county-wide “success” stories
- Provide accessible resources (as provided by LA County) about the general process and where to find county-specific information (main feature: Address Check tool)
I organized the site based on a simple global fixed navbar, with content following a similar logic as our LA ADU Accelerator website.
The site was comprised of the primary pages:
- A Home page that would be inspirational to potential ADU homeowners and include promotional stories
- “What’s an ADU” page that would lay out the basics, including the process and what can and can’t be built
- “Plan an ADU” page that would consist of the more immediate action items to begin the process, the first is checking whether one’s eligible or whether an ADU is a sound choice for the resident
- An FAQ page to answer as many questions as possible so as not to cause the resident to call
- A “Quick Tools” page that would feature the most important interactive features (including financial calculators, a city directory)
- Search of course
Site Map & Wireframe
Using some content provided by county staff and some provided by our team (i-team), I created this mockup and held several meetings with LA County to confirm branding style, palette, and content type.
Initial Designs
With a “go” from county and my fellowship ending within a couple of weeks, my goal was to finish a working Drupal template with the developer team. After our initial consultation meeting, I learned that development would be faster if we used some coded components from the LA ADU Accelerator Program website. At that meeting I negotiated different design options, accounting for accessibility.
I changed the ‘experimental’ graphic elements such as the blob-shaped buttons and backgrounds, as well as off-grid layout.
Final Designs
![]()
![]()
![]()
![]()
I changed the ‘experimental’ graphic elements such as the blob-shaped buttons and backgrounds, as well as off-grid layout.
Final Designs
Home Page
The emphasis on the homepage was to explain the partnership between the City and County and why the website existed to clarify further confusion.
The emphasis on the homepage was to explain the partnership between the City and County and why the website existed to clarify further confusion.
What is an ADU?
This page was barely changed - though much of the content to be provided by County
This page was barely changed - though much of the content to be provided by County
Plan an ADU
Instead of building a custom address check tool that would give custom feedback and redirect people to the right county - we decided to embed an existing lookup tool that county already had, followed by a simple “City Directory” that contained a dropdown list of all the County’s ADU Ordinance pages. If the city wasn’t listed in the dropdown menu, it meant the city is still going by State law.
Instead of building a custom address check tool that would give custom feedback and redirect people to the right county - we decided to embed an existing lookup tool that county already had, followed by a simple “City Directory” that contained a dropdown list of all the County’s ADU Ordinance pages. If the city wasn’t listed in the dropdown menu, it meant the city is still going by State law.
Incentive Programs
Upon further review from other city and county departments, an additional page was added called “Programs” to feature the growing number of incentive programs offered throughout the county.
Upon further review from other city and county departments, an additional page was added called “Programs” to feature the growing number of incentive programs offered throughout the county.
Clickable Prototype
View Adobe XD Clickable Prototype