Interaction Design Beyond the Interface Workshop

Interaction Design
Beyond the Wireframe
Interaction 14 - Amsterdam, The Netherlands

Interaction 14

** How do you feel cheer**

@lishubert

February 5, 2014

!
Welcome to Interaction Design Beyond the Interface. We have a great day ahead of us...
!
Our objective for today is to learn how to get sign off on a solution without creating (sketching, wire framing, or even prototyping) an interface.
!
The structure of our day looks like this…

Agenda
• Part I - Introduction
• Part II - Solution steps 1 - 3
• Part III - Solution steps 4 - 5
• Part IV - Solutions steps 6 - 8
Interaction 14

We’ve split today into 4 parts….
Info will be given to you, don’t have to be taking notes
Now, allow me to say

@lishubert

February 5, 2014

* bichin invernal by formatthebrain on Flickr
Interaction 14

@lishubert

My name is Lis, and I’m a IA and UX consultant in NYC.

!

And as a consultant I’ve gotten to work on loads of different stuff for companies like…

February 5, 2014

Interaction 14

@lishubert

February 5, 2014

Being a consultant means that I go in to a client (which could be anyone from a startup to a huge corporation) and I help them to make their products and
services better.

!

Now of course, having worked in many different industries for many others as an Information Architect, UX Designer, or Interaction Designer, depending
on the scope, I have seen a lot, like many of you have.

!

Thus, after observing the inner company, agency, and community for some time, I wanted to put together this workshop as I was noticing more and more
that the basis of my profession was being erased and overlooked. That basis is the ability to facilitate deﬁning the real problem and coming to a solution
without ever thinking about the interface.

!
That’s right, getting sign off on the concept of our solution before creating an interface.
!
Now since you know all about me let me ﬁnd out all about

Interaction 14

@lishubert

February 5, 2014
* who are YOU? by Ian Sane on Flickr

Who you are?

!
• Who would call themselves an Interaction Designer? Would you call yourself a UXer? How about visual design, art direction? Development?
!
• Who has been practicing this for
Less than 5 years
Between 5 - 10 years
More than 10 years

!

• Ask a representative from each what they are hoping to learn from this Workshop?

!

Great, so we have a long day ahead of us, and in order to ensure that we don’t pull any workshoping muscles we need to

!

* Jogging at the resevoir #1 by Ed Yourdon on Flickr
Interaction 14

@lishubert

February 5, 2014

Warm Up

!
The rules of the warm up are
1. Be Objective in Your Behavior Toward Others
2. Ensure Everyone Is Equal
3. Ask Everyone to Participate

!

What I want you to do for the next 5 minutes is go around your tables, have everyone do a short introduction including:
- name
- where you work
- what you do there and How does this...

Interaction 14

@lishubert

February 5, 2014
* Funny - A Hoot by Doug88888 on Flickr

picture represent your current job.

!
<10 minutes of discussion at tables>
!
**10 minutes to ask each table what the best comment was...
!
Give yourselves a hand... that was awesome!
!

Now that we are all warmed up, and we know who everyone is and what our goals are... let’s start by doing a clear deﬁnition of interaction design and the
dyer situation that the profession is currently in

Interaction 14

@lishubert

February 5, 2014

To me interaction design is about designing an entire interaction, not just the interface of that interaction, but the entire touch point. The concept of that
touchpoint and turning that concept into something that can get input from the user and produce output from the system.

!
So when we look at Interaction Design in relation to User Experience we see something like this...
!

* The UX Umbrella by Dan Willis on Slideshare
Interaction 14

@lishubert

February 5, 2014
* who are YOU? by Ian Sane on Flickr

User Experience is really this overarching umbrella which houses all of these other disciplines. Interaction Design is a part of all of this... and to me it is a
subsection that looks at and designs for one to many moments of contact between a user and a company’s system.

!
Interaction designers work in companies that look like these...
!

In House

Interaction 14

Internal - corps, non-proﬁt, big or small
Agencies -
Startups -

!

So...

@lishubert

February 5, 2014

•
•

Assigned to a project to update the search

•

Need someone to come in and make our site better

Tasked with better communicating company purpose on the
homepage

Interaction mark in Esbjerg by alexanderdrachmann on Flickr
* Question 14

@lishubert

February 5, 2014

how does IxD work get done in the companies? Who can tell me the overall environment for interaction design work in the “real world”?

!

Projects. We are part of project teams, and on those teams are many other people. And our goal on most of these teams is to create new, update or
enhance the company’s or clients digital products.

!

The interaction designer’s role on this team is the

Interaction 14

@lishubert

February 5, 2014

