Establishing Qualitative Criteria for IA and UX in One Fell Swoop: How to Conduct a Card Sort with Storytelling

Slides from a presentation we did at the Boston Mini UPA conference in June 2010. "Card Sorts with Storytelling" is how we describe the type of research we started doing with site users for MIT Medical in 2008. We combined methods – a card sort, careful questioning and task completion – into a protocol to get information to inform site map, feature and overall IA decision-making, which was stuck due to lack of team consensus. The sessions were successful, and the results were extremely helpful in helping the team focus on making the site as useful as possible for the MIT community.

We refined and repeated the format on several higher-ed projects with similar success. This practice is not intended to replace more rigorous testing, but rather to quickly provide a project team and visual designers with user information when there otherwise would be none.

Establishing Qualitative Criteria for IA and UX in One Fell Swoop -- How to Conduct a Card Sort with Storytelling

View more presentations from Nimble Partners.

User experience design overview for Tufts' School of Medicine web health communication class

Slides from my talk at Lisa Gualtieri's class at Tufts University SOM. Created for health communication students to give them an overview of design activities and the process of designing sites and apps.

User experience design overview for Tufts' School of Medicine web health communication class

View more presentations from Nimble Partners.

Making "Support" helpful - some tips for Twitter

We all run into problems now and then using technology – heck, I'm a pretty tech-savvy person myself, and even I sometimes have to contact tech support. And when I do, there is nothing I find more infuriating and representative of poor customer support practices and user experience than hiding vital support information.

Consider a recent example of this: we're having problems getting our tweets to load on the Nimble Partners home page. I've worked tech support myself, so I know that the first step is to try to reproduce the bug and isolate the problem. Since nothing about our code had changed, and nothing about seaofclouds' script had changed either, I suspected the problem was with our Twitter stream. This was easily tested by successfully loading another public Twitter stream onto our home page.

So, now I knew that @nimblepartners was the most likely source of error. Next thing to do: check Twitter's support documentation and Google for potential explanations. I couldn't find anything, so finally I realized I'd have to file a support ticket. Twitter's support website allows you to log in and check the status of your current tickets, but there's one critically important thing it doesn't easily let you do: file a ticket.

That's right: you can spend all day looking through the otherwise well-designed ticket review pages, but if there's an obvious link to file a ticket, I never found one. After many frustrating minutes, I finally gave up and Googled for how to file a ticket, which eventually got me the right link – on an externally hosted site totally separate from Twitter's Support site. (Update: days later, I discovered that FAQs about account abuse and a small selection of other issues have links to the ticket form – but there's no consistent placement for or treatment of a link area.)

I understand why companies want to drive customers to online documentation: it's vastly cheaper than having a human provide assistance, and most of the time, a good FAQ will solve most of the problems. But there's no reason to hide or bury vital contact information – all this does is annoy your user base, and for a company like Twitter that seems to pride itself on interface simplicity and a friendly, inviting user experience, this kind of hide-and-seek game is antithetical to the way they're trying to present themselves.

One possible solution: make the link available on support FAQ pages as part of a consistently placed and worded "did this answer help you?" area at the end of each question. This hides the link from the casual emailer who rarely bothers to click into or read the support questions, but still makes it available for people who genuinely need assistance. Ultimately, it's counterproductive to annoy customers by implying you don't want to talk to them – an ironic result for a company whose basic mission is to promote communication.

Tufts University Advancement usability & form design

Tufts University’s Advancement group found that two-thirds of the visitors to its online giving form abandoned the page before completing a donation. Although online donations were steady and significant, they knew they needed to improve the form’s usability to encourage donors to pledge money.

We interviewed a cross-section of representative donors, asking open-ended questions to identify patterns of use and watching them interact with the form to determine barriers to making a donation. Based on these interviews, we illustrated and documented recommendations for improvements to the form. A second round of testing, this time on the redesigned form, confirmed that donors found the new interface easier to use.

Work included:

• Usability tests and results analysis
• User interface and user experience design recommendations

Inline observations and recommendations on the original giving form.

Inline observations and recommendations on the revised giving form.

A Tip for Visual and Information Design from the Movies

About this time of year I participate in the AIGA's student portfolio review. Graduating designers pay for the "privilege" of showing their work to as many volunteer professionals as possible within a set time limit. As a reviewer, the heat is on to grasp a student's capabilities in a nanosecond and impart some wisdom that will magically help them transform their portfolio into a thing of power and beauty that will make jaded design hiring managers weep with awe.

