1. Research

   What problem(s) are we trying to solve? What are we building? What data do we have to help understand the problem? Do we have customer feedback to support the project?
2. Plan

   Do we have specific user stories? Create user flows to better understand the journey, and make sure you validate using audience data. Define red routes to help identify, prioritize, and eliminate obstacles.
3. Explore

   Discuss the project with peers. Prototype, prototype, prototype, and test your prototypes with real users. Be prepared to throw away most of what you make. It’s much cheaper to rework your approach at this stage. Work with the content team and use real content at this phase.
4. Create

   Is this responsive? What does it look like on mobile? Tablet? A large monitor? Reuse existing elements and patterns. Follow style guidelines. Follow WCAG 2.1 AA guidelines.
5. Feedback

   Be specific and clear with error messages. Give immediate feedback of successful actions. Show a loader if users must wait.
6. Finalize

   Use images, icons, and colors consistently. Always follow the design guide and try to keep things clear and simple. The design should always provide the user a clear path forward... not distract.
7. Delight

   Add micro copy where appropriate. Think about micro interactions. Will motion help build meaning about spatial relationships, functionality, and intention?
8. Analyze

   Can we user test? What KPIs will we look at for success? What do we expect to achieve? Are data collection measures in place? Can we show efficiency gains (e.g. time on task)?

While it can be tempting to jump straight into designing a solution, it’s essential to make sure the right problem is being solved. Nothing is more costly than building the wrong thing.

Problem definitions should be based on data, not opinion. Analytics, journey mapping, and qualitative and quantitative data gathering techniques are valid ways to confirm that a real problem exists.

Make sure your problem statement is correctly sized. It should be broad enough to allow for creative solutions, while narrow enough to constitute a single, solvable problem. Prototyping and hypothesis testing can help confirm that you have identified the right problem to solve.

Content should form the foundation of all design decisions. If we design in the absence of real content, we are creating the packaging before we know what’s going in it.

Start with Content

Design the user flow first. This allows us to identify pages and content needs. Think about strategic objectives and red routes during this process.

Wireframing

Map the user flow to the wireframe. By working content-first, we can prioritize the wireframe development accordingly:

• Content structure
• Interaction design
• Visual design

Iteration

Iterating on the interactions through low-fidelity wireframing will help us better understand and control the flow of the experience. As you work keep the following in mind:

• Real Content. Use real content, never use “lorem ipsum” or placeholder content.
• Collaborate. Involve the content team often as the wireframes evolve.
• Test. Test your wireframes with real users as frequently as possible.
• Progressive Enhancement. All core content needs to be accessible on all devices.
• Think Mobile-First. Make sure we adequately represent what pages look like on mobile. Ideally, start making content and interaction decisions at the mobile breakpoints before designing the desktop experience.

Progressive enhancement means one thing: delivering what can be supported to the right platform. It’s not about supporting the oldest browsers. It’s not about avoiding JavaScript. It’s about making sure the core content is always accessible. We progressively enhance in a layered approach. Once we design the content layer, we enhance by adding the design and interaction layers independently.

Layer 1: Content

The first layer is clean, semantic HTML. This allows text-based, speech-based, antiquated and robotic user-agents to navigate the content of your website properly. Semantic HTML will take you 90% of the way to a site that works with most assistive technologies.

Layer 2: Design

The second layer is CSS. This allows visual-based user-agents to display or alter the visual representation of our website’s content.

Layer 3: Interaction

The third layer is JavaScript. This allows user-agents that are capable to provide users with enhanced features and usability.

Good interaction design is driven by a human connection.

Goal-Driven Design

We need to understand our users and design solutions for them. Our design approach should be people-centric and inclusive. Personas, user scenarios, experience maps are all tools to help us focus on the user.

Usability

Usability is the bare minimum of interaction design. A system must first be usable before it can be enjoyable. We want our systems to be effortless to use.

Affordances and Signifiers

Make things obvious. Without signifiers (e.g., blue underlined links), users won’t be able to perceive what they can do.

Learnability

We use consistent UI patterns that will be familiar to our customers. Our component library contains components that provide a strong level of predictability.

Feedback and Response Time

Feedback is the heart of the interaction. Micro-interactions and subtle animations, in response to a user’s action, will provide satisfaction and a sense of accomplishment. If a process takes too long to complete, we should provide the appropriate feedback to the customer (like a loading icon).

The faster a site loads, the better the user experience. A few things that we must do to assure a fast-loading site are:

• Minify and concatenate all JavaScript and CSS
• Make sure all images are properly optimized
• Include CSS at the top, JavaScript at the bottom
• Avoid using unnecessary images that don’t add value to the page
• Avoid plugins unless necessary (most plugins are bloated and add HTTP requests)
• Create animations using CSS instead of JavaScript

Image Optimization

All production images should be properly optimized. ImageOptim is a great tool for providing lossless compression and removing bloated metadata. Online optimizers include tinyPNG and Jpeg.io.

HTML

When writing HTML, strive to be semantic, concise, and effective.

• CSS references should be placed at the top of the document.
• JavaScript references should be placed at the bottom of the document.

Reduce HTTP Requests

Eliminate any features that do not improve the user experience. These may be:

• Unnecessary images
• Unnecessary JavaScript
• Excessive CSS
• Unnecessary plugins