Solution person. It is our job to design the solution. Nobody else ever wants to admit this, but ultimately this is our responsibility.

!

And to come up with the solution we would ideally follow a process like this...

The Process
• Discovery
• Definition
• Design (the solution)
• Develop
• Deploy
Interaction 14

@lishubert

February 5, 2014

This is the process that we have used for all time in developing websites, apps and other software. Whether you are doing waterfall or agile you are still
doing this.

!

Discovery - Understand Users, Understand Content, Understand Context
Deﬁnition - Plan out and prioritize features
Design (the solution) - Detailed Interface Design
Develop - Code and Test
Deploy

!

Our work as Interaction Designers usually is siloed off into

The Process
• Discovery
• Definition
• Design (the solution)
• Develop
• Deploy
Interaction 14

@lishubert

February 5, 2014

The Design Phase. Ideally, IxD as the solution creator would be involved in all of these steps, and the fact that we’re not is a big problem.

!
For this workshop we are going to work in the most often seen (not best, but real) scenario of IxD being conﬁned to the design phase.
!

Now that we know what types of companies, environments and process in which IxD works, let’s talk about what type of projects ixd’s work on. A
company...

!

1. needs something done so they put together a project team, and you get assigned to this project team.
2. The team might be tasked with doing something like this...

!
!
!
!

Example Assignments
• Update search
• Better communicating company purpose on
the homepage

• Make the site better
Interaction 14

@lishubert

February 5, 2014

What usually happens is we get the work assignment. and we might be pulled into a project kick off meeting or get emails about it, we basically start
getting a ton of information thrown at us, and then we’re expected to come up with the solution.

!
In order to showcase this, we’re going to do a little exercise.
!

Our Problem for the Day
Make search better for Company Workshop’s
sports apparel and equipment e-commerce
site.
!

Interaction 14

@lishubert

February 5, 2014

You are all interaction designers on a project team tasked to update the search for Company Workshop. All we know from Company workshop is that they
have noticed a dropoff in conversions associated with search, and that they need to make search better in order to increase those conversions.

!

And here...

Interaction 14

@lishubert

February 5, 2014

Is what their current search looks like. You only have 2 weeks to ﬁt in the wireframe section of the project, I want you to go ahead and in the next 20
minutes come up with a solution for this.

!
At the end of 20 minutes you should have one new solution (knowing this will be half baked) to show.
!
(20 minutes)
!

Ok take your solutions and put them in the middle of the table and i will come pick them up during our break. But let me ask you this, how many people’s
solutions were sketches of an interface?

!

What is funny about what you all came up with is that each and every one did an interface. And the biggest problem that we face as interaction designers,
and the reason why we aren’t included in all these other steps is that we are seen as, and have come to be the owners of not the solution, but the interface.

!

And here’s the thing...

The interface is
NOT the solution

Interaction 14

@lishubert

February 5, 2014

So if the interface isn’t the solution than what is? It is a model of the solution in a way that users process through whatever medium they are using (cpu,
phone, tablet)

!

If the interface isn’t the solution then what do we do??

"Wireframes and sketches of interfaces are
akin to blue prints, and an Architect does way
more than just draw the blue prints."
~ Philosophical Thinker turned UX/IxD

Interaction 14

@lishubert

February 5, 2014

As framed by our philosophical thinker we do way more than just the interface. What is it that an Architect does besides just the blue prints?

!
<Get down to synthesizing and strategizing the solution>
!

Our current state then is that we are in the Designing the solution phase, and often times we are pushed to jump directly into the interface, So our current
state is missing one big and important thing...

We often do not take the time to
synthesize and strategize the solution
before we do the interface.

Interaction 14

@lishubert

February 5, 2014

We go from getting the project, to doing the interface. Without conceptualizing the solution! And conceptualizing the solution is what IxD is really all
about!

!

Skipping this step is what is causing our industry a great deal of issues. the main thing that happens when we jump to the interface is we leave…

Problems

Interaction 14

@lishubert

February 5, 2014

things out including…
1. Don’t get consensus on the problem we are trying to solve
2. Don’t know who speciﬁcally we are solving this problem for
3. Don’t know what information, data, and content needs to be included in our interface
4. Don’t know the user and business priority of that content, data and information needed to solve the problem

Therefore we don’t actually
solve the problem!
We just draw a nice picture.

Interaction 14

@lishubert

February 5, 2014

That we don’t actually solve the problem. And we don’t have footing, we have no rationale we have nothing. And this causes..

Revisions

Interaction 14

@lishubert

February 5, 2014

Without sitting down to synthesize and strategize the solution we end up with the cycle of revisions because we aren’t really basing our solution off of
what the problem is.

No Respect for IxD

