Serenastyle Blog

When I spend 10+ hours a day sitting in a cubicle or standing on the muni, I make sure I'm never home on the weekends, rain or shine fog or foggier. In fact, I barely even get to cook dinner, let alone eat a decent meal that's not take-out. As a result, there are things I once enjoyed that I no longer do — like blogging.

However, my body has decided to break out in hives after white river rafting on Friday, so I've come home to my parents' to lounge around in a college tee, enjoy the Southeast Bay sunshine, and spend quality time practicing Gilbert's "dolce far niente" — in other words, eat popcorn and blog.

Considering that such sweet idleness has become a luxury, I figured I might as well share some insights I've gained over the last few years as a web and graphic designer and clarify some questions internet lurkers muster up the courage to email me. Within the past year (as some background), I've worked with three main clients and taken on a few more short-term (1-2 month-long) projects, before deciding to sign-on as an employee in April for one company I really enjoyed working for (in-house since September). Since that time, I've illustrated a Top 3 word game on the iPad (and dabbled in a few other iPhone apps), designed and coded up well over 50 landing pages and websites, and done seven book talks (unrelated to design but equally enlightening). And for the curious, I’m currently spending all my time illustrating an educational iPad wonderland/gameworld set in the woods.

1. Design is an iterative process and I never know how much I suck until there are considerable changes. With significant improvements, there are previous iterations to compare to, and that’s when the “oh man, that really was ugly...” kicks in. You see, I think designers are blinded by their own pride and dedication, just as parents always think their babies are the cutiest/prettiest ones in the world. Be able to let go of your first design (which you’ve put all your time and energy into) if someone else says it can do better. This is one of the most humbling experiences a designer can learn to embrace and there is always room for improvement.

2. There's more to design than aesthetics. Although you can (and should) incorporate self-expression, design isn't art. In fact, there are probably more constraints than there is room to improvise. Trying to imagine the user flow of an application that doesn’t yet exist can be difficult, which is why you have to build a version and just test it then tweak it. A/B test your landing pages over and over again and you’ll realize how important copy-writing, placement of images, even button size and color are to your design. When unsure, I like to surf WhichTestWon and find justifications for why a page or form should be designed in such a way. I learn the most surprising things from A/B tests results.

3. Designers should try coding up their designs, otherwise, they're just artists. One of the biggest problems I see when people come to me with their "start-up's mockup idea" (asking for feedback) is that, whoever is visualizing all the Photoshop flares and bubble gloss effects doesn't understand what’s feasible with or without CSS and how to optimize a website. They even imagine buttons and tabs as images, which is usually unnecessary and tacky. If only the designer knew that you could achieve rounded corners, box and text shadows, gradients and transitions with just CSS, he'd design the PSD template more practically, and make questions like, "Is this layout supposed to stretch full-width or be bounded in a box?" more clear.

4. Acquiring the "web 2.0 look" (or are we at 3.0?) takes a lot of time seeing and proactively searching for new inspiration. It also requires learning the newest CSS3/HTML5 tricks and keeping up-to-date. Just as music tastes are acquired through experience, I feel like design is the same way. When someone says "I like his style", perhaps she means I like his visual acumen and the visual database he's built up for himself to draw inspiration from. 1999 designers have a much different aesthetic than 2009 designers, and different audiences (age-wise and globally) have different notions of what “looks good.” I make sure I read up on Smashing Magazine's articles and browse through sites like Awwwards and CSSline, every once in a while. You'll soon realize that something "fresh" looks really appealing (a new font from the Google font directory, perhaps? a neat new jquery trick?) and something "old" or just overused starts to look boring. Something "fresh yet familiar" seems comforting and trustworthy (and many clients like to request that a site looks like Successful Startup A mashed with Awesome Startup B — neither of which will be Digg). Web design is constantly changing.

5. Never assume everyone will understand what you already know and adopt as second nature. This is particularly true for UI/UX design. For example, we designed the Word Seek start screen to show four tiles in a row (forming a bar close to the bottom), spelling out "P-L-A-Y", with a translucent right arrow overlayed. To start the game, you swipe from left to right, just as you would unlock any Apple mobile device — but many people don't make this connection and email us asking for help just to start the game. It's our fault, not theirs. As another example, I once designed a single-page layout with visually separate sections for "about", "contact", etc. and a navigation bar on the top that jumped to each section. My boss replied with, "Can we repeat the navigation bar on each page? It's kind of hard to figure out how to go back..." — I guess scrolling up or down wasn't as intuitive as I thought.

