Designers are great at producing visual artifacts. We create mockups, images, code and all sorts of other material to document our solutions. But looking only at those artifacts doesn’t account for the actual creative process.
In their article “Documenting Design-In-Process1,” John Bassani and Carolyn Barnes highlight a potential reason: We view our design approaches as intuitive and emotional, so we have a hard time developing documented, human-focused design processes.
Fortunately, there is a better way. Designers can create in-depth, documented case studies of their work. The best ones clarify the complex choices designers have to make and explain their thinking behind UX and visual decisions. They document and communicate that knowledge clearly, helping our design community to develop a more empathetic, human‐centered way of speaking about our process of design.
Writing in Design for Human Scale2, Victor Papanek puts it like this:
Design is a joyous, creative act. It concerns itself with problem solving and decision making. It provides the designer with enormous gratification to watch a concept move from the first explorative lines on a sheet of paper through different stages of development.
This article analyzes some key features of case studies and provides tips on how to use them to humanize your process of design.
State Both Broad And Concrete Goals
I’ve always tried to write up my design briefs with specific deliverables and concrete goals. But that doesn’t mean there can be no room for experimentation. Often this shows up as broad goals, ones that can’t necessarily be captured in a client brief. Making our broad and concrete goals clear in a case study keeps the focus on problem-solving, not just asset delivery.
Let’s look at two case studies that have this dual goal-setting.
In the first example, Frog and the Nike Foundations’s Girl Effect case study contains both broad and concrete goals: “Explore the value of community for young women living in poverty” is paired with “modeled simple forms of digital communication.” Though simply stated, these keep the focus on the problem and the solution.
3
Frog’s Girl Effect case study4 has a focus on community and agency action. (View large version5)
In the second example, Domain76 does this as well. The case study combines the city of Vancouver’s goals of digitizing and becoming responsive but also references the Domain7 team’s technical goals. The use of phrases like “We are up to the task!” tell us that their challenge was not simply to deliver code to the city, but also to solve a problem internally that they could be proud of.
7
Domain7 focuses on the city’s goals of digitizing and becoming responsive, as well as their own technical goals.(View large version8)
In these projects, the broad goals of the clients (Nike, Girl Effect, Vancouver) are paired with the needs of teams working on them. This dual framing gives us a deeper understanding of the general outcomes they explored, along with more specific project goals, always putting the human at the center of the process.
Tips
Define your broad project goal early in the case study, with a focus on larger issues like community, the environment or empowerment.
Attach your concrete goal to the deliverables of the project or the technical problems you hope to solve.
Focus On Process Before Artifact
We have taken the first step towards crafting a human-centered case study. Next is a look at how we can focus on process before artifact. But what exactly am I getting at when I say “design artifact”? Sandra Wolfe Wood explains9 (PDF):
“Design as artifact” is framed around the solution, a physical deliverable like a logo or website; “design as process” places more emphasis on the problem-solving process.
Well-documented case studies can show that design needs to be much more than a list of client deliverables. Focusing first on process shows design as a deliberate collaborative act, not a solitary one. The sketches, user journeys and mockups all help the reader to visualize the work and, more importantly, to see that it was created by human beings. We see how design comes into being, not just what the pieces look like like at the end.
Gravitate’s Sahale case study10 shows this in action. From their work of defining user personas to the content audit and even the style tiles, we see how the team prioritizes their design process, almost enabling the reader to participate as the website takes shape.
11
Gravitate prioritizes12 the process of content audits, SEO analysis and sketches over completed work. (View large version13)
Another way to put the problem-solving process before artifact is to highlight contributors and team members. Dan Mall’s TechCrunch case study features a prominent list of collaborators, followed by a project outline and then sketching. He focuses on the design process, on starting, rather than finishing.
14
Dan Mall’s case study of the TechCrunch redesign15 features collaborators prominently, showing who rather than what. (View large version16)
Tips
Illustrate your design process to the reader with simple, easy-to-understand steps, ones that they can duplicate in their own projects.
Show photographs of your team working collaboratively, in situations that illustrate your design process.
If possible, list your collaborators and the roles they played. This moves the case study towards an exploration of people and process, beyond simply a description of design deliverables.
Show Research In Clear, Process-Oriented Chunks
Whatever the exact steps of your human-centered design process, it will need to include research and exploration. You can present research in case studies as process-oriented chunks. This could mean photos of a wall covered with stickies, complex illustrations and structural sketches, or even data models and usability results17.
In his essay on the co-design process18 (PDF), Marc Steen develops the idea that we need co-inquiry and collaborative exploration in order to develop solutions to briefs. We define artifacts as the solution, but they need to come from a collaborative, human-centered approach to the design goals. Case studies are best when they show real relationships between research, data and solutions.
So, what are some of the key forms these process-oriented chunks can take?
Sketches and Prototypes
For Erskine, starting with rough interactive wireframes gave them the conceptual framework they needed to continue. With the goal of prototyping a fast, responsive website, they started with the concept and low-fidelity mockups and then gradually went into more and more detail as they refined the prototype.
19
Erskine Design’s prototype20 for the Trade Clients app (View large version21)
Visualized Research
Mozilla’s Save for Later22 case study is another particularly strong example that focuses on explanation. Right from the beginning of the case study, the reader walks through research phases and content mapping. Conceptual work is illustrated with diagrams and icons, to clarify the findings. In each step of this case study, the research is explained and contextualized.
23
(View large version24)
As I read through these, remembering all the times I’ve done something similar, I’m able to empathize with their research process and how it is visualized.
Code
In this example, we see Fat on Github">@Fat25 speaking at length about how he approached the re-architecture of Medium’s CSS. The case study is organized into conceptual steps and lists five distinct “projects” he undertook, along with the code that came from those explorations. It’s more than that, though. Each research chunk is littered with references to the team, to “we” and to collaborative efforts to refactor the CSS. It shows research as a very human process.
26
Fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s CSS27 (View large version28)
User Experience Notes
As designers, we are intimately familiar with that mental transition from abstract research to real experience. Maggie Salter discusses her work in developing models29 to “rehumanize” information design, saying:
At its genesis, information is humanized; in the systematization process, it loses its innate human-ness. This… represents an attempt to re-insert that humanized nature back into information design, hence its goal is to rehumanize information design.
As I looked at successful case studies, this theme came up again and again. Every piece of data, every artifact, every line of code needed to relate to human experience first.
In the article about the zoom feature30 in FiftyThree’s Paper app, this focus on UX is a joy to read. With lines like “It usually makes people smile the first time they see it”, and the language written to “you,” the user, their technical research comes across as totally about the experience.
31
Paper by FiftyThree32 walks the reader through the enhanced UX of their zoom feature. (View large version33)
As you can see in these examples, sharing our design process is best with image, code and UX work that are deliberately focused on the research process. Ultimately, we need to create final design artifacts, websites and apps, but how we show our sometimes messy research is what makes the work accessible to readers and other designers.
Tips
Show your research with photos, charts or a list of findings, even if it is not packaged neatly.
For code, tools such as GitHub’s Gist34 or CodePen35 can illustrate your research to the technically savvy.
Show relationships between data, research and design artifact, either in writing or by associating them visually for readers to compare.
Explain The Use Of Components And Modular Parts
Web design is increasingly a modular affair36, what Matt Berridge calls “the cornerstone of modern web design37”. We’ve moved away from the days of unwieldy HTML files and static PSDs, replacing them with more visual and structural abstraction38. The popularity of front-end frameworks, pattern libraries and style tiles is a testament to the attractiveness of a modular approach.
In your case studies, show some of the modular elements39 you have designed, even if they are simply parts of a much larger set.
The Tele Finland40 case study from Werklig contains a wealth of iconography and type exploration. The whimsical shapes and colors all work together as modular elements. Even small details, like the rounded corners on elements and the custom typography, feel like parts of a larger modular system.
41
Werklig’s Tele Finland case study42 shows modular shapes and colors. (View large version43)
Choices of color, content types, UI elements and even illustration styles all play a part in this modular, block-level approach. Eugene Spiecher spoke44 of the need to be a “distinguished shape maker,” and that sounds perfect for what we do as web designers. Haraldur Thorleifsson45 does this very well, visually showing readers what kind of shape maker he is. The case studies on his website contain a large number of core design components, such as icons, and show how they fit together in interfaces.
46
More Than a Map47 shows a number of deliverables and assets in context. (View large version48)
Earlier in this article, I emphasized process over artifact. So, does showing these components promote design artifact over the design process? Not at all. Visual and UI design choices come after we synthesize all of the research data we looked at earlier. We gather button styles, animations and visual patterns in case studies to show that we understand the problem and can craft solutions. In showing the components parts of a solution, we see the people and knowledge at work.
Tips
Design artifacts can make your process come alive. Show them at work in your design.
Present modular elements together in image sprites or charts to show visual relationships and systems.
Use animations and GIFs to show different states or conditions of the modular elements.
List Any Crucial Lessons Learned
As we looked at before, case studies should emphasize design knowledge and creative processes. Of course, that includes visual, code and UX assumptions that didn’t hold up49. There will always be lessons learned during projects, and sharing those is crucial so that others can learn from them.
Two types of lessons add greatly to case studies.
Lessons About the Creative Process
The Made by Many50 team talks candidly about their struggle not to jump to conclusions while they were building a new tool called Granny Cloud. They also note what happened after a prototype was built and the new constraints that put on their team.
51
Made by Many clearly explains the creative process and lessons learned. (View large version52)
Part of your case study should be an explicit listing53 of what solutions you matched to your research in the end and why.
Lessons About Failure
The web is a complex medium. A lot of things fail. We get it wrong. A lot. Projects that are finished and pushed live don’t need to hint at all of the dead ends and failures you experienced. A case study is a much better place for those lessons. Walking your readers through these moments reinforces design as a time for exploration and iteration, not only polishing.
The beautiful case studies by Teehan + Lax54 contain a number of lessons about where they failed: “We knew we needed to pause and take a fresh look.” Over and over, the clear assessments and observations about their process take the reader along their journey to a better solution.
55
Teehan + Lax offer a frank observation about a failed design process. (View large version56)
Tips
Be honest. If a design process or tool didn’t work, tell that to your readers, so they don’t have to make the same mistake.
Speak about ideas of creativity and inspiration. Many of your personal struggles with design and visual ideas will be powerful lessons for other designers.
Define The Quality Of The Experience
We have looked at concepts, process, components and even failures. Our next response may be to ask, “So, was this a high-quality experience?” Can we look back on websites we’ve worked on and be confident that the design had a real impact?
As much as we talk about concrete deliverables, our work as web designers is entwined with emotion. Users and clients feel joy, satisfaction, confidence, even confusion when using the websites and apps we build. Case studies provide us with a chance to define exactly what type of experience we were aiming for and whether or not our work matched up.
The quality of the experience can be explained in your case studies in a few different ways.
Numbers and Analytics
Give readers numerical proof that all your sketches and prototypes actually worked. Include the results of testing because they tell readers how certain features fared. They help us visualize the human reactions our design is creating. Even though numbers are tied to design artifacts, they are a very effective way to measure user experience.
Little worked with Target57 to improve its corporate and internal communication. Through the success of publications and rewards systems, they can show numerically that their design process is working. For designers and studios selling their services online, these can also be very persuasive to clients.
58
Little’s case study of their work with Target (View large version59)
Quotes and Testimonials
There’s something powerful about hearing directly from users, team members and clients. Short quotes that contain personal observations about the project are often the most accessible to readers. Another option is an interview format, with a longer Q&A from the client or user base. Clear responses from the people involved can make the case study feel truly human-centered. The most effective case studies take it a step further by providing first-hand accounts of a team’s design experience, not only the user experience. This provides real perspective for readers, who will often be other designers.
In their case study for the Knight Fellowships, Mule Design features a quote60 (Note: This link points to a version on archive.org as the example was recently taken offline.) from their client very prominently, a validation of the high-quality experience they designed.
61
Mule Design’s case study for the Knight Fellowships (View large version62)
Tips
Use analytics and metrics that connect to your project’s original goals, establishing a link back to the beginning of your case study.
By pairing quotes with photos, we show who is talking, enabling readers to connect and empathize with them.
How Was The Project Completed And Launched?
As simply as possible, show us a website or project as it exists in real life. That is, after all, what we are paid to do, right? The final product stands as a combination of your human design thinking and evidence that your creative process actually worked. Show it off proudly!
All that research, development and testing of interfaces act as context for this section of your case study. At the end, we should see clear examples of how your project was launched and viewed by the public.
Conclusion
I’ve tried to show that by focusing on process rather than artifact, we can build and share in-depth case studies. The studies allow us to reframe the conversation around design process and the humanity in what we create, rather than perfect deliverables.
Undoubtedly, case studies themselves are a type of complex design artifact. But we do the design community and ourselves a disservice when we fill them with overly rendered and unrealistic mockups of our work. Isometric mockups63, for example, are a recent trend, and their staged flashiness obscures any real design solution. Emphasis is incorrectly put on the artifacts themselves as images, not on the process and creative solution behind them.
In his persuasive article “Learning to See64,” Oliver Reichenstein says:
The more knowledge you have about a product’s inner workings, that is, if you can see the construction, the hidden mechanism, and glimpse the process leading to its current state, the easier it becomes to see its design.
Digital design is a complex field, one requiring empathy, visual clarity and conceptual depth. If we are to continue to learn and grow as an industry, we must learn first-hand from our colleagues about strategy, critical thinking and design process. Studying the process of others, not just the artifacts, enables us to develop a more nuanced, human-centered approach to our own process, and to present that in carefully organized case studies.
(il, ml, al)
Footnotes
1 http://idnworld.com/books/?id=extra09
2 http://www.amazon.com/Design-Human-Scale-Victor-Papanek/dp/0442276168
3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-frogdesign-girl-effect-opt.jpg
4 http://www.frogdesign.com/work/nike-foundation-girl-effect.html
5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-frogdesign-girl-effect-opt.jpg
6 http://domain7.com/work/city-vancouver
7 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-domain7-city-of-vancouver-opt.jpg
8 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-domain7-city-of-vancouver-opt.jpg
9 http://conservancy.umn.edu/bitstream/handle/11299/155302/Wolfe%20Wood_Design%20for%20Good_A%20Core%20Professional%20Practice.pdf?sequence=1
10 http://www.gravitatedesign.com/work/sahale/
11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-gravitate-design-process-opt.jpg
12 http://www.gravitatedesign.com/work/sahale/
13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-gravitate-design-process-opt.jpg
14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-danmall-techcrunch-opt.jpg
15 http://danielmall.com/articles/techcrunch-responsive-redesign/
16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-danmall-techcrunch-opt.jpg
17 http://zurb.com/quips
18 http://www.mitpressjournals.org/doi/pdfplus/10.1162/DESI_a_00207
19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-erskine-trade-prototypes-opt.jpg
20 http://erskinedesign.com/portfolio/trade-clients/
21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-erskine-trade-prototypes-opt.jpg
22 https://blog.mozilla.org/ux/2012/10/save-for-later/
23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-mozilla-save-for-later-opt.jpg
24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-mozilla-save-for-later-opt.jpg
25 https://github.com/fat
26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-medium-css-writeup-opt.png
27 https://medium.com/@Fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-medium-css-writeup-opt.png
29 http://www.mitpressjournals.org/doi/pdfplus/10.1162/DESI_a_00165
30 http://making.fiftythree.com/a-closer-look-at-zoom/
31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-paper-zoom-feature-opt.jpg
32 http://making.fiftythree.com/a-closer-look-at-zoom/
33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-paper-zoom-feature-opt.jpg
34 https://gist.github.com/
35 http://codepen.io/
36 http://bradfrostweb.com/blog/post/atomic-web-design/
37 http://builtbyboon.com/blog/responsive-design-case-study
38 https://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
39 http://daverupert.com/2013/04/responsive-deliverables/
40 http://www.werklig.com/solutions/tele-finland/
41 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-case-study-tele-finland-opt.jpg
42 http://www.werklig.com/solutions/tele-finland/
43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-case-study-tele-finland-opt.jpg
44 http://www.tfaoi.com/aa/4aa/4aa88.htm
45 http://haraldurthorleifsson.com/
46 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-more-than-a-map-opt.png
47 http://haraldurthorleifsson.com/morethanamap/
48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-more-than-a-map-opt.png
49 http://alpha.flowtab.com/
50 http://madebymany.com/blog/designing-with-users-an-exercise-in-empathy
51 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-madebymany-opt.jpg
52 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-madebymany-opt.jpg
53 http://scottberkun.com/essays/15-critical-thinking-in-web-and-interface-design-part-2/
54 http://www.teehanlax.com/story/shipwire/
55 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-teehan-lax-shipwire-opt.jpg
56 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-teehan-lax-shipwire-opt.jpg
57 http://www.littleco.com/client-work/target/
58 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-little-co-target-cards-opt.jpg
59 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-little-co-target-cards-opt.jpg
60 https://web.archive.org/web/20140702193942/http://muledesign.com/portfolio/knight-journalism-fellowships/
61 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-muledesign-opt.png
62 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-muledesign-opt.png
63 https://www.google.com/search?q=portfolio+isometric+mock+up
64 https://ia.net/know-how/learning-to-see
The post Designing Case Studies: Showcasing A Human-Centered Design Process appeared first on Smashing Magazine.