Revisions

Interaction 14

@lishubert

We get less respect because we look like we have no idea what we’re doing

February 5, 2014

No Respect for IxD

Revisions

You

Interaction 14

@lishubert

February 5, 2014

and we all go crazy!
How many of you are sick and tired of IxD being see as the interface and not the solution??
Who here wants to be seen as the solution creator instead of the interface creator?? Well then… stop drawing the interface ﬁrst!
But maybe, just maybe if we all had a process in place that we could use to synthesize and strategize the solution before doing the interface we might be a
lot better off. So our goal today is

Learn a process for
synthesizing and strategizing
the solution without the
interface

Interaction 14

Our goal today...

!

And the outcomes of us doing that are

@lishubert

February 5, 2014

Revisions

Interaction 14

The outcome of implementing this process.
1.

Decrease the cycle of revisions

@lishubert

February 5, 2014

Revisions

Interaction 14

Respect for IxD

@lishubert

2.

Increase respect for IxD as a problem solver (not just the one that draws pictures)

February 5, 2014

Revisions

Respect for IxD

You

Interaction 14

@lishubert

February 5, 2014

3.

More responsibility and better projects

So let’s hop to it. Let’s learn a process for synthesizing and strategizing before the interface.

!
Keep in mind this process will be given to you to take home with you.
!

Also this is formal... you are not likely to be able to formally to this in your job, but here are the questions we are going to learn how to answer and the
things to do that we need to learn how to do before we go to the interface to avoid the steady decline of our profession.

• Who am I working with?

Interaction 14

@lishubert

February 5, 2014

• Who can help me solve the problem?

Interaction 14

@lishubert

February 5, 2014

• What is the problem?

Interaction 14

@lishubert

February 5, 2014

• Who am I solving it for?

Interaction 14

@lishubert

February 5, 2014

• What is the information/content that I’m
working with?

Interaction 14

@lishubert

February 5, 2014

working with?

• Modeling the solution (sans interface)

Interaction 14

@lishubert

February 5, 2014

working with?

• Getting the team onboard
Interaction 14

@lishubert

February 5, 2014

working with?

• What is the information priority?
Interaction 14

@lishubert

February 5, 2014

Information priority…

!

You see that is really the key to being a great interaction designer. Being able to facilitate the other teammates on the project through a process of
agreeing on what information or content needs to be included in the solution and eventually the interface, and also agreeing on the importance of each
piece of content or information.

!
You NEED this to happen before you do the interface…. or else, what does your interface really represent… if not the information priorities of a solution?
!
That is what we are going to dig into in the next three parts of our workshop, but ﬁrst…
!
Let’s take a

Break

Synthesize and re-energize!

Interaction 14

15 minutes

@lishubert

February 5, 2014

“Welcome Back! Let’s get caught up.”

Quick Recap

* Interaction 14
Sea Otter by Mike Baird on Flickr

@lishubert

February 5, 2014

Quick Check In
- how is it going thus far?
So far we’ve talked a bit about interaction design and...
How interaction designers are responsible for the solutions on projects, and how interfaces are not solutions. We see there is a lack of process around
strategizing and synthesizing an actual solution
The problems with not having a process
Overview of the process
Outcomes from that process
That process for synthesizing and strategizing solutions before we do the interface looks like this.

working with?

Interaction 14

@lishubert

February 5, 2014

Now that we’ve seen what we can do without our process, let’s see how our solutions change with this process.

!

So in Part 2 we are going to look at the ﬁrst part of the process....

working with?

Interaction 14

@lishubert

February 5, 2014

and how it’s going to work is I’ll introduce these topics for about 20 minutes then we’ll do an exercise to use this new knowledge in our groups for about
35 minutes then we’ll take time to present to the other groups and critique.

!

So let’s jump in...

Who am I working with?
Understanding my team

•

What is it: Gaining understanding of all the skill sets on your team,
how they can help you and and who on the project you need to
deal with.

•

When to use it: Before/during problem framing, ﬁguring out who’s
in the know.

•

Why to use it: To ensure you know your responsibilities and those
of others in creating the solution. To ensure there are no gaps, and
to be sure you are including the right people in your reviews and
meetings so progress can be made.

Interaction 14

@lishubert

February 5, 2014

Who am I working with? - Understanding my team
What is it: Gaining understanding of all the skill sets on your team, how they can help you and and who/what personalities you need to deal with.
When to use it: Before/during problem framing, ﬁguring out who’s in the know.
Why to use it: To ensure you know your responsibilities and those of others in creating the solution. To ensure there are no gaps, and to be sure you are
including the right people in your reviews and meetings so progress can be made.
Remember we want to be seen as the solution people…. so let’s OWN the solution. We need to make sure we have all the right skills in place to make our
solution successful. THAT should always be your driving force as an interaction designer.

