cooper

Journal   A blog about design, business and the world we live in.

Web

Recent articles

It’s Never Just a Website Redesign: Transforming Business Through Design

At Cooper’s UX Boot Camp, held between March 25th and March 28th at Monkey Ranch in Petaluma, CA, Fair Trade USA looked to participants for ideas around how to raise awareness of their mission and inspire consumers to purchase Fair Trade products.

Fair Trade USA enables sustainable development and community empowerment by cultivating a more equitable global trade model through certifying and promoting Fair Trade products. Their work benefits everyone from farmers and workers to consumers, industry and the environment, and yet only 20-30 percent of Americans even know what Fair Trade means. Why? The issues are complex, but as students dug into this problem they identified key factors behind this disconnect, including a lack of brand awareness of the business case for Fair Trade, low brand adoption, and limited Fair Trade product presence in stores.

From those explorations, the following goals emerged:

  • Motivate and inspire brands to adopt and evangelize Fair Trade practices.
  • Put more Fair Trade products in front of consumers.
  • Build “pop culture” awareness of Fair Trade to get more brands to buy into the movement.

To get there, student teams went beyond the initial concept of a website redesign and took on the bigger questions that lead to business transformation. For a look behind the scenes as the teams approached this challenge, check out the following video filmed during the Fair Trade USA Boot Camp, and read more to take a look at the Fair Trade USA ecosystem model and what the students came up with in the pitch decks that follow.

Read More

Everybody wins the design arms race

Just as the Internet powerhouses of the early 2000’s were all but forgotten, they rise with new panache. MySpace, Digg, and now AOL have undergone massive redesigns in an attempt to lure in former users, and it just might work.

Remember the race to get your favorite @gmail.com address? OMG - a GB of free storage!? Forget that hotmail email address you’ve been using since your days backpacking around Europe after college, time to switch domains. What a hassle.

Those days are over. Today, cloud storage is effectively free. The key players (Google, Amazon, Microsoft) have taken data center construction to an art form, along the way making that same infrastructure a commodity. The result: the back-end is no longer a differentiator and companies are increasingly turning to front-end innovation to make a splash.

(Source: engadget)

AOL’s new web-based email client, Alto, is an interesting new tool for managing the inbox fire hose. Among other nifty features, it analyzes your inbox and automatically categorizes your email into piles like daily deals, attachments, and social notifications - the new breed of “pseudo-spam.” Unlike the days of yore, you don’t have to go through the hassle of migrating from Gmail or Yahoo to take advantage of these new superpowers. Alto is just a new layer of svelteness on top of the old email infrastructure.

Read More

Serve your art, not your tools: Tips for a leaner, faster creative process

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

Part 1 of 3: Creativity Boosters

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.

Img people

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.

Img sketchbook

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.

Img assetlibrary

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.

 Img evernote

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).

UX Boot Camp comes to San Francisco

Course Dates: July 30 - August 2, 2012
Event Location: San Francisco, California
Register!

Cooper's UX Boot Camp is an intensive, immersive four-day design training class targeting designers, developers, and product managers who have product design experience but want to take their product design skills and processes to the next level. In short, it’s where people become design leaders. Guided by industry experts, students will learn Cooper's goal-directed design process while working on a real-world product for a nonprofit partner. The class is built around hands-on activities, conducted in pairs and small teams. Participants will learn to:

  • Set the stage for effective collaboration
  • Define product and service ecosystems
  • Conduct design research using both lightweight and in-depth techniques
  • Synthesize research data into actionable next steps
  • Model personas and build empathy for their current situation
  • Storyboard future concepts
  • Design a seamless framework for a multi-platform experience (web and mobile)
  • Learn how to go beyond features and design for engagement
  • Facilitate effective design reviews
  • Present like it's theater; choreograph a presentation experience

Along the way, participants will also learn critical leadership, communication and collaboration skills. At the end of this course, you'll have new tools in your design toolkit, and a well-articulated design concept for a real product that you can add to your portfolio.

