Microsoft’s SharePoint has become a popular software tool used to manage everything from document repositories to full-blown intranets. While enterprise-scale SharePoint sites are typically built and maintained by dedicated specialist teams, the vast majority are much more of a do-it-yourself proposition, where individuals and teams take advantage of the tool’s near-ubiquitous deployment and build sites for just about anything you can think of.

Unfortunately, many of these do-it-yourself sites fall victim to the “just because you can doesn’t necessarily mean you should” syndrome where sites devolve into an inefficient nightmare of bloat and feature-itis. If you’ve ever worked in an environment where teams are empowered to build their own team sites, you’ve seen the results — sites that have every available gizmo crammed onto the screen, webparts that haven’t seen an update in years, impossible-to-find content, and so on.

At Wells Fargo, a content management team for which I was providing design consulting was planning to use SharePoint to consolidate internal publishing processes which over time had become increasingly difficult to manage due to a proliferation of overlapping processes, tools, and tracking methods. The publishing team was able to avoid the feature-itis trap and built a successful site on their own by employing a number of effective user-centered design techniques. Although my previous UX design experience had primarily been on Web design projects, I was able to obtain client buy-in by pointing out some of the similarities between SharePoint and Web projects, and that the additional investment in time and effort would be well worth it to their internal customers.

The tips below employ principles and techniques that will be familiar to UX designers, but can be used by anyone seeking to build a better SharePoint site.

1. Be User-Centric, Not Tool-Centric

Avoid the tendency to let the tools dictate the interaction. Just because a stock component is available doesn’t necessarily mean that you have to use it in the way that it is normally implemented, or that you even have to use it at all. Instead, clearly define your site’s objectives first, and use that document to guide your decisions regarding how and which tools to use.

While some early conceptions of the Wells publishing team’s site were based upon implementations being used by other groups within the organization, their needs were unique enough that the wisdom of a custom, user-centered design approach as opposed to a one-size-fits-all solution became apparent. Once committed to that approach, it became the practice to first analyze a business process on its own merits and then select, modify, or reject a SharePoint component rather than to choose a component first and then contort the process to fit the tool.

2. Architecture First

There’s nothing worse than having to scrap everything and start over when you realize that you didn’t take into account some critical element or step in the process. Redesigning might not be a major thing if you have a simple site with minimum interactivity, but on more complex sites, it can result in a major hit against your project schedule — especially if you will be employing SharePoint subsites. Therefore, it’s almost always a good idea to diagram your site structure before committing to code, taking into account the paths that users will take through the site to accomplish their tasks.

The Wells team accomplished this by documenting their existing workflows and identifying areas of overlap and redundancy that could be streamlined with the new system. We were also able to take advantage of the extensive user feedback that the publishing team had previously compiled, which gave us valuable insights into the difficulties users were encountering while using the existing systems, along with suggestions on process improvements. Documenting these in a flowchart-like format rather than as written step-by-step procedures made it much easier to visualize processes and group discrete tasks into functional chunks that corresponded not only with site architectural elements, but also harmonized well with offline workflows.

3. Use Wireframes and Prototypes

Even though SharePoint allows you to quickly add, rearrange, and remove components and build out a site, working out design problems with wireframes first helps avoid the risk of becoming committed to a flawed design. It’s always easier to change course when necessary if live code and data isn’t involved. Also, wireframes can be easily converted into paper or HTML prototypes to test with actual users to help you work out design problems, and are also a great tool for presenting to management and stakeholders to obtain buy-in and approval for designs.

On the Wells project, we used MockFlow, an online wireframing tool that allows you to drag, position, and modify pre-built standard UI and layout elements to quickly build mockups. The tool permits easy collaboration among design team members, and quick output to PDF or HTML to allow you to present either static or interactive prototypes. Using MockFlow made it easy to iterate and adjust the design according to user feedback.

4. Tame Your Content Library