How to do it:
1. Project team structure

Interaction 14

@lishubert

February 5, 2014

Step 1 is to learn the base knowledge of how project teams are structured in your company, and the company of your client.

!

1. Who here knows this? Can I get some examples of a basic project team structure? (have people give examples)
a. here is are a few examples
1. One place I worked our project team was (tech lead - who was in charge of the devs and QA, Business lead - who ran requirements gathering
sessions, Design lead - that was me. I was in charge or IA, Wireframes and Visual Design schedules and deliverables, Project manager - in charge of
schedule, Program Manager, Sponsor)
2. Another company I worked at had (account manager, project manager, IA, Creative/ACD, Planner, Copywriter, Tech lead)
b. You gain this understanding by showing up to the kick off, listening, looking, and answering questions.

QA /
Testing

Back End
Dev

Visual
Designer

Technology
Lead

Front End
Dev

Project
Manager

Product
manager

Copywriter

Business Lead

Design Lead

Customer
Service

Interaction
Designer
Interaction 14

This is an example project team structure.

@lishubert

February 5, 2014

How to do it:
2. Be an observer

Interaction 14

@lishubert

February 5, 2014

2. We need to start to use any user research and/or empathetic skills outside of just design work. You can use those same observation skills to understand
our environments. When you show up to the kick off observe who is in the room. Are there devs, business people?

!

- observe if you have everything you need to create the solution, and if you don’t OR if you don’t know … ask questions

How to do it:
2. Be an observer
3. Know and use resources

Interaction 14

@lishubert

February 5, 2014

3. Know who you resources are, and use them to ﬁll any gaps you have. The most important thing to note is who can you talk to. This is a nuanced skill,
but an important one. Figure out who can answer your questions. And then... use those people to ask your questions and get your answers!
Types of questions you may want to ask to make sure your solution can be successful are:
Is this everyone who I’ll need to know to complete the project successfully?
Who do I go to with questions about <design, schedule, requirements>?

How to do it:
2. Be an observer
3. Know and use resources
4. Rinse and Repeat

Interaction 14

@lishubert

4. Do this not only for each and every project, but for your job as well! Who is on the design team, who is responsible for what.

February 5, 2014

Interaction 14

@lishubert

February 5, 2014

Who can help me solve the problem - Knowing who’s in the know
What is it: Taking the time to understand the business and who has a stake in the solution.
When to do it: Before/During problem framing.
Why do it: Gain an understanding of who has the power to do what, and who has a stake in which parts of the solution.
This is somewhat similar to knowing who is on your project team. However, the people in the know will be both a part of your team, and sometimes not.

Who can help me solve
the problem?

Knowing who’s in the know
How to do it:
1. Admit that you are a business person

Interaction 14

When i say this, I’m talking about a switch in thinking...

@lishubert

February 5, 2014

Business vs. User

Business vs. User

Interaction 14

@lishubert

February 5, 2014

Admitting you are a business person is hard. It means that we all have to buckle down and be real with ourselves. The fact is that we work for someone
else, and even if we don’t the fact is we work to stay alive. To make a living, to feed our families and ourselves. Our company is a business that needs to
stay in business and (hopefully) makes a product that is helpful.

When I say admit you are a business person I mean admit that your design work is probably not going to save the world AND that it needs to help the
business stay in business so YOU have to help the business people to do this. It’s a frame of mind switch from hating the business to realizing that helping
the business is not only your job, but is also not selling out or going against our users. It is enabling us to do more for them.

the problem?

How to do it:
2. Know who pays

Interaction 14

@lishubert

February 5, 2014

2. Understand who has the $$. Usually this is a product manager, maybe not if you are in an agency. Figure out Who is funding the project so that you can
understand who has more say than others, but also who is having the real problem.

!

You can’t have a successful solution without solving the actual problem… the person who pays has the problem, or they wouldn’t be paying to have it
solved.

the problem?

How to do it:
2. Know who pays
3. Be an observer

Interaction 14

@lishubert

February 5, 2014

3 is pretty much the same. The only differences are that our context is different. We aren’t just looking at our project team, but we are looking for anyone
that has a stake in what we are doing. Program Manager, Product managers, Customer Service Manager - basically the people that everyone else is trying
to make happy. We are also probably going to use more than we are going to get to know our resources here.

the problem?

How to do it:
2. Know who pays
3. Be an observer
4. Know and use your resources

Interaction 14

!

@lishubert

February 5, 2014

What is the Problem?

Interaction 14

@lishubert

