UX Essentials Lesson 3: Strategy and User Experience

UX-Essentials-Lesson-3-Strategy-UX

In the previous post, we covered what UX Designers actually do on the job. (For a refresher, please re-read What UX Designers Do.)

In this lesson, let’s dig into Strategy, an underrated component of design. Readers with a business background will especially appreciate the relevance of this lesson.

This is a bigger post, so let’s break it down into 3 sections…

  • Surveying the Landscape with the 5Ws Framework
  • Constraints
  • Goals

But first, a story…

THERE WAS THIS ONE INTERVIEW THAT I TOTALLY BOMBED…

I was a college senior interviewing for full time jobs after graduation. One company, a digital consultancy, invited me for an onsite interview in Irvine. At one point in the interview, they pulled me into an ominous-looking room with an equally ominous-looking man. There was also a whiteboard.

He gave me an assignment: a client wants to bring their brick and mortar store online, and I’m in charge of making their website. They wanted to see how I would approach this imaginary project.

Nervous and unprepared, I started drawing a wireframe on the whiteboard and went into detail explaining the branding, the logo, why the website should look a certain way…

Oh my gawwwd wrong wrong wrong wrong wrong

If I could build a time machine, I’d transport back in time and slap my dumbass upside the head. I started by focusing on the wrong thing – the visuals. Before I did any of that, I should have remembered this image (though it was unbeknownst to me at the time):

UX-Essentials-Lesson-1-Elements-of-UX-Design-JJG

Remember this image from Lesson 1? Yeah, it’s come back to haunt us. But let it be your guide. We start at the strategy plane. That means that there are worthwhile considerations to make before jumping onto a project, which can translate to saving lots of time, money and energy down the road.

Part 1: Surveying the Landscape with the
5 Ws Framework

Before I started drawing on the whiteboard, I should’ve considered the 5 Ws. Who, what, where, when, and why. Easy to remember, right?

Who is this client?
Who is involved? Who are the stakeholders?

What are the requirements and constraints of this project?
What is their budget?

Where do they want their site to show up?
Website? Mobile? Android or iPhone?

When do they need to have this done?
What is the schedule?

Why do they want this project done in the first place?
What is their vision of what the results will do for them?

Example Time: Public Transit

Imagine how things would turn out if the government intended to create a new public rail system solely based on creating the prettiest trains.

Aside from causing train wrecks, building pretty trains misses the point. A quick run through the 5 Ws can elicit questions like…

Who are the stakeholders in this new public rail construction project? Does it need to be signed off by the governor? Which companies are going to be commissioned for the work? Who’s going to benefit, and who’s going to suffer as a result of this project?

What is the budget? Is it realistic and would it be accepted by taxpayers?

When is the rail going to be built? Is that a realistic timeline?

Where will the rail go? How many stops should there be? Again, would it displace any families that live along the rail line?

Why is this project important? Are there long term and short term effects? What kind of legacy do the originators of this rail project hope to achieve?

(To see how famous consultancy Adaptive Path approached a public transit project, see here.)

This is only one out of many strategy frameworks available. There’s no right or wrong method or approach, but one thing is clear: always survey the landscape first. See who’s on your team. Do a competitive analysis of what’s out there already. Ask when the deadline is. Ask what the goal of the project is.

Part 2: Constraints

A powerful outcome (and/or result) of surveying the landscape is to help define your constraints. Constraints, at first blush, might sound as appealing as your Grandma’s favorite oatmeal brand, but they are more useful than you’d think. Compare the two assignments:

  1. Create a digital service that sells food.
  2. Create an iPhone app, with a $1000 budget and 2 weeks, that enables users to order from fast food restaurants near them.

Assignment 1 starts with a frustratingly wide, blank canvas.

Assignment 2 provides a specific set of constraints to design against, with a much clearer goal.

The act of surveying the landscape – asking many questions and using a framework like the 5 Ws – can bring a designer from Option 1 -> Option 2. It makes what is broad, specific. Constraints give direction.

Without freedom, no art; art lives only on the restraints it imposes on itself, and dies of all others.Albert Camus

Part 3: Goals

So we talked about surveying the landscape and defining constraints…which all leads to setting good goals.

UX, the intersection of User Needs, Business Goals, and Constraints

There’s a huge difference between User Goals and Business Goals. Balancing the two is a common job for the User Experience Designer, and speaking on this immediately makes you stand out from other designers.

