Design system: beyond Alpha

## The ask
As we're closing in on front-end feature parity to D8, let's take some time to work through what our design system looks like beyond alpha.austin.gov. How do we do more with less, and achieve better results than before?

**Background**
We've heard things that indicate we need to broaden our scope about what a design system is (and isn't), who it's for, and how we're developing it. So far we've been focused on alpha.austin.gov, and we've had a few examples utilizing the solutions for the resident-facing side for other purposes (wrapping around other front-end applications such as `recollect`, and our `Joplin` authoring interface). We haven't been thinking about our design system applying to a broader audience than our team, and the resident and staff that our products serve--but we want to asap.

**Contextual frames**
- We're currently in an emergency response due to COVID-19, and people are standing up digital solutions very quickly--how can we better support city staff and residents in scenarios like this with timely, ready-to-go resources?
- What is vital to our staff and residents right now, from a digital services perspective? Things like: symptom checkers, dashboards, ventilator inventory, coordinating resource delivery (food and supplies for vulnerable populations, and residents experiencing homelessness). Would our component library be able to support that? What would we need?
- Reflecting back on our own experience, what have we learned, and how have we optimized workflow for our problems? Would the solutions we've developed work for other teams? How might we package those solutions for others? In the vein of funshops, SDL activity sheets, etc.
- More mature product teams have whole teams dedicated to design systems or specific product feature-sets, and we're a really small team. How do we scale this work in a way that's sustainable, while also constantly elevating quality?
- How we get stuff done: workflow guidance (Abstract, XD, design within Agile,
- How we know we're making a difference, and improving outcomes: research and best practices, user testing

**Who and why**
- Who needs a design system within CoA? What's the range of applications that a design system would need to support?
- Why would they want to use it?

**What / deliverables**
- What does a city-wide design system need?
- We can give components and guidance, but what does the experience of implementing something from a dev end look like?
- What's the state of designers and developers at the city? Are there centralized communication channels and resources? Are most things contracted out?
- What are the deliverables we have on-hand? Process documentation, Abstract version control/collaboration/dev handoff, best practices, component/pattern libraries, etc.
- What are the deliverables that we need? Create a matrix of assets and deliverables (color, type, spacing, motion, etc.)

---
## Potential to-dos
- [ ] Sync with Marni about what the dialogue is like at the leadership level, their goals, hopes, and fears
- [ ] Start at the end: what does the outcome look like of a fleshed out design system for the City of Austin
- [ ] Conduct research with city designers and developers outside of our team about pain-points in their workflows regarding UX/UI development and implementation, and user testing
- [ ] Talk with our developers, service designers, content strategists, research colleagues, policy lab about their digital product needs from a UX/UI standpoint. What problems are they trying to solve within their work that the UX/UI design discipline could help them with?
- [ ] Desk research on previous efforts by other teams to merge a city under a unified design system (mass.gov, gov.uk, digital.gov). What's realistic? What can and will go wrong? How to start small?
- [ ] What deliverables or guidance can we provide that puts tools and resources into the hands of others? Who are the users, what are their needs?
- [ ] What are design's goals? We can and want to help people work quickly, but how can we make sure the quality and fidelity are also high as they move fast?
- [ ] Develop goals
- [ ] Create a roadmap for `design system` work that aligns to those goals

---
## What we've heard, and seen
From **Kristen**
Mobile:
https://kristintaylor518545.invisionapp.com/overview/Affordable-Housing-Search-Form-Mobile-ck7ly8l3d03q20150fxgym8w2/screens?v=7iwP1UA62XRFr4rSPNa8Jg%3D%3D&linkshare=urlcopied
Desktop
https://kristintaylor518545.invisionapp.com/overview/Affordable-Housing-Search-Form-Desktop-ck7m2uylm00kt01225u5v99uw/screens?v=7iwP1UA62XRFr4rSPNa8Jg%3D%3D&linkshare=urlcopied
> For now, just handing over specs to the developer. So having screens or any type of documentation/standards that you follow will help.
> They have a crazy code base. But I think the most useful thing for me is the visual and interaction standards that y’all are using or have set so that I don’t have to re-create them. This product is totally a scrappy MVP and will likely be completely re-built at some point. Having us involved in the discussion when that happens will be more likely if we can help them make what they currently have better. That’s my 2 cents.

**ATD's Vision Zero Dashboard**
Amenity asked our design team for some quick feedback on a dashboard they're developing. We provided UX/UI guidance as direct comments on their prototype, as well as UI suggestions.
https://share.goabstract.com/2fa7418b-f5e3-4ae2-ac14-a7641a83efee

**Recollect app redesign**
Applying the alpha design system to a pre-existing application by a third-party vendor. https://share.goabstract.com/0dbbc470-5eec-4d04-ac88-c9f78dd2b48a

---
## Resources
- Invision's Design Maturity Model: https://www.invisionapp.com/design-better/design-maturity-model/
- Level up framework: https://df1.designerfund.com/levelup/
- US Web Design System: https://designsystem.digital.gov/
- Google's Material design: https://material.io/
- Tailwind UI component library: https://tailwindui.com/
- Microsoft's Fluent design system: https://www.microsoft.com/design/fluent/#/