Senior Capstone, Visual Communications :: Human Centered Design

Today’s blog post focuses on VIDEOS AND INFORMATION FROM Designkit.org

Human Centered Design and Design Kit

Design thinking, when discussed, often sounds like some nebulous thing. That’s why the Ideo Design Kit is incredibly useful in its ability to make concrete and expand the nebulous stages of inspiration, iteration, and implementation.

I found the “Methods” section of the design kit to be especially useful. In the Methods section, pieces of each section of the design thinking process are broken down and explained. For example, under the inspiration section, one can find out how to give an interview or frame a problem in order to improve research. Codifying these processes allows them to be easily accessible, rather than abstract and unobtainable.

I also greatly appreciated how they framed things in terms of questions. Often, looking at a list of tools isn’t exactly the easiest way to figure out which one to use. By framing things in questions like “How do I conduct an interview?” or “How do I make sense of what I’ve heard?”, designers can approach this toolkit and interface with it rapidly.

The Design Kit itself is very beautifully designed. It’s color coded well, beautifully arranged, and well organized. The site feels like it was made for designers, but is also accessible to non-designers.

Senior Capstone, Visual Communiations :: AIGA Design for Good Case Studies

Designing for social and public good takes place in an arena where designers can maximize their impact by employing design thinking. In order to facilitate this impact, understanding the system in which the change is needed is necessary. Only then can meaningful solutions be drafted, refined, and implemented to convince target audiences of a message or call to action. In understanding how this plays out in real life scenarios, I’ll be looking at two case studies from the AIGA Justified design competition.

  1. Case #1: Education Super Highway
  2. Case #2: Nothing

(more…)

Senior Capstone, Visual Communications :: Design Education & Design System Thinking

In this post, I’ll be discussing and rephrasing in my own words Design/Systems thinking, based on two articles we read for Senior Capstone.

Over the course of my academic career, there have been three layers to the knowledge that our instructors have strived to instill in us. So far, in the way that I see it, my cohort has experienced these distinct sectors of design education:

  1. 1.  Formal/Compositional Instruction: A comprehensive look at how to execute and render ideas through an understanding of the form-building process. Examples: Color theory, 3D design, typography, motion graphics courses.
  2. 2. Wielding the Artifact: Where we grow our understanding of how posters, logos, and the things we make can be applied to solve problems. Examples: Branding exercises, identity exercises, app design classes.
  3. 3. Design/Systems Thinking: The way of approaching design problems we are learning about now, and the way the industry currently works. Examples: Just about anything produced by professional agencies.

Design and Systems Thinking is a modern approach to solving problems developed by designers and innovators. It was mostly brought to fruition through some smart people at IDEO. It shapes the way designs and problem solvers approach the challenges in front of them by offering them a heuristic method through which they can systematically approach a problem from the interior of the problem versus the exterior. This is more commonly phrased as bottom-up versus top-down. Allow me to add some context and relevance for me and my cohorts as young designers.

In the Formal/Compositional phases of our design education, problem solving rarely factored into the exercises my cohort engaged in. Courses color theory and typography simply gave us a fleshed-out toolkit that we brought to the second stage of our education. As we learned to Wield the Artifact, we began to brainstorm ways in which we could use our creations to solve meaningful problems. As we enter into the quarter-long process of graduation, we begin to take that line of reasoning one step further. In the same way that we practiced thinking beyond our own compositions, we must now think beyond our own top-down solutions.

But what does it mean to approach a problem with this bottom-up heuristic? It is composed of three ‘sectors,’ as defined by Tim Brown and Jocelyn Wyatt:

The design thinking process is best thought of as a system of overlapping spaces rather than a sequence of orderly steps. There are three spaces to keep in mind: inspiration, ideation, and implementation. [From Design Thinking for Social Innovation]

While these are often semantically touched upon in the “Wielding the Artifact” stage, purposefully living in, exploiting, and making sense of these stages is at the core of design thinking.

Inspiration is a zone of thought dedicated to understanding every facet of a problem, and often conceiving of it in a new way. Understanding the problem isn’t enough: The designer must assess who faces the problem, why it is present, what causes it, and if they have any preconceived notions that are getting in the way of effective solutions. Inspiration includes field research, data collection and visualization, interviews, experiments, visual research, and all forms of documentation and collation.