User Goals put the goals of the user first, and is ideally borne out of good user research.

What struggles and pains do users have with a certain process? What would make your app easier to use, understand, and navigate for them? How do you survey, research and gather tests on your users to improve the product for them?

Business goals are the objectives of the business, which often deal with resources, expected results, and stakeholders.

Resources: how much time and money do we have to expend on Project X? What technology and processes can we use/reuse? What is the opportunity cost of investing in this project vs. the other projects that are available? How do you prioritize what is more important?

Expected Results: How much money, press, or attention is this going to get us? Does this “move the needle” of our business forward?

Stakeholders: Are there people whose support and approval are necessary for the completion of the project? How do you involve those people as early as possible to get their buy-in?

Here’s a fantastic Medium article in which Facebook Product Design Director Julie Zhuo defends FB’s Newsfeed Design as better for users. The arguments between her article and Dustin Curtis’ is a real-world, practical discussion on User Goals vs Business Goals.

At first blush, all the above topics are not the immediate things one thinks of when it comes to “UX.”

But as a UX designer, you are not just pushing pixels or code. You are architecting solutions, and considering the strategy is an integral part of good design.

Parts 1 – 3 in this article covered what we can do by ourselves at the start of a project. But it’s not enough without actually interfacing with the users of your product.

Watch for the next lesson on UX ResearchStay tuned!

UX Essentials Lesson 2: What UX Designers Do

UX-Essentials-2-UX-Strategy

In the previous post, we defined User Experience Design in many contexts. For a refresher, please re-read Defining User Experience Design.

In this lesson, let’s dig into the real-world applications of what UX Designers do. Due to the interdisciplinary nature of the UX field, practitioners need to be able to think at a high level but also drill down into detailed work. This is why, time and time again, I find that the architecture analogy is the best way to explain what UX Designers are.

The roles involved in building a house aren’t too different from those involved in building digital experiences:

Architecture Design Building
(Exterior)
Building
(Internal)
Management
Building a House Architect Interior Designer Drywaller & Brick layer Electrician & Plumbing Real Estate Agent
UX Design UX Designer, Information Architect User Interface / Visual Design Front-end Developer Back-end Developer Product and Project Manager

(Above diagram heavily adapted from SlideShare seen here.)

When I get asked what I do as a User Experience Designer, this is usually the explanation that “clicks” with people:

You know how architects create a plan and blueprint for a house, and real estate developers & construction build the house? I do that for websites, apps and digital experiences. I work with developers and designers to build the final product.

(Aside: Another point of confusion for UXBeginners is the plethora of UX job titles. To clear this up read How to Navigate the Ocean of UX Job Titles).

Of course, the architecture analogy isn’t perfect. But it serves as a good starting point for furthering that conversation.

So What Do UX Designers Do?

To understand what UX Designers do, we put their activities in two major buckets: discovery and design.

Discovery encompasses all the research, background information, competitive analysis and more that UX Designers would gather in order to design in a more informed and user-centric way.

Design is the encompasses all the activities of designing actual parts of your product, armed with the information you’ve gathered in the discovery phase.

(Note: I’m not advocating that it’s always a linear process from Discovery to Design; it’s  of it more like a cycle).

Here are some deliverables to paint of picture of the activities that UX Designers might be responsible for:

Discovery Design
User Interviews Sketches
Personas Sitemaps
Mental Models User Flows
Stakeholder Analysis Wireframes
Competitive Analysis Prototypes
Business Requirements Definition User Interface Design
Cardsorting Coding (maybe)

 

User Experience Designers have many responsibilities, but the key idea is that UX professionals go through the phases of discovery and design in order to create user-centered products.

What Tools Do UX Designers Use?

It helps some UX Beginners to understand what UX Designers do by seeing the tools used in the industry. Again, these are not hard-and-fast rules but UX design tools can be  bucketized into different design activities:

Research UI Design Prototyping Analytics
Google Forms Adobe Illustrator Axure Google Analytics
Survey Monkey Sketch InVision CrazyEgg
UserTesting.com Adobe Photoshop Flinto KissMetrics
Eyetracking Tools Omnigraffle HTML & CSS UsabilityTools.com
Balsamiq Webflow

This is just a sample of some of the tools UX Designers might use. Some tools can be used across different design activities. For example, I used Axure for all my UI Design and Prototyping, and even to make sitemaps.