That's it for now! Time to play with my dog, whom I don't see much anymore. (6. Get off your ass from time to time!)

Part of Amit's argument is that grad schools don't prepare students (without a prior design education) well enough; while I do have an architecture background from Cal, I still dream of going back to grad school one day for interaction design or product design, considering that everything I do now (A/B testing for websites, optimizing conversions, making mobile applications intuitive...) — I learned by experimentation at work (and has nothing to do with CAD or model-making).

So my question is, should I even be considering grad school? If so, would studying abroad be better than picking a top 5 program in the US?

Lately, I've been designing a lot of web pages for A/B testing to optimize conversions for a media client, so it has been interesting to learn what works and what doesn't. For example, seemingly inconsequential tweaks like shortening form fields, changing button colors, and adding lock icons turn out to be surprisingly effective. Crazy.

A few days ago, Digital Scientists wrote up a blog post detailing their top 50 optimization tips, many of which I found particularly useful. Here are a few that may apply to other user interface designers:

• Perform remote usability testing by tracking user mouse movements on pages to understand user behavior with Userfly
• Install real-time tracking to track campaigns as they happen with Chartbeat or Clicky
• Evaluate and optimize page design by asking users to recall their experience with FiveSecondTest
• Utilize internal search to understand user intent and navigational efficiency of your site
• Track your website visitors and their behavior in real-time
• Perform cross-browser testing to find your bugs before your users do using Litmus
  Hmm, Litmus seems to test email campaigns only; I use Adobe BrowserLab to test what my sites look like across all browsers.
• Design to sell
  Of those eight Smashing Mag tips, I really like #2: Prevent choice paralysis (highlight one option) and find #8: The Gutenberg rule — place action item in bottom right — interesting.
• Choose relevant colors as they affect purchases/conversions
  Perhaps the reason why so many social media sites are blue (or have blue logos) is because the color creates a sense of trust and security. (I'm still waiting for a huge privacy lawsuit debatable to unfold over web 2.0, lol.)
• Use breadcrumb lists to give users more navigation convenience (for large hierarchical sites, like e-commerce sites)

Even something as inconsequential as creating entertaining 404 pages or changing the color of visited links seem to help! and the most shocking? The three-click rule is false.

Thanks for all the pointers and resources, Digital Scientists!

I started reading In the Bubble: Designing in a Complex World by John Thackara, and half way through the first chapter, I thought to myself, "I gotta share this content, because well shit, we're screwed." That is if we don't rethink the way we make products and live our lives.

The internet did not lead to a lighter economy and a cleaner environment as expected. We supposed that an information society would replace the industrial one, when in fact, we've only added to it. When computers could talk to printers, paper use in offices rose eightfold after we thought we had "gone digital".

The fabrication of a basic memory chip plus the lifespan use of a computer eats up 800 times the chip's weight in fossil fuel. On top of that, thousands of toxic chemicals are used in the manufacturing process… and we're just talking about a tiny chip. Many other electronic components require the use of high-grade minerals that can only be obtained through major mining operations and energy-intensive transformation processes. To put this in perspective, "The amount of waste matter generated in the manufacture of a single laptop computer is close to four thousand times the weight on your lap (Thackara, 11)" — and my "green, Apple product" lasts for at most, three years before becoming permanent waste. Who's looking forward to the new "light-weight" Macbook Air?

Information networks don't just use a lot of stuff, they also consume a lot of energy. When this book was published in 2005 (so say, written in 2004), the author noted that "internet computing will soon consume as much power as the entire U.S. economy did in 2001"… I'm pretty sure we're way past three trillion kilowatt hours now. He continues, "A single server farm consumes the same amount of energy as a city the size of Honolulu"…well whatever social network existed then probably doesn't even use a tiny fraction of what Facebook consumes today. If fact, I heard #JustinBieber has his own dedicated server at Twitter.

The sustainability challenge is a significant design issue since eighty percent of a product, service, or system's environmental impact is determined at the design stage. Therefore, designers must think innovatively to change processes behind products and resources used (since we're already using Earth's resources way faster than we're replacing them).

Another important new task of design is to make these behaviors and changes within systems "intelligible"; we need to understand how they work, what stimulates them, why they change. We need to foster ecological and systems literacies since changing attitudes isn't just about enhancing perceptions. If I knew I was carrying a "million pound backpack", wasting roughly one million pounds of matter and energy per year, I'd want to save my posture and dignity by understanding why and knowing how to lighten the load.