Ideation is what is sophomore and junior designers usually practice first when approaching classroom exercises. It represents the concatenation and processing of inspiration into synthesized plans, and is the phase where many ideas are culled into a good idea, or small set of ideas.

Implementation is the turning of that final, good idea into a fully actionable plan. Prototyping is the key to creating perfectly actionable plans, which means small scale tests of ideas, whether they be apps, posters, systems, or programs.

Although I’ve only touched upon this process in this class and in this post, using this in and outside of class will look like ‘becoming an expert’ in the fields that I want to solve problems in. The ‘inspiration’ part of design thinking is tantamount to laying a groundwork for effective solutions.

For example, in my capstone class, I will be focusing on figuring out how to get more children in low-income school districts involved in (and staying in) educational music programs. Inundating myself into how music education works will be essential, as will understanding the children and demographics that I want to reach. I fully expect my preconceived notions to be completely re-written as I begin exploring and taking in all that I can about the problem/goal that I have in mind. Thankfully, design thinking has given me a framework for this process.

Now to hop to it!

Art 4209, Experience Design :: Blog #1 :: Rob Bell, “Politics is a Good Word”

I usually tell people that I’m ‘Apolotical out of ignorance.’

After listening to Rob Bell, I’m not so sure I should be proud of that, whether I say it tongue-in-cheek or not. Bell’s passion about the political process (I’ll admit, I’m reticent to even talk about or say “politics”) was enlightening and I found myself begrudgingly feeling a little more eager to find out how to get involved with the processes he was so excited about.

As a designer, I found myself respecting how Bell spoke of those things that are systemically important. In terms of the “audience” of politics – or, who it really effects –  you can’t really get much bigger or more important. In addition, it was interesting to get his inside view of the democratic process. It was encouraging to hear the positive story of his father, which was nice for this cynical constituent to hear.

However, I found his salsa-obsessed plane crash to be an (obviously, in some ways) imperfect metaphor for the struggles a nation faces. I don’t feel qualified to start dismantling the metaphor directly, but it still didn’t sit right with me… That may just reveal that I need to change my attitude about the political process.

In the end, I think that Rob Bell has pulled off my jaded, uneducated facade and forced me to realize that I need to educate myself more. Hopefully this project will help me learn, just as how I hope to end up educating the audience of my exhibit.

Info Design :: Blog Post #5

Mechanical Keyboard Winter Survey 2016

wintersurveyintro

GoMechanicalKeyboard.com’s ’16 Winter Survey, full graphic available on their website.

The mechanical keyboard community is as dedicated as it is nerdy. Proponents of mechanical keyboards tout them as a superb typing experience, and I’m inclined to believe them. I’ve been looking to go mechanical for some time now, but when a good mechanical keyboard starts at eighty dollars and only gets more expensive, ensuring that you invest in a good keyboard can be a bit like a research project. Thankfully, there are many groups out there looking to catalog, rate, compare, and share anything they can about their mechanical keyboard experiences. The folks over at Go Mechanical Keyboard have created an infographic that I’ll be talking about in today’s post. Take a hot second to check it out.

This infographic does a pretty good job of displaying the results of the survey, but could improve in several areas. The graphs are well constructed and easy to read, but a lot of data is still displayed in longform text. The colors, while thematically pertinent (the colors pertain to certain types of keyboard switches), do not codify well with each other despite the layout separating things well.

Paper Info

Another equally confusing area in the ‘office supplies’ category can be paper.

ppaperback

As we can see on the back of these paper packages, there’s a lot of information to digest about paper. Unfortunately, it seems like the only graphics that help assist us in digesting this information are the arrows at the bottom of the table. Simple iconography and graphics could really distill this information and present it visually. The designers could have even included scale sizes of paper to show the sizes of the types of paper offered.

Info Design :: Blog Post #4

Common On-Page SEO Issues

infographic-intro

Retrieved from CoolInfographics. Click above for the full infographic. By Raven Tools.

Raven Tools has built a pretty solid infographic. There are several things that it does very well: It’s cleanly designed, has a great color palette, and delivers graphics in a meaningful context for users. The colors and construction theme help explain to audiences that this deals with construction and errors, and helps to legitimize the sometimes abstract problems of SEO.