There’s new tools released everyday and the key is to remember to define what problem you need to solve first, then use whatever tool that gets the job done.

Really, there’s no need to feel bad about not using every latest tool on the market. What’s more important is to go through this type of thinking:

  • “Hmm, we need to gather more feedback on this interface from users in another part of the country.”
  • Googles “remote user testing”
  • Finds UserTesting.com, uses a free trial to get feedback.

For a deeper discussion on this topic, read How to Move Beyond UX Tools.

There are some tools that a designer may use repeatedly and invest more time and training in, such as prototyping software like Axure or Omnigraffle. Many of the tools used depends on where a UX Designer works. Which brings us to our last point…

Where do UX Designers work?

User Experience Designers work in many different environments, which most often fall in these buckets:

  • Startups
  • Agencies
  • In-house (typically bigger corporations)

I wrote an in-depth post about the realities and expectations of working in each type of environment here: How to Evaluate UX Jobs at Agencies vs Startups vs Big Companies.

The important thing to remember is that each environment has its own processes, tools, and of course culture. If you work at a great place, the employees there will be open to using new processes and tools – but you might need to justify or demonstrate the value of those tools if you’re proposing them.

_ _ _

Let’s recap we’ve covered:

  • The architecture/house-building analogy for explaining User Experience Roles
  • What UX Designers do (the Discovery and Design phases)
  • Tools used in UX Design
  • Different work environments for UX Jobs

_ _ _

More and more, design thinking is valued at companies; people want UX Designers. It’s exciting to see operations from governmental agencies to non-profits get educated about UX and desire UX talent.

Regardless of where UX Designers work, there is an increasing body of work, knowledge and process that a designer can apply anywhere.

We’ll start digging into the first step of this process in this next lesson with Strategy. Stay tuned!

UX Essentials Lesson 1: Defining User Experience Design

UX-Essentials-1-Header-Graphic

Welcome to the first lesson of the UX Essentials Course! It’s a course containing lessons on the different elements of User Experience.

By the end of this course you should be able to:

  • Understand and explain the different elements of User Experience Design
  • Learn exactly what UX Designers do
  • Get inside knowledge on how to make a solid portfolio

But today’s goal is get a strategic, big picture understanding of what User Experience is. So let’s jump into it.

A single Google search turns up an endless variety of definitions for UX.. After evaluating many definitions and gaining real-world experience in the field,, I’ve found it most comprehensive to define user experience in different contexts (you’ll see what I mean). Starting with…

10,000 Foot View Definition of User Experience

I’ve found this to be the broadest and fairest definition, which I paraphrase from the NNGroup:

User Experience is the set of experiences users have with a company, its services, and its products.

Yeah, that’s pretty broad. So let’s illustrate it with a personal example.

I bought my Macbook last year, summer of 2013. I’ve been a Windows guy all my life. Before buying the Macbook, I perused the different options on Apple.com. The website was clean, user-friendly, and gave me the information I needed to make a decision. I ordered the Macbook for pickup at a nearby Apple Store. While waiting for store representatives to retrieve my machine, another Apple rep explained to me how I can bring my Apple to the Genius bar if I have any problems.

Opening the package was a treat in itself; the unboxing process was elegant and made my first time opening a Macbook a memorable experience. After booting up the machine, the account and setup process was very straightforward. I was on the internet within minutes. Since then, a year ago, I honestly haven’t had any problems since.

You might notice that there were many touchpoints throughout that experience:

  • Website: Apple.com.
  • Retail: The physical Apple store that I visited along with the Apple representatives I talked to.
  • Product: The packaging, unboxing process and the physical make of the Macbook
  • Digital: The operating system, look, feel and functionality of the Macbook itself.

Technically, all of that is my user experience with buying the Macbook. And that experience continues as I draft these words on my Macbook.

Each part of that experience was designed. Apple.com is designed by talented web developers and UX designers. Apple stores are designed by architects and store planners. Macbooks are designed by industrial designers, engineers and lots more. So on and so forth.

So it’s worthwhile to note that while not everyone has a specific “User Experience” title, almost every employee at a company is involved – to some extent – with its user experience. Nuzi Barkatally likes the definition that “User experience means advocating for the user.” So no matter your role at a company, you can advocate for and help its customers in some way.

Defining User Experience as a Sum of Its Parts

