When you are able to easily communicate how a design idea is directly inspired by your design research, you'll know that you are on the path towards creating a truly meaningful user experience. But creating meaningful experiences is not easy, and the difficulty arises in the awkward transition from conducting design research to sketching ideas.
The design research phase usually leaves us with many "bits" of data, such as what our audience values, what problems they are trying to solve, organizational goals from our client, or an opportunity to create more business value than a competitor. Sketching is a sacred opportunity in the design process where our brain can more easily make connections between disparate ideas by thinking visually and spatially. If we're going to find meaningful connections between research and our design work, sketching is the time to do it. Great designers know that the *true* beauty of a successful visual design is born through its *strength in concept*, which is best considered separately from other layers of the design process (e.g., decisions on hierarchy, styles).
If we do not successfully connect our research to our sketches, the negative impact will be felt through the entire life of the project and beyond, even into future sales cycles. If we complete our visual designs and can't make connections back to the research, we're reinforcing the lack of value in the research itself, creating a reputation for research as a process where we generate a lot of data that we don't use. We create a cycle where research is difficult to sell, because we are not regularly proving its value and ultimately, producing meaningful work is very difficult. At Lullabot, our hope is to break this cycle that is impacting the larger design services community and help research to be a lean, invaluable component to creating great work.
So, how do we learn to better connect the data from our research to the ideas on our sketchpads? Here is the key:
Create a short, focused list of research highlights that are only relevant to the user story you are sketching
Better connecting design research to our sketches begins with reducing our project-wide summary of research highlights (commonly referred to as “brief”) to a more focused list of key things that are only relevant to the user story we're designing for at this moment—our team calls this a *user story brief*.
The project-wide research brief is very useful for sharing with the larger product team to give insight into the design process (clients, developers, project manager, etc). But even a lean process can produce a pretty big pile of research findings. When we begin the process of sketching ideas, we focus on one user story at a time. A user story is a high-level user flow that may involve multiple tasks or pages (e.g. sign up for an event, make a donation, learn how to make sweet potato brownies). If we're working on a site that's more content-driven and we understand the basic information architecture up front, we may sketch for particular page types (e.g. Article, Our Work, Contact). In any case, the general idea is that we're working to simplify that original project-wide research brief to focus on only highlighting research that is relevant to what we're sketching right now.
At Lullabot, we typically have a bucket of "go to" research highlights that we reach to help form our user story brief before we begin sketching. Here are a few examples of those key components:
Project Vision Statement
A single sentence to focus the entire team on a common, meaningful goal for the project. It gives us a one-liner that serves as a star to sail our ship by. When ideas are being evaluated, disagreements arise, or compromises have to be made, it gives us one fundamental we can all agree on and evaluate against. Below are a few examples: * Connect and engage employees wherever they are with timely, relevant content. * Connect, inspire, and empower advocates for music making and education.
So, the first step when evaluating ideas for new content or experiences is to answer the questions above...how does this idea connect and engage employees wherever they are with timely, relevant content? Or how does this idea connect, inspire, and empower advocates for music making and education?
Design principles
Guiding design principles are informed by all areas of the research process. We like to write principles with a simple, memorable, title and a description. We typically leave the description out when preparing for sketching and simply write the principles near our workstation, along with the project vision statement. Here are a select few principles we've written for our projects:
Relevance over breadth
This principle makes us constantly ask “Does this audience type care about that component, that piece of content, that link?” as we’re evaluating ideas and designs.
Look for creative ways to provide tailored experiences for on-boarding employees. These ways may include prioritization decisions within the default designs, but also technical approaches for providing specialized experiences for the on-boarding process.
Show and tell stories
Whenever and wherever possible, tell users about the Spredfast platform and products by telling real-world stories, in the words of actual Spredfast customers. Find ways to show the value of something rather simply describing it.
Project goals
Before sketching, re-read all project goals (e.g. business goals, marketing goals, design goals, technical goals). Are there any you'd like to keep front-of-mind for this user story design? Here are few examples of goals:
- Increase donations significantly. An increase in donations would be one indication that the site is doing a better job of telling the story of the impact of the NAMM Foundation’s work. A site that truly “inspires and empowers” can play a role in increasing the number and significance of donors.
- Increased site speed, particularly on mobile. Success: A 25-50% decrease in load time for the home page on mobile (the home page currently loads in 11.91 seconds)
- Create a design that will appear on the short-list of best-designed entertainment and news websites. Success: Submit Grammy.com as an entry to multiple awards organizations and receive a press-worthy award.
Persona needs and values
What personas are important to keep in mind for this user story? What are their common pain points? What are their key questions when they arrive on this page? What do they value? Below is an example of how we keep our personas text-based (no fake profile pictures) and simple.
Bob Bot the Lullabot
Bob is a developer at Lullabot. He thinks that working for Lullabot is pretty awesome and loves the idea of showing off his company culture and work to the development community. Bob is fascinated by new delightful experiences on the web and appreciates design ingenuity.Bob Bot likes apps and websites that are intuitive, easy to use, clean & minimal with no distractions from the overall task. Apps and websites used regularly: Github, Reddit, Facebook, Twitter, Yammer, Amazon, Kindle, Readability, Unread, Feedly, New York Times, Google Inbox, Pocket, phpStorm
Visits Lullabot.com to: Review Lullabot.com redesign and share with dev community, read or post articles, listen to podcasts created by fellow bots, review his own bio on the who we are page, and read the new case study of a project he worked on.
Main aspects that drew Bob Bot to work for Lullabot: Having great co-workers that are knowledgeable, passionate, talented and fun and having an outstanding reputation in the Drupal/web development community ### Presentation Model "Presentation model" is a fancy term for "here are ways we can present content on the page". For example, if we're redesigning a donation page, it may be clear to us that having a 1) donation form and 2) privacy policy links, etc are definitely "things that need to be on this page".
Market research takeaways and other relevant research
Are there any notes you have on competitors, inspiration sites, Nielsen Norman reports, etc. that would be helpful to reference when sketching this story? Other ideas include general design concerns or technical constraints presented by the client, google analytics highlights and key adjectives that represent the brand (Bold, Risky, Elegant).
Pulling together your user story brief
In summary, use the research highlight ideas mentioned above to create a simple brief that is specific to the user story you are sketching. The more simple your brief, the more likely you will be to connect your research to your sketch. Every user story brief will have a different structure because every sketch involves a unique combination of research "bits" that are relevant to only the specific problem you're solving. The key is to keep the user story brief as short and focused as possible. The more simple our list, the more likely we are to truly make strong connections from our research to our sketchpads.
Bring your research highlights into the same physical space as your sketchpad
Andrew Smyk with Adobe writes about a creative way that he creates new connections when sketching:
"One of my favorite techniques is to photocopy some of my sketches, cut them up into the base components, as described in Brad Frost’s Atomic Design, and then begin fleshing out the design concept by grouping and reshuffling components. I find that by physically moving the pieces of paper around, it allows me to identify patterns and think about how the user will interact with the design solution and interpret my messaging."
Let's apply the same idea of components and spatial thinking to our design research data. Choose a select few research highlights and write each highlight on a single notecard. Place those cards near your sketchpad while designing. Notecards are a designer’s best friend! The small space on a notecard helps to focus you on singular ideas. In order to more easily connect our research data to our ideas, we reduce our research data to singular components and bring them into the same physical space as our sketches. Now we can physically move the highlights around and make new connections with our sketched components, allowing you to reap the benefits of spatial thinking and learning. When you present your sketches, you should be able to easily communicate the research that inspired the idea by simply reading each notecard that is sitting next to your sketched component.
Summary
Research + sketches = more meaningful work, higher chance of success for the project - Before beginning to sketch, reduce your project-wide research findings to only the key highlights that are relevant to the user story or page you are sketching. The more simple the highlights list, the easier it will be to truly connect them to your ideas and communicate those connections to your team. - Try writing those research "bits" on individual notecards and placing them next to your sketchpad to reap the benefits of spatial thinking and learning.