Jon Hung

While I was cleaning my room and flattening boxes for recycling, I noticed a neat feature on the shoe box of my most recently purchased pair of Keds. A tab in the cardboard box design that allows a person to easily flatten & recycle the box without tearing, cutting or pulling tape and staples.

It took a minute to notice the affordance and the proper interaction — I even ended up ripping one corner apart before noticing it — but once I learned it, I was amazed at the simplicity. Not as jaw-dropping as some other packaging design, but this attention to detail is micro-ingenuity that I admire.  This box design allow manufacturers to save on materials (tape, cardboard, metal staples) simply by leaning on the human mind to learn a new pattern for interaction.

frame·work – (frām’wûrk’) n.

1. A structure for supporting or enclosing something else, especially a skeletal support used as the basis for something being constructed.
2. An external work platform; a scaffold.
3. A fundamental structure, as for a written work.
4. A set of assumptions, concepts, values, and practices that constitutes a way of viewing reality.

The American Heritage® Dictionary of the English Language, Fourth Edition

Why does this Illustrator icon set deserve to be called a UI design framework? In the author’s words, it includes a GUI Library, icons set, and a styles library. Yes, it’s good looking… maybe even useful. But not a framework.

I’d like to think UI design is more than visual design, the skinning of an interface. But maybe what I’m thinking of is called interaction design… or is it user experience design…

Steve Portigal posted his excellent talk from a CHIFOO conference, “Skill Building for Design Innovators“.   His summary:

How can you broaden your sphere of influence within the field of human-computer interaction? You can start by building your muscles! Steve will take a look at some fundamental skills that underlie the creation and launch of innovative goods and services. He will discuss the personal skills that he considers to be “the muscles of innovators” and the ways you can build these important muscles, including noticing, understanding cultural context, maintaining exposure to pop culture, synthesizing, drawing, wordsmithing, listening, and prototyping. Along the way, he will demonstrate how improving these powerful skills will equip you to lead positive change. http://www.portigal.com/blog/skill-building-for-design-innovators-from-chifoo/

Working out is a great analogy for design skill-building.  “Hitting the gym” (can you say that phrase and not sound like a douche?) is necessary to keep your body and mind fit, alert, and ready to handle the challenges of any given day.  Also, from what little I know about weight-lifting, working out different muscles in a systematic & balanced way yields the best results, just like a designer benefits most by training & growing in a multifaceted way. Like a good trainer, Steve tells us to hit the gym with his recommended training regiments: taking a camera with you on stimulating walks; collecting items that only make sense in other cultures; wading in the shallows of pop culture; and even tweeting to help with wordsmithing (crafting copy and short labels).

There are three skills that I feel are part of a well-equipped designer toolkit, and could have been included in the talk.  The first is dialoguing, or facilitating.  A good designer finds a way to encourage an exchange of ideas on level ground, without egos involved.  Sometimes sharing opinions becomes personal, but a good designer should be able to brainstorm, let ideas compete, then devise a solution without weakening bonds of professional trust and without killing a team’s enthusiasm.  Imagining is another important skill, which is important to devise solutions and envision paths to completing them. This muscle can be exercised by day dreaming or doodling or sketching.  The last important skill is persuading.  A designer is a salesman of ideas; practice runs before presentations or doing talks in front of peers are good ways to exercise our skill of selling.

The problem

People, especially Americans, are wasting a ton of food. Figures vary from study to study, but something from 60-100 billion lbs of food is thrown in the trash. That food, or roughly one quarter of the 356 billion pounds of edible food available, costs the average family of four $1,039 annually (source) Not much of that waste is being recycled – only 2% to be exact (source). By addressing food waste, society steps closer to the goal of ending hunger. It is a very salient issue for me, since as a child my mom always hassled me when I wanted to leave the dinner table prematurely. “Better eat all your food on the plate; some starving person in Africa could eat it!” The guilt of throwing away food still resonates with me to this day.

The situation

How does all that food end up the trash? Every time I stock my fridge, some of the food I purchase will contribute to food waste. Committing to buying fresh groceries means food will spoil from forgetfulness. The problem is compounded by the fact that I live with three other individuals, who cram their groceries in the fridge, finding whatever arrangement that fits their food in the fridge. This situation creates a lot of food that gets hidden, only to be discovered when it is already too old to eat. Food that is getting old isn’t visible and I don’t do extensive enough reviews of my fridge to stay on top of it.