February 5, 2014

What is the Problem - Framing the problem
What is it: The process of truly understanding the issue to be solved (and the business need behind it).
When to use it: At the beginning of any project or design phase before we start designing.
Why to use it: So we can deﬁne the users to focus on, the business need to focus on, the technology involved, the data and content involved and the
priority of that data and content. Ultimate goal is to get team buy in on the problem so we can focus our solution.
* This is really important - so many of the issues we see with people “not liking” our designs is due to us not all agreeing on the real problem

Framing the problem
How to do it:
1. Listen, read, listen

Interaction 14

@lishubert

February 5, 2014

1. Listen to the people around you talking and really hear them. Take absolutely nothing literally. This is a skill of awareness and concentration. If someone
says “I like the search results for site abc.com because users are able to filter on all these different things.” then you can assume there is probably a
problem finding specific items. General search may work just fine... but this is a cue that there is a different problem.

Framing the problem
How to do it:
2. Know then use those in the know

Interaction 14

@lishubert

February 5, 2014

2. We don’t just ﬁgure out who’s in the know in order to make sure we are serving the correct stakeholders, we do that so we can use those people to
understand the real problem we are dealing with.

!
!

Framing the problem
How to do it:
3. Ask the right questions

Interaction 14

@lishubert

February 5, 2014

You want to ask the right questions, and you want to ask them of the people in the know. Some examples of the questions to ask.

!

How are we deﬁning success?
Are there numbers we are trying to reach?
Will this solution have to lead to another?
Are there other projects happening or planned that could inﬂuence this solution that I will have to take into account?
What is the worst thing that can happen during this project? What does failure look like?
Who out there has solved this problem and what makes their solution awesome?

Framing the problem
How to do it:
4. Synthesize what you’ve heard

Interaction 14

@lishubert

February 5, 2014

4. This is your time to take a step back and summarize what you’ve heard. Some of us will sketch it out, some of us might write it down, but this is the
time where you take a stab at summarizing the real problem

Business
point of
view

Tech
point of
view

Not getting enough Server hits = high
costs
conversions

User
point of
view

Can’t find what I
need so don’t buy.
Site takes too long
to load.

Interaction 14

@lishubert

Here is an example of a model you might show to your team to showcase the problem.

February 5, 2014

Interaction 14

@lishubert

February 5, 2014

Framing the problem

* Does It Have Legs? by AbbyTheIA on Slideshare
Interaction 14

@lishubert

February 5, 2014

Framing the problem
How to do it:
4. Synthesize what you’ve heard
5. Confirm with the team
Interaction 14

@lishubert

5. And then you bring it back to your team and conﬁrm it with those in the know.

February 5, 2014

Exercise
Problem for the day: Make search better for
Company Workshop’s sports apparel and equipment
e-commerce site
!

Part II Exercise:
1. Complete worksheet
2. Model the problem
Interaction 14

@lishubert

February 5, 2014

So our problem for the day is that we are all interaction designers on a project team tasked to update the search for Company Workshop. Our goals for this
exercise are to figure out who’s on our team, who’s in the know, and what is the problem.

!

Some things to note about Company workshop:
1. Their site is well known so this is not a marketing problem.

!

You have in front of you character cards which represent the people on your team for this project. These also represent the kickoff meeting for the project,
and you are reading through who they are, what they are responsible for, and goals for the kick off meeting.

!
Up here is the chart of who’s at the meeting. I will keep it up here for you to review throughout.
!

Exercise
1. The way we are going to do that is read through our character cards which house the answers to the questions on the worksheet and provide us with the
real problem. Read the character cards and any other materials, quietly no discussion - 10 minutes

!

For the next 25 minutes
2. Now everyone at the table is playing the role of the interaction designer. I want you to work together to fill out the worksheet. All the answers to the
questions in the worksheet are in the character cards!
3. I also want you to create problem models to show the rest of us. The goal of the problem models are to visualize the problem to the team so that the
great project team and sponsors can confirm that “yes this is the problem we are trying to solve”

!
You will then present you answers and the problem models to the group.
!

Group Presentation
and Discussion

Interaction 14

Answer the questions all together. then present problem models.

!
- Review answers to the questions
!

What is the problem at company workshop??

@lishubert

February 5, 2014

Lunch

Interaction 14

@lishubert

February 5, 2014

“Hi Again!”

* Interaction 14 Beverly & Pack on Flickr
Brown Bear by

Lunch

@lishubert

February 5, 2014

How was lunch?

!
How is everyone doing so far? Are we on path with what you expect to learn today?
!
Ready for the second half of our day?
!

Before lunch we went through Part II of our workshop where we worked to ﬁgure out:
- who am I working with?
- Who can help me solve the problem?
- What is the problem?