A drawback of SharePoint is that it lacks native capability to search content within document libraries, so establishing sound categorization from the start is essential for findability. Prior to building their new SharePoint site, the Wells publishing team had a substantial repository of documents, but little thought had been given to any sort of coherent information architecture. The result was that as the volume of docs grew, locating individual docs became increasingly difficult.

To remedy this, we conducted an inventory of the existing content inventory, culled outdated or redundant content, and developed new categories that were not only more meaningful and descriptive, but also more accommodating of future growth. We then organized the category structure by simply labeling each category on Post-It notes and recruiting available team members and end users to assemble hierarchies that made sense to them. Although the sample size was small, some strong organizational patterns quickly emerged and we were able to confidently build the team’s SharePoint document libraries based on the results.

5. Test! Test! Test!

If you’re lucky, you will roll out a site that works perfectly as designed, and fulfills the needs of every user. But professionals don’t rely upon luck. They test their design assumptions as rigorously as time and budgets allow in order to ensure that their clients stand the best chance of profiting from their investments.

One major benefit of designing for an internal audience is that the scheduling and logistical difficulties normally encountered when recruiting testing participants is greatly reduced. In addition to low-cost end-user testing using mockups and prototypes, Wells budgeted for a pilot group to test a live beta version of the site prior to general rollout. Although the pilot ran quite smoothly, it nevertheless did uncover a few correctable usability problems of the sort that could not have been foreseen until the site was put under the pressures of use within a live business environment. But with the team by now already accustomed to the iterative nature of the user centered design process, these problems were not viewed as mistakes or failures, but as opportunities to gain new knowledge and insights into the minds of their customers.

I’m building a responsive website for my band, Broken Napoleons. After all, that’s what happens when you’re a web designer who plays in a band — it’s inevitable that sooner or later, you’ll wind up building the band’s website. We’d been getting by with using Facebook as our de facto website, but there comes a point where you want to take advantage of the greater control over your web presence that your own site provides. As the wise man once said, “Be careful building your empire on someone else’s platform…”

For those of you unfamiliar with web design geekspeak, a responsive design is one that adapts to different screen sizes. Instead of developing separate presentation code for each device (pass the headache meds, please!), a responsive design works from a single template/stylesheet combination. We’re building our site that way because much of Broken Napoleons’ promotional material includes scannable QR codes that direct fans to our website. It just wouldn’t do to have a potential fan scan our poster with their phone in a club somewhere, for example, but then have to pinch, zoom, and pan all over the place to experience a full-size site within that little screen. That sounds like a good way to induce a person to desperately start looking for something — anything — else to do.

The site’s a work in progress, so I’ll add updates here as pieces get built out. We needed to get the site up quickly so that we can distribute the QR coded promotional items ASAP, so we decided to keep the initial release to a single page. Once I finish the templates for content pages & posts, we’ll start adding more content and site navigation.

We’ve also focused our CSS initially on small mobile devices (phones, in other words) and desktop. We’ll add iPad optimization as we go.

Lastly, since we are but a poor, struggling indie band (at least for now), we are taking advantage of the free music player widget that is available from CDBaby. Using that comes with some constraints, notably the fact that it is Flash-based and has a minimum width requirement, so I’ve had to suck it up and use a detection script to serve links to the band’s CDBaby page for devices that don’t support Flash. iPhone users, this means you, unfortunately!

Search engine optimization of documents in a controlled environment such as an enterprise CMS requires different techniques than SEO on the public Internet. One of the main differences is the use of keywords in document metadata. Due to widespread abuse of the <meta name="keywords"> tag by spammers, Internet search engines such as Google now largely ignore keyword metadata, and rank pages based on other criteria. Enterprises, however, have a far greater degree of control over their content, and enterprise content management systems often provide keyword metadata as a central component of their search mechanism. As a writer or content manager working inside the firewall, using keywords can therefore be a powerful tool to ensure that users are able to easily find the information they need.

Selecting the right keywords, however, is a very user-centric process requiring careful consideration of your intended audience, and can be as much of an art as it is a science. Use the keyword generation tips below as a handy reference when you publish documents in your CMS. By improving the speed and accuracy of document searches, you’ll be able to improve the efficiency and productivity of your teams and have a measurable bottom-line impact.

