What’s the difference between UX and UI?

Left Brain, meet Right Brain.

For any experience to truly connect with people, it must engage both halves of their brain. Now, we understand that this mythical separation of domain between the right and left hemispheres of the brain is more rooted in pop culture than science, but it is still an apt framework for this discussion. While some like to say UX and UI are two sides of the same coin, I think it’s more apt to call them two halves of the same brain. The analytical versus the aesthetic. The data versus the qualia. The objective versus the subjective. You get the idea. But what does that mean for how we might understand the individual disciplines themselves?

Analogy time—UX is to architect as UI is to interior designer.

Let’s imagine the UX and UI designers of your digital design project are instead tasked with a bathroom remodel. The room is stripped to the studs. Without getting too graphic, we all understand that any bathroom must provide people with access to a number of critical functions. But the permutations of how the bathroom itself is laid out or how it appears, aesthetically, are virtually infinite. 

The UX designer creates a blueprint.

In doing so, they will address some basic design questions. What goes where? How much space does each activity require? What should be closest to the door? Is there a logical flow from one area to the next? Should everything be visible the moment one arrives, or should some areas be obscured? How do we arrange water supply lines and drains to maximize utility while minimizing construction costs? Where do we need storage and with what do we fill it?

In UX design, the analog to that floor plan would be a wireframe. Wireframes are the blueprint. They document the structural design and how the experience is optimized and arranged to serve a predetermined set of goals or conversions. Wireframes are the graphical representation of the relative importance and hierarchy of elements, how those elements relate, what needs to be stored in those elements and what the logical flow should be between them.

The UI designer does the finish work.

If we’re staying with the bathroom analogy, the UI designer’s decisions dictate mostly how the bathroom feels. Paint colors. Material finishes. Fixtures. Sounds. Scents. At first blush, these seem superficial, but they actually make a substantive difference to how, or if, the experience elicits a proper response. So what does UI mean in our digital design world? 

While the UX designer’s wireframes may provide broad guidelines as to what should appear on a screen and the interaction flow, the UI designer creates the actual screens, layouts, visual patterns and content and style guides that document the required family of UI elements like tone of voice, content length, buttons, icons, scrolls, menu styles, micro-animations, colors, typefaces, etc.

Both work best when considered and developed in tandem.

Of course, every digital property should work well and look and feel beautiful. But the best way to evaluate whether a design is successful is to understand whether or not it is achieving its objective. That objective may be to increase a business KPI (number of form fills, sales leads generated, etc.) or overall engagement levels like time on site, number of articles read, pages visited, etc. To maximize either, or any combination in between, requires a coordinated effort across all disciplines. 

Consumer expectations for the quality of their digital experiences are increasing. Only by understanding and engaging with people logically, intellectually and emotionally will UX and UI professionals create a competitive advantage through design.

Brainstorming vs. Ideation

Brainstorming and ideation are different tools for different purposes.

You’ve undoubtedly been in brainstorming sessions. Some of these sessions have likely been fruitful, others disappointing. I often get asked how ideation is different from brainstorming. A very smart and talented friend of mine, Matt Phillips distinguished the two types of sessions by asserting most brainstorms are simply “meetings… with better food.” But beyond that perhaps undeserved jab at brainstorming, there are several aspects that separate brainstorms from formal ideation.

First, what is an ideation session, anyway?

Before I jump into the difference between a brainstorm and an ideation session, I should provide some context for anyone unfamiliar with this process. In traditional design-thinking, the ideation phase is often the most exciting step within the process. The ideation session itself is the organized gathering of minds within that step where the litany of ideas is generated against some highly defined problems or desired outcomes. These ideas range from the possible to the seemingly impossible given current organizational constraints.

A time and a place.

For what it’s worth, I love a good brainstorm. They’re fun, engaging and often produce creative ideas. They are collaborative and aid in generating new ideas to improve internal processes, develop creative campaigns, share ideas, etc. This is all important work.

But let’s remember that ideation is the third step in a more formal design-thinking process and should be treated as such. It should be informed by learnings emerging from the Empathize stage, address specific challenges outlined in the Define phase and, finally, create a starting point for the Prototype and Test phases.

