Updated

Design

Design on covid19.ca.gov collaborates with the research, content, product and engigneering teams to visualize and prototype website updates.

The design team offers the following competencies:

  • User experience strategy: translate research insights and business requirements into accessible and user-friendly online experiences
  • User interface design: design and prototype high-fidelity mockups for desktop and mobile websites and maintain a library of UI patterns
  • Brand and visual design: design and apply a consistent look and feel across channels and platforms

Day-to-day, design does the following types of work:

Custom page designs

Design conceptualizes and prototypes new pages or features that cannot be created by the content team in WordPress (usually anything that requires engineering support to build). This ensures that the team can explore a range of ideas, test with users, and collect stakeholder feedback before investing in engineering resources. Examples of custom page designs include the health equity dashboard, state dashboard, and Blueprint page.

Custom visual assets and page components

Design creates unique visual assets that support the presentation of information. Examples include the overview of vaccine phases on Vaccines or the visual assets on the Contact Tracing.

Design system and documentation

Design maintains a library of styles and components to ensure a consistent user experience and efficient use of resources by leveraging existing components when possible. The design team maintains this in Figma. Engineering has similar documentation in Storybook.

Content feedback and collaboration

Design provides feedback and guidance on page designs led by the content team. These are often pages that do not require engineering support and are created by the content team in WordPress. Examples of these include Restrictions and Holidays.

Research support

Design collaborates on research by helping think through research approaches, creating prototypes, and translating findings into approaches for new designs.

Product strategy

Design collaborates with the product team by contributing to product decisions on how to approach new requests from stakeholders and align with external campaigns or other State sites.

What’s in this guide

  1. Context about the evolution of the design of covid19.ca.gov
  2. How to use the style guide
  3. Overview of process and tools
Created and maintained by Office of Digital Innovation