• Think Why, not What. Instead of approaching keyword identification from the perspective of which document is someone is looking for, think about why someone may be searching for it in the first place and identify terms that describe situations that are solved by finding the document.
• Put Yourself in the User’s Shoes. Remember that, as a writer, content manager, or even as a subject matter expert, you are not a typical user. Consider how a novice might describe the subject. Or better yet, ask actual novices – you might be surprised how they describe things!
• Be specific. Overly generalized keywords can lead to situations where the search finds the document, but it is buried several pages deep in largely irrelevant results. To avoid searches that return pages and pages of results, use keywords that describe the specific situation requiring the document.
• No Need to Repeat. Depending on the methods and algorithms your CMS uses to rank search results, it isn’t always necessary to duplicate in the keyword metadata terms that are already contained in the text, titles, or headings. Full-text searches will find those terms.
• Read Between the Lines. Useful keywords aren’t necessarily found directly within the content. Think about ways to describe the content at a higher conceptual level.
• Check the synonym list. Most high-end content management systems will reference a synonym file that helps locate relevant search results in cases where multiple words can be used to describe the same thing. This can be especially useful in situations where a user may know something by a different name than the “official” one.  If a term you are considering for inclusion as a keyword appears in the list, use the “preferred term” as your keyword, and the CMS will find matches even if the user enters one of the variations.

Keep in mind that every CMS is different, and will handle search in different ways. In addition to following the tips above, it’s never a bad idea to talk to the technical folks who build and maintain the software – you might learn more than you ever thought you would care to know about the inner workings of search engines, but you will come away with new insights that will be critical to getting the most out of your CMS.

Here’s my blog post that summarizes the project and provides a few tips that others can use when building their own SharePoint sites.

Designing a website is very much like writing a good piece of music.

Music composition is often a process of reduction. The first draft usually contains lots of unnecessary notes and rhythmic inflections that only get in the way and muddy up the mix. Successive revisions strip away the fluff, ultimately leaving only the essentials.

A web design often starts out with a lengthy wish list. But how many of the possible features and adornments that are out there directly support your primary goal? Figure out what’s essential, and forget the rest, or risk confusing your customers and losing them to a more focused competitor.

Image: Music in the Sky, by tanakawho on Flickr

It’s almost inevitable: You’re sitting around the table with your team, planning out your project, when some well-meaning soul announces “We need to make sure that we’re following best practices with (fill in the blank).

Heads nod vigorously. “Of course!” Oh, absolutely!” “We don’t want to re-invent the wheel, now, do we?”

Adhering to whatever your industry considers to be best practices is the default position for many organizations, and for good reason: There’s no sense in repeating avoidable mistakes for which smart people have already invented a remedy.

Play it Safe, or Take the Plunge?

But how often do you stop and ask yourself exactly why you’re following best practices in a given situation? Before you simply apply a paint-by-numbers solution, take a moment to answer the following questions:

• Do the unique variables in my situation map closely to an existing best practice solution?
• Am I just trying to cover my ass?
• Is there an opportunity to invent a unique approach that can translate into a competitive advantage?
• Is the goal of the project to maintain a position, or to advance to a better one?
• Can I defend a non-BP solution rationally, with facts, figures, and educated predictions?

What it boils down to, is you need figure out whether or not the tried-and-true approach aligns well with your overall business objectives, or whether those objectives are better met by embracing a certain level of innovation and risk. If your goal is to set youself apart from your competition in some way, then you really have no choice: Pick your spots wisely, but be prepared to buck convention. Do it well, and it’ll be someone else’s turn to debate whether or not to adopt the best practice that you invented.

Image: “Sheep on the Road,” by adulau on Flickr

A recent discussion I had with a client about planning his new site reminded me of a story I’d heard some time ago.

