Catapult.org user experience

Catapult.org is a Webby-nominated crowdfunding website devoted to projects that improve the lives of girls and women worldwide. Nimble Partners worked with Catapult's founding team from concept to launch to define the overall user experience, specify all content and interactions, and work with visual design and development.

UX work included exploring engaging ways to find projects, testing an interactive prototype, and specifying all administration features for the site.

We're thrilled that in the first year 286 projects were funded, and that the site is going strong!

Home page wireframe:


Home page, designed by Hyperakt and developed by Mindgrub based on our wireframes and information architecture.


Working out content and features for the project page:


Project page, designed by Hyperakt and coded by Mindgrub:


Teams page wireframe:


Teams page, designed by Hyperakt and coded by Mindgrub:


Sample administrative interface screens:

User scenarios beyond the web

User scenarios have been widely adopted by web designers as a useful tool for helping ensure sites provide what visitors need and expect. Less well-known is that they are also a great tool for ensuring offline communications do the same.

Recently I was in Sears. They have created central checkout kiosks at my local store (Cambridge, MA) which is a step forward, because previously, it was impossible to find a cash register and a salesperson at the same time. Now there's a large checkout hub at the exit/entrance to the connecting mall. When I entered the store I came from downstairs – not from the mall. I did not pass a kiosk. I shopped and could not find where to pay. I looked for signs, and found this (pardon the fuzzy, surreptitiously shot image).



The sign points to a wall. There's no pay kiosk on either side of the wall.

This could be blamed on a number of things, but for the sake of this post I'm going to pin it on a lack of user scenarios when the store was planning the pay kiosks. If, when someone in Sears corporate offices was thinking about or planning the kiosks, the context of shoppers making purchases came up, hopefully they would have realized that finding where to pay is just one part of a flow that ends with paying – that paying is a part of a larger scenario.

A few years ago, we worked with the marketing team at Sloan Executive Education. They run programs that are attended by professionals from all over the world. Aware that there was a flow of information, and that it needed to be consistent to ensure that expectations were met, we mapped out scenarios related to how potential participants found out about the programs, registered, made travel plans and arrived at the program. After listing all the recipient types and situations, we could evaluate the communications and see where information needed to be changed, added or made more consistent.

There are hybrid online/offline situations that call for scenarios as well. Hospitals can have complex and inconsistent technical setups that send healthcare workers back and forth between paper and electronic files. Working with a client who provides software to streamline hospital discharge, we needed to design a fax form that would literally connect paper and digital correspondence. Care facilities received faxes from hospitals to let them know there was a potential patient for them. Included in the fax was a unique code that, when entered on a website, would provide the patient details and acceptance information. We used scenarios that captured the full flow of contact – online and offline. Because we looked beyond the web interactions we were able to design a complete system that worked, not just a form or site that only addressed part of the situation.

Higher education: the destination site is not dead

The pace and rate of technological change is dizzying. We are seeing and hearing many organizations become disoriented. In higher education as with any organization, when there are funds there is a tendency to want the latest and coolest. The possibilities available - cheap and fast streaming video, presentation design "skins" that change on the fly, the ability to aggregate and display content from a wide variety of sources - are tempting.

Critical thinking must be present in the higher education site redesign process. Like the dessert table at a great buffet, it is easy to over do it, and forget about providing the nutrients your body (like your site visitors) need.

Bottom line - if you are a site for a department at a college or university, your site visitors need facts. They need to know what the department is. They need to know how they might engage with you and for what. They need to know who is in charge of what and who to contact for what. They need to know how your department or organization may be connected to others or the university as a whole. Prospective and current students and their parents get a huge amount of their information from the internet. They are relying on your institution or department's site for the details they need. There are many, many sites that provide inspiration on every topic imaginable. Chances are, if you have a current or potential student on your site, or even a donor, they have been to those sites and are already inspired. They are on your site to move forward and take action - to go beyond inspiration and act.

Organizations must ask themselves - are they in the media business? If not, how cool and inspiring is your cutting edge site going to be in a few months when the content needs updating? How impressive will it be when news feeds pull in content that isn't what your audience is looking for or have already seen somewhere else?

Higher education sites are destinations. Ideally, they do both - inspire the visitor by reassuring them that they are in the right place for their interests (video could really help here), and help them engage. This takes more facts than flash, more veggies than dessert, smelling salts and a heavy dose of restraint (also known as user research).

Challenging the convention of starting with content

When we were recently designing a new site for ourselves, the effort started with content. We thought that once we had an idea about the content, we'd to do the design. We developed a rough draft of the things we wanted to say, worked with a great writer and came up with a final draft.

Visual designs were based on the content. After a few rounds, we liked the design. The problem was, we were no longer satisfied with the words. What was it about reading the words in the design that made us want to change them? Everything had looked good in Word. If we had been just the web design team and not also the client we would have probably been annoyed: "Don't they know what they want? It's about to launch!" We had fallen into a trap we had seen but not experienced, the inability to visualize something without seeing it complete.

We were reminded that it takes two to tango – content and design go hand in hand to communicate, and should be developed simultaneously (along with behaviors if designing an app) as much as possible to create a cohesive experience. We should have recognized it sooner and prescribed one of our own solutions – using schematic page diagrams (aka wireframes) from the beginning to define content and layout at a high level. Schematics show the types of content without showing actual writing, and the hierarchy of the layout without showing visual design. If we had done them, once the wireframes felt right we could have moved the writing and the visual design along simultaneously, which would have saved a lot of time.

Try again ... this time in English.

One of the most frequent problems we see on websites is jargon-heavy text. There are many reasons why this happens: maybe the writing team is so used to serving an internal audience they don't realize that others can't understand their content; or maybe the website serves an industry that thrives on buzzwords, such as consulting. Sometimes it just happens by accident or because no one has time to really review the text before it gets posted. But no matter the cause, the result is almost always a site that feels insular, unfriendly, and worst of all, crammed with content that doesn't resonate with the audience.

One of the worst offenders on many sites is the legalese on Terms of Use pages. Hardly anyone other than lawyers actually reads these closely; they're just long, impenetrable documents we all have to pretend we've read before we can check off a box and complete a registration form.

But this week, the Consumerist singled out Aviary, a site providing online graphics tools, for their radical and simple approach to their Terms of Use page: they provided an English translation paralleling the legalese. Using concise and friendly language, Aviary spells out everything you'd want to know about their Terms of Use, from who owns the graphics you create on the site, to the different payment plans they offer, to the licensing agreements for site content. Aviary's approach transforms an unreadable page into one that anyone can understand, a goal consistent with their mission to "make creation accessible to artists of all genres."

We hope more companies follow Aviary's lead and make their content clear and easy to read, which is a more successful way to reach their audience than "buzzword compliance."