Ideation is about not only generating ideas but also systematically upending and exploring the mental models surrounding those ideas, assessing recurring themes, evaluating ideas through a variety of lenses and, ultimately, converging and consolidating various branches of thought into manageable future areas of innovation. Ideation, to that point, also requires more time, commitment, homework and buy-in from stakeholders. 

Ideation may be utilized for a multitude of business challenges. Some examples include:

• Developing new product or service directions

• Exploring new business strategies and revenue streams

• Finding new business angles by solving complex customer-centric challenges

Leave it to a professional.

When led by a trained moderator, ideation sessions get users beyond the myriad obvious solutions often generated in traditional brainstorming sessions. The session moderator leads participants through a series of carefully structured exercises designed to create an abundance of ideas and then explore, build on and refine the most viable. There is a substantial amount of exercises out there (this site is a nice repository for a number of tools and methods), but understanding which exercises are best suited to address your particular challenge is a skill honed through repetition and experience. Having a moderator who can teach or lead your team through the effective use of these tools is equally as critical as wielding them in the first place. 

A successful session leader will help you:

• Ask—and answer—the right questions

• Break through organizational constraints to view challenges in a new light

• Keep your “hero” user’s needs and behaviors at the foundation of your innovation

• Rise above the obvious solutions to increase innovation potential

• Identify and leverage different perspectives to uncover unexpected angles for innovation

There’s definitely a team in “I.”

In ideation, fielding the right team is critical. Sure, brainstorms usually include teams. But, yet again, ideation is different. It’s important to bring in the right expertise and perspectives to maximize the value of a session. A diverse group of resources is the most effective, from internal subject matter experts and designers to trend experts and sometimes potential customers. The diversity of expertise within the group can be critical in creating and enhancing groundbreaking ideas, ensuring all angles have been explored, examined or exhausted.

It’s always a matter of time.

In addition to being internally focused with little structure or outside perspectives, most teams dedicate an hour or two for a brainstorm. Little thought or prep work is required. Ideation, on the other hand, is a commitment—session preparation, session execution and idea refinement. To be successful, most sessions require a time commitment of one to two business days.   

Just interesting people kicking back, sharing a beer and developing a breakthrough innovation?

If only it were that easy! The truth is, while they may be fun and stimulating, ideation sessions are hard work. When done right, most participants leave both stimulated and exhausted.

TL:DR?

Here’s a quick snapshot of the difference between a brainstorm and an ideation session.

Brainstorm

• Often a standalone meeting based on a singular objective

• Used to generate new ideas

• Good uses of a brainstorm include:

  • Improving internal processes

  • Developing creative campaigns

  • Naming exercises

• Often unstructured with takeaways delineated at the end of the meeting

• Often include homogenous teams

• Time commitment: 1–2 hours

IdeationSession

• The third step in the design-thinking process: informed by gathered insights and defined challenges to solve

• Used to generate ideas and explore what surrounds those ideas, assess themes and evaluate ideas

• Good uses of an ideation session include

  • Developing new product/service directions

  • Exploring new business strategies and revenue streams

  • Finding new business angles

• Highly structured with pre-work and post-session refinement

• Includes diverse perspectives and internal and external resources

• Time commitment: 1–2 days

5 reasons design thinking facilitation can amplify the success of your internal team

Everybody needs somebody, sometimes.

One of the great superpowers of design thinking is that it’s a methodology that anybody, or any organization, can learn and deploy, quickly and efficiently. As proof, one only needs to look at the growing numbers of organizations and enterprises building internal design thinking capabilities and teams. We have worked with some great internal teams who are embracing the methodology and positively transforming their products, services, processes and cultures.

All of this success might beg the question, “if these companies are getting so good at design thinking, why would they, from time to time, choose to bring in outside design thinking consultants and facilitators, like Ideo, IBM or Magnani?” Of course, there may be specific technological, industrial design or procedural expertise lacking in the clients’ existing team that drives the decision to seek external resources. But in this post, we’ll cover more universal reasons that even the best internal design thinking and innovation teams might benefit from the addition of an outside resource.

1. Rising above organizational inertia.

Design thinking is a methodology, not magic.Adhering to its principles and practices can do much to help its participants move past, “the way we’ve always done it.” But some organizations have deeply entrenched behaviors and norms surrounding certain aspects of their business that it can be difficult for anyone, or any group, to implement change.

