Interaction Design 101 at Wayfair
How to turn user flows into quick sketches, quick sketches into wireframes, and wireframes into annotations.
Every two weeks at Wayfair, all 42 Product Designers and UX Writers take part in training sessions. These were planned as part of Wayfair’s decision to combine UX and UI design positions into a singular role called “Product Designer.” This article outlines the subjects that were covered in the training session called “Interaction Design: Sketching + Wireframes + Annotations.” For the most part, the content serves as a broad introduction. Future training sessions will dive deeper into the nuances of Interaction Design (IxD) deliverables.
What you’re about to read/see
Wayfair is filled with many skilled designers, each of whom brings a diverse set of skills to the table. However, recent improvements to our product design core skills rubric have put a renewed focus on five specific skill categories: User Research, Interaction Design, Information Architecture, Visual Design, and Prototyping.
This article focuses specifically on Interaction Design and is meant to be a high level introduction to the concept. I’ll cover the following topics:
- Interaction Design: Defined
- Common Interaction Design Deliverables and Documentation
- The Basic Interaction Design Process
- When to use Interaction Design Deliverables
- Why you should trust me
I’ve been a UX product designer for going on 10 years now. In my career, I’ve produced what I would call a shocking amount of wireframes. I was going to say that I’ve created “countless wireframes.” However, I was able to easily count the number of wireframes I’ve produced. I used Adobe Acrobat to quickly combine all the individual wireframe pages I’ve produced in my career into a single massive document.
Turns out, I’ve created at least 778 wireframes. This does not include those I’ve created in my current position at Wayfair, or in my first position with Avid Technology. If I added in those, I assume it would be northward of 1,000. But who’s counting?
Interaction Design: Defined
Interaction Design has been defined by people with much larger brains than mine. It’s a waste of everyone’s time for me to craft my own specialized flavor of this definition. Instead, here are some great desciptions from some very smart people:
“Interaction design is grounded in an understanding of real users (goals, tasks, experiences, needs, and wants) and balances these needs with business goals and technological capabilities.”
- Luke Wroblewski — Founded: Polar (Google acquired), Bagcheck (Twitter acquired). Wrote: Mobile First, Web Form Design, Site Seeing. Worked: Yahoo, eBay, NCSA.
“Often abbreviated as IxD, is the practice of designing interactive digital products, environments, systems, and services. While interaction design has an interest in form, its main area of focus rests on behavior.”
- Alan Cooper — Author, The Essentials of Interaction Design, inventor of design personas
To immediately contradict myself, here’s a low-brow tl;dr definition, from yours truly:
“Figuring out what the hell the user wants, and giving it to them. Uh, also, like, uh, deciding what should happen when the user clicks a thing, uh, also based off of whatever the hell they want. Does that makes sense?” @JesseKaddy — Senior Product Design Manager at Wayfair. Breakfast Cereal Enthusiast.
Common IxD Deliverables and Documentation
At Wayfair, Interaction Design (IxD) is one of the five core skills required of Product Designers. However, outside of Wayfair, IxD has a broader definition. Deliverables typically associated with it can fall into the other core skill categories.
To stay true to Wayfair’s rubric, this training will focus specifically on Quick Sketches, Wireframes, and Annotations.
The Basic Interaction Design Process
By the time you’ve gotten to the interaction design phase, it’s assumed you’ve carefully considered the customer problem, technical limitations, business requirements, and have completed your competitive and user research. For more info on crafting design requirements, pick up Foundations for Designing Online User Experiences from @SmashingUXD.
Be sure to review and iterate with team members during each of the following steps.
Step 1: User Flows
Firstly, we need to know what pages to wireframe. One way to do this is to draw out a user flow, task flow, flow chart, site map, site flow, etc. These are all methods used to determine the various paths the user can take. This will be covered in more depth during another training, but it is vitally important.
User Flow examples:
Here are some user flow related documents I’ve produced in the past:
Not producing or understanding the user flow can result in important pieces of the experience being un-designed. Or, worse yet, designed by the developer.
Step 2: Quick Sketches
Quickly ideating on the design of an interface is a crucial part of the IxD process. Skipping this step, and going straight to draft wireframes, can result in missed opportunity. An interface that can take you 10 minutes to wireframe in Omnigraffle or the Sketch App, could have been drawn on a whiteboard in less than 30 seconds.
At this stage in the process, speed is more important than quality. In my experience, I need to produce roughly five drafts of each wireframe layout before I land on a direction that most accurately meets the requirements of the project. In Omnigraffle, 5 wireframes @ 10 minutes each = 50 minutes. On a whiteboard, 5 sketches @ 30 seconds each = 2.5 minutes.
If you’d like a great tutorial on how to most effectively sketch during brainstorming sessions, I highly recommend taking a look at Jeremy Kriegel’s “Sketch You Can” presentation. I attended Jeremy’s presentation about this sketching technique during a UXPA Boston event last month. It was fantastic.
If you need a quick tutorial on how to sketch your interfaces, here are the basics:
- Using a notebook or whiteboard, quickly sketch or blockframe the major functional/content areas of the experience.
- Each sketch should take less than 30 seconds to complete.
- Create multiple variations of each page. At least 3 variations is recommended.
- Use this technique during group brainstorming sessions, or even by yourself during pre-wireframe iteration.
Step 3: Wireframes
After iterating with stakeholders on quick sketches or blockframes, take the agreed upon solution and flesh it out in wireframes. Fill in the major content blocks with more granular functional details. If available, work with a UX Copywriter to refine the content.
What is a wireframe?
The primary goal of a wireframe is to serve as a functional communication document between you and your stakeholders, who are more likely to sign off on functionality if they’re not distracted by their subjective opinion of the aesthetics.
Wireframes specifically do not represent layout or aesthetic design. They should be neither beautiful nor ugly. You could say they are the Jesse Kaddy of IxD deliverables.
Thoroughly documented wireframes yield additional respect towards your expertise, which may go unnoticed if stakeholders are blinded by the sheer beauty of the final layouts.
Wireframe Example Overload
Here are 6 of the 778 that I’ve produced:
Wirerame FAQ:
“I don’t know how to use Google. What tools are best for wireframing?”
- :-) Omnigraffle, Sketch, UXPIN, Figma, AdobeXD, Axure
- :-| Adobe InDesign, Balsamiq
- :-( Photoshop, Illustrator
- R.I.P: Adobe Fireworks (Gone but not forgotten)
“But Jesse, why don’t we just do all this in a high resolution mock-up? I’m really good at making those.”
- Many stakeholders find it difficult to focus on functionality when viewing a high-res mock-up. If you entirely remove the subjective aesthetics of the visual design, thinking strictly about users and their goals becomes much easier
“What’s the deal with blockframing? I think I like blockframing better than wireframing.”
- Blockframes represent page layout, but do not indicate page interactivity. They’re valuable, but more of a page layout exercise.
- Blockframing can be useful to represent entire areas of functionality and content. Throwing together a quick blockframe in Sketch, or even more quickly drawing out a blockframe, is a useful precursor to actual wireframing.
- Yes there are shades of gray and you totally could do a blockframe/wireframe hybrid.
Step 4: Annotations
Annotations, AKA Functional Specifications, essentially document anything that is not implicit in the design.
When writing annotations, be sure to number them and call them out in your wireframe. Order them from left-to-right, top-to-bottom on the page. Use decimal points (e.g. 1.1, 1.2, 1.3) to group similar subjects.
Make sure to write your annotations only after all major features and functionality are signed off on by all stakeholders. Not doing so can result in a large amount of re-writing.
See more about annotations below, in the section called “Wireframes with annotations.”
When to use IxD Deliverables
Determining how thorough IxD deliverables should be for a project depends greatly on the relationship you have with your stakeholders. Being in close communication with a group of trusted stakeholders can greatly cut down on the amount of detail that needs to be documented. Functionality that can be explained in a 5-minute conversation, may take hours to document in a deliverable.
When NOT to use IxD Deliverables
On the flip side, not all IxD deliverables are required for each project. Think of them as unique tools in a toolbox. Using the right tool for the job is very important, but not every job requires every tool.
“If all you have is a hammer, everything looks like a nail.” -Abraham Maslow
You may be great at wireframing or visual design, but that deliverable may or may not be useful for any given project. Don’t force a deliverable if it’s unnecessary.
If you remember one thing
Remember to pressure test every design deliverable by asking yourself “What happens next?”
As in, you need to take into account what happens next when the user interacts with literally every element on the page. In most cases, you will also need to design THAT experience too.
Sharing our expertise
As the Wayfair Product Design team has come together, we’ve learned we have an amazing collective wealth of knowledge. We have a smart team with a great process, and we want to share what we’ve learned with the greater design community. Stay tuned to the Wayfair Design Medium feed to hear more from us!
Interested in joining the Wayfair product design team? Browse our open positions here.
