The User Experience Team of One

by Leah Buley

  • Task Flows. How will the experience unfold over time?

  • Wireframes. How will the product look and function in detail?

  NOTE A NOTE ON VISUAL DESIGN

  The methods in this chapter cover high-level design direction, flow, and interaction design. They do not cover visual design which would require its own book to do it justice. If you’re interested in learning more about visual design, check out these resources:

  • The Principles of Beautiful Web Design, by Jason Beaird www.amazon.com/The-Principles-Beautiful-Design-Edition/dp/098057689X/

  • Designing for the Web, by Mark Boulton www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web

  • Non-Designer’s Design Book, by Robin Williams www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321193857/

  METHOD 13

  Design Brief

  At a high level, how would you describe your target design solution? What are the features and personality of the product? Who is it designed for, and what activities is it intended to encourage or enable?

  The design brief documents your working assumptions about the optimal design of the product and puts forth your hypotheses for how best to bring that design to life. Much like a project brief, a design brief is intended to be a clear summary of what direction you plan to move (see Figure 7.2). But the design brief is a little more focused on design specifics. It seeks to articulate the vision for the user experience and connect the dots on how that vision will be brought to life. The design brief is something you create for your team, for any stakeholders who need to approve the design direction, and for yourself. Where the project brief helps you get shared vision on the overall project goals, a design brief helps you get shared vision on the personality and essence of the user experience design.

  FIGURE 7.2

  An example of a design brief.

  Average Time

  2–3 hours to summarize what you’ve learned and put it into a document

  Use When

  • You want to clarify the team’s expectations as far as design is concerned and address early on any gaps or discrepancies in expectations.

  • As the output of the strategy and research work described in the previous chapters.

  Try It Out

  There are two ways to do a design brief. One way is to start from a good template and fill in the details. (You can use a layout like the one shown in Figure 7.2.) The second is to look at what you know or have learned through your discovery and research work and build from the ground up. In either case, there are a few basic questions that you should answer with your design brief:

  1. Focus.

  What is the focus of the design work? What will be created, improved, etc. as an outcome to this work?

  2. Audience.

  Who will the design serve? Who are the primary audiences or personas that you will be designing for? While a design brief is intended to be brief, this is an area where a little more description will enable you to double-check that your assumptions about users—their needs, mindsets, and priorities—match your teammates’ assumptions.

  3. Features and functions.

  What are the core screens, states, or scenarios? What pieces of the experience will be central to the product?

  4. Feeling.

  If you are successful, what will the feeling of the user experience be? This is basically about brand. When people use the product, will it feel fun and playful, dark and serious, or crisp and professional? As you’re talking to stakeholders and team members about how they would like to see the products take shape, you will find that in addition to talking about features and functions, people do slip in words that effectively describe the desired feeling of the product. If you notice that language and write it down, put it in the design brief.

  5. Restrictions and expectations.

  What constraints must be obeyed? What is most critical to the success of the design? What parts must you absolutely get right, and what things can you absolutely not do?

  Tips and Tricks for Design Briefs

  • Work within constraints. One way to think about a design brief is that it clarifies the constraints that the design solution must obey. These constraints could include features and functionality, value or brand propositions that the solution must reinforce or align with, and customers or users whom the solution should support.

  • Use it to validate assumptions. One of the most important purposes of the design brief is to make sure that you know (and maybe can even help determine) what ideas or expectations your non-UX colleagues have for the product. Once you have provided a description of what the end result should look like, you’ve given non-UX-folks something that they can respond and react to.

  • Add images. Try to make a brief more than mere words. Embellish the brief with suitable imagery (icons or photos, for example) that give visual and emotional resonance to the ideas in the document. This helps the team connect emotionally to parts of the brief and remember it better later. It is also an opportunity for you to begin to introduce visuals that foreshadow or allude to the quality of the experience the team is trying to deliver. For example, if the product should feel like a personal experience, include photos that seem candid, unstaged, and true to life. If the product should feel like a luxurious experience, include sophisticated, professional, polished imagery, and pay attention as well to a clean, sophisticated layout for the document itself.

  • If you work remotely... Share your design brief with team members while it’s in draft form and actively solicit their feedback. Documents like design briefs can spark strong reactions if they’re handed down as though by decree. Rather, frame it as a conversation starter until you feel like you have enough input and alignment to call it final. Working with people in person speeds this process up a bit, because you can get people together and have a shared conversation to get their input.

  METHOD 14

  Design Principles

  What should the experience of using the product feel like to a user?

  Design principles help you articulate the characteristics that should endow the user experience with a memorable personality or feeling. Does it sound strange to say that a product has a personality or a feeling? Some products may not have intentional personalities, but they may leave a distinct impression nonetheless. Some may feel confusing, complex, or technical. You may also have encountered products that feel fun, friendly, simple, and smooth (see Figures 7.3–7.4), or playful, social, productive, creative, and so on. Users tend to appreciate products with those kinds of personalities a bit more.

  Design principles are a tool to help you clarify what personality is right for your product, and then to ensure as you progress that you are designing an experience with this personality. Because these design principles set a direction for the product design, they are ideally done before beginning a detailed design. Design principles can be shared with the team, similar to a design brief, to ensure that you have alignment on the product direction. As a tool for yourself, design principles can be a barometer to continually gauge whether the designs match the principles as you work.

  FIGURE 7.3

  The design principles that were created for the digital video recorder Tivo.

  FIGURE 7.4

  These design principles are evident in a variety of touchpoints—from the simple and ergonomically satisfying Tivo remote, to the friendly logo, to the inviting and non-technical language of the viewer’s guide.

  Average Time

  2–4 hours total

  • 1–2 hours to create the principles

  • 1–2 hours to share with the team and incorporate feedback

  Use When

  • You need a tool to ensure that your user experience is coherent and consistent.

  • You’re not sure what the vision or personality for your product is.

  Try It Out

  1. Consider what makes your offering unique.

  Think about what you’