Our next Boot Camp will be held in San Francisco, CA from July 30 to August 2, and participants will learn the goal-directed design process by creating Web and mobile concepts for Women's Earth Alliance (WEA). WEA partners internationally with grassroots organizations in Africa, India, and the United States. Through those partnerships, WEA provides financial resources, training, advocacy, and peer support to women leaders who are addressing acute environmental and climate changes.

To inspire great work while learning, the course is also part friendly competition. Each team will present their design concepts to a panel of WEA and Cooper judges, and the concepts will be given to the nonprofit at the end of the course.

Our previous UX Boot Camp in Columbus, Ohio was a huge success and now we’re bringing it San Francisco. To get a glimpse of what that UX Boot Camp was like, check out the final concepts pitched by the teams, this post by a participant, or these photos of the magic in action.

Register for UX Boot Camp San Francisco

Stay inspired with Evernote

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 inspiration library - tile view

Why 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.

Search inside images

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.

Evernote inspiration library - OCR search

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.)

Dead simple content capture

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.

Your inspiration library, everywhere

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.

Evernote on iOS

More Evernote quick tips

A few other random pieces of advice for those of you using Evernote to capture the inspiration around you:

  • It's a good idea to organize and tag stuff as you enter them. You'll thank yourself later.
  • Re-title notes to make them more content specific. Titles like "DSC00003" will end up making finding things later more difficult.
  • Keep well structured folder stacks.
  • Use the Saved Searches feature.
  • Another quick way to capture: on a Mac, drag and drop items onto the dock icon.

Go get some inspiration

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:

What about you?

How do you use Evernote? Any fresh ideas for maintaining a personal inspiration library? Do tell!

Read More

Cooper U, Rio-style

Kendra Shimmell, Tamara Wayland and I recently enjoyed some Spring weather in beautiful Rio de Janeiro while sharing methods for interaction design, collaboration, and communication in an agile environment with forty employees of Globo.com, the Internet branch for Latin America's largest media conglomerate.

The team knew that Rio would be warm this time of year, but what really amazed us was the warmth and hospitality of the people we met. Andrë Braz, Globo.com's User Experience Design Manager and Art Director, and his team were engaged and inquisitive, and really hungry for ways to take their already successful site to the next level of efficiency and innovation.

IMG_5338a.png
During the course we talked about how to effectively integrate user experience design into an agile environment, and shared techniques for collaboration and communication that are lightweight to create but provide big impact. The Cooper team showed Globo.com a blueprint for defining and designing digital products and services that centers on users, but within the context of business needs and implementation realities.

Here are a few snapshots from class:
IMG_5248.png
Participants quickly grasped the value of focusing on goals and behavior patterns when developing personas.

IMG_5209.png
A cross-functional team works together to storyboard the key contexts and moments in time that their primary persona will interact with the product they are designing.

IMG_5319.png
A student sketches design concepts for the mobile experience.

The enthusiasm carried over into the final day of the week, during which we were joined by close to 80 Globo designers, developers, product managers, and executives. We can't wait to go back (and I am still dreaming of the feijoada we had on Friday afternoon).

Thank you Globo, and thank you Rio!

Read More

We The People 2.0

Have you ever used a public service that understood your needs? We all have horror stories of waiting in seemingly endless lines at the DMV or hunting forever to find the information we need on poorly designed city websites. Who is making sure that government uses effective design and technology to meet the needs of citizens in the 21st century?

Introducing Code for America

Code for America is a brand new non-profit that is taking on this challenge. And part of the challenge is understanding the target users of the technology. To help in that effort, Suzy Thompson and I taught a day-long workshop on Research for UX Design to the fellows at Code for America.

Code for America sign medium.JPG
Code for America signage at their offices in San Francisco, autographed by the 2011 fellows

Code for America helps local city governments leverage the power of the web to become more efficient, transparent, and participatory. Built on a model similar to Teach for America, CfA encourages developers and designers to apply for a year-long fellowship, during which they will create open-source technology solutions for city governments. Out of over 300 applicants, CfA chose 20 fellows for their inaugural year, from a wide variety of backgrounds including Web 2.0 startup entrepreneurs, developers for local city governments and school districts, open source contributors, a researcher for the New York Times, a digital journalist, an intellectual property lawyer/programmer, and a museum exhibit designer.