These brave and determined kids have paid through the nose for college, paid quite a bit of beer money to be critiqued, and fairly enough, have high expectations of the event. The work varies. In a room of about 16, there are a few standouts. For one or maybe two, it is hard to believe that they had formal design education. Last year I was faced with a portfolio that the student should have been able to use to get a refund from his college, or at least a free extra year. College doesn't work that way, unfortunately, and I had to figure out something constructive to say, fast.

The student used his own illustrations as backgrounds to several CD packages and action movie posters. The illustrations were graffiti-like and the type was big and bold. Overall, the work was a visual explosion, not in a cool way. I started talking about movies – about how in action movies there's a star and a best supporting actor or two. Visual design is like that. You can think of what you are designing as a movie with a cast. To tell the story, there may be a headlining star above everyone else – they are the most important thing. In a comedy or period piece there may be an ensemble cast and the setting may play a key role. In a buddy film there are two stars who are usually very different, and it's the chemistry between them that makes the movie interesting. When you think about your poster or site or whatever as having a cast, and you identify elements of the design in terms of a cast of characters with "roles," it forces you to think about hierarchy and the relationship between elements, which is a good thing. When a film has a lot of big stars, the script has to be written to use them wisely, where they have the most impact.

My student nodded like I was speaking a language that he understood, which made me feel relieved. I have no idea how he's fared, but I used the movie analogy yesterday to help get myself unstuck on a website design. It has helped me, and I really hope it has helped him.

Guest post on designing web-based communities for professionals

We are pleased to contribute a post about design to Leader Networks' blog, Building Online Communities for Business. We've worked with Vanessa on a few projects, and it is always a pleasure. Vanessa's interest in and knowledge of communities of practice pre-dates the web. She's translated her expertise on the topic from the offline world to the online world, well, expertly.

Designing Web-Based Communities for Professionals

Posted on 09 July 2010. Tags: Social Media, social media strategy

Designing online communities for business is a subtle blend of creating the right business model, a clear understanding and service of member needs and a usable interface that enables professionals to focus on engagement.

Too often, however, the design of professional communities draw inspiration from consumer communities and try to mirror the user experience they experience on non-work based social applications. Frequently, there are far too many bells and whistles – gratuitous features – built into the design of B2B communities that can get in the way of successful use of the community of practice.

While sexy widgets are neat playthings for users who are browsing communities for social or fun reasons, in a workplace setting, they just serve as distractions to getting the job done, the information shared or found, or the connection accomplished to solve a business problem. One of the main reasons why online communities for business often fail to provide a meaningful user experience is a lack of understanding about best practice design for professionals.

With this in mind, I have invited my colleague, Tania Schlatter, to be a guest blogger and share her thoughts on building online communities for business from a design perspective. Tania is co-founder of Nimble Partners, and an award-winning designer who focuses on human-centered websites and applications.

Now onto Tania’s thoughts about context and guidelines to keep in mind when creating user interface requirements, selecting a designer or firm, and overseeing the design and production of an online community for professionals…

What’s unique about designing for a professional community?

Professional online communities don’t need slick features and interfaces to be vibrant and successful. In fact, online communities such as Usenet were at the heart of the birth of the Internet in 1980 and were successful in plain text – before there were graphical web browsers. Usenet newsgroups were lists of topics discussed by reading messages and responding to them in text. Even now, there are active online professional communities that use only text-based mailing lists for interaction, but they are dwindling as the number of graphical tools increases and the cost of developing with them goes down. Yet the essential ingredient remains the same today as it was in 1980 – passionate contributors – which has nothing to do with technical platforms, interface widgets and their design.

The proliferation of low-cost tools has created the expectation that a “best in class” community will usually employ the latest technology. How do you navigate this gap between what’s needed and what’s expected?

What is are the first strategic steps in the design process?

Before you make decisions about features and visual design, you need to know who is interested in your community and what their preferred tools and methods of communication are.

For example, executives we talked to in supply chain management were interested in being able to contact peers with whom they share an academic research partner, but they do not want to do so in real-time. How do we know this? When designing a partner-only site for sponsors of MIT’s Center for Transportation and Logistics, we talked with executives and asked them to select the most interesting content and features from a list of possibilities. We also asked what kind of information and interactions they wanted, and how they expected to use the site. Before talking with the execs, the client was considering a chat feature. Afterwards, we realized that partners were much more interested in robust search features, a discussion section and summaries of research. Had we pinned the site interaction on chat, it would have failed.

