Forget that boring loading notification, 10%…  20%…  30%… blah.

This game switches in messages that make waiting for the game to load entertaining and funny, giving the user a positive experience before they have even played the game.

So although there may not be a client project for which I can use munching brains, or rising from graves, still a fun twist on how to engage the user while they wait.

New brand strategies! New visual systems! New identifiers! New communications vehicles! New digital strategies! New websites! New applications!

At the time, we knew we had a lot on our plates, but looking back, we’re kind of amazed. Not that we have time to look back for long, mind you, because 2013 is shaping up to be even more busy… and rewarding.

One particular project makes us want to toot our own horn a bit, mind you… but mostly because the project is all about finding time to toot our own horn.

We’ve had the classic problem known as the “cobbler’s kids dilemma”: we were so busy making sure our clients were building and developing compelling communications that we weren’t spending much time revisiting our own shingle on the web. Every time we’d try and revisit our digital presence, we’d get started… and then shelve it for a new engagement, or a ramp-up period with one of our existing partners.

Or at least that’s what we did… until now.

Go see it.

Our brand new website, freshly launched this week.

(!!!)

Complete with an expanded portfolio section, updates on what we’ve been working on, and a whole bunch of bios.

(!!!)

We’re pretty happy we cobbled some new kicks for ourselves… and we hope you enjoy it, too.

And if you need brand strategy, messaging, print or digital design, content strategy, digital strategy, social media strategy, a new website… well, take a look, and feel free to get in touch.

We’d love to work with you.

When printed on an 11 x 17 page, the phone width matches the “real world” dimension of the iPhone, but offers enough height to sketch for the scroll.  We found that starting this way helps us to distill the information that is most important to users, and effectively establish the hierarchy of content.

You’re welcome to download the template for your own use.

iPhone10 Paper Prototype

I was talking to a client recently about requirements for a website. They’re a small, mission-driven organization seeking to engage and develop their community.

We talked initially about a basic news feed, a place for photos and stories, and descriptions of opportunities for involvement.

Limited resources (both financial and human.) Basic requirements. Simple project. Pretty straightforward.

Right? Right?!?

I’m definitely not singling this client out,  because what happened next happens all the time:

What about a…
Could we have a…
I’ve heard there’s a way to…

And that’s when it came out. Out of nowhere, I responded:

We need to be really careful here; what’s happening now is a bit like browsing the grocery store on an empty stomach.

It’s understandable.

Compelling websites and cool interactive functionality surround us when we spend time online. It all looks so easy and intuitive. And when your organization is lagging behind the web curve—or lacking a real presence entirely—there’s going to be a hunger to go big. However, as anyone who’s ever worked on a web project knows, the real work begins once the site is launched. And over-reaching can result in biting off much more than you can chew.

Checkout shock

Over-reaching with features and functions can end up costing more time and money than you’re prepared to invest. When a web project begins, the process is anchored by an underlying sense of project scope and, ideally, a baseline sense of the required features and functions. Once those features / functions are refined and solidified, additions will almost certainly impact the project bottom line—either in terms of schedule and / or cost.

There’s a ripple effect that results from even the (seemingly) simplest of changes. Adjustments to features / functions require adjustments to prototypes which require adjustments to design, front-end html / theming and CMS development. Refinements to functionality are perfectly normal during testing and prototyping, but adding features—beyond a certain point—can be a dangerous, slippery slope.

More than you can chew

Of perhaps even greater concern is the potential for over-spending to create a website you can’t maintain on your own. Dynamic content strategies sound great, but they require significant writing and editorial talent to feed and curate. Large imagery carousels certainly look cool, but they require photography and graphic design chops to produce imagery that meets quality standards (sub-par carousel graphics can quickly undermine an otherwise beautiful website). User commenting / interaction (usually) requires moderation, Twitter integrations require someone to Tweet, custom page-types / CMS configurations require increased in-house technical capabilities to manage the site going forward… and so on.

Shop smart

Our job as consultants is to collaborate with clients to specify website requirements that meet goals, address real user needs, and provide the most bang for the client’s buck. Ranking desired features and functions in terms of how well they meet those criteria, along with how complicated they are to implement, can help rationalize the process. If a particular feature ranks low on the goals / user needs scale, and high on the complexity scale, move it off the table. Exercises of this nature help focus website specifications on real needs, not on one’s hunger for (perceived) “cool.”