In addition, the data visualizations are well constructed and true-to-form. There are no malformed bar-charts or confusing representations of percentages here. In addition, further decorative illustrations push certain points home, like this bulldozer that represents removing unneeded content.

infographic-dozer

The only place where I see room for improvement in this infographic is that there is some unexplored capacity for metaphors that explain these problems or why they are damaging to a page’s SEO. With the construction theme, there are plenty of interesting little connections the audience could draw with SEO, and Raven Tools only scratched the surface of that.

Info Design :: Blog Post #3

Snowzilla

It’s very easy to recognize when information is challenging to present and digest. When a communication challenge presents itself as difficult, an infographic may be the best way to proceed.

Consider the following data points about the ‘snowzilla’ snow storm on the East Coast, reported by Digital Meteorologist Ryan Maue:

Valuable information! Unfortunately, while it sits in an excel table in scientific notation, it’s not going to turn the heads of any laymen. Thankfully, Dr. Maue has already done a little bit of information digestion and distillation for us. There’s a great hero statistic for us to communicate to a curious public: 6.6 Trillion cubic feet of snow was dumped on the United States by the recent snowstorm that ravaged the East half of the country.

That’s great, but it’s not feasible for anybody to consider what that means in any real capacity. 6.6 trillion of anything is basically a thought experiment… Which makes it a perfect candidate for being represented through an infographic. Thankfully, that’s what Vox Media’s Javier Zarracina has done for us in this article. In his own words, he describes why he took this approach:

These are absurd numbers, too big to really comprehend. To make them more understandable, I used a 3D modeling program to show what all that snow would look like in one snowball.

He gives us two layers of comparison. First, he presents the amount of snow dropped only in Washington D.C. as a large sphere, suspended above the US Capitol building:

Snowzilla_DC1.0

And then, he compares this to the total amount of snow dropped:

Snowzilla_US2.0

While it’s still impossible to comprehend the incredible amount of mass that this volume of snow contains, it’s easier for us to compare it to both a familiar building and another amount of snow by seeing them all laid side to side. Further details and context, like the map of Washington D.C. and the shadows of the ‘snowballs’ help us to understand the monolithic amount of water and ice the East Coast dealt with. Zarracina drives his conclusion home with the above graphics:

This really was a big snowstorm.

 

 

Info Design :: Blog Post #2

bookcoverRotoVision’s the designer and the grid

A fascinating experiment in grid, information, and print design, this book makes it’s uniqueness immediately apparent by the label on the cover. In the bottom right corner near where the RotoVision label appears, there are three labels: “Pages in print section,” “pages in chapter,” and “pages.”

It’s not immediately apparent what these labels refer to, but as you open the book, you notice that on the interior, what these labels refer to actually contain unlabeled numbers throughout the entire book. The cover assists the reader by granting the context needed in order to understand what’s going on in the interior. It compresses the amount of information needed on each page and eases reading comprehension and understanding.book02

The book features some wonderful examples of Information Design. The above spread compares and contrasts the composition of the acts of several movies by presenting them with colored bars. Sparse labels are only used to inform the viewer as to what is going on the movie. By using consistency to communicate efficiently with the reader, the book reduces the amount of work it needs to go thru in order to clearly compare and contrast data.

Info Design :: Blog Post #1

Information Design

Finding the optimal arrangement of information is something that designers always have to consider when trying to solve a problem. Unfortunately, achieving a layout that both looks good and communicates complex information is no simple task. A single graphic product must serve many masters- it, of course, has to look good, but that’s simply not enough when the goal of the piece might be to illustrate a complex process to an uninformed audience, or to communicate a large amount of information in a compact way.

Fortunately, there are ways to make this easier for us designers. I am beginning to think I might be very interested by information design, as the subject matter the designer often deals with in the average info design project is much more rigid than other sorts of communication the designer might have to engage in, since consumers and clients demand rapid ingestion and processing of information. This means that special care and tactics must be used when presenting large quantities of information, or when presenting information that could be better represented in visual means.

Killer Infographics

