Beautiful profile illustrations by Kyle Steed

Stories that begin with, “It all started at SXSWi . . . .” always seem to end in something appropriately best describe in webtalk as “EPIC.” It’s true, in spite of excessive commercialization, long lines, and the frenetic schedule of panels and parties, magical stuff happens in Austin.

Tools like Twitter, Dribbble, and newcomer Forrst have further accelerated and facilitated serendipitous meetings between designers. Suddenly we’ve become a lot more connected to one another, and by connected I mean a variety of things; we’re connected by:

• Conversation
• Content
• Conferences
• Web standards
• New technologies

All of these exciting interactions have led to an explosion in tech culture camaraderie, which brings me to the story of “Design Swap,” a new experiment dreamed up and piped out by designers Trent Walton, Austin, TX, and Yaron Schoen, NY, NY.

Design Swap – The Origin Story

It began at SXSWi 2010, when a group of designers gathered together and bailed on afternoon panels in favor of impromptu drinks and discussion at the Iron Cactus. On the brief walk, Trent and Yaron (their first time meeting in person), engaged in a rant about how designers, in spite of all these new tools and talk of collaboration, still really don’t join up and work together all that much (at least not as much as marketers and developers do with open source code projects, code audits, barcamps, hackathons, and O’Reilly Ignites).

Yaron’s Design-Swap on Trent’s site

The two shared a theory, designers need an engagement activity that can go deeper than 140 characters, a link share, or a screen capture. Turns out both Trent and Yaron also share a love for music and so they contemplated how cool it would be if designers could collaborate like musicians who do guest appearances or come together in single-show/venue bands (such as the new Thom Yorke Group Atoms For Peace).

Designers are doers, talking about design isn’t enough, and practicing techniques alone isn’t as challenging or nearly as fun. For a moment, how many times have you heard “stop talking about design, start doing design”? (waves hand!)

Trent and Yaron describe it best:

While client projects don’t always allow for design collaboration & exploration, we can take matters into our own hands by designing on each other’s websites.

Rather than just talking about design, we want to transform conversation into action, being inspired by actually designing. With someone else’s webspace comes a unique set of constraints as well as a unique style to consider and learn from.

DesignSwap hopes to provide an opportunity to expand their skill sets, spreading camaraderie and friendship throughout the design community one swap at a time.

By the time Yaron and Trent reached the restaurant, Trent had purchased the domain and Yaron sealed the deal purchasing the gin and tonics. DesignSwap would be built, it would be an experiment, and together they’d extend the fun they had at SXSWi.

Trent’s designswap on Yaron’s site

Trading CSS & PSDs – The DesignSwap Process

By doing a design-swap it’s inevitable that you will learn something you didn’t know before. It’s not that you’ll dive into someone else’s design or code with the takeaway being that you learned how to “copy” an element.

Instead, by blending your style into your DesignSwap partner’s style you’ll be expanding your own style and doing something new that represents a little bit of you both. Instead of searching for inspiration throughout the web, DesignSwap helps you gain inspiration from the actual doing.

Undoubtedly you may learn about individual elements in the process and see things you love on your partners site, but you will have a better understanding of why these elements were put to use.

You’ll also get the chance to have created something entirely original, for yourself, and out of the common ground of a love for design that you and your design swap partner share. It will actually be a literal demonstration of play!

We are encouraging people to find partners and start swapping.

Note: Be sure to drop the DesignSwap logo in your swaps, Trent and Yaron will promote it on DesignSwap!

The Founders Own Words

Yaron:

We kept the rules very vague since we realized that as designers people were bound to surprise us in their creativity and think of ways to swap that were way cooler than what Trent and I could ever imagine.

To us, it’s more about the swappers collaborating without getting bogged down too much by details. We both discovered that the best part of this is building friendships and learning from experience.

Trent:

The way I see DesignSwap is that designing on a designer’s website is the ultimate experiment: When designing for a client, you have set goals and defined limitations, but the pride and excitement of releasing your work on a different platform.

