Webinars

UX distilling

by

on

View all posts

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. 

Read more from Daniel O'Sullivan: 6 steps to designing better dashboards

Read more from Daniel O’Sullivan: 6 steps to designing better dashboards

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.

More posts like this
Author

Margaret Kelsey
Content + community at InVision. Newly Bostonian.

Keep up with me on and .

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.