Killer Infographics, based out of Seattle, is a wonderful purveyor of successful information design. In addition to being champions of representing information in a visual capacity, they also make badass infographics. Here’s an infographic they created about expenditures in the film, The Wolf of Wall Street:

Retrieved from http://killerinfographics.com/project/first-world-problems-great-expenditures-in-the-wolf-of-wall-street

Click to enlarge. Retrieved from http://killerinfographics.com/project/first-world-problems-great-expenditures-in-the-wolf-of-wall-street

This infographic succeeds in many departments. It’s designed well, incorporating a consistent color scheme and illustration style that is reminiscent of the time period that The Wolf of Wall Street deals with. It’s also conceptually easy to grasp, since all it requires of the reader is to compare two points of data with each “X or Y” statement. The repetitive illustrations help readers establish equivalence and meaning thru comparison in a very immediate way.

The visual context of the poster allows readers to understand what the infographic is really talking about: Expensive things, and what they could have been put to use as instead. Ultimately, the infographic serves the client’s goals by getting viewers interested in the film, and at the end, the graphic invites viewers to watch the film on the provided service.

Let’s take a brief look at the other side of the information design universe: Pragmatic info design.

Monoprice Shipping Label

monoprice

Although massively different than the jazzy piece by Killer Infographics, the classic shipping label has to achieve communication with the viewer in a similar fashion. The designers (and perhaps engineers and administrators) did what they had to to make this label cheap, effective, and efficient, which I think they’ve achieved. Their logotype fits in well with the cheap black and white printing method, and the information, while difficult to represent visually, has been laid out carefully and precisely as to not confuse viewers and customers.

VisCom 3 :: Blog Post #5 :: Start with Why

This is a piece written for Vis Com 3 at Seattle Pacific University. We’ll be discussing the first six minutes or so of Simon Sinek’s TEDx talk, Start With Why.


In Summary

As designers, it’s our duty to go beyond the artifact and the what. Simon Sinek’s talk, Start with Why, does a good job of explaining a real world example of thinking beyond ‘what,’ and he does it by discussing Apple Computers. It’s important for us as designers to look at real world examples that don’t necessarily cross over with our industry in order to gain valuable insight into how to improve our own practice.

Sinek begins by explaining the Golden Circle, a technique used by orators and leaders with international acclaim.

Sinek describes how most people know what they do, how they do it, and why they do it. This can be illustrated as a circle with ‘why’ in the center, ‘how’ a rung up, and ‘what’ on the exterior, with most people thinking inwards from ‘what’ to ‘why.’

This way of looking of the Golden Circle, he claims, of artifact oriented process that focuses on the results of one’s actions. As he explains, this line of thought can be illustrated in a corporate mode: Apple could market their computers thusly:

We make fine computers. They are designed robustly, simply, and are a joy to use. We make them for consumers like you, who should by them.

Note the what, how, and why. Sounds like a reasonable pitch, right?

Sinek turns this on its head by asking why Apple is so successful in its sales of iPods and other devices, rather than Dell or another computer manufacturer. They’re all qualified to make high quality hardware, right?

This is where Sinek’s construction of the Golden Circle comes into play. Rather than going from ‘what’ to ‘why,’ great orators, companies, and charismatic people start with why and move outwards in the Golden Circle. Instead of the above pitch, the pitch becomes this:

We that in everything we do we should strive for simplicity and challenge the status quo. We design our computers and products simply, and if you believe what we do, you should buy one.

Sinek reveals the importance of framing your business or cause in this way:

People don’t buy what you do. They buy why you do it.

What to take away from this

Instead of presenting the ‘what’ of our conference, we should make sure we’re presenting the why. I wrote up a draft of what my project needs to aim for:

At Graphogrammetry, we believe that in the changing design landscape, it’s no longer possible for those in the design industry to sit in their box and tackle their problems. To work better together, designers, developers, creatives, and technical people need to look up from their desk and branch out. That’s why we’ve organized a conference that allows people to get a top-down view on what’s going on in their industry and in their office. We believe that those in the industry need to gain new skills. At Graphogrammetry, you will get insight on graphic design and design (“GRAPHO-” – Graphic design) and get the top down view on what’s going on at large in the design industry (“-GRAMMETRY” – From ‘Photogrammetry,’ aerial reconnaissance). Get on board with the bigger picture.