When designing on your person site, you can experiment and go wild, but you don’t get to enjoy the thrill of releasing something on a different platform.

DesignSwap takes both scenarios and blends them; you have that thrill of releasing a project on another platform, but with spirit of fun experimentation that you enjoy designing on your own site.

Peak Into the Near Future

Since Design Swap started as a fun and playful experiment between Yaron and Trent and their designer friends, it wasn’t built as a platform. As a result of positive responses received and the interest in participating, they’ve already begun building a platform to facilitate and promote swaps. They may just become the best-looking matchmakers on the interwebs!

6 Ways to do a DesignSwap

Ranging from a full site takeover to a smaller graphic dispatch into a blog post. Here are the options:

1. Full Custom Blog Post—write & design
2. Section Graphics—Header, Footer, Anything
3. Supporting Graphics—On a regular blog post
4. Graphic Volley—On a Topic, summarized in a post
5. Captain Insan-o—CSS Files, Logos, The Works
6. Phil Coffman Martian—view example here

Swaps on the Schedule

• Dan Mall & Brian Hoff
• Darren Hoyt & Paddy Donnelly
• Chris Meeks & Luciano Pouzada
• Phil Coffman & Jesse Bennett-Chamberlain
• Mark Boulton & Joshua Brewer
• Matthew Smith & Elliot Jay Stocks

The Inaugural Swap

• Trent on Yaron’s site: a friendly photo-inspired retro play
• Yaron on Trent’s site: a truly fun play with a bit of sci-fi Orsen Wells

It sounds like they both had a lot of fun and challenge putting their styles into one another’s sites. It’s not only fun to see the swap, but to learn what the guys experienced in their own words:

Yaron:

The thing I learned most from designing on Trent’s blog is his use of white space. His width column is perfect. I was always told that there is a specific width that makes reading easy, but I never really paid too much attention to that until I designed on Trent’s blog. This is a lesson I learned from experience and not from being told or seeing on another website.

Trent:

Yaron’s post format provided tons of low impact areas I could add graphic touches to the post design. All of the subtle spots where I could add a drop cap or change the background color gave the post and extra level of polish while giving me an insight into what a detail oriented talent Yaron is!

Share on Facebook

There are 4.5 million registered voters in NYC, and in both a close and controversial race the turnout was an abysmal and historical low,  557,059 voters for Bloomberg v. 506,717 for Thompson.

Thompson2009.com and MikeBloomberg.com are saturated with red, white, & blue graphics and personal branding. Neither site is particularly innovative or effective in terms of innovative online-to-offline engagement.

As you can see both sites leveraged a staple set of social icons. Bloomberg’s site encouraged social media users to “donate” their Twitter and Facebook status updates on election day and Thompson leaned towards pragmatic design and provided a link to help voters locate their polling places.

If Facebook apps can inspire people to buy/give virtual gifts and even try on random hair styles, can a web app get someone out to vote in a local election? I believe it can, and if this year’s turnout proves anything, it’s that there’s a great opportunity for developers, designers, and campaigns to innovate with apps.

Charles Lenchner and NYC’s Working Families Party bootstrapped and designed “Candidate Finder.” Proving that simple can be sexy, a voter can input her street address and zip code, data magic happens, and she can share, download, print the list of candidates WFP supports in her district and get directions to her polling place.

Pre-submit page

Post-submit page

Lenchner, NYC’s WFP, and Candidate Finder bring me back to heavy-hitters Thompson and Bloomberg (and Bloomberg’s 100,000,000 budget). I believe that web apps (including bootstrapped ones) matched with smart outreach and online uptake can become a major asset towards can help reengage voters at the local government level (in an effort to change the world).

10 tips for developing the next generation of political apps

1. Data-Hungry Devs Must Diet

Provide a data-driven activity to get the voter to the polling place (ex. WFP’s Candidate Finder). Data-hungry folks, suppress your appetite for demographics. It’s not about you;)

