Designs That Change Lives: UX Boot Camp and Kiva

“The UX Boot Camp is a transformational experience, disguised as a training.”

- Lead UX Boot CampTeacher, Stefan Klocek

In each UX Boot Camp, participants dive headfirst into design. They are challenged by a real-world problem and in just four days produce clever design solutions tailored to their clients needs.

At the UX Boot Camp with Kiva, the designers’ mission was to envision web concepts that helped Kiva lenders decide which loans are best for them and facilitate the loan selection process. Currently, lenders can feel overwhelmed or discouraged by the number of borrowers and different types of loans. So Kiva was looking for ways to empower lenders and help them make decisions with their money.

Read More

Behind Cooper’s New Topic Page

The Cooper Journal has been a great source for design ideas, controversy and practical guidance over the years, so much so that we now have hundreds of posts. But even when a system works well, you start to see its breaking points. And with that, comes a need to reassess. Which is why we’re staging an experiment—and it involves you.

It all started with a simple question: How can we design a better Journal reading experience that takes advantage of the dynamic web platform? The first answer was remove stuff. Traditional blog layouts are bullied by their sidebars. So when you visit the experiment you’ll see we nixed the sidebar. We decided that a full column experience with more legible type would feel better. Not only that, but we could break the grid for images and pull quotes to create interest.

And why stop removing stuff there? There are posts that have sparked discussion, but it’s unfortunate to limit those conversations to our own site. We want interesting discussions to be open, rather than hidden deep within the blog hierarchy. Say goodbye to the comments and hello to a custom twitter feature.

Admittedly, during the exercise we had bit of an existential crisis. Are we reinventing the wheel? We wanted a new comments structure to allow for good conversation, but there’s Branch. We wanted a smooth reading and editing experience, and Medium already comes to mind. We wanted a simple way for Cooperistas to post quick bits of content…wouldn’t Twitter suffice?

Our answer channels Charles Eames:

“Eventually everything connects – people, ideas, objects. The quality of the connections is the key to quality per se.”

Blog posts, comments, tweets, these are all interesting things, but we believe that the connection missing is the topic. By sectioning off our experiment from the main Journal, we’ve been able to play with the format. Having removed the noise, we can now add in signal. Say hello to the Curator’s Manifesto: Each topic we curate has thinking behind it and we have a unique perspective that we add. The manifesto is the place where we can be explicit about our point of view and spotlight featured posts. Since we’re focused on one topic, we can serve up the most interesting post of the moment.

Our debut topic feature centers on Design Tools. We’ve got a couple oldies but goodies and a couple posts fresh off the press. The Cooper Journal environment you are presently in will continue to stay the samewith sidebars and comments as we collect your reactions to this new direction, and continue to develop it. We’d love for you to join us in this first topic, be inspired, share some inspiration, and get talking!

Can illegal networks of zombie computers be a force for… good?

Whenever a major website has significant downtime, people start to wonder: is it intentional? Is Anonymous behind it? Or a secretive group of enemy government hackers?

It’s a reasonable assumption, as it turns out that DDoS—distributed denial of service—attacks are relatively easy to pull off these days. To accomplish it, a ne’er-do-well need only harness thousands of “zombie” computers, point them toward their intended target, and harass the web servers with so much traffic that they are overwhelmed. It’s a temporary effect, but can cause severe economic damage.

It used to be that coordinating such an attack required a great deal of skill. A criminal needed to first infiltrate those thousands of machines using some kind of trojan horse or other malware. To harness their collective power, they would stitch together a “botnet” by designing a way to control them all remotely by issuing them commands, then bend them all to whatever nefarious purpose they have in mind. (Besides DDoS attacks, botnets also send a lot of spam.) Today, however, pre-configured botnets can be rented for a pittance. One source claims to rent a 10,000-strong network of zombie machines for $200.

This got me wondering: why not rent a botnet, and use it for good?

By Tom-b (Own work) [CC-BY-SA-3.0], via Wikimedia Commons

Read More

CascadeSF UX Night: Planning for Responsive Layouts

Recently at Cooper, we updated our website with a focus on responsive web design. Working with Cooper’s other great developer, Elisha Cook, I learned a lot in the project, though at times it seemed my head would explode trying to figure out solutions to various problems presented by responsive web design, so when I heard that CascadeSF was hosting a presentation on this very topic, I was eager to attend and see what I could learn.

