User-Centered Design for Intranets Yields All-New Editing UI

Looking for a clear and simple path to a new intranet? Download our free Intranet Buyers Workbook to learn 10 key steps in evaluating intranet solutions.

User-centered design for intranets means — no surprise here — centering the design of your intranet around real intranet users. It means watching them interact with your intranet and making design decisions based on what you see. It’s an approach we’ve long advocated — see our 2005 editorial “Making users a part of your next software project” or our 2009 presentation “User-Centered Design for Mobile“.

For me, it’s especially thrilling to see the results it yields. We’ve spent a year-and-a-half practicing user-centered design for our new release, and it’s brought about what I think is the most important new feature in ThoughtFarmer 6: the easiest intranet editing interface ever devised.

user centered intranet design
Selma Zafar (left), Senior UX Designer and Amanda Bremner, UX Designer, working on the editing interface in ThoughtFarmer 6

History of Easy Page Editing in ThoughtFarmer

We did extensive user research and user testing when we designed the very first editing interface in ThoughtFarmer, way back in 2005 (when we called ourselves a “wiki intranet”). We started with paper prototypes and progressed to higher-fidelity prototypes after each round of user testing.

Intranet user testing notes
Notes from user testing of early editing interfaces in ThoughtFarmer, March 2005
Creating a page in pre-release ThoughtFarmer, 2005
This is what creating a page looked like in ThoughtFarmer v0.9. Ouch.

By the time we released ThoughtFarmer, our user-centered approach had produced an editing interface that was easy and intuitive. By today’s standards it looks pretty rough, but remember that this was a few years before YouTube, Twitter and Facebook. (Internet years are kind of like dog years, aren’t they?)

user-centered-intranet-design
Editing a Location page in the initial release of ThoughtFarmer. Before you make fun of my Verdana, remember that this is 2006.

Over the next few years we made incremental additions to ThoughtFarmer’s editing interface, gradually expanding its functionality. While each addition on its own seemed too minor to warrant user testing, the cumulative effect of these changes was significant. By 2011 we were unhappy with our editing interface and were determined to do a complete user-centered overhaul.

Overhauling Page Editing

We started with a list of hunches (“95% of the time you just need the Title and Body. Make them HUGE!!”), pet peeves (“It’s ugly! Too many alignment points!”), but most importantly, some statistics: 94% of pages created by ThoughtFarmer users were of type “default”, even though ThoughtFarmer now had Blogs, Calendars, Forums, Galleries, Groups and Sections. It was apparent that most users did not know that they could create different page types. This problem became our chief focus.

Over the next several months, Darren and I tossed conceptual wireframes back and forth, iterating on each others’ work.

This mockup from March 2010 made a clear statement: Make the title and "Publish" button HUGE.
This initial mockup by Darren was rough but made a clear statement: Make the Title, Body and “Publish” button HUGE.
ThoughtFarmer Editing wireframes
This mockup by me became a little more detailed. We thought putting “Page type” underneath the Publish button would make it obvious.

Eventually it shaped into something we thought could work. We passed it off to Selma Zafar, our Senior UX Lead, who would take the concept the rest of the way and prepare it for user testing.

ThoughtFarmer edit interface prototype
The prototype design that Selma’s UX team used for user testing

After testing with a variety of novice, intermediate and advanced ThoughtFarmer users, our UX team came back with a thick report. Although we had made progress in some areas, we hadn’t improved the main problem: users still didn’t notice the different page types.

Task success rate of ThoughtFarmer user interface testing
Our UX team returned with sobering news: our new designs had done nothing to make it easier to discover ThoughtFarmer’s different page types.

We iterated several more times. We strengthened the right column. We relocated the “Publish” button. We added a strong “Page type” dropdown, with visual explanations of the various page types. We added a “Guided Tour”. And our user testing now revealed that we had a winner!

Usability Testing in Progress. Do not enter!
This sign is a common sight around the office. If you disobey, you incur the Wrath of Selma

ThoughtFarmer 6: the easiest intranet editing interface ever devised

The final editing interface in ThoughtFarmer 6 is, like the rest of ThoughtFarmer, deceptively simple in appearance. It starts with a prominent Add and Edit button in the top corner of every page.

Add Edit Intranet in ThoughtFarmer
Editing starts by clicking “Add” or “Edit”

On your first edit, ThoughtFarmer presents a concise Guided Tour. New users appreciate the hand-holding.

Guided tour to intranet editing
The Guided Tour to editing content in ThoughtFarmer

When the editing interface loads, the cursor is already positioned in the large Title box. Start typing to add your title. If you notice that you’ve put your page in the wrong place, you can quickly move it.

ThoughtFarmer intranet
In ThoughtFarmer 6, you can move a page while you’re creating it.

To Publish a page, press the prominent Publish button. If it’s not ready for public consumption, check the “Private” box.

Publish an intranet page
Click the big Publish button when you’re ready to make it live.

Below the Publish box is the new Page Type selector. This solves our biggest usability challenge: make it easy for users to discover additional page types, without introducing a confusing two-step process. Other intranet systems, such as SharePoint, force you to decide whether your content is a Page, List, Announcement, Blog, Wiki, and so forth, before you can create it. Making that decision intimidates novice users. In ThoughtFarmer, you simply click the friendly “Add” button and start typing. It defaults to a page type that makes sense. If you choose, you can browse the other page types and select a different option. And your choice doesn’t have to be permanent — you can swap to a different page type at any time.

Intranet page types in ThoughtFarmer
Choose from the available page types: a regular page or a Section, Group, News/Blog, Forum, Calendar, Gallery or Link. Change page type at any time.

If you choose a page type that has additional options, a panel appears. For example, if you choose “Group”, you can specify Group Type, Address, and Membership Options.

Additional options for ThoughtFarmer Groups
For some page types, a panel for additional options appears.

We’ve also improved the rich text editor. We’ve rearranged the buttons so the groupings are more natural. And because the text entry area auto-grows, you never get those funny double scrollbars (you know the ones, where different things start scrolling depending on where you put your mouse?). Instead, the entire page, including the text editor, scrolls as a single unit.

No double scrollbars for your intranet
The text editor auto-grows, so there is no scrollbar. The entire page scrolls smoothly as a unit.

Finally, we’ve tucked a myriad of  features into the “Settings” box that appears in the right hand margin. These are lesser-used features (including some new ones like Content Expiry, Content Publishing and Content Subscriptions), but easy to access when you need them.

Page settings
Settings are neatly tucked away until you need them. On expansion, a summary of page settings is revealed.

Ultimately, user-centered design for our new intranet editing interface is about these two questions — one quantitative, and one qualitative:

  • Does the new editing interface help employees complete the tasks they need to complete?
  • Do the employees enjoy using the new editing interface to complete those tasks?

Our UX team can confidently answer “Yes!” to those questions.

Looking for a clear and simple path to a new intranet? Download our free Intranet Buyers Workbook to learn 10 key steps in evaluating intranet solutions.

Comments are closed.