Now that we’ve established a high level understanding of user experience, we can now dig into User Experience Design. While user experience is the overall experience a user has with a service or product, User Experience Design is the discipline that combines different practices and subdisciplines to design the user experience itself.

Venn Diagrams like the one below are one of the best reinforcements of the idea that UX Design is a combination of different fields:

UX-Essentials---Lesson-1---Interdisciplinary-Venn-Diagram

Recognizing that User Experience Design is comprised of different studies and fields is what separates a UX Beginner from someone who just throws “UX” as a filler buzzword.

 

Don’t take the above diagram at face value; there are many other diagrams like this one that emphasize other practices. The key is to know that UX is a combination of  fields from design to psychology to human computer interaction.

Sometimes a person might sound like they have expertise by saying something like “The UX of iOS7 sucks.” Initially, this sounds like a fair enough comment. But it’s not too different from someone who judges how good an article is by only reading the headline.

The differentiator? Learning how to identify and talk about what parts of the user experience are good or bad. It’s a much more educated answer to say: “iOS 7’s new visual language and interaction design is confusing; the flat graphical elements make it difficult to determine whether a button can be pressed or not. This is one part of the user experience of new iPhones that make them harder to use.”

UX is Not UI

Many non-designers usually think of “User Interface” and graphics when it comes to UX. When I introduce myself as a UX Designer, the most typical question I get is: “Oh, like designing user interfaces?”

Conversely, I also hear people use “UX” as a buzzword when they mean to say “UI.” See a pretty infographic? “This infographic has good UX.” See a nice, slick dashboard? “The UX of this dashboard is so clean.” This will drive you crazy after working in the field for a while.

The lesson: UX is not UI. UI is part of UX. Just as the Venn Diagram displayed earlier, Visual Design is one circle within the big circle of User Experience.

Sure, the new Mavericks OS I installed on my Macbook does feature a nice, clean UI. But how it works and my entire experience with it on a day-to-day basis makes the user experience.

The distinction between UX and UI is so tantamount to our industry that Erik Flowers made an entire site called UXisnotUI.com. It basically boils down to this graphic here:

UX-Essentials-Lesson-1-UX-Is-Not-UI

Defining User Experience Design as a process.

We’ve now 1) defined User Experience broadly 2) defined User Experience Design as a sum of its parts and now we define User Experience Design as a process. But first, a little bit of pseudo-history.

When people first started developing software, many went straight to coding their application. It might have just been sufficient for simple apps and programs. But as the need and applications of software grew, so did its complexity. Soon, it became very costly to build an entire application, find out what’s wrong with it (that or people didn’t want to use it at all), then code the whole thing over again. That took a lot of time and money.

So there must be a more efficient way. So why not bring the user into the process much earlier on, test often, and design a more complete, thought-out experience before committing a bunch of effort coding everything? (Link to much more complete history of UX here).

This process is formalized by Jesse James Garrett, UX visionary who created the now-famous “5 Planes” model:

UX-Essentials-Lesson-1-Elements-of-UX-Design-JJG

Garrett proposes that User Experience Design falls within these 5 planes. Ideally, designers apply these planes in a process, designing from the bottom plane up to the top plane:

  • Strategy
  • Scope
  • Structure
  • Skeleton
  • Surface

The idea is that a designer starts with the goals, strategies and research of a project – the “why.” Then you work up the planes until reaching the Surface, which is the Visual Design (or UI). A change in the lower plane will affect all planes above it. For example, if a client suddenly requests a website to be responsive, that change at the Scope plane (functional requirements) will ripple up all the way up to the Surface Plane, where the Visuals will have to reflect an interface that is adaptable to any device.

While there is no right or wrong process, most UX Designers would agree that a typical UX design process would include some research, design and testing. As UX evolves as a field, new processes and tools will come into place to make designing products and services faster. But timeless models such as Garrett’s 5 planes will provide a solid framework well into the future.

_ _ _

Wow, that was a lot. But let’s do a recap of what we learned here:

  • The broad definition of User Experience
  • User Experience Design is an interdisciplinary field that combines different practices
  • UX is not UI
  • User Experience Design – just like any other design – is a process

Hopefully that can give you a near-complete understanding of what UX is at a high level. The UX Essentials Course will deepen your understanding as we explore each element of UX Design.

The next lesson in this series is: What Do UX Designers Do? Stay tuned :)