Thackara points out that rational argument and scary figures alone aren't going to make us change our old ways; the jump to a sustainable economy has to be a result of a cultural, not technological (and not just design), transformation. In 2000 at the Word's Fair in Hannover, Germany, Architect William McDonough outlined a lightness-based industrial culture better known as the "Hannover Principles":

1. Insist on rights of humanity and nature to coexist
2. Recognize interdependence
3. Respect relationships between spirit and matter
4. Accept responsibility for the consequences of design
5. Create safe objects of long-term value
6. Eliminate the concept of waste
7. Reply on natural energy flows
8. Understand the limitations of design
9. Seek constant improvement by sharing knowledge

As a start, I think I will focus on #4 and 9: accepting responsibility as a designer and therefore creating only useful products (not junk) and fixing whatever can be better; and sharing whatever I read and learn with others :). (I've only annotated chapter one so far!)

I recently just finished reading Made to Stick, a book illustrating what makes ideas memorable. According to the authors, Chip and Dan Heath, there are six principles of successful ideas embodied in the acronym "SUCCESs": Simple, Unexpected, Concrete, Credible, Emotional — and told in Story form. If ideas can be tailored to be more creative and effective, so can designs, right? And while a template may seem confining for designers, it makes sense to work with guidelines that have made other ideas succeed over time... so I've outlined the six principles below and applied them to design.