CascadeSF is a collective of San Francisco-based web designers and developers who meet periodically to keep up-to-date on design trends, standards, and techniques. On July 24th, the presenter was Pauly Ting, a Lead UX Designer at Tigerspike SF, founder of Feedia, and co-founder of TwoCents. The MeetUp was hosted in the offices of the residential real estate site, Trulia, just a block away from the Cooper studio.

Digital Evolution: From Fixed to Responsive Layouts

The focus of Pauly’s presentation was on planning content for responsive layouts. Responsive layouts present new challenges for organization and delivery of content. We are accustomed to the page-based approach to organizing content, largely because that is how content has always been organized and delivered. For example, the printing press has a fixed width and height based on the page size. The Gutenberg Press revolutionized content delivery in the 15th century by organizing content as hand-set letters and graphics arranged in rigidly determined rows that could then be mass produced. It was a new paradigm, taking book production from the hands of scribes locked up in monasteries, and distributing books more widely, making education of the masses possible for the first time, which of course changed the world.

Read More

Siteglass: A Developer’s Quest for Better Performance

Hi, my name is Elisha, and I’m a developer. I know that most of you aren’t, but I want to talk about a fairly technical problem related to website optimization, and a new tool I developed to solve it — called Siteglass. Why would I want to do that? Because performance is an essential ingredient in good UX. But before I delve into that relationship, it might help to first know a little about what I do here at Cooper.

I’m a User Interface Developer. That means I take designs and turn them into interactive interfaces. As with all translations, there is a lot of room for interpretation. So, aside from the technical side of things, I consider it my main task to try to convey the intention of the design through the chosen platform (iOS, web, etc.). Sometimes there are creative choices, like defining the exact characteristics of an animation, but ultimately the goal is not to make the design my own but rather to not get in its way. This means doing whatever is possible to avoid degrading the design vision due to technical artifacts of the translation process.

Now let’s descend from the lofty height of that last paragraph and talk about websites. A lot of what I build these days are websites and they pose unique challenges, as each platform does. Browser inconsistencies, lack of typographical control and wide variations in screen size are some of the hurdles to creating a solid experience for users. Today I want to talk about an issue that is easily overlooked during design and development but can have a huge impact on user experience: page load performance.

Read More

UX Boot Camp with Marketplace Money

Old School Radio Meets the Digital Age

Take a look inside Cooper’s June, 2013 UX Boot Camp with American Public Media’s Marketplace Money radio show, where students explored the next horizon of audio programming—a paradigm shift from broadcast to conversation-based platforms.

The Challenge
Students rolled up their sleeves to help the show respond to the trend away from traditional radio by finding the right mix of alternative distribution platforms. Marketplace Money came equally ready to take a radical departure from their current format in order to create a new model that redefines the roles of host, show, and audience in the digital age. To reach this goal, students focused on designing solutions that addressed three big challenges:

  1. Engage a new, younger audience that is tech savvy, and provide easy access to content via new platforms, such as podcasts, satellite radio shows, and the Internet.
  2. Inspire audience participation and contribution. Facilitate conversations and inspire people to share their personal stories so that listeners can learn from each other.
  3. Design ways for the host to carry an influential brand or style that extends beyond the limits of the show and engage with the audience around personal finance, connecting with listeners in ways that are likeable, useful, and trustworthy, making the topic of personal finance cool, fun and approachable.

At the end of the four-day Boot Camp, student teams presented final pitches to Marketplace Money, and a panel of experienced Cooper designers offered feedback on their ideas and presentations.In the following excerpts from each day, you can test your own sensory preferences for receiving content as you see, hear and read how design ideas evolved at the Boot Camp, inspiring new relationships between people and radio.

Marketplace Money Class

Read More

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

At Cooper’s UX Boot Camp, facilitated by Kendra Shimmell, Stefan Klocek, and Teresa Brazen, 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 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, Part 1: Tips for a leaner, faster creative process

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:
From 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.

This is part of a series of posts related to a Cooper PUB talk on October 25th, 2012. They’re intended to get designers thinking about new approaches to their everyday workflow.

Part 2: Don’t Photoshop ’til you drop
Part 3: Start with a solid foundation

1 2 3 4