Design principles

What

Written statements, generally in the form of imperatives like “Earn people’s trust,” that serve as guiding lights during decision-making.

Why

To give the team and the stakeholders a shared point of reference when negotiating next steps. Good design principles are specific to the project, not general truths, and should help teams say “no” to otherwise interesting proposals or generate ideas when they’re stuck.

How to do it

1. Using internal documents and kickoff activities, gather terms or concepts that seem significant to project goals and organizational culture.
2. Using existing research, list terms or concepts that seem particularly important to customers or user groups.
3. Cluster similar terms and concepts together on a whiteboard or other writing space open to everyone in the project. Name the clusters.
4. Ask the team and stakeholders if they would like to add, change, or edit any concepts or groups.
5. From the groups on the board, create three to five final principles. Using evidence from partner or user research, write one to two sentences in support of each principle.
6. Share the principles in a place accessible to the team throughout the project, and refer to them often while making decisions.

Example from 18F

• 18F Design Principles Guide
• “Making more consistent decisions with design principles: A new 18F guide” Elizabeth Goodman and Brad Nunnally.

Additional resources

• “Design Principles: Dominance, Focal Points And Hierarchy.” Steven Bradley.

Considerations for use in government

No PRA implications. Generally, no information is collected from members of the public. Even when stakeholders are members of the public, the PRA explicitly exempts direct observation and non-standardized conversation (e.g., not a survey), 5 CFR 1320.3(h)3. See the methods for Recruiting and Privacy for more tips on taking input from the public.

Mental modeling

What

A simple reference model that correlates existing and potential interfaces with user behaviors.

Why

To help designers anticipate how design decisions might facilitate future behaviors.

How to do it

1. Create one three-columned table per persona. Label the columns “Past,” “Present Behavior,” and “Future.”
2. In the middle column (Present Behavior), list current user behaviors and pain points broadly related to the project, one per row.
3. In the left-hand column (Past), list the products, services, features, and/or interfaces that the user encounters as they go about what’s listed in the Present Behavior column.
4. In the right-hand column (Future), list possible products, services, features, and/or interface elements that in the future might change behaviors and pain points in the Present Behavior column.

Additional resources

• Book: Mental Models: Aligning Design Strategy with Human Behavior. Indi Young.
• “The Secret to Designing an Intuitive UX: Match the Mental Model to the Conceptual Model.” Susan Weinschenk, UX Magazine.

Considerations for use in government

No PRA implications. No information is collected from members of the public.

Style tiles

What

A design document that contains various fonts, colors, and UI elements that communicate the visual brand direction for a website or application.

Why

To establish a common visual language between the design team and stakeholders. It also acts as a collaboration artifact that both the design team and stakeholders can use to contribute to the final design direction.

How to do it

1. Gather all the feedback and information that was provided during the initial kickoff of the project.
2. Distill the information into different directions a solution could take. Label these directions based on what kinds of interactions and brand identity they represent.
3. Create the appropriate number of style tiles based on the defined directions, which establish the specific visual language for the different directions.
4. Gather stakeholder feedback. Iterate on the style tiles, eventually getting down to a single style tile which will be the established visual language for the project going forward.

Additional resources

• Tool: Style Tiles: A Visual Web Design Process for Clients and the Responsive Web. Style Tiles.
• “Style Tiles and How They Work.” Samantha Warren.

Considerations for use in government

No PRA implications. No information is collected from members of the public.