!

And we did this in our quest to learn a process to strategize and synthesize the solution. This process here.

working with?

Interaction 14

@lishubert

February 5, 2014

We also took the time in our exercise of redesigning search for Company Workshop and ﬁgured out who is on the team and modeled the real problem. We
are going to build on all of this in Part III of the workshop by

working with?

Interaction 14

@lishubert

February 5, 2014

Figuring out for whom we are solving the problem and then understanding what the information/content we are working with.

* As she walked... by pfv on Flickr
Interaction 14

@lishubert

February 5, 2014

What is it: the process of focusing our attention on the users affected by our solution.
When to use it: After problem framing, while gathering content/information to use, when getting ready to prioritize.
Why to use it: To focus the solution on those that need it most.
Thus, now that we know our team, and our problem... we have to ﬁgure out our audience. In large scale strategy efforts or in big projects, We do this by
going through and doing research and determining who are set of user types are and modeling them into things like personas. Does anybody here
understand what personas are?

!
Personas are basically models of user behaviors, but rarely are we receiving these or allowed the create these (not that we shouldn’t).
!

But how can you go about getting this type of information for yourself if you can’t do user research and don’t have time to create personas? Let’s walk
through ﬁguring out just that.

Who am I solving it for?
Understanding User Goals & Tasks
How to do it:
1. Determine related user types

Interaction 14

@lishubert

February 5, 2014

Believe it or not you can do this without conducting long, drawn out discovery phase. Remember how you were supposed to know and use your
resources… well that wasn’t just for fun. Here is a place where you can use your resources, and those in the know, to extract out who they think the user
types are.

!
** give example of iFreedom email to Loan officers and contactors.
!

For this workshop you have already gone out and talked to those in the know, and to those people on your time, and have determine 3 user types:
Hardcore Fan, Mom Gifter and the Coach.

!

After you determine the different user types, you want to…

How to do it:
2. Determine main user tasks & goals

Interaction 14

@lishubert

determine what their main tasks are. What are they trying to do with a product like ours?

!
For our hardcore fan, we can see the tasks are…
!
<Bring up user type and show.> - let them read through hardcore fan..
!
Notice how these are phrased!
!

February 5, 2014

How to do it:
2. Determine main user tasks & goals
3. Finalize specific user tasks

Interaction 14

@lishubert

February 5, 2014

We now want to determine if all of these tasks relate to search. What do you guys think? Are there any potential tasks missing?

!
I keep all this information in a spreadsheet for clarity, so that is what we’re going to be working in.
!
<user spreadsheet example of the hardcore fan whittle down to specific tasks>
!
<brainstorm additional tasks>
!

Now where our expertise really comes in, and the way we can find a solution without the interface, is understand and prioritizing the information these
users will need in order to complete their goals successfully.

!

For example, it’s pretty clear that they will have a filter on this search, but what goes in it? So in order to figure out these details, we move into figuring out
our content.

What is information/content
that I’m working with?

?
Interaction 14

@lishubert

February 5, 2014

What is it: The process of determining what type of content or information needs to be manipulated to solve the deﬁned problem and meet user goals.
When to use it: After problem framing and understanding user goals and tasks, before modeling.
Why to use it: To get a clear idea of what to include in the solution (and eventually the interface) in order to meet user and business needs (aka solve the
problem).

What is the information/
content that I’m working with?
Understanding my content
How to do it:
1. Review user tasks

Interaction 14

Review and become familiar with your users tasks.

@lishubert

February 5, 2014

How to do it:
2. Tasks -> information requirements

Interaction 14

@lishubert

February 5, 2014

Turn tasks into information requirements.

!
Tasks are really what is the user trying to do
!
Information requirements are about deﬁning what types of information/data/interactions does the user need to complete these tasks?
!
What might these information needs look like for the hardcore fan? <bring up spreadsheet>
!

So remember it’s not just about understanding what information is included before you do the interface, but also the priority and importance of that info
from a user and business pov. so next…

!

How to do it:
2. Tasks -> information requirements
3. Prioritize Information requirements

Interaction 14

@lishubert

February 5, 2014

you’ll want to prioritize this information from both the user’s standpoint and the businesses standpoint. The user stuff you’ll know. The business stuff you
will be “guessing” at, but since you have been listening and talking to your business team these are informed guesses.

!
You have the business objectives in your user type documents which should help you to prioritize at least a ﬁrst cut from that pov.
!
If you are unsure then we’ll just make a few versions to get feedback.
!

Exercise
e-commerce site
!