Code for America 2011 Fellows.png
Code for America 2011 fellows (image used by permission from Code for America)

Code for America Institute

The fellows are spending the month of January in San Francisco at the Code for America Institute, learning from guest speakers about a wide variety of topics, including treating government as a platform (Tim O'Reilly), building local communities (Danielle Morrill), being a change agent and nurturing social network communities (Caterina Fake), and taking an entrepreneurial view of their city projects (Eric Ries).

Host City Projects

Each of the fellows is assigned to one of four city teams, each with a target project:

Boston An educational services platform that allows the city to track the effectiveness of academic and after-school programs, and allows developers to create apps for student learning outside of school.
Philadelphia A platform for using social network media to help citizens organize, and to connect government leaders with neighborhood civic leaders.
Seattle A platform for using social network media to help citizens network and contribute to public safety programs. Also helps city leaders to quickly locate and organize neighborhood leaders.
Washington, DC Civic Commons: a platform for municipalities to share custom-built technology solutions, so cities can leverage their development investments and avoid reinventing the wheel.

The fellows will spend the month of February in their host cities, learning about the IT infrastructure and interviewing city stakeholders and users of their system. They will return to San Francisco in March to design and develop the open-source applications. They will present and hand-off the applications to their host cities in the fall.

Cooper Training

Because Cooper has extensive experience connecting user research to product design, Code for America asked us to come in and present a one-day workshop. From our courses on interaction design and design communication, we carved out a day's worth of materials on finding stakeholders and users, preparing an interview instrument, conducting interviews, debriefing interviews, and synthesizing and presenting research findings. We also gave them a look-ahead to personas, scenarios, and framework design.

The fellows got a chance to plan an interview instrument and conduct a 45-minute interview with members of the CfA staff. Conducting good ethnographic interviews takes practice -- I think the fellows came out of our workshop with a sense of confidence in talking to their city stakeholders and application users in February. I look forward to hearing about what they learn about their users, and to helping them create personas and scenarios from their findings. And I can't wait to see the amazing applications that result from their work.

Great Government Research and Design

A question to our readers: Where have you seen user experience design principles applied to government applications or services, to achieve an amazing outcome? At Cooper, we're currently working on a project with CalSTRS (California State Teachers' Retirement System), and in the past have done pro bono work with the SF Department of Health. I have also read about fellow Cooperista Renna Al-Yassini's service design work for the Roudha Center in Qatar. What user experience design work in the government or social service sectors has impressed or inspired you?

Read More

A social network too far

No one can argue that social media hasn't had a significant impact on modern life. My current favorite example is the Zooniverse series of “citizen science projects” that bring people together to apply human brains to tasks in science that computers aren’t very good at yet, like identifying types of galaxies in Hubble images or craters on the moon. Supported and produced by the Citizen Science Alliance, this is social media at its very finest: Bringing communities of people together for the common good of humanity. The whole thing, I gotta say, leaves me a little verklempt.

On the other end of the ultility spectrum we have Cookie Bonus Solitaire, a little nothing of an iPhone solitaire game that cleverly bakes in cheating. It also incorporates robust social features like profiles and chat, achievements and leader boards, the whole shebang. I used to play Cookie Bonus Solitaire daily on my commute, but got irritated when there were constant updates to the social features of the program. Hello? Solitaire is not a social game, that’s why they call it “solitaire.” I finally deleted the game in disgust when it got to be too much, chalking it up to me just being some old fuddy-duddy who just doesn’t get it.

But, this is where I draw the line.

ihome social sleeping

This is only acceptable in a home-care situation where people can keep track of the health and well-being of infirm individuals. Beyond that? No. Just no. Sleeping is not a social activity, and I say that as a married woman who sleeps alone only on business trips. What’s next? Social colonoscopy?

How did this happen? I can see it now: a conference room at SDI Technologies, a red faced manager pounding the table and demanding innovation. “How can we make this alarm clock more hip? What is it that all the kids are into these days? Social networking, right? How can we incorporate that?”

