Last week I had a chance to attend Disrupting Markets By Design. What I expected was musings on design as a competitive advantage accompanied by Apple anecdotes. Or maybe a case for lean thinking for designers and the need to fail fast by using quantitative research methods. What I got instead was a compelling and nuanced review of the importance of empathy.
It was a full house of design thinkers with a Silicon Valley twist. Serial Entrepreneurs. Voice-activation specialists. Tech wunderkinds. An evening of passionate discussion about the future of interfaces.
“I felt like I was back in college — the good parts of college,” Strava designer Peter Duyan told me afterwards.
Peter was crammed in this room of college-like discourse — designed for 35, now seating over 60 — because of a blog post I wrote that went unexpectedly viral.
I had proposed that “the best interface is no interface.” That we should focus on experiences and problems, not on screens. That UX is not UI. Two days after it was published, it was shared more on Twitter than anything ever written on The Cooper Journal, Core77 or Designer Observer. A week later, a Breaking Development podcast. Two weeks, a popular Branch discussion. A month, top ten on Hacker News again. All surprising, flattering, amazing. And that evening, a conversation.
In the spirit of discourse, special guest and design legend Don Norman started the evening with an entertaining retort: “They made a big mistake when they invited me.” (Watch it above, or listen to it here. And if you haven’t read his books, you should).
There's innumerable ways to arrive at a state where a company's product offerings present a frustrating or broken user experience. Few organizations can't realistically throw everything away and start over. If it's broken, you need a strategy that allows you to iterate toward a better user experience. Cooper's Stefan Klocek outlines one approach Cooper uses with clients to improve user experience across an organization's suite of products.
From the article:
Unless you’re developing completely new products at a startup, you likely work in an organization that has accumulated years of legacy design and development in its products. Even if the product you’re working on is brand spanking new, your organization will eventually need to figure out how to unify the whole product experience, either by bringing the old products up to par with the new or by bringing your new efforts in line with existing ones. A fragmented product portfolio sometimes leads to an overall broken user experience.
Understanding an organization and its users and designing the right interaction and visual system take exceptional effort. You also need to communicate that system to teams that have already produced work that doesn’t align with it. This isn’t easy work. In this article, we’ll introduce you to a strategy for fixing the broken experience that starts with surface improvements, goes progressively deeper into structural issues and ends with a big organizational shift.
Read the rest of the article, meet The Hierarchy of Effort (pictured below), and enjoy the discussion over at Smashing Magazine.
This series of posts and the subsequent Cooper PUB talk on October 25th are meant to get designers thinking about new approaches to their everyday workflow. The PUB is sold out, but we invite remote participation through Branch on the same evening. To be invited to Branch, add your name to the waitlist here and we’ll send you an invitation.
Part 2: Don't Photoshop 'til you drop
Part 3: Start with a solid foundation
When computers and digital technology came onto the scene, a design revolution was born. Thanks to the advantages of the new digital workstream, the possibilities for our creativity expanded exponentially. But, given the complexity of learning the new programs that are available to us, many of us now find ourselves locked into a single toolset (read: Photoshop), afraid to try something different. As a result, our workflows are inefficient and not oriented to working effectively in teams.
The goal is to be creative
A well designed workflow cuts down your stress and increases your focus, allowing more time for what you want to do most: be creative.
Creativity starts with ideas.
The creative process is more than just finding the right tool for the job; it’s also about finding the best approach to being creative. Starting in the computer pushes designers down the path of putting the pixel first and the concept second. Instead, I find paper to be the best way to explore and develop a range of ideas.
A quick exercise I use to the get the juices flowing is to start sketching ideas in quick 5 minute sprints. I focus on generating as many different ideas as quickly as possible, then expand on those ideas. This is best done on paper so you think about the concept rather than the design.
Sketching is a critical part of your workflow so don’t ignore it. Drawing stencils play a big part of my process and are instrumental in helping me get ideas down on paper. I especially find circles, straighlings, curvers, and squares useful, which you can find at any local art store. If you’re a mobile application designer, check out the UI Stencils for iphone, android, and w8 interfaces. You’ll thank me later.
Finding inspiration
As an illustration major in college, my professor implored his students to start a reference library of interesting photos, textures, colors, and whatever else we found interesting. The idea was to create a massive library of photo references that you could refer back to if you needed to draw a sports car, a pine tree, or a leather jacket for example.
Growing as a designer means keeping up with the ever-shifting trends and visual innovations out there in the world, and a library of inspiration can be a useful tool to stockpile inspirational art and help to spark your creativity.
Inspired efficiency
As a visual designer, I've extended the idea of maintaining a reference library and started an asset library of Photoshop files, Fireworks files, icons, vectors, textures, brushes, swatches, fonts and whatever else I find useful. The idea is to curate a collection of elements so that you spend less time searching in the future.
Just about anything can inspire visual creativity. Don't just limit yourself to obvious things like icons or UI elements; branch out and explore non-digital works like paintings and illustrations. Over the years I've collected thousands of interesting and inspiring artifacts, including fonts, photographs, textures, color palettes, and even code snippets.
Here are some places I go when I want to find new material for my library:
www.behance.net
www.pinterest.com
www.ffffound.com
www.dribbble.com
www.thebestdesigns.com
www.losttype.com/browse
From thenextweb.com: 97 places to find design inspiration
Tools of the trade
If you’re looking to start your own digital asset library, I recommend giving Pixa App a try. It’s a promising new application for maintaining an asset library. Pixa supports all the file types I use as a designer: Photoshop, Illustration, EPS, PDF and Fireworks files. Additionally, the fact that Pixa works with dropbox makes it an ideal tool for sharing assets with other team members.
As my collection grew, however, it became increasingly difficult to maintain it and keep it useful. Enter Evernote. Evernote excels at nearly everything I was looking for in a digital asset management application: it makes content collection, tagging, and sharing a snap. But Evernote's secret awesomeness is in search: it can instantly find text not only in tags, titles, and notes, but also, using very accurate OCR, within the images themselves.
Tell us what you think
I hope your take away from this post is that understanding your workflow is just as important as understanding your tools. The approaches I’ve shared are simple ones, but they’ve made a big difference in my own design process. Give them a try, and share your favorite tools and methods for working smarter, not harder, in the comments or on the Cooper PUB Facebook Page. And, don’t forget to add your name to the waitlist if you’d like to be part of the Cooper PUB branch conversation on October 25th.
(Stay tuned for part 2 of this series next Wednesday, October 10th).
Defining and creating a memorable experience for your customers is no easy task. Product owners and development teams can easily rattle off ideas to designers about what features are necessary to stay competitive. But if you ask them to share their vision for the overall more subtle emotional aspects of the experience, they often get quiet or resort to the familiar old UI clichés of "simplicity, intuitiveness, etc." This means that you often start your design work with less insight than you need to drive visual and interaction design.
Enter the experience workshop - a collaborative meeting and setup where clients can really talk about what a great experience can feel like among a sea of inspirational images, digital interfaces, products, services, brands, cars, textures, and more. Companies that build digital products and services are engaging in a new level of competition; it's no longer good enough to deliver a usable product. Our designs must reach an aspirational vision that elevates the experience beyond mere usability, and a visual, collaborative workshop pushes people to explore and discuss the possibilities.
The workshop helps teams discuss what attributes are inherent in these other experiences that are meaningful to the experience they're defining. After a process of prioritization and discussion, the end result is often a huge cloud of ideas and words that sit on a spectrum from a poor experience to an ideal experience. The examples aren't what's important for our output. We collect insight from the discussion, the words, that help us define the ideal experience.
The workshop brings teams together to learn and collaborate on the experience. What I love most about this activity is the connections made from people across different teams that can relate on a personal level because of their shared experiences. It's not just a visioning exercise for the future; it's a team-building event.
Check out the above video to see a glimpse of the workshop in action. And if you want to learn more about how to conduct a workshop and integrate this new approach into your company, you can sign up for an upcoming Cooper U Visual Interface Design course. In fact, we have just a few spots left in next week's class (May 7-8), if this post left you inspired...
As long as I can remember, I've maintained an library of inspirational imagery. I'm always consuming visually appealing material, so if I find something, I grab it, whether it's an interesting font, photograph, texture, color palette, icon, or UX pattern. Growing as a visual designer means keeping up with the ever-shifting trends and visual innovations out there in the world, and a library of inspiration can be a place to stockpile the state-of-the-art.
Just about anything can inspire visual creativity. Don't limit yourself to obvious things like icons or UI elements; branch out and explore non-digital works like paintings and illustrations. Over the years, I've collected thousands of these interesting and inspiring artifacts, including fonts, photographs, textures, color palettes, and even code snippets. As my collection grew, though, it became increasingly difficult to maintain it and keep it useful. Enter Evernote.
Evernote excels at nearly everything I was looking for in a digital asset management application: it makes content collection, tagging, and sharing a snap. But Evernote's secret awesomeness is in search: it can instantly find text not only in tags, titles, and notes, but also, using very accurate OCR, within the images themselves.
Suppose I'm working on a contact form and I want some inspiration from the outstanding examples in my library. Instead of hunting and pecking for interesting form elements amongst the hundreds of images I've clipped from around the web, I can search using text I think might be included in the images I want. Typing "First Name", for example, finds all of my clips with that text inside the image or its metadata. This is a killer feature - it makes quickly searching my library a whole lot less painful, and also frees me from needing to exhaustively tag every single artifact as I go.
If you find yourself running the same searches over and over, Evernote can save it for you as a shortcut. (See this great article on Evernote power searching for more tricks.)
To build your inspiration library, grabbing content has to be dead simple - otherwise it's a chore and it doesn't get done! Fortunately, Evernote has super fast capture tools for pretty much any situation. In a browser, take your pick from: Chrome, Firefox and Safari extensions. Even Internet Explorer gets the love (install the Windows desktop client to get the IE extension).
With the recent acquisition of Skitch, capturing extends beyond browsers to any screen content. With Skitch, you can screen-grab, annotate, and send to Evernote in just a few quick steps. (Here's a video demo of skitch in action.) Skitch works on your Mac, iPad or Android device.
Disclaimer: I worked on the design of the Skitch icon.
One of Evernote's key strengths is being able to access all your content on any device. Apart from the desktop clients, Evernote has an excellent web interface. In many ways, I prefer the web version - it's a simpler front-end. It's great when I need quick access to my inspiration library.
The Evernote iPhone and iPad apps are some of the best on the iOS platform, hands down. They are free, and offer everything that is great about the desktop and web versions in a mobile form factor. Evernote has an Android app, as well.
A few other random pieces of advice for those of you using Evernote to capture the inspiration around you:
I've focused on the virtues of Evernote, but whichever application you use, building and maintaining a personal inspiration library of visual materials can be an extremely valuable tool for any designer.
Here are some places I go when I want to find new material for my library:
How do you use Evernote? Any fresh ideas for maintaining a personal inspiration library? Do tell!
Last week Instagram was sold to Facebook for a billion dollars and this week Iris an excellent new Instagram iPad app is released. Iris is a fun easy way to experience your Instagram photo's on the iPad. If your an Instagram user it's a must have.
Download Iris - Follow on Twitter
Dropmark is a new web service that allow you to create and share collections. The collections can contain all types of media elements by using a simple drag and drop interface. Dropmark is designed to make easy for individuals to invite friends or colleges to the collections for quick and easy collaboration. Dropmark is a great collaboration tool for design teams who need to share mock-ups, documents or inspiration.
Checkout Dropmark.com for more information
FoxTrot created Bill Amend just released his comic strip to the iBooks store using the iBooks Author publishing tool Apple released earlier in the year. For $1.99 you can buy 1 of 3 Pad Packs. Each Pack contains about 100 strips that are designed for quick consumption.
With the popularity of the iPad and other tablets, we are on the cusp of a digital publishing revolution or at the very least a major reinvention on how digital content is published. Checkout UX Magazine great article on the Interactive eBook Apps: The Reinvention of Reading and Interactivity
I've always been a big fan of Smashing Books and the "Smashing Book #3" looks like it's going to be a good one. The book is slated to be released at the end of April so I've been pretty religiously watching for it's release.
If you're interested in learning how the cover was created, check out Veerle Pieters blog post. "The Smashing Book #3" cover design
Fontcase CS Plugin
The FontShop plugin (BETA) provides a simple way to try out any FontShop font directly inside your own artwork. The plugin allows designers to experiment with font variations, and to show different typographic options to their clients before actually purchasing anything.
I collaborate with clients about how to scope and staff project work, and they often have questions about when to bring a visual designer into the process. In the early part of my career, I wouldn't have had a good answer; it likely would have been something like, "at the end." But after 20 years of working in-house and as a consultant with product teams in various capacities — and having no background in visual design myself — I have a much different perspective on the value that visual design thinking has throughout the process of building a product.
First, visual designers are uniquely skilled at defining the overarching experience strategy, called attributes, for a product or service. These aren't specific design principles, but rather descriptions of what the experience should feel like for users, customers, and anyone interacting with it.
One way to define experience attributes is to conduct an experience workshop, where you facilitate a brand and "look and feel" discussion with stakeholders. Framing the discussion by using visual artifacts (pictures of products, cars, buildings, interfaces, art, etc.) helps stakeholders to engage at a visceral level instead of relying on cliché's or generalizations. Visual designers, on the other hand, are great at this, as they are skilled at talking about how the things we see translate into certain feelings and emotions, and how visual elements relate to brand perception.
Facilitating an experience workshop with images makes it easier for participants to articulate what visual approaches feel appropriate and inspiring. A visual designer is skilled at using this input to shape a visual strategy.
Even for companies with a well-defined brand and digital branding assets, it's vital that the product team has a good understanding of what the brand means in the context of the product or service you are designing. This isn't just about proper logo use and the corporate font. It's about knowing how your company wants users to feel when they are using your brand, and about how your users want to feel while using them. Understand that intersection, and you have gold.
During design field research activities, a visual designer can focus on things like the visual look of the physical environment in which people use the product or service we are investigating. For example, in a medical setting, the visual designer may pay special attention to the signage and décor within a hospital. We wouldn't mimic this in an interface, but getting a feel for the environment can give us clues as to what kind of visual styles may fit—or not fit—within that setting.
Jayson, a visual designer at Cooper, gets to experience user research firsthand at a doctor's office.
I recently worked with Jayson McCauliff, a visual designer, on a product for a large technology manufacturer. The product's users were internal, so Jayson took photos of lobbies, wall art, the small in-house museum, and even the cafeteria. The effort was worth the funny looks he got, as the images later helped give him inspirations for some subtle background textures that made a direct appearance in the interface. (See more about how visual designers work at Cooper)
While the interaction designers begin a design solution phase by exploring key interactions and high-level workflows, the visual designer can explore high-level visual style approaches. Because stakeholders may not be used to or comfortable talking about aesthetic and brand, having someone who understands visual design but can communicate about the effects that color, shape, white space, etc. have on users and brand are vital to making sure that everyone is aligned. It takes skill to talk about style concepts without having the conversation degrade into an argument about the specific shade of blue in a style study, so it's important to have someone who is proficient in facilitating these discussions and in creating artifacts that solicit the right kind of feedback.
Visual language studies keep initial visual strategy conversations focused.
Last, visual design isn't just about producing beautiful visual assets for the development team. It's also about creating a coherent product or service in the first place. A visual designer brings a unique perspective to problem solving that augments the other design team members. We find that having the visual designer involved early in design exploration activities makes our design concepts better and more well-rounded. When we are fleshing out the design framework, early and consistent involvement from the visual designer ensures that the interaction design isn't getting too crowded, and that the overall experience is achieving the experience strategy we defined early in the project.
During detailed design activities and implementation, the visual designer needs to be able to react quickly and fluidly as the design and implementation iterate and get refined. If the visual designer has been involved with the project from day one, it's easy for her to work in an agile way while still maintaining the original spirit and intent of the design, and she'll be able to make good decisions and recommend improvements because of that greater understanding.
As you plan your next redesign effort, make sure that a strong visual designer is part of the team from day one. You'll not only gain efficiencies when it's crunch time during implementation, you'll gain a valuable strategic partner and an overall better experience.
Learn more about the role of visual design, experience attributes, experience workshops, and effectively presenting visual design to stakeholders in Cooper's Visual Interface Design course on February 6 - 7.
It was one of those, “please, please, let this send,” kind of moments when you hope a weak airport WiFi connection doesn’t disconnect, a low-battery indicator doesn’t shut down your laptop — who knows where there’s an outlet in this airport — and your email actually sends to your million dollar client when the message popped up and your stomach drops: “Oops!”
Like some kind of creepy, American Psycho moment, a hardly-discernible, non-apologetic message from Gmail put this exact dagger into my heart and sent me wondering what went wrong.
Sure, of course, just lemme look up error #001. What?
Google’s Chrome browser gives off an even worse error message that doesn’t make things better, just a wanna-be-hipster-piece-of-software knocking off a Susan Kare classic laughing in your face when you’re frustrated:
Maybe this is part of some awful brand initiative. After all, Google is a place of smiles. An every-color-of-the-rainbow logo, and three square meals place to work with unbelievable benefits. But, then again, Google is hardly alone in this kind of “smile when you’ve fallen” approach to error messages.
Microsoft is sadly considering implementing the same, cutesy thinking in a revamp of their blue screen of death as a part of their otherwise exciting, new Windows 8 operating system:
Oh, great. My 14 year-old cousin is writing error messages in Redmond.
Fortunately, Microsoft offers some advice. Just search for the error message, “HAL_INITIALIZATION_FAILED”…oh wait, this is the blue screen of death. My computer is totally effed.
Practice Fusion, the leading provider of health records software for medical professionals, has published a nice recap of their user conference, Connect11, where Alan Cooper spoke about the role of interaction design in health care. Among the questions answered - "what do you get when you cross a computer with a doctor's office?"
At the 13 minute mark, Stefan Klocek presents a prototype of Practice Fusion's new iPad app.