I want to commit to buying fresh food, but it is hard to stay vigilant about food waste. Remembering exactly what I bought and what needs to be eaten is not at the forefront of my mind at all times. Is there any way we can get a reminder?

Opportunity

The refrigerator is a machine that, despite its innovations in engineering & energy efficiency, still has plenty of opportunity for design improvements. After all, the core model has not changed since its inception: it is still a box we open, throw food in, and neglect until needed again. There is no communication or interaction between it and the rest of our life outside the kitchen. However, as a product that is intimately tied to our food consumption and waste, the refrigerator needs to play a greater role in mediating our behaviors.

Food waste will be better managed when the refrigerator is designed to communicate with us. STILL HERE!, it will tell us. There is food still here, there is no need to go to the supermarket. Throw me in a stir fry… and fast! Don’t go out to eat, I have plenty of leftovers!

Solutions

The Information Architect says,

Organize your fridge according to a lifespan system. Designate areas of your fridge for buckets of consumables that are fresh and/or have a short lifespan (check the expiration date). Make sure that food in that bucket is visible and easy to grab for immediate consumption. Put food with preservatives and long shelf lives (eggs, milk, etc) into less accessible areas of the fridge. Once the food is organized clearly in a way that creates awareness for food spoilage, behaviors will align with eating food before it goes bad

This requires significant change in our behavior since we tend to designate areas for food types, not according to time.

The product designer says,

Food products do a poor job of communicating how long food remains good & edible; clearer communication of spoilage, made visible through better package design, can inform the consumer when they need to eat the product. Expiration dates on objects like dairy, pre-packaged meat, and other processed foods should be displayed prominently and oriented towards the front of the package. Stickers on produce can inform the eater of its expect lifespan.

Another solution involves innovative packaging used to communicate spoilage through color information. Design a produce bag or box with ink that is sensitive to bacteria, odor, or age. Packages that are red in the fridge should be eaten soon or else!  Designing products in this way engenders a system of reviewing the contents of one’s fridge by color instead of looking at each individual item.

The interaction designer says,

It is remarkable that with so much powerful technology readily available in society, fridges are still ignorant devices. As I watch fridge users struggle with doing fridge inventory, I see an opportunity to create a HUD (heads-up display) on the outside of the fridge that communicates with storage devices in the fridge. Tupperware can be made smarter through user interaction (such as marking the date on leftovers with a digital pen) which can inform a system of food storage.

With simple user data inputs, information becomes available to the fridge: when food was stored, shelf-life of food, whether the food is a full-meal or an ingredient. The HUD on the outside of the fridge can then spit out recommendations – what to eat when, how to prepare it, what to throw out.

“Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”

-Eero Saarinen

A trend I have become skeptical about is designing donation systems as a means to receive badges and adornments (profile widgets). Recent events in Haiti have brought out huge humanitarian aid; Americans, despite being deep in a recession, are keeping pace with donations made during previous disasters. This is due in part to the creativity of humanitarian organizations in their donation campaigns that are leveraging technology and word of mouth to develop a new set of tools for motivating charity. We can now donate by text message, content providers have links to donate to the needy, and grassroots social networks spread messages about a cause at higher speeds than ever.

These are all great innovations. However, I am wary of a trend towards badges & other virtual assets to reward donors. For some donators, a badge prominently displayed on a social profile for all to acknowledge them as Mother Teresa reincarnated provides the requisite incentive that motivates giving to charity. (Fred Wilson sums up some of the reward systems that have benefited the Haitian crisis). I am equally skeptical towards people whose charity is motivated in this way, as I am towards designers who integrate these status symbols into their social systems. They are submitting to the deepest reaches of psychological egoism, tinting our actions with a self-serving spin, re-framing donation as an activity that demands acknowledgement and adoration by our peers and strangers. Social networking helps spread ideas, but when the main idea is that “I donated, I am awesome”, we are cheapening the act.

Is there a need for these symbols in the humanitarian space? Are organization failing to demonstrate that your money, charity, and actions are creating a better place, so they need to give you a virtual goodie to donate? Perhaps traditional donation methods that leverage the direness of the situation and empower the compassionate individual are failing and there is a need for these crappy incentives. I don’t think they are. Let us rely on the skills of the journalist, copywriter, photographer, and graphic designer to build bold and illustrative campaigns that draw attention to the situation on the ground & open the hearts of the reader.