In advance of these exercises, just like when shopping, it’s important to plan ahead.

Know your appetite

Before embarking on a web project, be sure you have a keen sense of your in-house writing, editorial, design, and technology capabilities. Given your assessment, how much ongoing website management can your team realistically stomach? Unless you plan on adding additional resources, this set of capabilities (along with timeline and budget of course!) provides the initial framework within which you can begin outlining desired features and functions.

Avoid “blue sky” wish list sessions. Always set some real criteria first.

Know who’s coming to dinner

Websites should never be defined solely by you (or your consultant) in a conference room. While proper discovery and testing phases will certainly involve real-life users, it’s important to come into the project with a basic set of user needs to help guide your thinking.

What are the questions people answering your phones hear all the time? Do you have volunteers? What do they hear? Are there particular online services your constituencies are asking for? Understanding what visitors think, feel, and (should) do when they arrive at your website is an important part of developing a user-focused presence. Your consultants can help, but there’s nothing stopping you from doing a little homework to help you get properly triangulated ahead of time.

Simply put, the intersection of user needs and your organizational goals / resources / capabilities should frame your website’s functionality.

And know you can always shop again, later…

Finally, know there’s always room to grow.

Unfortunately, there remains a pervasive sense that once websites are launched, that’s that… the site is done. Not true. This isn’t your annual report going off to the printer.

Be comfortable with the notion of walking before you run. When they are properly defined and developed, websites are scalable. Functionality can be added. If you’re feeling woefully out of date and starving for a new website, focus on getting caught up before charging blindly into the future.

Maintaining a modern website takes work—more work than you might think. Your goal should be to operate within your means, and scale your website and capabilities in tandem.

In the end, a little planning can go along way towards getting your organization in the right mindset for a web project. Knowing your capabilities and remaining focused on real goals and user needs will make for a more efficient process, and a more effective end result.

Your organization, and your dinner guests, will thank you.

Ok. Starving. Off to Foodies…

We’ve all been there.

You’ve considered all the requirements, spent quality time with your whiteboard, consulted with your colleagues, even muttered to yourself while walking the dog. It’s time to conquer a particularly thorny area of a client’s new website. You develop a prototype, and over the following days, weeks, and months, you poke it, prod it, tear it down, and build it back up… only to very closely resemble the prototype you developed in the first place!

When working with clients on complicated areas of a new website—whether it a be a multifaceted product table for a financial services company or an index of programs and departments for a major university—we start by developing an initial approach the client can take around the block a few times. And more often than not, we end up right where we started.

It may sound like a waste of time, but it isn’t. This process enables the client to “try on” different permutations of their site–and exploring what doesn’t work is just as important as learning what does.

Critical to a successful website project is ensuring the process remain collaborative, interactive, and efficient. ProtoShare, as a cloud-based prototyping tool, allows clients to experience their prototype at a high-enough fidelity to draw real conclusions: “reviewer mode” allows clients (and test users) to initiate conversations about particular elements of the prototype, and the “multiple design” feature makes it easy to archive previous iterations. Ending where you started is just a click away.

In the end, this process gives my clients what they need to move ahead with confidence. And with a tool like ProtoShare, people like us can remain efficient (and calm!) as we circle the solution with our clients.

In a similar way, user observation testing provides us with a valuable way to help define user experience on a computer or mobile device. Simply defined, it is the process of asking members of your target audience to complete specific tasks while you look on. But here’s the tricky part: you can’t help them find their way.

While you may have been staring at the wireframe or prototype for weeks — and know the navigation like the back of your hand — you can’t suggest they keep scrolling, or that they should look in the footer, or,  “Can’t you see it? It’s right there!”

The results you see when you stand back and observe will often surprise you, and ultimately ensure that the most important people guide the final functionality of what you’re creating: the users.

When you’re in the process of defining a project schedule, time should be set aside specifically for user observation testing. Whether you’re an information architect, user experience designer, or interactive producer, it’s unlikely you’ll think of everything. Even if personas are used to define the target audience, it’s impossible to actually think like 4 or 5 unique people.

Further, when working on a website redesign, we must also factor in the preconceived notions of functionality that users may be bringing with them from the previous version of the site. There are many guidelines to follow when conducting testing, but overall, one rule matters most: test early, and test often. No matter how it happens, whether formally or informally, testing one person is always better than testing none.

