Our Tools

How we work is greatly influenced by the tools we use. For Interaction Design at Catalpa we have the following tools in the toolkit.

How we work is greatly influenced by the tools we use. For Interaction Design at Catalpa we have the following tools in the toolkit.

Managing tasks

For managing design tasks, we use Github. This keeps both the design task and the development task together. It allows us to move forward as one team.

For creating a design task we use ‘user-stories’ and ‘conditions of satisfaction’ - for more info on how to write a good task (issue in developer speak) go here. To understand how we get some done, you can see our design process here.

Tools for prototyping

Most of the time, a click-through prototype in InVision gets the job done. We use this to gather feedback from our teammates, and from our users during user testing.

Interface design, design system, and file management

Sketch is where we spend most of our time. There are three reasons Sketch is our main tool (at least for the moment):

• Symbol libraries / design system: All of our symbols live in a Sketch library. We use Invision to manage our Sketch files—including our design system—and to review each other’s work.

• Plugins! Sketch’s open ecosystem is great, because we can customize our workflows to be just right.

• Tight integration with InVision’s Craft plugin suite. This makes it easy to wire together screens into clickable prototypes.

We maintain a clean Invision Design System Manager for each of our projects. All key files are stored and accessible via the Design System Manager. We also use Google Drive to store all created assets.

To learn about some good Sketch practices read more here. But in short, be neat, be consistent, use symbols and give things meaningful names (use bootstrap naming conventions as the base).

Collaborating with developers

We believe that design is collaborative and iterative. However, there comes a point when we need to handoff the design so it can begin development.

Our goal is to make this information sharing as seamless as possible. One way we do this is by aligning the words we use as designers with the words developers use. For example, we align our component style names with Bootstrap. That way, we’re all speaking the same language.

We also ensure the Invision design for the project is referenced in the Github wiki for that project, and individual designed pages or tasks are referenced in the relevant Github Issue.

We also write meaningful notes in Invision, explaining any key functionality to the developer. If a developer has a question, we keep those comments in Invision as well, were a developer can comment directly on the design.

For detailed information on the design, developers can use the Invision Inspect feature, and access key design assets from the Invision Design System Manager.

Experience monitoring

We do a lot of active user research at Catalpa. We use Invision to organise this process. We also monitor the experience of our product in more passive and quantitative ways. We use Google Analytics to gather and understand utilisation data.