Part III Exercise:
1. Par down user tasks into project tasks
2. Turn tasks into information requirements
3. Prioritize information requirements
Interaction 14

@lishubert

February 5, 2014

What we’re going to do is take the remaining two user types and ﬁll out the tasks list for each. Then we’re going to turn those lists into information
requirements. This is how we’re going to do it.

!

1. I’m going to give you 10 minutes to go through and ﬁnalize the search tasks for the other two user types. When you are done call me over to review.
once you’re done with that, I’ll explain step 2 to you.

!
Explain exactly what to have when you’re done
!

Stress that they should come up with more tasks than what the user types have.

Group Presentation
and Discussion

Interaction 14

@lishubert

February 5, 2014

Break up into two large groups of four teams. Review and reﬁne lists, critique etc. The goal is to verify and add any tasks, we want a comprehensive list so
that each team and model the right solution. So we’ll have two lists and we’ll review those two lists as a big group.

!

Get together at the end and talk through with both teams

Break

Interaction 14

@lishubert

February 5, 2014

“Howdy!”

* Hi there! by joyrex on Flickr
Interaction 14

@lishubert

February 5, 2014

Welcome back! So this is our ﬁnal moment together... Part IV of the workshop. Let’s do another quick recap

• What is information/content that I’m working
with?

Interaction 14

@lishubert

February 5, 2014

In our last session we looked at

!
Who am I solving for
!
What is the information/content that I’m working with? -
!

So we’ve been synthesizing and strategizing the solution for our project to make search better for company workshop. And we now have information and
content, users, problem.... we can start the interface right? Wrong...

with?

Interaction 14

@lishubert

February 5, 2014

In Part IV of the workshop we are going to focus on. This is going to allow us to present the solution in such a way that isn’t the interface but that
represents user and business priorities.

!

So when we do draw the interface we’ve already agreed on what information is necessary to solve the problem.

* Rubik's Cube Solution by kirtaph on Flickr
Interaction 14

@lishubert

February 5, 2014

What is it: Process of sketching the information relationships in order to get team feedback on priority.
When to use it: After understanding who you are solving for and what information/content you are working with.
Why to use it: To have a visual model that will showcase content and information priorities in order to get the greater team on the same page.

Modeling the solution
(sans interface)

Sketching the solution not the interface
How to do it:
1. Review information needs list and user tasks

Interaction 14

@lishubert

February 5, 2014

Bring up information list

!

Now this is where your priorities come into play. You have talked to the business/client, you know which of their user’s is the most important. Thus those
user tasks in regards to search should probably have a higher priority in your solution. When we look at your sheets of information requirements, those for
the hardcore fan are probably the most important right?

(sans interface)

How to do it:
2. Create models
Hint: this is where you may want to look and
model the competition.

Interaction 14

@lishubert

Using the priorities information you came up with, you want to model the solution.

February 5, 2014

!
We also will want to go look at the competition (ﬁnishline.com) that our business partners mentioned to get an idea of how their concepts are modeled.
!
Let’s take one of our top user’s tasks and see what we can do with it here.
!
So let’s go to an example that I did for this purpose.
!
!
!

How to do it:
2. Create models
1. Hint: this is where you may want to look
and model the competition.

Interaction 14

@lishubert

February 5, 2014

Modeling the

Interaction 14

@lishubert

February 5, 2014

Modeling the
How to do it:
2. Create models
1. Hint: this is where you may want to look
and model the competition.

Interaction 14

@lishubert

February 5, 2014

* Stuck in the Details? Mind Map User Tasks by Evgenia Grinblo on UX Booth

Interaction 14

@lishubert

Evgenia Griblo wrote a great article on UX Booth entitled Stuck in the Details? Mind Map User Tasks.

!
So what are some characteristics of good models.
!

February 5, 2014

(sans interface)

Characteristics of a good model

1. Clearly explains solution without tying you to an
interface
2. Ties solution back to user tasks & business
needs
3. Showcases Information relationship and
priorities
4. Progresses conversation
Interaction 14

@lishubert

February 5, 2014

First a good model should be clear. It should also explains the solution without tying you to an interface. It explains the concept and allows you to be
ﬂexible with the interface of the concept.

!

Second. The model should use what you’ve found in user tasks and business needs. There should be a reason behind everything in the model and it should
tell the story of how user needs and business needs intersect.

!

Third. The model showcases the relationships and priorities of the information that will be needed for the user to complete their tasks and for the business
to have their goals met.

!

But perhaps most importantly, the model progresses the conversation to a point where we can talk about if the model solves the problem.

Getting the team
Sell it baby!

•

What is it: Using your knowledge to make the case for your
expertise. (aka: selling your idea to the team)

•
•