The key to effective user testing is setting the stage to help your participants feel at ease. Users who feel comfortable are more likely to spend an amount of time similar to what that they would normally allot to completing a task. If participants are nervous, they may rush through the site, clicking around too quickly to properly read the navigation. Or, conversely, participants may be hesitant to say that they are unable to complete a task for fear of disappointing.

Suggestions for setting the stage of a productive user observation session:

• Wear something nice but casual
• Make sure to arrive early to get set up
• Give clear instructions to each participant:
  • Ask the user to take notes so you can compile their observations later, and ask if you can take notes, too
  • Establish the time frame of roughly 15 – 20 minutes
  • Ask them to speak out loud about what they are expecting, and/or thinking while working through each task
  • Let them know that if a task cannot be completed they may move on to the next at anytime, and you will be unable to answer any questions
• Take 10 minutes between participants to write additional notes, including first impressions, task completion rates, and their observations
• Consider using a screen and video capture tool like Camtasia to record user responses
• Ask for overall feedback from the participant — once the tasks are finished
• Testing in person is ideal, but there are also online resources (I like TryMyUi) that allow you to send out user observation tasks and instructions to a chosen demographic, and receive video footage in return, as well as responses to overall questions, if included.

If you do make the choice to factor in testing to the overall schedule, be sure to keep three things in mind: test early, test often, and watch quietly.

Interactive wireframes are an important tool for conveying the proposed functionality of a website. It is, however, always important to set the stage when first showing a wireframe to a client: they are not meant to represent design, but rather to highlight the information architecture of, and the journey that a user might take through the site.

Does it answer the important questions from a user perspective? Where am I? Where can I go? How can I get there? How do I get back? When partnered with a functional specification and representative page type designs, everyone involved can develop a clear understanding of look and feel, user experience, and development considerations.

Protoshare is a web-based tool that has a GUI approach, with objects organized according to a very intuitive component palette. The inspector allows for a good amount of object customization, including animation, visibility logic, appearance, position, size and specification details. Global elements can be created using masters and templates, and design elements can be imported and managed through the assets library. When planning state functionality, there is a quick review mode that allows you to easily test the wireframe before it goes live. To share, files can easily be exported and published to the web. Reviewers can post feedback directly onto the UI, and emails can be set to alert the creator of new comments or questions.

Another feature I like in Protoshare is the ability to have multiple page designs within a single project. This means that alternate approaches can be easily produced or different designs altogether, perhaps a tablet or mobile approach to facilitate a responsive build. Overall I highly recommend Protoshare. The learning curve is minimal, and functionality is just enough to help cut down on time needed to wireframe.

Most importantly, it encourages an early and ongoing dialogue between strategists, designers, developers and stakeholders, allowing everyone to take part in guiding the direction of the project.

Lessons learned from the client perspective—our friends at Chorus America share lessons learned during a major website project.

In the fall of 2010, we were lucky enough to be selected by Chorus America—the national service organization for choruses, choral leaders, and singers—to collaborate with them on a complete overhaul of their website. For non-profit membership organizations, websites are crucial. Not only must they communicate value, drive earned and contributed revenue, and market programs and services—they’re also often a primary means of delivering programs and services to the field. We’ve had plenty of experience over the years collaborating with non-profit cultural groups and membership organizations (including Chorus America’s peer in the orchestra world, the League of American Orchestras), and felt confident we were an excellent fit for the project.

We learned many things over the ensuing year, but what really sticks out is how excellent a fit the client was for this project. The team at Chorus America was prepared, hands-on, and ready to roll from the get-go. They understood that a project of this stature requires engagement at the highest levels of their organization, and that they would be partners in crafting the strategy and vision for the new site. Perhaps most importantly, they dug in and took ownership of their content.

Fast forward to earlier this year and the launch of the new Chorus America website. We’re certainly proud of the strategy, information architecture, design, and development work that ultimately led to their new website—one that places Chorus America’s value front and center, and dynamically connects individuals in the field with the information they need to do their jobs, further their careers, and advance their organizations.

But so much of the credit must go to the team at Chorus America, and we encourage anyone considering a major website project to read their story: Once Upon a Website (How Building a Website Can Transform an Organization) shares lessons learned from Chorus America’s point of view. It’s an excellent, honest piece.

Fit matters. And success always takes two.