Bringing in an outside facilitator can give participants newfound abilities to take on an alternate perspective, at least through the duration of the exercise. We liken the dynamic to those situations when a surprise guest calls you on a Saturday morning and announces they will be at your place within minutes. Suddenly, you are able to adopt the guest’s perspective and see a seemingly infinite number of new things you need to clean, straighten, dispose of, etc. It is the exact same home that previously felt “fine” but now, with your newfound perspective, appears in direct need of attention. It’s important to note that those issues weren’t suddenly in need of attention. They needed attention all along. But complacency and inertia rendered them invisible.

In that same way, the facilitator’s presence and leadership can amplify participants’ ability to see new opportunities for improvement to which they would otherwise have been collectively, figuratively blind. Product or service features that were “fine” suddenly may reveal themselves as a challenge to overcome when participants begin to view them through the eyes of their new “guest.”

2. Amplifying the voice of the customer.

Successful design thinking depends on maintaining a human-/customer-centered perspective throughout the process. External facilitators are in a unique position to be (and, I would argue, have a professional obligation to be) a powerful advocate for the customer throughout the process.

An external facilitator should bring to the process no other agenda than that of designing the best possible service or experience that solves the defined challenge, regardless of what other constraints are influencing the process. For some idea of those constraints, see the other four points covered in this post.

3. Brokering the peace.

As companies grow and incentive structures are created independently, in siloed departments or geographies, when trying to implement change, one will inevitably encounter misalignment of those incentives. Now throw into the mix an innovation that requires major operational or behavioral changes and enterprise-wide coordination. Resistance to change is likely to occur on just as major of a scale.

On top of that, one is also likely to encounter fundamental struggles over ownership and control. Don’t misunderstand that I am in any way representing these challenges as superficial or easy to overcome. They are very real and generally difficult to surmount.

However, when discussing those challenges, having a third party facilitating the design thinking process can help keep the group focused on benefits to customers and the organization as a whole. It can also help minimize the impression that the innovation came from any single department or an executive who may be perceived as having a more personal interest in the success of the change. If you have no dog in the hunt, so to speak, it’s harder for anyone to argue you are inherently biased as to which dog ultimately wins.

4. Broadening the strategic perspective.

Bringing a broader range of experience and cross-sector perspective to a client engagement is a benefit inherent to management consulting, across the board, and it certainly applies to design thinking facilitation.

We’ve had the pleasure of working with clients in sectors as diverse as health care, financial services, packaged goods, hospitality, industrial manufacturing and sporting goods, to name a few. And as distinctive each of these sectors may seem, there was always some strategic market, customer or business insight learned from one that we could draw upon to inform the strategy of another. Technologies and industries may change, but basic human nature applies to all.

5. Adding horsepower. Pure and simple.

The design thinking process, when done at the enterprise level, requires deep resources and thrives on expertise. Adding outside facilitators to the mix can reduce the impact of bottlenecks that normally result from in-house resources being diverted mid-project back to the day-to-day needs of the business.

For one, it’s about getting on the winning side of the numbers game. Generally, the greater the number of qualified minds applied to a problem, the greater the number of possible solutions generated.Further, it’s about having dedicated resources, ready, willing and able to shepherd a project through its various complexities and challenges, always focused on success and free of competing priorities.

Go ahead, point that finger.

There’s little more rewarding than amplifying organizations’ abilities to work through the stages of design thinking to solve what could seem like truly intractable challenges, develop new lines of business or improve the customer journey. The business is more competitive. The customer is more satisfied. And the internal design thinking teams should be able to point to improved ROI from their efforts.

What is business design thinking (and why should you care)?

Don’t let the name fool you.

To those new to the concept, the term design thinking may seem like something that only designers could, or should, do. But nothing could be further from the truth. Business design thinking is the utilization of the traditional design-thinking methodology to conduct a more human-centered examination of a product, service or experience, to define what aspects of those things might be improved, to imagine and prototype solutions for addressing those improvable aspects, and to test and refine your solutions.

We’ll briefly cover the specifics of these steps in a moment, but suffice it to say, for now, this methodology is an equally powerful tool whether you’re looking to create a new web application or to increase the efficiency of budget approvals. Basically, any time you find yourself asking, “Could we do this a different, better way?” you would be well served to undertake a little business design thinking.

