Design tools

This is a record of the tools we used and why.

Note: Every team is different and may be more comfortable with different tools. That’s fine!

For collaborative discussion, diagramming and whiteboarding

Mural

• We used Mural for lots of things. It helped us facilitate collaborative discussions and workshops, diagram and whiteboard, and even make lightweight design artifacts.
• A benefit of Mural is that, with the right permissions, people could view and contribute to the board without an account.
• But, Mural has a steep learning curve and is not accessible or easy for many people. It relies heavily on zooming and motor controls for navigation, and requires new users to learn new and sometimes unfamiliar UI patterns to contribute.
• We found that it was not accessible or overwhelming for many people, and would encourage exploring alternative tools, especially for workshops.

Collaborative documents (Google and Box)

• We relied heavily on Google docs, sheets, and slides because that is what the entire team could access. However, many FS employees cannot access these resources.
• With USDA access available to team members, we now have the opportunity to use Box, which is most familiar to FS employees.

For wireframing and user interface design

Figma

• We used Figma for creating wireframes and low and mid-fi designs for testing. You can access our Figma file here.
• One of the key reasons we picked Figma over other design programs is that it can be accessed via a web browser, which makes design work more available to more people. Invited team members can also edit the file and comment directly on mock ups.
• We used the TrussWorks USWDS community file as a jumping off point for components, then added project specific styles, components, and state changes as needed.
• USWDS provides similar component libraries for other design software programs.
• One downside to Figma is its limited PDF exporting settings, which makes it difficult to generate text selectable, accessible PDFs consistently.
• Another limitation is exporting into other design software programs. This is a common challenge for designers. We've identified plug ins that help with this, but this is still a growth area for Figma.

We also regularly used pen and paper sketching, Mural, and collaborative docs to outline and explore design concepts.

For testing design work

Invision

• We used Invision for building and sharing clickable prototypes during usability tests. You can see the prototypes we tested in the timeline of design activities.
• We chose Invision over Figma prototyping because Invision works in Internet Explorer, which is still widely used by USFS staff and comes installed on USFS machines.
• However, these clickable prototypes are not accessible to screen readers and less flexible for testing multiple viewports and browser settings. We recommend moving towards more testing with live code.

The goal: Testing live code

• We didn’t get here, but we wanted to have enough of a foundation that we could perform usability tests with live code.
• This is valuable because:
  • We can test with a person’s real browser and the settings they use. This gives us a more real picture of how concepts operate in the real world with the tools real people are using.
  • Coded prototypes can be accessed via screen readers, which is a limitation of many prototyping options in design software.
  • Live code usability testing encourages more designer and developer collaboration. Developing these muscles early helps strengthen this coordination at scale.