Case Studies About Contact

Packaging bioinformatic tools for reusability

Rabix Composer is tool that helps bioinformaticians to create and optimize workflows for analysis of genomic data. It consists of Workflow Builder and Tool Wrapper. Workflow Builder enables them to connect different tools into workflows, and Tool Wrapper helps them pack individual tools built in different languages, on different platforms, by different people into reusable, reliable components that can be used in many different workflows.

Problem

First version of Rabix Composer (under a different name) was a rushed MVP that never left the MVP phase. It was developed with a focus on technical execution, had a steep learning curve, and many users found it incomprehensible.

Role

Designer assigned to this team needed help, so I partnered with him and did a lot of work in early phases—research, prototyping and some UI design, mostly for the Tool Wrapper, while he focused on the Workflow Builder. Months after this initial push, he continued working on Rabix Composer as I focused on other projects.

Card Sorting

We knew that the existing interface didn’t fit the users mental model, but we didn’t jet know how they though about their work. By using open card sorting, we finally understood how they thing about tool building.
This directly affected not only app information architecture but even the general layout - instead of tabbed interface that required a lot of jumping for even basic actions, we developed a “master-detail” layout that provided users with an overview with allowing them to drill down to details quickly.

Guiding principles

Use the users language

Fit the user's mental model as much as possible. This reflects in the information architecture, layout, and messaging.

Forrest ➞ Tree ➞ Leaf

Enable users to easily traverse vast branches without losing the bigger picture. This was a big problem with the MVP.

Guidance

Enable new users to wrap a basic tools and progress to more complex use cases over a smooth learning curve.
Animation of early lo-fi prototype. Collaboration with Boban Pajić

Interaction concepts

The goal set with development team that we're going for a full rewrite, and that this will act as a stand-alone tools (it was a nested component before). This gave us the freedom to experiment with different concepts and features, some I made can be seen down.
Concepts include general organization, features for live preview, navigation and overview, component states, etc.

Microinteractions

This is a powerful tool that requires a lot of small interactions that seem intuitive and effortless. In order to really make them so, I made lots of different concepts until users understood it. When they didn't even notice, but knew how to use it, I knew it passed the test.
Variations of microinteraction for creation of new nodes in Workflow editor.

Detailed interface

After the concept was validated with prototypes and usability tests, I was responsible for detailed interface design of the Tool Wrapper. In early discussions we set a course to follow the look of other products, so I reused existing styles and designed new in the same style.
Various sections and states. Main content with empty states can be seen in the middle.

Check it out

Since the redesign there was considerable good feedback from users and community, as it's available online for free. It has evolved considerably since these early days, especially the Workflow Builder, so it may differ from stuff displayed here.
Check it out live ➞