I still believe in coming up with new ways, even social ways, to increase donations. But I think the pat-you-on-the-back badges is moving in the wrong direction. Here are some alternatives for low-cost incentives to motivate charitable action:
1) Phone call or letter written by someone you’ve helped
2) Unlocked premium content
3) Tax returns
4) Removing ads and banners

Services can also be re-designed to allow for donating in small amounts. (A creative re-use of Bank of America’s “Keep The Change” campaign is one example)

Although badges might be increasing donations, we are also increasing narcissism and the act of donating for self-interest. We should design for compassion, which unlike virtual assets, has lasting benefits for society.

Here’s a list of takeaways from the presentation:

• There were several connections between architecture and social design. Both create an ecosystem (one physical, the other virtual) which people act within and on.  The designer’s role is to “pave the cowpaths” – chart out the area with paths for its intended use.
• Because of the duplicity of names, users require more complex forms of identification besides name. This can be a picture, badges, biographical info, etc.
• talk like a human. Designing a social interface should be different than designing a bank transaction. No robo-speak allowed.
• Related to watching how you speak, designers should consider the difference between “me” and “you”.  In the world of social media, propriety of information is still a gray area which one should be sensitive to.
• Competition can be good, if you want to foster competition, otherwise people will game the system for no purpose besides being on top.
• Pay attention to the organic use of your social system, e.g. Friendster failure– fake profiles emerged because people wanted to create associations around things other than real people.
• Related to fake profiles, social media should refer to some social object, an “aboutness”.  Once a user creates a profile, then what?
• Important questions: What is going to be the behavioral norm? What about your power user? Your system has to accomodate the user who never adjusts anything from the defaults but also the user who wants to explore every last feature.
• Humans are unpredictable.

Prototyping is the expression of a designer’s thoughts: a tangible, testable reification of a design idea. Effective prototyping follows some of the same principles of effective communication.  First, at the core is a good idea; second, the best tool is often the one we feel comfort using; and third, the final product depends on what the audience wants to hear.

The prototyping process must start with an idea.  Choosing a tool is secondary.  Despite it serving as the ideas’ catalyst, the tool is invisible in the creative act.  We don’t marvel at DaVinci’s paintbrush or Hemingway’s typewriter.  In the end its the idea or the creation that the client, user or audience appreciates.  This is why much of the work in design comes in ideation, before diving into the prototyping tools.  Be true to the idea before choosing the tool.  It is like figuring out what you want to say before how you want to say it.

After the idea is understood, its best to pick a tool that you’re familiar with.  Features can distract from achieving goals; sometimes I prefer my toy camera over the dSLR, use notepad over Microsoft word.  Pick the tool that gets the idea across with the least amount of trouble, then supplement it with your presentation and pitch.  I got the summer to use Fireworks, but because of my inexperience using the software, I could only produce static mock-ups.  These could express core ideas but could not stand on their own; I had to supplement the proposal with a design write-up and a few team presentations.  Effective prototyping involves knowing the deliverable’s limitations, and sometimes that involves letting the design speak from your own lips.

In a recent UIE podcast, Todd Zaki Wafel performed research on prototyping practices and discovered that some people use Excel for prototyping, simply because they are familiar with the software.  Comfort matters a great deal.  A post on Konigi sees the same take-away:

One of the things I took away from this talk was that the best prototyping tool is the one that your most familiar with and know how to exploit to communicate the ideas.

I would add that besides comfort with the tool, another factor that will help you make your prototyping decisions is understanding what the audience expects.  Communications 101: sometimes it doesn’t matter what you say, but how you say it.  (yes, I know this contradicts an earlier statement) Consider who is going to consume it and what it will be used for; this will dictate what tools or strategies will best communicate your design.  During the summer my audience was a UX team so the fidelity of the prototype was not important; they were as comfortable reading sketches as they were html prototypes.  This decision changes once you know a prototype will be seen by end users.

When it comes to choosing a tool, there are a number of alternatives out on the market, and no two experts will pick the same software or methodology.  One can get bogged down, as I do, comparing Axure versus Fireworks or choosing the best prototyping strategy.  When this slowdown happens, its best to remember that prototyping is like communication.

