Jessy Escobedo 


Products ––
        Magic Leap 2 Fundamentals
        Magic Leap 2 Platform
       

 Projects ––  
PLANNAR 
PLANNAR 2.0
MotionXR
Ai.gents of Neighborhood Change


Collaborations –
Decolonizing AR
        AWE Nite Mexico City


 Speculative Fiction ––
The Future of Work (Autodesk)
GLACIA
Alter_Sueños



Mark




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:

  • 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.
Role
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




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


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.

What is an ADU?
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.

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.



Clickable Prototype


View Adobe XD Clickable Prototype