HACK FOR L.A.

Aligning a Cross Functional Team

Collaborating with a Kanban agile team to shape and realize our product vision.

The L.A. TDM Calculator is a web app, created in conjunction with the L.A. Department of Transportation (LADOT) and Los Angeles City Planning, helping real estate developers design projects for Los Angeles that improve the infrastructure for public transportation and discourage single occupancy vehicle trips.

Team

3 Designers

1 Researcher

2 Product Managers

2 Software Engineers

2 Stakeholders

Tools

Figma

GitHub

Slack

Azure

Agile (Kanban)

Time

5 Months

The Problem

AIN numbers are used to identify property and are required for projects to be submitted to Los Angeles City Planning. During the usability testing, users were unsure how to input information for projects with multiple AIN numbers. Historically, users could only enter one AIN number for each project, which resulted in projects being rejected when reviewed by Los Angeles City Planning.

Allowing users to add, edit, and update entries was important but also complex. The most challenging part about designing this feature was addressing all potential interactions during a user’s experience. We used concise copy and clear visuals to help them understand what was happening at each step.

Goals

User: Add, edit, and delete multiple AIN number entries

Business: Increase approved projects

Product: Expand web app capabilities

Ideation

During ideation, we wanted to get a better idea of the ways we could approach this problem. Our team brainstormed different approaches and voted on the top idea to work on. We decided to design the feature around a tagging system.

Tag System Examples

Google Mail

Civic Tech Index

Task Flow

Creating a task flow was crucial in showing the possible interactions that a user may experience with the multiple entries feature. By doing so, we validated our understanding of how users move from “A” to “B”– and uncovered points of friction that stop them from achieving their goals. Here, we wanted to answer the questions:

  1. What tasks are the users trying to accomplish on your site?

  2. How do the users go about accomplishing these tasks?

Style Guide

How it Works

Considering Micro-Interactions & Accessibility

Users are able to interact with the AIN numbers that behave as tags. These tags allow users to:

  1. Add more than one entry in the same input container

  2. Make changes to individual entries

Considering accessibility, we added alternative input options that allows users to interact via their keyboard in addition to their mouse.

Reflection and Next Steps

This was my first time working cross-collaboratively with different teams so it was an adjustment. Here are some things I learned along the way:

  • Stand up for yourself and your work. If you’re an introvert, it can be difficult to voice your ideas in a crowd of highly opinionated people. Create opportunities for you to speak, whether by asking your project manager or meeting leader for time to speak during a meeting or providing feedback on meeting dynamics.

  • Always provide and ask for a “why.” This is crucial in clarifying and understanding how you and your team make decisions. Not only that, it also helps narrow down ideas. If there’s no “why” behind your idea, then that idea won’t be valuable to the team.

Next steps:

  • Assist engineering team in bringing design to life

  • User testing

Previous
Previous

Curating the Counseling Experience

Next
Next

Improving the Mental Healthcare Experience (Coming Soon)