This past week I underwent my first ever design review. It was painful. I have had friends lament about design critique in fields such as photography, architecture, and art practice. They have shared with me the horrors of the experience, but words never match the feeling of being there, in the hot seat. On Friday I received a critique struck to the core of my design: more attention should have been paid to research, before visual design. Because of the lack of thorough user research, the design lacked an empathy towards the user’s experience. It was stressful, miserable, though not without reward.

What did I learn? Two lessons for surviving the next design critique: be prepared to answer “why is this good?” with research, and ask for reviews early & often.

1) Take the audience through your research.
From the Cooper Journal: “It’s pretty common to hear a skeptical Cooper designer begin a critique with some variant of the question, “Why is that good?” Design is the conclusion to an argument, and like any other arguments it relies on evidence to lead the audience through your reasoning. My critique might not have been so bad had I walked the reviewers through my research, guiding them through the path I had taken to reach my design. Research is the answer to “Why is that good?”

2) Work with the team to ask for critiques that are frequent & honest.
I could be upset by the fact that a lot of effort and struggle went into creating a design that missed the mark, but I’m not. What I am upset by is the fact that I did not seek out this line of communication before. Received early in the design project lifecycle, this type of feedback could have prevented me from missing the mark.

I feel frustrated by my inexperience in design, my ability to fall privy to mistakes & poor choices. I know that studying cognitive psychology doesn’t exactly prepare me for this type of work, or for working within a corporation, and I’m trying to remember that I’m only at intern level. Still, I expect more from myself. But I am not daunted, and intend to improve. Knowing what design review is like & surviving, I know I can handle the truth & that is an empowering thing.

Pandora’s box is a story about a tremendous power contained in an innocuous-looking vessel. In one version of the tale, set in Ancient China, a careless spirit misplaces the relic, where it spends hundreds of years hidden in a cave. During this time, the box’s appearance becomes battered, and its decorations grow worn. People walk by, thinking nothing of the plain-looking box, but a peasant, unaware of the chaos within, decides to open it up and in so doing, releases pandemonium.

This ancient story is set in an age of magic, yet the idea of the plain yet powerful object pervades our society today. Old magic is replaced by modern machinery, a metaphor for design & technology. In today’s world, technology is a pandemonium of complex computations & design is the façade that masks it. It is no wonder that the myth shares names with a powerful music player with a deceivingly simple design.

Simplicity +

Pandora Radio is a music player whose simple appearance does not reveal the fact that it unleashes a journey through sound. Its interface is no more than a text box and a few buttons. It is a central example of good design, taking complex information (libraries of music) and simplifying it (into categories & associations). Pandora changes an involved process (choosing new music you like) into one that is easy and enjoyable (provide familiar inputs and receive novel outputs). While our music selection gains variety and becomes more complicated, Pandora makes the process of exploring music easier than ever, requiring less than a click every half hour to make the thing do its magic.

Complexity =

Behind the scenes, it’s driven by a powerful database of audio associations, The Music Genome Project, the power hidden in Pandora’s box. Harnessing the Genome, marketers have caught on to the idea of custom playlists. On Pandora today, a listener can create a Nike running playlist, or a Bacardi dancehall list. Branding professionals have a history of seizing typography, color, logo & shape, buying up areas of our perception like a gold- miner laying down claims. With Pandora we see a new form of brand identity emerging, which will be based on a sound, intensity, pitch, wavelength.

Instead of offering branded playlists, I’d rather see Pandora offer personal playlists created from their genome. Their interface could be supplemented by some means of adjusting the musical qualities of a playlist.  This would, for example enable a guitar enthusiast to take a Jimi Hendrix playlist and max it out on the “bleeding guitar solo” quality. Advanced users would mix & match these qualities to create custom channels, based on their mood & preference.

Design that changes our lives

This would allow the plain-looking box to gain notice not only from marketers, but also from music enthusiasts. More than a marketing tool, Pandora is a navigation tool that helps us meander the complex audio landscape. Listeners can passively building musical repertoire, becoming “educated enthusiasts” while maintaining their busy lives. The experience can be more instructive than a few hours of digging through a record store, without all the digging.  With a few improvements, Pandora will enhance the way listeners interact with music, leaving an imprint on the way we browse, discover, and catalog the sounds we love.

I’m thinking about buying the yearly plan. Not because I intend to exceed their monthly limit, or even to get the cool desktop app. I am on the verge of paying for this free service because I now understand the importance of supporting good design. If I’m hoping to garner wages and make a living for creating design, I have to support those that are doing the same thing.

Cheers pandora!