When to use it: When you have modeled the solution.
Why to use it: To bring the user voice to the conversation/solution..

Interaction 14

@lishubert

What is it: Using your knowledge to make the case for your expertise. (aka: selling your idea to the team)
When to use it: When you have modeled the solution.
Why to use it: To bring the user voice to the conversation/solution..

February 5, 2014

Getting the team
onboard
Sell it baby!
How to do it:
1. Do the research, know your rationale

Interaction 14

@lishubert

February 5, 2014

This is important... this is really important. Why did you design these models the way you did? We’ve looked at users, we know what the need. We’ve
interviewed the business, we know what they need? And we know interaction design and usability principles... that is our expertise. With those forces
combined you should be fueled up and prepared to go.

Getting the team
onboard
Sell it baby!
How to do it:
2. Prepare your argument

Interaction 14

@lishubert

February 5, 2014

And this is important. Take the time to prepare. Let’s look at our example model. Why is the filter the way it is? Anyone?

!
Know every single element on the page and why you put it there.
!

But keep in mind... don’t argue about it. Provide expertise and guidance. If a teammate says they want to remove an important feature say the filter say “ok
that’s fine, but that will mean not filling any of these requirements from the user. Is that ok with the business?” and finally...

Getting the team
onboard
Sell it baby!
How to do it:
2. Prepare your argument
3. Sell, sell, sell!

Interaction 14

@lishubert

February 5, 2014

Sell it baby! What does this mean? It means have a passion for your solution. it is your thing! So now that you are ready, what is our ﬁnal step?

What is the information
priority?

Interaction 14

@lishubert

This is about Understanding priorities
What is it: Getting team consensus on priorities, using your models and knowledge.
When to use it: After you know who’s in the know, after modeling, before interface design
Why to use it: To get team consensus on the solution.

February 5, 2014

priority?

Understanding priorities
How to do it:
1. Set up the meeting

Interaction 14

@lishubert

February 5, 2014

Remember how we marked off who was in the know, who was on the team and why... well this is why. They need to be here. And once you get them all
together.

priority?

How to do it:
2. Sell it Baby!

Interaction 14

@lishubert

February 5, 2014

Review the different models you’ve come up with and see which best matches their business and tech needs.

!

Sell is Baby! Sell this jam you are the expert. But don’t take criticism the wrong way, use it to make this better.

priority?

How to do it:
2. Sell it Baby!
3. Do not leave the room until we agree what
should be in the interface and what is most
important
Interaction 14

@lishubert

February 5, 2014

You can get this by being persistent but not pushing. You are looking to hear yes, move ahead.

!

Once you have sign off on these things, then wireframe, sketch, photoshop... whatever. But doing so before hand will only make this a painful and
pointless solution. now let’s practice.

Exercise
e-commerce site
!

Part IV Exercise:
1. Solution models
2. Sell, sell, sell

Interaction 14

Using your information requirements list, model the solutions you have.

!
1. Create models of your solutions - 15 minutes.
!

2. Practice getting sign off

- break off into two groups and each team sells and gets sign off

- have a few teams sell and get sign off

!
** SHOW EXAMPLE MODEL ON SCREEN
!

Explain exactly what to have when you’re done

@lishubert

February 5, 2014

IXD = Responsible
1. Information models
2. Getting priorities

Interaction 14

@lishubert

February 5, 2014

So let’s do a quick recap to bring it all to a close. We talked about interaction design today. How IxDs can be in many different companies but we are
ultimately always responsible for the solution.

The interface is NOT
the solution

Interaction 14

@lishubert

February 5, 2014

The solution, is not the interface however. We should not just be creating wireframes, there is so much more to our role. Speciﬁcally we need to be like the
architect and synthesize and strategize the solution before modeling it in an interface.

!

If we show interfaces before we show solutions we’ll always be the interface people and not the solution people.

with?

Interaction 14

@lishubert

February 5, 2014

We need to go through the process of getting these questions right. Examples of the type of outputs you’ll have are
Problem models
Information requirements
Solution models

!
But if you walk away from today having learned anything… I hope it’s this.
!
As interaction designers we must…

Lead... don’t follow

Interaction 14

@lishubert

February 5, 2014

By leading your team through the solution process and getting the right solutions for the right problem you become the advocate for IxD… that’s how we
stop being wireframe monkeys, and solution creators.

Evaluation

Interaction 14

@lishubert

February 5, 2014

Interaction Design Beyond the Interface Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Interaction Design Beyond the Interface Workshop

Similar to Interaction Design Beyond the Interface Workshop (20)

Recently uploaded

Recently uploaded (20)

Interaction Design Beyond the Interface Workshop

Editor's Notes