The client was marveling at the fact that the more dimensions such as design direction, engagement methods, social media tactics, etc. that we took into account, the less certain he became as to his positioning within the online space and in the market in general. Before our discussion, he thought he knew exactly where he stood. Now, after beginning to get an understanding of critical factors he hadn’t necessarily considered before, he wasn’t so sure. The problem was that he knew where he wanted to go, but determining the exact direction for how to get there was difficult because he didn’t know exactly where he was starting from.

The story this situation reminded me of had to do with the differences in how sailors would determine their position using old-school dead reckoning techniques. They’d note the position of the sun, moon, and stars, measure with their sextants, sniff the wind, check the clock, and so on. Then, armed with the data they’d collected, they’d mark their estimated position on their navigational chart.

Although the tools and techniques used were generally the same (at a given point in history), what differed was the certainty with which crew members would mark the ship’s position:

The least experienced crew members would mark a dot exactly where the data told them it should be.

Sailors with a bit of experience would draw a small circle around the area instead of a dot.

And so on. The more experienced the crew member, the larger the circle, all the way up to the captain, who made the largest circle of all.

The reason for this was that experience taught that the methods of the day were imprecise, and that factoring in a degree of uncertainty from the start produced better outcomes than betting everything based on inaccurate information. What separated the top officers from the rest was their ability to manage the uncertainty. The good officers would set off in the general direction indicated by their initial assessment, knowing fully well that they would need to periodically reassess and adjust along the way in order to reach their destination.

Just as with the ancient sailors in the story, there are always factors in a web design project that are unclear at the start. The mix of factors depends on your unique situation, but regardless, you have a decision to make: You can succumb to “analysis paralysis,” allowing the uncertainty to delay or even cancel progress, or you can begin developing based on what you do know, and build out the details based on later assessments.

By taking action and at least getting something in place, you’ll have something real and measurable upon which you can make highly informed adjustments. Accepting the fact of uncertainty frees you to get in the game now, make improvements along the way, and ultimately build a stronger and more effective website.

The Challenge

A non-profit art gallery I work with regularly hosts exhibitions of excellent artwork, but struggles with generating the turnout they desire. After reviewing their materials, one of the problems we identified was that the focus of their web copy (and of much of the rest of their marketing collateral) tended to be directed toward the artists themselves. They had written plenty of good stuff about techniques, materials, and studio spaces, but not much that was of interest to a non-artist. As a result, their copy just wasn’t forming a connection with potential customers.

The Solution

As a solution, we put together the checklist below. The idea was to help their writers jump-start their thinking by getting them to focus on the appeal of art, rather than the making of art. By using these as a starting point, their copy appeals to customers on a much more personal and emotional level than the previous technically oriented copy was doing.

• Origins. How and why did you arrive at the theme for the show? What was the thought process behind it, the personal journey that led there, current cultural and aesthetic trends that inform the theme?
• Participants. Talk to a particular artist who is showing work. A few quotes from the artist about a particular piece, their approach to the work, etc. will help give a little personality to the show.
• Similarities. What are some previous shows (whether at your gallery or elsewhere) that you can highlight as a comparison (e.g., “If you liked that show, you’ll love this one!).
• Differences. What’s unique about the show? Things that make a show unique also make it inherently interesting – people love novelty!
• Opportunities. Does the exhibit feature any up-and-comers who seem destined for bigger and better things? Everyone loves to be able to say, “I knew them when…” They also love the opportunity to acquire a piece from a good artist before they make a name for themselves and raise their prices accordingly.
• The Cool. Why will attending this show make someone more hip than their friends who don’t attend. Just kidding….sort of!

Swap out the art gallery-specific subjects in the list for items having to do with your company or industry, and you’ll have a tool you can use the next time you need to create web copy that connects with your customers.

In my role on the primary InfoSource publishing team, which is tasked with converting existing content to be compatible with the new system and developing new content where necessary, I’m mostly wearing my technical writing hat. However, since much of the benefit of InfoSource resides above the document level in the system’s powerful metadata, search, and analytic capabilities, I’m also relying upon my skills in information architecture and user experience design to craft documentation that is not only useful at the document level, but is also systematically sound.

