Skip to main content

Design Process and Tools

We follow a process that gets them to the best result in the shortest amount of time. The details and nuance of that process can be personal to the designer(s) working on a project. Our process should change based on individual project's details but will be based on Design Thinking methodologies. The stages of Design Thinking: empathize, define, ideate, prototype, and test.

All team members should have an understanding of the problems that we're solving for and empathize with the people who are in those situations. To build that understanding, we'll first conduct research and then, as a team, review that research to build a foundation of understanding and define the problems that we want to solve.

Initial ideas should be quick and rough. Typically, they take the form of paper or whiteboard sketches that can later be refined. The Diverge Phase of the Product Design Sprint is an ideal time to do this as a team. The exercises during that phase are designed to foster an open and creative environment.

Once we've generated ideas, we decide which one is most likely to be successful. We take an educated guess, to quickly prototype. Prototypes can take the form of a facade of UI, like a clickable Invision prototype. They could also be as simple as sketches or something entirely different, like online ads, phone calls, or emails. The goal for each of these prototypes is to validate the assumptions that the team is making. The prototype

To test our solutions, we use both qualitative research and quantitative data when available.

As our solutions are refined and validated, we should work as close to the end material as possible. This allows us to understand the constraints around our solutions better and produces more accurate tests.

Design Tools

Just as craftspeople look to keep their tools clean and sharp; we, too, look for the most helpful tools to aid our craft. Designers know which tool to use depending on the scope and phase of the project.

As a team should employ a broad set of design tools to best solve and communicate user flows, interaction, and motion. The state of design tools is ever-evolving, and we should constantly be looking to iterate on the tools that we're using. When exploring new tools, we should also think about pruning back on tools that don't fit into our current process.

Sketching supplies

Sketching is a fast way to iterate on ideas, a fast way to make ideas more concrete and a fast way to communicate those ideas. Sketching serves as a way to get all ideas, including bad ideas, out of each person's mind and shared tangibly with the group. By getting ideas on paper, it allows your mind to move on from it. Those bad ideas might serve to spark a great idea that is a solution that works well for the problem we're designing for.

We specifically use basic supplies, like standard Sharpies, during our design sprints so that sketches are at a high level. We're not trying to get all of the details on the page; we're only looking to head in the right direction. These supplies also help level the playing field of drawing skill. We're not looking for works of art, they just need to convey a solution to a problem.

Typical design sprint sketching supplies:

  • Sharpies
  • Standard printer paper
  • Yellow Post-Its
  • Whiteboard
  • Whiteboard markers

Outside of the design sprint, many of our Designers enjoy using a dot-grid notebook from Baron Fig or Rhodia. In the past, we've also purchased sketching markers and pens. We believe sketching is one of the most important tools for creating successful products. Purchase any sketching supplies that you need to sketch using your thoughtbot credit card.

Visual Design Tools

Designing visually directly in the medium that we're building for can sometimes be challenging and times impractical. Our team employees a variety of tools to allow us the room to experiment on the visual design before moving to code. While using these tools, we realize that most of these tools are an imitation of what the interface could look like.

Typical visual design tools:

  • Sketch
  • Figma
  • Adobe Suite
  • Keynote
  • Invision

You can find team licenses for each of these in 1Password.

Constant improvement

As a team, we seek out new processes and techniques, try them out, and assess whether the broader team should use them. We use GitHub Issues to the hypothesis, implement, test, and review any new process that we believe will help us.

Talk to one of our product experts about building success into your process.