Don’t ask for more information than you need (sure, it’s  you’re user dropoff will increase with the addition of every field, and the experience is about the user and getting her what she needs to vote.

2. Imitate, Integrate, or Borrow From “Four Square”

Provide a validation activity (like Foursquare’s badges) for the voter post-polling (think of this as a virtual “I Voted!” sticker, but with the power of publication and dissemination across the web).

These activities can have tiers: be the first to vote, be the 100th voter, be the last to vote. Together this data can become a story of a community of users who can have a fun time spurring one another on throughout the day.

3. Meme, Mob, and Maybe Mock With Fun Activities

Provide a mechanism for people to self-organize and go to polling places in groups (not everyone feels comfortable alone) or create a group-like activity that people can participate in.

• Enable voting day meetups with organizers (organizers should be able to download and print recs for who to vote for via your app)
• Seed flash mob-like experiences (everyone shows up to vote wearing fedoras at 10AM, which makes for
  great content for reporters)
• All users to design neighborhood-themed photo activities outside of polling places (e.g. Brooklyn hipsters take a photo of yourself in an ironic tee-shirt or Yankee Fans wear your gear and voters should upload to the app’s pool throughout the day)

4. Create a Feedback Loop Around Local Issues

Provide a feedback mechanism for people to get answers (keep it simple let users ask “yes/no” questions). Recycle the answers and data.

5. You Lose Your Virginity Once, But In Politics You Have Primaries

Your app should engage your audience for more than a day, in fact, it should inspire a community who can in turn inspire each other to get out an vote. Experiment leading up to the primaries, optimize, and keep delivering an awesome experience.

6. Keep it Simple, but Leverage Advanced User Personas and Segmentation

Place focus on simple issues that impact voters’ bottom lines (Vote “YES” against fare increases). Voters get mired in the complications and local votes are for compelling local issues.

Your app should speak to a set of personas and the segmentation of what impacts the users’ bottom line.

• I’m a parent – what matters?
• I’m a single person – what matters?
• I’m retired – what matters?
• I’m unemployed – what matters?
• I have no health care – what matters?
• I’m the neighborhood curmudgeon, everything matters, but
  nothing makes me happy – what matters?
• I’m the neighborhood gossip – what’s the juiciest issue?

Identify a single compelling issue according for each and leverage that message repeatedly.

7. Get Your Google Map On

Provide an address, directions, and a map to the voter’s local polling center (sms, email, print, and invite the user to invite her friends/neighbors to join you on voting day).

8. Provide “What to Expect” When You’re Expecting Voter Turnout

Some people have never voted in a primary or a local election, while other people like to plan. Tell your users/voters what to expect:

• When are the busiest times
• What should voters bring to identify themselves
• Will there be Wi-Fi access (if there’s a line?)
• What should voters tell their employers?

9. Translation Party

Build your app with multiple translations based on what most of your the constituents.

10. Accountability Analytics Are Awesome

Voting isn’t the end of the local politics process. Create a post-election utility similar to Politifact’s Obamameter, which is tracking Barack Obama’s promises and rating the progress of each one.

Your app should keep the community you cultivated engaged around how currently elected officials are doing and if they’re keeping their promises.

If your app was designed to support a democrat, who didn’t win, flip it to track how the republican elect is doing and how it’s impacting the same issues your audience was encouraged to get out and vote on). By doing this you’ll also be able to continue to grow your community, making your app’s potential to be stronger and have greater reach in the next set of elections.

With American engagement in local politics at a historical low the frontier for app development is wide-open. Bloomberg spent $100,000,000 on his campaign, Lechner and WFP spent a few thousand dollars on something smart, user-friendly, and simple.

Back over to you, what kind of app would you build to help influence engagement around local issues, encourage and increase voter turnout, and most importantly help change the world in the process?

(Disclosure, I played a small role in Candidate Finder’s development with friends at Fission Strategy)

Share on Facebook

“Doh! %&^%&^%&!”

Another forehead-smack-worthy curse-laden moment: I’ve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.

While considering how much I really need to complete this form, I start making notes on how I’d design it to be a better experience. Seriously, how many date formats am I going to have to try before I get this sucker right? Do I need to phone a friend?