Restructuring content to comply with InfoSource editorial standards. Much of the previously existing content was created in an ad-hoc manner, with little regard to consistency of structure, layout, or voice.

Documenting previously undocumented processes to expand the client’s published knowledgebase. A bread-and-butter technical writing activity, creating content from scratch by through subject matter expert interviews and providing structure to informal processes.

Although I normally prefer to conduct SME interviews onsite and in person because of the greater information density of observing them in their actual work environment, the highly distributed nature of Wells’ organization required that these interactions be almost exclusively conducted remotely.

Improving the information architecture of the client’s knowledgebase, enabling more efficient retrieval of information within the CMS.

InfoSource employs a faceted classification system to help users locate information, so a large part of my focus is on establishing well thought out taxonomies for each functional group being “onboarded” into the system, then ensuring that each document’s metadata appropriately places the document within the structure.

Consistent mental models. A crucial part of crafting useful and findable content within a sprawling CMS is ensuring that the content is designed to align well with users’ mental models, or understanding of the meaning and relevance of content chunks of various scales. Once the information scent is established at the system architecture level, it must be maintained at the document level as well to guard against confusion, disorientation, or even loss of credibility in the mind of the user.

One of the most reliable methods I’ve used on this project to gain insight into the perspective of users is to engage with those who submit feedback using InfoSource’s built-in function. Users who take the initiative to reach out to the publishing team in that way tend to be more responsive toward getting into a dialogue about their needs, expectations, and experiences using the system and are an excellent resource to augment the efforts of designated subject mater experts.

Challenges and Requirements

Building a website for a non-profit like the Charlotte Art League (CAL) presents a different set of challenges than the ones you typically find in the  for-profit world. Volunteer-based staff, low or no budget, and outdated technology require patience and diplomatic skills to successfully bring a web project from dream to reality. An additional factor that requires a different mindset is that the central goal of the organization may not necessarily be simply to sell more widgets.

In the Art League’s case, a number of different committees and initiatives exist that require attention. Obviously, member artists want to sell more art, but activities like community outreach, art education, and studio rentals are all fundamental to the mission as well. The website has to simultaneously address the needs each of these various stakeholders, while remaining true to the organization’s overall mission of enriching the community through the arts.

WordPress to the Rescue

The new site is built in WordPress, using a custom theme I developed for this project. We opted to use WordPress not only because of its power, search engine friendliness, and design flexibility, but also to take advantage of its capabilities as a multi-author content management system — it’s definitely not just for blogs anymore! WordPress’s CMS capabilities were especially attractive because updating the old CAL site was an inefficient, time consuming process. While content could be sourced by any number of sources within CAL, content destined for the website had to be first sent to the web administrator, who then made updates manually. This system created a workflow bottleneck that resulted in an irregular posting schedule, with the site frequently being months out of date.

With the WordPress CMS, authors are now able to log in under their own unique usernames and edit their own content. The level of access can be controlled, so that non-technical users don’t accidentally modify files that affect the site’s operation. Basic word processing functions are provided using a familiar interface, and WordPress saves the revision history of documents — no one has to fear losing or ruining their data.

Keeping It Fresh

Another advantage of WordPress is that the post management functionality that powers WordPress blogs could be adapted to manage CAL’s home page, keeping it constantly up to date with content featuring current events at the gallery. We decided to keep commenting turned on. Even though the site isn’t technically a blog, hosting some stimulating discussion about art is a great way to build community and ongoing engagement with the organization. And thanks to a little bit of PHP tweaking and some help from plugins, the current “post” that constitutes the home page features the “Happening Now at CAL” banner. Archived versions of the post won’t display the banner, adding a subtle cue to distinguish between current and past events.

The Way Forward

Now that the initial phase of the release is complete, work has already begun on the next round of enhancements, including an online gallery offering works for sale as well as individual pages for member artists to display and sell their work.

DISCLOSURE: Since completing the work on the Charlotte Art League (CAL) redesign, I have been offered and accepted a spot on CAL’s Board of Directors, completing the term of a board member who had resigned.