This, my friend, is where a brave soul should have spoken up. Not everything is social. Read More

Introducing our new web site !!!

After years of mumbling excuses about the cobbler's children and how busy we've been, we're thrilled to announce the launch of our new site. It's taken almost a year from our initial design explorations, but we're really happy with where we've ended up.

While its been a very collaborative effort, it's also been refreshing to design without the usual cast of stakeholders. (In order to overcome the well-known nightmare that is a firm designing its own site, we almost completely eliminated creative reviews by anyone not directly involved in the project.)

We think the new site much better reflects our design sensibilities and the direction of the firm. It's still a bit of a work-in-progress. (For one, we plan on adding social bookmarking features in the Journal when we have a moment.) But we're interested to hear your feedback—let us know what you think in the comments section.

Credits

Design by Nick Myers and Dave Cronin, with help from Jayson McCaulliff, Doug LeMoine, Imon Deshmukh, Martina Maleike, and Daniel Kuo. Copy by Dave and Doug, with editorial assistance from Steve Calde and Suzy Thompson. Code by the amazing Elisha Cook and Andrew Hoag at blackdrumm, and photography by the very talented Emily Nathan. Read More

Quick critique of the new MSNBC redesign

MSNBC screenshot

The recently launched MSNBC redesign really grabbed our attention yesterday. While we don't universally love everything about it, we found ourselves playing around with it a bit longer than we would have expected to. Here's a sampling of some of the comments heard around the studio.

Doug LeMoine:
This is a pretty impressive effort toward designing an interaction framework for a massive media conglomerate with a dozen sub-brands, content licensing deals with who knows how many third-parties, and an absolute clustercuss of a styleguide. I’d say that the designers performed capably under this duress, delivering strong mechanisms for staying upright and pointed downhill amidst the avalanche. I like the nifty “upscroll” that reveals an info-rich header (but crikey this particular header has a heckuva lot going on). The “annotated scrollbar” holds the experience together, providing a modicum of navigational predictability across the various content sets. I have a variety of visual critiques, large and small, but overall I’ll high-five MSNBC for not being afraid to spook loyal readers with new ways of interacting with content.

Imon Deshmukh:
Of course it feels strange at first, and I’m not sure if I would have noticed the option to scroll up to uncover content, had nobody mentioned it. My reaction is similar to how I felt when I first saw the new Cooper site [Editors' note: stay tuned for this!]: I’m not sure if it’ll really work, but it’s something I haven’t seen before and it feels more than an attempt to be different just for the sake of it. Even if it doesn’t work out, trying something new and different when everyone is watching is something I can appreciate and admire.

Tim McCoy:
Kudos to MSNBC for abandoning the cluttered, segmented, ad-saturated layouts typical of news websites for a truly content-forward experience. It’s a lot of change to encounter all at once, so the experience is a bit foreign, but I think that will pass with time as readers learn new idioms and the design adjusts to the strains of use. It is an odd hybrid of the information density of a sovereign desktop/iPad app and the long-page scrolling breadth of a web page. And it speaks volumes about how interconnected our content has become that the editors expect to provide every story with some combination of images, videos, interactives, and related articles.

Dave Cronin:
I really appreciate the fact that the MSNBC team tried some daring stuff with their redesign. As with any such effort, some of these innovations will probably turn out to not-so-good, others will turn out to need some tweaking, and if we’re lucky a couple of these ideas will help us all move forward with how we deal with all kinds of information coming from every different direction. I’m really digging the use of the upscroll to access headlines (in a similar vein to where search lives on the iPhone), and I like how far the vertical scroll has been pushed even further as a primary navigation element, as well as the nifty little jump buttons along the scrollbar. The site is certainly not perfect, though. While I can tell there is an underlying grid, it could certainly be stronger—it looks like every vertical layer is on a different horizontal rhythm. And while I know it’s tough to do anything graceful with big display ads, these feel particularly clunky, especially the way they stick with you as you scroll, breaking the vertical orientation of the page a bit. Read More