So, for starters, what are the five steps of design thinking?

There seem to be as many flavors of design thinking as there are consultancies in the world. But most of those flavors are variations on five common design-thinking steps: Empathize, Define, Ideate,Prototype and Test.

Step 1: Empathize

The purpose of this step is to thoroughly understand the people or customers for whom you want to improve a product or experience. It’s all about observing, interacting or immersing yourself into their world. Get into their heads. Walk a mile in their shoes. Pick your cliché. Just do it. The real benefit here is that you uncover how things really are experienced versus how they are assumed to be.

Step 2: Define

Here, you process the findings from your observations and interactions and synthesize a point of view as to what challenge you want to solve for and what moments in the customer experiences you wish to improve.

Step 3: Ideate

Now that you know what you’re solving for, explore the widest variety of possible solutions to your defined challenge(s). You should then begin to prioritize which of the ideas generated are at once desirable (people would want to engage with the solution), feasible (the solution is technically possible) and viable (the resources required to deploy the solution don’t outweigh its value to the company).

Step 4: Prototype

Find some way to make your proposed solution real—or at least real enough to evaluate. That could be something as simple as an artfully arranged collection of Post-it notes to a fully deployed test-market product launch.

Step 5: Test

You’ll want to put your prototype into the hands (minds) of people and evaluate whether you’ve created a satisfactory solution to the challenge you originally defined. From here, you might go forward with the “real” version of your solution, go back to any of the previous steps and iterate, or abandon the effort altogether.

You should understand that despite the linear presentation of these stages, you may find yourself circling back to any early stage, from any later stage, as greater levels of insight, nuance and plain old unforeseen issues reveal themselves. So how might applying design thinking within your company offer any real business advantage?

Design thinking can help improve every business process.

As useful as business design thinking can be in forwarding an enterprise-level change-management initiative, it scales perfectly well to small tasks like improving a work intake form or how invoices are routed for approval.

Design thinking increases decision-making transparency.

Integral to the design-thinking process is documentation and sharing of learnings and outcomes along the way. Empathize helps everyone know exactly who the solution will help. Define provides an objective challenge around which to build consensus, early. Ideation documents and lays bare all of the solutions in contention. Prototype and Test provide objective and empirical evaluations of ideas. So, when someone in another part of the company or who was simply not involved in the process asks why or how decisions were made, you’ll have a record.

Design thinking gets to solutions in a repeatable way.

A common issue facing many is that people aren’t always sure how to get started. Business design thinking provides a common starting point as well as a path forward. Further, the more that everyone in the organization understands the practice and value of the methodology, business design thinking can provide an accelerative influence over process improvement.

You can start right now.

While there are certainly greater benefits to formal business design-thinking training or working with a design-thinking firm, simply introducing the discipline of the methodology of design thinking can improve your business decision-making today.

How to start prototyping (and why you should).

https://commons.wikimedia.org/wiki/File:QuickChange_9.JPG

Everything is a prototype.

If we’ve learned anything from watching the progress of evolution in the natural world, it’s that everything, no matter how established, is a prototype for a more highly adapted successor. That isn’t meant to be a life-or-death warning of doom; it’s meant to say that prototyping is part of the natural order of exploring, evaluating and optimizing ideas.

And, as you’ll see as we move through this blog, prototyping doesn’t have to involve creating elaborate physical models, programming or spending large sums of cash(though all of those are viable prototyping methods).

How to get started prototyping.

In its simplest form, a prototype is simply any externalized creation for understanding if an interaction or experience will work the way you imagine it will. That could be something as low fidelity as using multiple stacks of sticky notes to prototype a website navigation or a pencil sketch to work through visual design problems. Or, it could be as high fidelity as launching an actual business in a limited-geography test market.

Prototyping Quick Reference Guide

Low Fidelity Medium Fidelity High Fidelity

