Design process and tools
Design Process
1. Identify the need
The design process typically starts with a request from the Product Team which may be responding to the following types of challenges. Depending on the type of challenge, the Product Team will have defined the requirements based on input from research, analytics, stakeholder requirements, and other sources.
User challenges
Challenges or opportunities informed by insights from the reasearch or analytics team. For example, making industry guidance easier to discover based on feedback and analytics indicating that users were having trouble finding information relevant to their industry.
Business challenges
Request from government stakeholders based on new policies and priorities. For example, introducing regional maps during the period of the Regional Stay at Home Order.
Internal challenges
A challenge faced by by the content or engineering teams. For example, creating an alert box design pattern to help the content team communicate time-sensitive information.
2. Prototype approaches
Based on research data and product requirements, design explores a range of solutions and prototypes them with Figma. This is often done in collaboration with the broader team. We use Miro to facilitate group ideation for larger projects. We share ideas for smaller projects through Slack and Jira.
Engineering resources are often a bottleneck. We look for low-lift solutions whenever possible. When designing new UI components, we priortize things that can be used throughout the website. We avoid one-off solutions as much as possible.
3. Collect feedback and iterate
Depending on the project, the prototype may be used by the research team to collect feedback from users. In other projects, prototypes are only shared internally.
4. Document and handoff
Design often puts designs and requirements into Jira so engineering understands what to build. We ensure that requirements are in scope by collaborating with engineering.
5. QA
Throughout the development and launch of a product, it’s the design team’s responsibility to participate in quality assurance (QA) checks and support engineering with any additional documentation or revisions that are required. During QA, we are putting bugs and design improvements into Jira.
Tools
Figma
Figma is our design tool of choice. We use it to explore ideas, share approaches, collaborate, and manage assets.
Our content designers, engineers, and product managers have access to Figma and can leave comments directly in the applicaiton. In some cases, content designers will update text directly in Figma. Engineers can export assets and styles from Figma.
See the Getting Started page in Figma for documentation on how Figma files are organized.
Miro
We use Miro for collaborative whiteboarding sessions. As a design tool, it’s used to facilitate workshops with other team members.
Jira
We use Jira to track progress of all tasks. For design, Jira is a way to share designs for feedback, track progress, and perform QA as the project moves into development.
Google Docs
In some cases, content designers will update text directly in Figma. In other cases, they work in Google Docs. In the latter case, the design team will need to reference Google Docs to ensure that content in the Figma prototypes are up-to-date. Depending on the project, it may be OK to use placeholder content in the designs in Figma.