User Interface Design & Visual Design

We take pride in making our products look beautiful and feel enjoyable. When creating visual designs, think in systems. We prefer common patterns when designing interfaces and remain consistent with platform guidelines. Interfaces look and feel best when in congruence with their context, rather than being strictly branded across all platforms. Visual design should never get in the way of the user completing a task. The design should always comply with current accessibility guidelines.

Establishing a new interface

When establishing a new product's interface, it is important to start with an understanding of the outcomes and situations of the audience. Those situations will give indications on what kind of direction to take the design, whether it be playful or minimalist or anything in-between.

New interfaces should: * Utilize a grid system to organize information in a coherent and easy to follow manner. * Follow Gestalt principles. * Build a visual hierarchy through rhythm and balance. * Use typography to both add to the style and feeling of the page but remain legible. * Use color to emphasize or de-emphasize parts of the interface. * Establish active negative space.

Moodboard

When starting from scratch with a product's visual design, it can be helpful to establish a mood board. A mood board should set the tone for the visual direction that the product will take with both the Designer and stakeholder.

The goal of the mood board is to rapidly establish an agreed-upon direction for tone, color scheme, and typography. Because of the early exploration in the mood board, Designers should spend less time iterating on a visual exploration.

We've used Invision's Boards feature, Pinterest, or just collaging images together on an artboard to create the mood board for projects.

Using and expanding upon an existing interface

When an application already has an existing interface, we prefer to use previously created components. Before creating new elements, we should look to the existing design and see if there is a component that we can iterate to achieve the user's goals.

Only create a new component when it's clear that none of the existing designs solve for the experience.

Moving towards a visual design system with a design audit

A current application interface may not have been designed using a system. Without a system in place, the design inevitably acquires design debt — multiple components achieving the same goal or poorly implemented components. When we see a product without a system in place, we believe it's best first to take a step back from the design and see how the components are currently working together. We achieve this through a design audit.

When conducting a design audit, capture all of the known design components. After everything has been obtained, categorize the components, making it clear where duplication or inconsistency has occurred.

Collecting design feedback

The best way to continually improve visual design is to look to your peers for feedback and critique. Designers are encouraged to get feedback frequently to iterate and improve their design work continually. Feedback can be timely, make sure that you're getting feedback when you need it and aren't waiting on it to move forward.

When asking for feedback:

• Be specific about the kind of feedback that you're looking for.
• Give the team or client enough information about the problem, research, and outcomes.
• Let the team or client understand how it is that you arrived at the current iteration.

When receiving feedback:

• Remain open minded.
• Actively listen.
• Don't feel the need to defend.
• Take the time to let the feedback sink in, don't just jump to new solutions.
• Look for trends in the feedback that you're getting.
• Ask, is this inline with business and user goals?

When giving feedback:

• Remain focused on the area of the application that the designer asked for feedback on.
• Bring feedback back to stated business and user goals.
• Focus on problems not solutions.
• Only suggest possible solutions.
• Don't make it personal.

Design Share

Each of our Teams has a regular Design Share meeting set up. During this time, every Designer has the opportunity to share work being done and collect feedback during it.

Design Buddy

Similar to a PR Buddy, find someone that is working on a project where you can swap times asking for feedback.

Asynchronous Critique

Sometimes the best choice is to receive feedback asynchronously. This could be because of location, timezones, or other variables that are preventing in-person critique. When posting on a tool for feedback, make sure that you're still asking for feedback on specific parts of the design and that the people leaving feedback an understanding of the decisions that have lead to the current iteration.

Tools used for asynchronous feedback:

• Slack Comments
• Figma Comments
• Invision Comments