The lack of strong error messaging is a regular issue I encounter as both a user and UX designer. As the bearer of bad news to users, error messaging can be the element that determines whether your app gets a “Sale” or “FAIL.”

1. Error messaging is customer support
Error messaging is a critical component of customer support. Customer support teams are experts at talking to and coaching users towards conversion and success.

While QA hustles to break it down, customer support can work side-by-side to craft sensible messaging around those scenarios. The result? More sales, fewer customer calls and complaints.

Some mistakes (e.g. date formats, passwords, emails, forgotten fields) are both predictable and recurring mistakes that cannot be prevented by better design. Design the outcome to encourage the user to engage with the app’s voice, correct her mistakes, and move onwards.

2. No one ever died of humility
While it can be tempting to assume that the user is at fault when an error is made, it’s also possible that the process wasn’t clear enough in the first place.

Error messaging should be concise, friendly, and knowledgeable, but also employ humility, empathy, and apology. I personally love Firefox’s “well this is embarrassing” statement. I tend to crash my OS frequently, and it’s not FF’s fault, yet every time FF makes the assumption that I’m not at fault.

3. Bake with cookies!
Among the most unforgiving experiences occurs when a user fills out a form and having all her data it wiped out for having forgotten or mis-typed field. If you’re not a banking institution you don’t have the luxury of abusing your user by dumping her data.

Save as much information as is possible and safe for your user (e.g. re-fill everything possible with exceptions for passwords, TOS, etc.), and then clearly mark the areas your users need to correct. Saving user data will reduce user annoyance and the chances that she’ll abandon the process.

4. Don’t cheap out
Don’t cheap out on design when it comes to error messaging. Users who hit error messages are helping your team learn how to optimize your product.

Do use this as an opportunity to build a relationship and engage with humor. You can soften the feeling with typeface and words that don’t alarm, humiliate, or annoy.

Do use resourceful and helpful iconography to reduce the amount of words.

5. Error messages are not features
As great as your app’s error messages may be, they aren’t supposed to become legacy features.

Assign a team member to study the error logs. Learn what happens when your users make mistakes and constantly optimize.

• What fields were incorrectly filled out?
• What did the users put in those fields or forget to put in those fields?
• How many sessions do your users log?
• What’s the abandonment rate?

Error messaging can be the simple tweak that influences your bottom line (conversion), so it’s worth ongoing evaluation and investment.

6. Everyone loves the funny guy
It’s easy to hide behind a great sense of humor, but it’s also easy to distract your user. Use low-key and relative humor like icanhazcheeseburger.com that doesn’t overshadow the error messaging itself.

7. Choose helpful over cute
Error messaging should be more helpful than cute. CushyCMS’s “Wharrgarbl” was only amusing and forgivable the first time I saw it, by the third time I was annoyed and still couldn’t figure out what the source of the problem was.

8. Go behind the browser
If you are low on resources or without customer support, integrate your error messaging within the user’s browser. This will force the user to stop and read what she’s doing incorrectly. Oddly, I’ve seen users mutter and blame the browser versus themselves or the app.

9. Don’t play hide-and-seek
Bring your user directly the area where the problem is. Meetup.com has fantastic messaging, but unfortunately during the sales process, they bring the user back to the top of the page, when the error is well below the fold. This causes the user to pause and think versus correcting and moving forward.

10. Don’t design single-size error messaging
One size error messaging is a bad idea. If a user has failed to put a size or choose a color of a purchase she wants to make on zappos.com, the error message should point out that specific issue versus being popped into the “Item Out of Stock” skin used elsewhere across the site (@zappos – please fix!).

Error messaging occurs when a user makes a mistake (dumb user) and it’s an element of your app’s design that can keep the party going or literally result in a lost sale.

If there were one thing I’d like you to take away from this article it would be that you go back to your team and talk about and revise your error messaging, and then let me know what the results are. My prediction is that writing hero-worthy error messages will result in improvement and lift across your sign-up, sales, and data gathering processes.

Share on Facebook