Design at Wagon
January 22, 2015 | Jeff Weinstein

We have a challenging design goal: build an easy-to-use product for analysts and their teams to collaborate on understanding data. Our product is (1) a database query editor for analysts and (2) a Google Docs-style experience for non-technical people to explore results together.

We’re looking for someone to be our first UX designer – come craft our user experience, our voice, and our pixels. You’ll grow a team of designers and engineers that love data analysis and collaboration software.

As a team of engineers and data scientists, we have more experience building systems than storyboarding. Over the past few months, we’ve developed a structured design workflow. It starts with stories, drawing, and getting feedback from customers. We then specify the application’s states and object models and finally code mockups. Here’s how it all works:

Mark and Mike sketch application states.

Story

Many friends and former colleagues have the analysis and collaboration problem that Wagon solves and they’ve been very helpful testing the product. We watch them work, document their pain points, and listen to their feature requests. We winnow our notes into specific user stories: “As an X person, I need to do Y, in order to get Z.” To avoid groupthink, we independently draft and prioritize these stories, then collectively compare and merge them.

Draw

We sketch on the whiteboard, use pen and paper, and drag and drop in Google Draw to visualize our ideas. We review screenshots and pictures in Github Issues and Slack and share paper prototypes using POP. One surprisingly successful mockup was built with ASCII in Sublime Text. As our friends at Wildcard detailed, there are plenty of other design tools that we’d be excited to learn.

Feedback

Early and frequent user testing is essential. Our beta testers’ eyes surface bugs and corner cases at a humbling rate. They contribute directly via our public Hipchat room and shared Google Docs. Fortunately, our users have been patient, thoughtful, and enjoy participating.

Specify

We define application states and user flows before writing any code. These detailed state diagrams are critical for building quickly and reducing the confusion and blockers that can arise during implementation.

Wireframe

During implementation, while APIs and data are developed and tested, we lay out the user experience with HTML/CSS. This helps us uncover usability problems and lets us tweak the design in conjunction with other tasks.

To stay focused as a team, our five core product values set expectations and help us measure progress.

Intuitive

Clean design and approachable voice

Aware

Communicate context and insight

Interoperable

Connect to the outside world

Responsive

Iterate at human speed, always in control

Collective

Shared knowledge improves individuals and unites teams

Design at Wagon has been a team effort. We’ve been lucky enough to be advised and supported by a set of design advisors. Curious about data and design at Wagon? Say hi.

Thank you to Hillary Kelly for reviewing this post.