Bandit

Overview

Bandit is a UX research and prototyping tool I built at Chasm Communications. I built it end to end: the React front end, the Node.js and Express back end, and the hosting on DigitalOcean.

Problem

UI designers needed one place to curate their UX research findings and turn them into UI patterns. Bandit gives them that place, with a tagging system for organizing findings.

Goals

• Let UI/UX designers rapidly prototype their mockups alongside their research notes, ready to present to clients.
• Keep designers and clients aligned and make it easier for them to work together.

Interface

• Projects and sessions. A project switcher sits in the header. Each project holds research sessions, such as a user feedback session.
• Findings. A session lists its findings in a table, each with a description, its gazes and color-coded tags. Gazes are the attachments behind a finding, such as screenshots and discoveries. Findings can be uploaded in bulk and exported.
• Notes. Each session has a Notes tab alongside its findings.
• Tags. A Tags page with a filter shows every tag, grouped by participant, research method and topic.
• Editing. A finding opens in a dialog for editing its description and adding or removing tags.

Architecture

• Front end: React, with Material UI components styled in Sass.
• Back end: a Node.js and Express API over a MySQL database.
• Hosting: DigitalOcean.

Technical decisions

Tags as the organizing model. Findings are organized by tags, and one finding can carry several of them: its participant, research method and topic. The tags pull the research and its documentation together into one source of truth that the team can refer back to while designing and collaborating.

Outcomes

• Final designs had research behind them: each decision could point back to the findings that supported it.
• Designers and clients stayed aligned with the decisions they'd made.
• Stakeholders didn't need reminding why a settled decision was made. The findings were there to show it.