Designing and building a user interface (UX)

If you have ever designed a Web site, an app or a software User Interface (UX), then you know that it is part art, and part science. The process takes several steps and you may go through several versions of a design before arriving at the final design. Your interface will help users solve certain problems. Therefore, getting the right people involved and keeping them engaged throughout the process is critical.

UX Distilling

Designers are asked to perform minor miracles by transforming large amounts of information into simplified communicative designs.
—Daniel O’Sullivan

Designing a User Interface (UX) is like distilling a fine bourbon
Designing a User Interface (UX) is like distilling a fine bourbon

Daniel O’Sullivan wrote an InVision blog post about UX Distilling. He likens designing and building a great (UX) to distilling a fine bourbon. O’Sullivan uses a five-step process: identify components | gather requirements | outline | mockup | refine.

Step 1: Identify Components

Identify which ingredients are needed

  • navigation
  • features
  • metrics

Step 2: Gather Requirements

Carefully choose the finest ingredients.

  • for each of the identified components in Step 1
  • focus on helpful and positive metrics vs. all metrics

Step 3: Outline (Design)

Combine the ingredients and distill.

  • know your tools; you don’t have to know how to code, but you have to understand how code works
  • use proper color theory
  • identify iconography

Step 4: Mockup

Beautifully bottle the bourbon.

  • use Photoshop, Illustrator or other tools

Step 5: Refine

Serve and enjoy, and serve and enjoy.

  • use prototyping tools
  • conduct UX testing
  • build
  • an iterative process

My Take

O’Sullivan’s summary of the process is easy to digest and makes perfect sense. I have managed many software business requirements and implementation projects over the last 20 years and follow a similar process. In the early days, I used PowerPoints and crude drawing tools to create mockups. Today, Photoshop, Illustrator and prototyping tools make the process much easier.

To get the full story, watch at least the first 20-25 minutes of the video presentation.