ve learned through whatever research you’ve done. Have you discovered any differentiators and special characteristics that are key to your product? Are there any assets in your content patterns that are important to feature? Have you uncovered any interesting opportunities via user research that your product is uniquely positioned to address well?

  2. Create a list of principles.

  From this information, make a list of statements about what, ideally, the finished product should be like. Try to write short, pithy statements in an informal, human voice. Here, you are trying to capture how you would like a real person to describe your product after using it.

  3. Reduce your list.

  If you come up with a lot of statements in your list (say, more than five), try to pare it down. Prioritize the statements that most directly give users what they need and create an offering that is differentiated from your competitors. You may be able to combine a few of your statements to come up with more nuanced, less generic statements that really speak to the experience that you’re trying to create for your product. Ultimately, you want to whittle down your list to about five statements.

  4. Add more color to each statement.

  Select a photo (or a few of them) to illustrate the statements symbolically, as shown in Figures 7.5–7.7. Add additional notes about some potential implications for each principle. Think about how each principle might influence specific parts of the design.

  5. Share and discuss.

  Once you’re satisfied with your principles, share them with the whole team. Consider creating nicely formatted, poster-sized versions of each principle to give each one a sense of significance and inspire others.

  6. Refer back to them regularly.

  As you progress through design steps like sketching, wireframes, prototyping, and validation, continually refer back to your design principles and ask yourself, “Does what I’m designing feel like this principle?” If not, think about what changes you can make to bring the design more in line with the principle.

  FIGURES 7.5–7.7

  Here, three different design principles work together to convey the overall feeling that a product should have for its users.

  Tips and Tricks for Design Principles

  • No generic statements. Design principles should help you make decisions in product design. This means they should be tangible and, to a certain extent, pointed. To test if a statement is specific and evocative enough, ask yourself if that statement could describe any of your competitors’ products. If it could, it probably needs more work.

  • Go beyond easy. Resist the urge to include a principle about being user-friendly, easy to use, or simple. Those things are all good, but they are table stakes for good design. With rapidly evolving design standards, a simple experience is not necessarily a differentiated experience anymore.

  • Make it a group activity. If you’d like to include your non-UX team members in the creation of design principles, start by creating a big list of potential statements as described earlier. Then hold a meeting or mini-workshop and invite the team to reduce the list and modify your draft principles to make them better. You can do this as a hands-on, lo-fi activity, creating design principles like the one shown in Figure 7.8. You can also invite the team to discuss what the implications might be for each principle as you apply it to product design.

  FIGURE 7.8

  Design principles don’t have to be highly polished, as long as they capture a distinct feeling.

  • If you work remotely... Once you’ve gotten the team familiar with the design principles, ask someone who is located with the team to print them (ideally as posters or attractive large-format documents) and hang the design principles someplace where your colleagues can regularly encounter them. This keeps them top-of-mind for the whole team. In any case, be sure to refer back to them regularly as you progress through the design process. Design principles are like a north star to help you sail the ship of design.

  METHOD 15

  Sketching

  What are some different forms the product design could take?

  Sketching is an activity that should be familiar to pretty much all of humanity. It’s when you sit down with pen and paper and allow yourself to start drawing out your ideas. However, in user experience design, sketching has added significance. It refers to the point in the process when you begin to explore different potential forms that the ultimate design could take. This is an important step before beginning detailed designs.

  Sketches are a vital design tool because:

  • They’re cheap. Sketching is a fast and inexpensive way to iterate and refine your ideas before transitioning to a higher-fidelity and more painstaking medium like wireframes. While you are in the sketching phase, if you discover that a certain idea won’t work, you can quickly evolve or revise the idea. All it takes is another sketch.

  • They help you explore. In user experience design, there are usually a variety of directions a design could take. Sketching is a thinking tool that you can use to pinpoint an idea and then adjust and adjust again. It can also be used to generate a range of potential solutions to a particular problem. This makes sketching an excellent tool for exploring constraints and trade-offs, and thinking through the implications of one design over another.

  • They forestall perfectionism. Because sketching helps you explore multiple directions, it’s a natural deterrent to becoming too wedded to one particular idea too early. Sketching enables you to entertain a variety of ideas all at the same time, and even merge them together and evolve them into something greater than any one individual concept.

  • They invite conceptual feedback. Sketches are messy. No one could confuse them with finished designs. Consequently, if you share a sketch with someone (for instance, a team member), they’re more likely to give feedback on the core concept than to give you detailed feedback on layouts, fonts, colors, and so on. Early in the design process, feedback on the concept is the right level of feedback. Conversely, if you show a more polished looking design while you’re still working on the basic idea, people may focus on surface aesthetics and feel that it’s too late to give feedback that might change and even improve the overall conceptual direction.

  • They engage others. Perhaps most valuable for a team of one (whose success often depends on getting support from non-UX peers), sketching gives you a way to translate abstract ideas into a tangible, visual language that you can share with others. You can use this to confirm with the team what you’re thinking and incorporate their feedback before investing days of work into higher fidelity design.

  • Anyone can do it. You don’t have to be the only one sketching. In fact, inviting your cross-functional team to express their ideas on pen and paper gets them engaged, leads to great new ideas, and is fun!

  For all these reasons, sketching is an essential tool in the UX team of one’s toolkit, and one that everyone should be able to use with a degree of confidence.

  Average Time

  As much or as little time as you need. For example, 30 minutes of focused sketching time can make all the difference.

  Use When

  • You’re starting to explore design ideas.

  • You want to engage the team in a constructive and tangible discussion of possible design directions.

  • You’re not really sure what direction the designs could go in, and you need a tool to spur your creative thought process.

  Try It Out

  1. Start with the right equipment: paper and pen.

  You can sketch with tools as simple as an old pencil stub and a scrap of paper. However, having pens of varying weight and color, and blank paper (or better yet, a special notebook for sketching) can imbue the sketching process with an air of thoughtful intention, and can also make your sketches clearer to other people. Consider assembling a little sketching kit for yourself, as shown in Figure 7.9. Then stock this minimal set of sketching instruments in your pen case at all times:

  • Fine-tip black pen
or marker—for roughing out a sketch.

  • Fine-tip red pen or marker—for annotations and notes.

  FIGURE 7.9

  Your sketching kit.

  • Fat-tip black pen or marker—for creating thicker lines to draw attention to the more important or structural parts of a sketch.

  • Non–photo blue pencil—for creating a first draft of a sketch, before inking it in. Especially useful if you are drawing hard things like hands or people. It’s called a “non-photo” pencil because it’s (mostly) invisible to cameras and scanners, which makes it a good way to rough out an idea and then go over it again later in black ink.

  • Warm gray chisel tip marker—for creating drop shadows or inking in parts of the sketch that should be treated as the background.

  • For sketching paper, basic copier paper works well. Or, if you are sketching screens for a specific type of device or screen resolution, it can be helpful to sketch on templates like those shown in Figures 7.10–7.13, which include a stencil or outline with an accurate sizing and aspect ratio for the target screen. Paradoxically, if your paper is too nice, it can make you more hesitant to sketch. Use fancy pens but unfancy paper.

  FIGURE 7.10

  A sketching template for a Web browser.

  FIGURE 7.11

  A sketching template for a mobile phone.

  FIGURE 7.12

  A sketching template for a tablet.