To start off, let's take the iPhone as an example. Is it simple? Yes, it has one button. Unexpected? A few years ago, I would have never imagined checking e-mail, navigating via GPS, playing music, taking photos all with one hand-held device... and now it has video conferencing. Concrete? It's a phone. Is there anything abstract or difficult to understand about it? Not really. As for credibility, Apple sold 1.7 million iPhone 4's in just three days. When I first got my iPhone, I was ecstatic. When I can't find my phone, I panic. Every time a new model comes out, my 3G feels antiquated and then I turn green with envy. It's amazing (and unnerving) how one device can influence my emotions so strongly. So what's the story? The iPhone is "a revolutionary product that changes everything" — and blew up the wireless industry. (If you doubt Steve Jobs' storytelling rhetoric, listen to his iPad keynote.)

While the book argues that a successfully sticky idea embodies all six principles (like a sticky Apple product), I'm suggesting that even applying one "rule" can make a design that much more effective. Let's break it down.

SIMPLE
When given too many choices, people suffer from decision paralysis. When a remote has too many buttons, people can no longer figure out how to change the channel. As the book clarifies, simplifying an idea does not equate "dumbing down" — it means focusing on the core concept and then making everything compact. Likewise, "A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away" — when all there is is the essential and compact core. 

Just as news reporters spend most of their time tailoring the short but informative lead, designers should spend the majority of their time perfecting what is essential to say, a product, and skimp on the extra buttons. Jeff Hawkins wanted the Palm to be simple, so he carried around a wooden block the size of the Palm, which "resonated with the simple technological goals of the product" and reminded everyone that extra features would not fit. According to IDEO designer, Tom Kelley, the real barrier to the initial PDAs was the idea that the gadget had to do nearly everything. 

Similarly, minimalist websites tend to look the best and minimize confusion. What is core? The body content. What else is essential? The header (with navigation), and maybe a footer. That's it. Online galleries like Minimal Exhibit and Siiimple showcase clean and beautiful websites for those looking for visual inspiration.

UNEXPECTED
Since we can't demand attention, we must attract it by breaking a pattern (since humans adapt quickly to consistent patterns). Sticky ideas tend to provoke two essential emotions: surprise (to jolt us to attention) and interest (to keep our attention). Second, for us to be curious about something, there must be knowledge gaps that we try to fill in. Story ends with a cliffhanger. What happens in the next chapter or episode?! 

Successful poster ads make me look for more info online. Commercial spots that don't bore me end on an unexpected note (think Super Bowl ads). As an example given in the book, an Ad Council campaign depicts a happy family cruising in a minivan — only to end in a terrifying collision. This ad is unexpected because it doesn't "behave" the way car commercials are supposed to (pickups climbing boulders, sports cars zipping through windy roads, minivans dropping kids off at soccer practice... where people don't die). Because this campaign is memorable, people remember to buckle up and "friends don't let friends drive drunk".

In another case study, Masaru Ibuka, Sony's lead technologist, had a vision for transistor radios...in 1953. To make the core message: "the dream of a transistor radio" memorable and unexpected, Ibuka proposed to his team a "pocketable radio". A portable radio was a preposterous idea during a time when radios were pieces of furniture constructed by cabinetmakers and "Made in Japan" warned of poor workmanship. Ibuka's vision was so effective that in just four years, Sony went from 50 to 1,200 people. In March 1957, Sony released the TR-55, the world's first pocketable transistor radio, which placed Sony on the world map. 

Milan Design Week products that attract crowds and receive ample blog coverage are always those that make people do a double-take. How does that chair stand up? Is that lamp even attached to its base? What is that?

When surfing the web meant using sites like Lycos, Hotbot, and Infoseek, Google was an unexpected search engine. People expect to see hoards of information — not one search bar on a blank page. Now "google" is a verb synonymous with "search".

CONCRETE
While the book talks about ideas, I'm relating these principles to design, so "concrete" seems a bit redundant for tangible products. Instead, I'll replace it with "clarity". While ideas must be concrete and executable, designs must be clear in order to be effective.

As unexpected as a commercial can be, it's unsuccessful if I can't tell what it's advertising. As much attention as a sculptural object gets at a show, it might not sell to the masses if it's not clearly functional. Take Philippe Starck's iconic Juicy Salif, for example. It's famous...but does it actually squeeze lemons? At nearly a foot tall, I'm not sure if I'd find it ergonomically fit for use — or worth the $75 price tag.

As for logos and websites, they should instinctively tell me what the company does or at least what industry the company falls under. An "interpretive" design that is too abstract and not concrete enough might elicit questions and capture someone's interest briefly... but not garner users and clients. 

CREDIBLE
It's human nature to believe in ideas coming from "authorities": parents, teachers, Nobel laureates. Likewise, it's easier for a client to trust a designer who has published a book, spoken at major conferences, and amassed a loyal Twitter following. Who did I research for inspiration during architecture school? Pritzker prize winners. Who do I turn to for camera-related questions? My friends who are professional wedding photographers.

However, an idea or design can also be internally credible. Ideas acquire a good deal of their credibility and effect from details. Urban legends become more believable when there are localized details. Jurors make different judgments based on vivid details, which boost the credibility of an argument. Similarly, the details in and of a product also matter. 

For example, Apple markets the Macbooks as the "industry's greenest notebooks" for having Mercury free LCDs, arsenic-free display glass, PVC-free cables, a unibody aluminum casing, and so on. According to Greenpeace International, Apple ranks fifth this year as a "green electronic manufacturer". "Every MacBook Pro model is Energy Star 5.0 compliant, which means it meets the government standard for energy efficiency. All models have also earned EPEAT Gold status, the highest standard for environmental performance in the electronics industry. And every MacBook Pro is shipped in packaging that’s 34 to 41 percent smaller than the original generation. That translates to fewer trees used for boxes and less fuel used to transport more systems on fewer planes. And at the end of its long, productive life, you can recycle almost all of your MacBook Pro (straight from the product page)." Now that is concrete and credible.

According to the book, another type of credibility boost is a "testable credential". External credibility is having Steve Jobs praise Apple products; internal credibility is being toxic free. Another source of credibility is the audience. The audience can test out Apple products at the store and decide on their own if the iPad really is a "magical, beautiful, phenomenal" product. Before I buy a camera online (which is cheaper), I prefer to test one out in a store and see how it feels in my hands. Before I pick up an Ikea chair from the inventory shelves, I'm likely to sit in an assembled one first. Well designed products stand consumer tests... and the test of time (think Barcelona Chair...1929).

EMOTIONAL
Based on intuition, one might think that an "emotional design" elicits awestruck admiration for being evocative and beautiful — yes, of course. But an emotionally powerful idea uses associations to create empathy and appeals to self-interest and identity. Similarly, I think products can actually do the same (and bring to light our superficial nature). I prefer Apple computers because they appeal to my left-handedness. The mouse isn't grooved to fit a right-handed grip and the "X" is on the upper left-hand corner of every window. As a designer, I can appreciate the ISP and LED-backlit display, which illuminates my graphic designs and keeps them looking consistent from various angles. 

Because I sit in front of a computer all day and experience pretty severe eye-strain, I've been dying for a pair of Gunnar Optiks... except the yellow tint was too geeky-looking for me. Then Gunnar came out with a new clear tint: "The CRySTALLINE lens tint and coating formula is designed specifically for the graphic designer, video/film editor, or creative visual artist that requires an equally balanced color spectrum. If your profession does not allow for a shift towards the warmer part of the color spectrum...ie. your tasks require you to design or work in true color, then this lens option is for you." If only I knew of a retailer nearby where I could try on a pair, I would be sporting the ultimate nerd look already.

While in New York, I walked all the way from Chinatown to SoHo — just to visit a tiny shoe boutique called United Nude. (The only other boutiques are in London and Shanghai, although there are carriers all over the world. I wanted to see the actual store.) So what's so special about United Nude? 1. It was started by Dutch architect, Rem D. Koolhaas (the nephew of the Rem Koolhaas) and Galahad Clark (the seventh generation of Clarks, my favorite comfort shoe brand). 2. The shoes are designed architecturally (from the evolution of parti diagrams) and pay homage to famous architects and their iconic chairs (e.g. the Eamz and Mobius). Why do these facts matter to me? Because I went to architecture school where professors praised the hell out of OMA's Seattle Public Library — and I thought I'd become a product designer one day, if not an architect. Emotional connections are powerfully effective.

COMPELLING STORY
Stories provide simulation (knowledge about how to act) and inspiration (motivation to act). So while credible ideas make people believe and emotional ideas make people care, the right stories make people act. While I had some difficulty relating this last principle to design, I remembered the story of Moleskine — "The Legendary Notebook": 

"Moleskine® notebook is the heir and successor to the legendary notebook used by artists and thinkers over the past two centuries: among them Vincent van Gogh, Pablo Picasso, Ernest Hemingway, and Bruce Chatwin. A simple black rectangle with rounded corners, an elastic page-holder, and an internal expandable pocket: a nameless object with a spare perfection all its own, produced for over a century by a small French bookbinder that supplied the stationery shops of Paris, where the artistic and literary avant-gardes of the world browsed and bought them. A trusted and handy travel companion, the notebook held invaluable sketches, notes, stories, and ideas that would one day become famous paintings or the pages of beloved books (source)."

Here, we have a very concrete description of what the Moleskine notebook has to look like: a black, rounded rectangle with a stretchy band and expandable pocket. The design should not stray too far from this description. In fact, it should look exactly like it did "for over a century in Paris". What is this product supposed to do? Carry sketches, notes, stories, and ideas. Why is this product credible? Famous artists and authors used the exact same generic-looking notebooks!

The story goes on, and I'm sure Moleskine hired a copywriter to make up most of it, but it's effective. The full-length story is printed in multiple languages on a tiny pamphlet slipped into the back pocket of every Moleskine notebook, and as much eye-rolling as it procures, most people buy into the concept that Moleskine is the one and only journal for hipster artists. I own volumes.

While a contrived story can help us believe in a product, a background story can also help us design something more tailored and meaningful. Since I've already introduced Rem Koolhaas, I'll talk about him some more. In 1994, a man in a wheelchair approached the architect and said, "Contrary to what you might think, I don't want a simple house; I want a very complex house — because it will determine my world."

The background story is this: A wealthy, married couple with three children lived in an old house in the beautiful city of Bordeaux, France.  For many years, the family thought of building a new home and planned how it would look like. Then one day, the dad got into a car accident and almost lost his life. Bound to a wheelchair in an old house in an ancient city, the dad wanted a new house — a new world completely different from what he had planned for initially.

With a lot of money left even after medical expenses and what not, the couple bought a hill with a panoramic view of the city and hired Koolhaas to design "a very complex house". Since that's what they asked for, that's what Koolhaas gave them.

Instead of designing a house with one floor (suitable for a wheelchair), Koolhaas designed three floors...linked together with one giant elevator platform, which simultaneously serves as a transforming room. The platform is part of the kitchen when it is on the ground floor, part of the living room on the second floor, and part of the master bedroom on the top floor — the dad's world changes based upon his needs.

The top floor rests on three legs, one of which encapsulates the spiral staircase and is deliberately placed off-centered (subtle manifestation of the owner's instability). However, it is counter-balanced by a steel beam over the house pulling on a cable tension (a foil for the dad's life also depending on a cable). This arrangement allows the middle floor to have an uninterrupted view of the surrounding landscape, blending nature and interior and expanding the inhabitants' world. If it weren't for the background story, Koolhaas would not have designed this famous residence in such a manner. Stories give designers insight and inspiration, which direct them how to act creatively.

___________

So there you have it, a recipe for SUCCESs — which I hopefully told with simple clarity and concrete, credible examples, made memorable with unexpected and emotional stories!

Can you think of any designs (products, buildings, websites...) not yet mentioned that embody quite a few of these principles? (Bonus points for you if you can name one with all six!)