Type (Relative Cost)	Best Use Case	Standard Tools	Basic Testing Method
Paper ($)	Early concepting, quick iteration on a feature level, general user interaction exploration	Pencil, paper, Post-it® Notes	Internal, informal interviews and discussions
Digital Sketches ($)	Blocking content zones, understanding relationships of content or navigational elements	Sketch/InVision, Axure, InDesign	Internal interviews
Interactive Digital Sketches ($)	Understand flow of experience from object to object, page to page, interaction to interaction	Sketch/InVision, Code, Axure, InDesign	Internal and external qualitative interviews
Stories/Storyboard ($)	A simple, cheap way to portray the flow and touch points of a new experience. A story or storyboard enables both stakeholders and potential customers to imagine themselves in the midst of your concept	Pencil, paper, Post-it® Notes	Internal, informal interviews and discussions, first interaction with users
Physical Model Build ($)	Solicit feedback from your users and provide a springboard for new ideas. Tinkering with a physical model can lead to new insights about your design, too	Magazines, paper, cardboard, clay, pipe cleaners, tape, tinker toys, Lego® blocks	Iterative hands-on creation with your team, putting a model in the hands of your users for feedback
Wireframes ($$)	Understand volume and quality of content, labeling, wayfinding, features and functions	Sketch/Invision, Axure, InDesign	Internal and external qualitative interviews
Interactive Wireframes ($$)	Understand volume and quality of content, labeling, wayfinding, features and functions, initial concept testing	Sketch/InVision, Code—HTML/CSS/JavaScript, Axure, InDesign	Internal and external qualitative interviews
Skit ($$)	Depict a process, service or even how an object gets used	Team members, users and props: clothing, signs, photos, boxes	An effective skit can solicit corrections and enhancements from your users, right on the spot
Design Flats ($$$)	Understand brand expression, viewing of final form, user sentiment	Sketch/InVision, Photoshop, InDesign	External qualitative Interviews
Functional Front-End Prototype ($$$$)	Confirm learnings from earlier prototypes and prep for launch into development, test-drive final form	Code—HTML/CSS/JavaScript	External qualitative Interviews
Test Center ($$$)	Specific location that allows your customers to interact with a new product or service in a controlled space	Team to design and create the mechanics needed, users, video or ethnographers	Can be conducted where users are located for ethnographic study or a special space designed for the tests (Beta testing in the software world)
In-Market Product/Service/Business ($$$$)	Building a prototype that is a complete product, service or business allows you to test not only User Desirability but also Technical Feasibility and Business Viability and how choices in one area affect another	All aspects of the product, service or business	$

The best prototypes deliver the greatest amount of tangible feedback in the least amount of time for the lowest investment (perhaps one of just a few areas where you can get good, fast AND cheap). Outside of those criteria, there’s really no wrong way to prototype. That being said, here is a list of the most common methods, use cases, tools, testing methods and relative costs (not included, but just as valuable: Play Doh™, pipe cleaners, cardboard boxes, string and rubber bands).

Why you should prototype.

Aside from the aforementioned gut-check benefits of bringing your internal understanding to life, prototyping provides a number of operational and financial benefits:

Understand the problem more clearly.

Engaging with prototypes allows you to walk a mile in a user’s/customer’s shoes, so to speak. Whether you’re creating physical, digital or virtual prototypes, the more hands-on (or minds-on) you can make your ideas, the faster you’ll know if the solution resonates with or achieves its intended result for the intended target market.

Build consensus/resolve ambiguity.

Conceptual experiences, even when described in great detail, can be interpreted quite differently by individuals. Prototypes allow all parties involved to see and experience the concept in a similar, if not identical, fashion. It helps everyone to more clearly understand what problem they are solving and what outcome they are all striving to achieve.

Improve speed to market.

The more iteration and refinement you can achieve in the low- to mid-fidelity stages of the prototyping process, the faster and less expensively you can make those changes. It’s much easier to cut new cardboard, scribble new sticky notes, make new sketches or twist another pipe cleaner than it is to reprogram, machine new parts or retool a production line.

Limit exposure to risk.

Ideas are great, but execution is everything. If it wasn’t obvious from the previous three points, prototyping is not simply about refining and optimizing ideas; it’s about managing risk in the design and development processes. Prototyping can help surface issues early concerning the desirability, feasibility and viability of a product or experience.

So, go forth and make stuff.

Always remember, in prototyping, anything you can do or use to test out your idea is fair game.Grab any scrap of paper, twigs, rocks, crayons, clay, you name it, and start cobbling whatever materials you have on hand to bring an approximation of your idea to life, ASAP! In the long run, it will most certainly improve your end product.