UX distilling

Designers are asked to perform minor miracles by transforming large amounts of information into simplified communicative designs.

Oh, yeah—and those designs have to be beautiful.

That’s why we hosted a DesignTalk with Daniel O’Sullivan, creator of the concept of UX distilling. Like a master distiller transforms a large pot of mash into a fine bourbon, UX distilling is a methodology that facilitates the translation from data to design in 5 simple steps.

Watch Daniel’s full talk below, or read on for our short recap.

The problem

Daniel used a case study from a construction management application called Field Vine. They were in need of a dashboard design to host a lot of information and functionality. The problem was to make it as simple but robust as possible.

Step 1: Identify components

Figure out the high-level components of your design. Daniel realized that for this product to work, it needed 3 different components:

1. Navigations to get to deeper areas of information and functionality
2. Features to actually perform tasks in the application
3. Metrics so users could see the state of their business at a glance

“Use proper color theory to help users understand what they’re doing.”

Step 2: Gathering requirements

Think of every possible requirement. Daniel brainstormed everything the dashboard could need and wrote each one on a sticky note.

For the navigation and features, he included things like ways to communicate with contractors, view permits you pulled, inspect a customer profile, see jobs to be done, schedule contractors, and general house-keeping. 

For metrics, he knew that he wanted to include things that were helpful and positive, inline with the ideals of positive UX.

Step 3: Outline the design

The third step is to combine the requirements and start to distill.

Now that Daniel had all of his requirements on sticky notes, he was able to manually move them around in the design to see what worked best and what could overlap. Then, he simply drew boxes around them to create initial wireframes.

Daniel shared a few best practices:

• Know your tools. You don’t have to be a unicorn and know how to code, but you should know how code works.
• Use proper color theory to help the user to understand what they’re doing. Be careful about using red in positive situations.
• Use proper iconography to limit confusion. If you’re on the fence about whether to use a particular icon, do the Grandmother Test. Test it out with someone in an older generation from you to see if the icon is as universal as you believe.

To learn more about step 4 (mockup) and step 5 (refine), watch the video above! Or check out all of our other DesignTalks below.