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.

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.

Why we don't design for "Innovation"

We love technology and the things it can help us do. We are excited by the new functionality and resources we see everyday. However, we regularly see and hear from people who wish the technology they already have met their needs better. Thinking back over our most recent research sessions the participants - executives, students and reporters - all want to access information that addresses their needs in a way that's easy to find.

Solving some of these problems is pretty easy, like designing a faceted search, creating a comprehensive structure for information and designing type and imagery that supports the content. Solving others can be tricky politically, like providing the names of appropriate people to contact if needed (creating transparency). A few more solutions can be time consuming, like developing summaries for a database of long documents or enabling personalization. All of these are manageable, however, and provide a significantly improved user experience.

It would be amazing to develop the next big thing, but we see a lot of room for improved user experiences using the tools we and our clients already have. Learning about what matters to people and providing it quickly and manageably never gets old.

coverleaf.com digital magazine marketplace

In a rapidly changing market, Texterity, Inc. (now part of GTxcel) saw an opportunity to engage readers with digital editions of print magazines online. We helped define, visualize, and create what that would be: coverleaf.com, a site for magazine enthusiasts to explore, purchase, save, and share digital magazine content.

We designed the coverleaf.com beta site, launch site, and identity, and consulted on UX as the business model evolved.

We provided:

• Stakeholder workshop
• UX design
• Paper prototype development and testing
• Identity design
• Visual and UI design
• Specifications for developers

Home page

Magazine detail page

My Stuff area for clipping, saving, and sharing magazines