The key to taking advantage of the tools available today is to base the community’s feature set on user behavior and how the tools fit their objectives. Learning about your community members in the planning stage allows you to make informed decisions throughout the design, development and management of the site. It helps ensure that the look and feel and features you offer match what users need and want.

Interviews

When planning the community, it is essential to get input from representative users. There are a number of ways to do this quickly and inexpensively, although they may require a fair amount of management to identify participants and schedule interview sessions.

Identify 8-12 potential community members with whom your team has a rapport. Ideally, meet with them one-on-one briefly in person or schedule a 15-minute call. Find out what social media tools they are currently using for business, when and why they use them, what their pressing concerns are, and if/how those needs are being met. This number of interviews will provide a good range of input while still being manageable. If you have a community with a diverse set of user types, such as a community for lawyers that covers many specialties, you may need to interview 3-4 representatives of each major group.

Document what you know

• Document the business perspective: identify and articulate the organization’s goals for the community. What will make it successful? Are there metrics?

• Develop user scenarios. User scenarios are stories about who will come to the site and why, told from the user perspective. They should be composites of what you learned from the interviews and should define the most common examples of what people will be looking for and sharing, and the situation of use. You can create these with your own team or with the help of a community builder or user experience designer. Developing scenarios is a good test of concepts – if your scenarios feel forced, the team will know there may not yet be compelling reasons for people to use the community.

Visual design

Your community’s overall look and feel should generally be simple, straightforward and convey aspects of the parent brand to keep the focus on interaction and content. But “simple” doesn’t mean “undesigned“ – every element, intentional or not, will communicate.

At a minimum, the design of the community should include:

• logo or unique typographic treatment for the name of the community (Identity)
• color palette
• graphic style for navigation
• typographic treatment of all text including heads

Home page and profile page templates for INmobile.org
invitation-only community for executives in the
wireless industry.

Does the community need to look like the corporate web site?

Unless you’re creating a stand-alone community unconnected to a business or organization, the design of the community should relate to the parent organization’s logo, typography, and other brand elements. Chances are that community members are aware of the connection to a parent brand or sponsor, and that this is a key reason they’re drawn to the community. A familiar look will help people feel comfortable and confident that the community possesses the same high-quality characteristics of the parent brand or organization.

Communities often have a growing body of content. How should the content be structured?

Even blogs and communities need a solid information architecture. In an online community, this may take the form of categories for features and discussion forums, as well as tags that help users narrow in on the content that most interests them. Search is an essential and expected feature, and ideally provides more than just keyword-based results, such as results organized by type – article, discussion topic, video, etc.

To develop the information structure, list and prioritize features and content based on what you’ve learned, and have the designer or developer create a prototype or wireframe sketches. These are great tools for usability testing, and will allow the team to explore options for the best ways to engage your community members.

Wireframe sketch for a home page for partner executives 
of MIT’s CTL Program

What are the most important features to have in the community?

Remember the success of text-only communities? Include only the essential features that you know will allow people to find information, share it and exchange ideas in a way that fits their situation and the parent organization’s goals.

For example, features that show activity are likely to encourage participation, like a crowded restaurant: “everyone’s here – it must be good.” Other features are a less certain win. Josh Porter, a designer who specializes in community UIs, recommends the use of ranking contributors (“reputation points”). In his experience, successful communities hold participants accountable for their contributions, and the possibility of recognition encourages “good” behavior and discourages “bad” behavior. In my experience, like real-time chat, a feature like this is never an automatic “must have” – it can make or break a community, and should be implemented only if it fits the culture of your community and facilitates sharing.

After the community has been designed, what needs to happen to maintain it?

The key to maintaining your site’s design is consistency: using the color palette, type styles and page templates when adding content or making any changes. These elements are a rulebook for ensuring your community continues to look neat and professional. Make sure your designer provides a style guide or other document explaining how to keep the site looking great, and that the developer is willing and available to make changes if and when needed.

Published on BusinessBlogs: http://www.businessblogshub.com/2010/07/designing-web-based-communities-for-professionals/

Also published on Leader Network's blog: http://blog.leadernetworks.com/2010/03/designing-web-based-communities-for.html

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.