Megan Leigh McDonald

Even when working under the ‘Waterfall’ methodology, I always make it a point to keep a ‘task board’ at my desk or nearby. It’s something I borrowed from Scrum but it works so well for my own personal workload.  Usually it’s just a bunch of index cards and maybe a stark black and white printout of headings for one of three or four columns…not started, currently working on and finished. But about 8 months ago, I got fancy and created my own task headings/cards in Illustrator.

Since a lot of people who have seen the cards have asked for copies of the files, I decided to post the template here. It’s got a loose color-code schema (I could easily see the red for ‘to-do’ instead of ‘done’) and there are separate headings as well as a handful of usefully named cards. And if you’re an Illustrator afficianado then you can edit them and use them as you wish.

• - Task Board Headings
• - Task Cards 1
• - Task Cards 2

Have fun! Work is hard, but the details should always be fun…Mouseover

I’ve been thinking a lot over the past year about what makes designing for customer service different than designing for conversion or other business needs. Clearly, most of the goals around customer service efforts relate to cost savings in terms of reducing contacts, handle time or user churn (repeat user contacts). In this area, businesses are more transparent about making changes that impact the bottom line,  like putting up ‘challenge’ pages or road blocks for the user to discourage them from making a contact. This is a simple way to do it, but not a really good user experience. What’s best for both the business and the user is to strike a balance or find an innovative way to accomplish both goals.

The  cornerstone of reducing contacts, in my opinion, is to know which contacts are avoidable and which are not. With the list of avoidable contacts, one can measure the number of those contacts to the Call Center against time. Key Performance Indicators can take the daily or weekly temperature of a system and allow the business to respond to changes quickly and efficiently.  They can also reflect the marked progress of user experience efforts over a longer time. For customer service initiatives, those numbers should show a decrease in contacts, which inversely relates to an increase in savings and revenue.

The Call Center and its agents are a great resource for more understanding of what kinds of problems user are having that relate to those top avoidable call drivers.  They can provide some insight and background. Developers can provide rules or if/then statements from the code that help further define the problems and solutions. And Product Management can work with a designer to delve more deeply into the data and user behavior to discover areas of opportunity.

A three pronged approach to providing a better experience for the user that also helps them avoid a contact in most situations would be to contextualize help within the flows where a user needs help, to personalize their information so that the right information bubbles up to the user and to provide a wealth of searchable and/or browseable self-help information in an easily navigable format.

Contextualization gives the user the information he/she needs at the right time. An example of this is when a user is entering key account information in a sign-up form. If a user enters a field incorrectly, help text that appears inline at that moment or upon ’save’ at the very least is more helpful than providing a link to an FAQ that describes the error and its causes. Page-level help is most useful when a user is completing a specific task. Another example, as the flow level this time, would be if a user is paying for a service or good and stepping through multiple pages of a form. There are a lot of things that could waylay that process or prevent a conversion. Being able to conditionally display help text depending on the particular problem the user is experiencing is very helpful in giving the user what he/she needs to proceed and convert to a final sale.

Personalization allows the company to bubble up the best information for the user to take actions on his/her account. It also functions as a way to increase brand recognition and familiarity. It could be as little as including a welcome message with the user’s name. It could be as much as providing a ‘feed’ of what all of their friends or contacts within a network are doing right now. It could also be alert statuses for payments made or received in the past 30 days.

Self-help is a last key in providing the kind of information users want and in a way that they want. A large database of centralized help information with its various elements can be used in a variety of ways by providing straight FAQs, popups on other site pages, shortened versions for help text or contextual aid. The self help FAQs should be both searchable and browseable by a secondary or tertiary navigation menu, allowing the user to engage in primal actions like hunting, searching, browsing or finding. This would also allow the business, with proper data calls in place, to get a snapshot of what users’ paths are. This data could alert designers and product managers about ’sad paths’ or problems the users are having. It could help them solve problems. The data can also reveal behaviors that lead to new products and features.

All these things combined could potentially increase engagement on the site itself and reduce contacts to the live agents. Saving money would seem to be a key to increasing profits, so why wouldn’t we look at ways to increase the efficiency of any cost center? I’m sure there are a few reasons why this area often gets overlooked or avoided, like tax breaks due to losses or lack of resources. These reasons are not always compelling, especially when compared to the potential benefits. As the saying goes, ’sometimes the best offense is a good defense’.

As a veteran web designer, I’ve created many a form in my day, but recently really took stock of what I’ve learned over the years.  I wanted to describe a set of standards I think sum up what a user should see when signing up for an account, changing important personal account information, or other form related task. After digging around for some advice and looking to previous projects, my standards for forms evolved into something a user would consider quick and easy. The overall impact of both visual and interaction elements, fired me up enough to break the elements down.

Form Modes

A form is comprised not just of editable input fields or drop-downs, but also of modes, states or ‘cases’.  A form could be a form a user fills out for the first time to add a piece of personal account information. Or a form could be used to edit previously saved information. And lastly, it could be used to review and confirm recently edited or added information. These three states should be recognizably different from one another.

Input Mode

Adding data for the first time can be a painstaking process but there are ways to make it easier and quicker on the user. By stacking the labels and field forms, the user can tab through the fields, inputting the data one at a time. Calling out optional fields with a slightly different color signals to the user that all fields except those are required. Concise pieces of help text underneath the fields or as hover tool-tip links next to the label give critical help information to the user.

Review Mode

Getting a user through a confirmation page with the accurate information and into the conversion stream is the most important aspect of review mode. Clearly showing the previously edited or entered information as well as a way to change the information, to proceed or to cancel are very important. Using a left to right structure for the labels and form fields helps the user scan the information and discern if it’s correct or not. A ‘change’ or ‘edit’ link next to the information allows the user to either edit on another page or to expand an inline editing box. Once the changes are approved, the user can save or confirm and advance through the flow.

Edit Mode

A user’s primary need is to filter through the form fields and edit specific ones. In order to do that a left-right pattern enables the user to quickly scan the field names and find the fields that need to be edited. Help tips or tool-tip links as well as ‘optional’ field descriptions can be aligned with the label.

Error Cases

Errors need to be presented in an easy and quick way to signal the user when to revise information in an input or edit mode view of a form. With input mode, an icon as well as text can mark the specific field(s) that need attention. Using red text alone isn’t the best standard to include visually impaired users. For example, a color blind user will completely miss a field label that is red. Unless there is another way to signal to the user that there is an error, that user will more than likely get confused as to why they did not advance through the flow.

Conversion

When a user doesn’t advance through a flow, we lose ‘conversion’. This business term, at face value, suggests lost revenue or lost engagement with the product. As a User Experience Designer working for a business, I am charged with all kinds of goals like saving money on contacts, improving sales on sign-up forms, etc. But in the larger picture, my primary objective is to make the experience better for the user. In theory and more often than not, in practice, this works for the business as well. If ‘form follows function’,  then a well designed form or flow will allow the user to advance and complete it quickly and easily.

Today I learned something from my Product Manager. He had the look of a ‘bearer of bad news’ but he gave me the medicine anyways. I have heard in the past that ClickMap is not always reliable and noticed even that the data didn’t always match the next page reports I pulled.

But today, I understood at a new level of how this tool, as great as it seems to a designer, is sometimes wildly innaccurate. As you might have read on this blog before, I love this tool mainly because of its visual appeal and in some cases, when the link leads to a popup or a page that doesn’t have omniture tracking code, it can be really helpful.

However, when using templates, one must beware. It’s probably also a factor of not being coded correctly or with great care, but templates can give some very misleading numbers that represent the total clicks of all the links in a defined module. The module, such as a sidebar or navigation menu, might have more than one link but the flag will appear on only one of the links, leading one to misinterpret the data. Sigh. Well I hope that Omniture really looks at ways to improve the implementation of code for this tool or the tool itself because the visualization of clicks on live site pages seems like a really great idea.

I’m leaving so many of my friends here at Reunion. This is a small team but I’ve bonded so much with them, that the hardest part about leaving now is leaving them. I’ve learned a great deal from watching my boss, P. You can tell he really cares about his people. He takes great pains to gather all the requirements so that we can do our jobs that much more efficiently and clearly.  I’m sure he’s got loads of politics to deal with, but he rarely shows that.  And he’s always getting the team to go out for coffee/tea and have quick breaks that ‘keep things real’.

I’ll miss the rest of the team like sisters and brothers, big holes in my heart for awhile until I adjust to my new job and location. But most of all, I’ll miss A’s big smiles and warm heart and good talks. I’ve learned so much from her about people and how to adjust to California’s culture. She’s the best.

But I’m not losing a bunch of colleagues or friends. I’ll still be able to IM them or call them and there will be visits eventually. And who knows…the world is small, maybe we’ll even work together again some day.  But in the meantime, this new job is a great step forward. I’ll be gaining a whole new set of colleagues and friends. I’m excited. I guess this is what people mean when they use the word ‘bitter-sweet’.

In re-reading this book, I have re-discovered valuable excerpts and insights into what I do everyday. There are a few quotes I want to blog about. Nothing fancy today, just a few somewhat random thoughts about User Experience.

“…good design makes users more effective”

Truly, this is the point of good design, although the term ‘design’ is such a broad-based, multi-interpreted word. In the ‘real world’ the title ‘designer’ is often used as a ‘catch-all’ for someone who can do graphics, maybe produce a website and possibly provide some basic usability. But looking more closely at this word, it probably should be more narrowly defined. I read very quickly a prediction (on Adaptive Path or some random Tech article) that the job descriptions calling for a ‘do-it-all’ kind of person would be supplanted by very specific, more narrowly defined descriptions.

Consequently, the kind of designer that I naturally became and am still becoming is a more user-centric one. I studied media user behavior in Graduate School and appreciate a more academic analysis of website usage. I remember back in the day with WebTrends, how the data was focused on uniques and visits and clicks and various user statistics like browser type. But now, using Omniture’s SiteCatalyst I’m completely blown away and (dare I say?) excited. It’s the kind of thing that gets me up and moving in the mornings, for lack of a caffeinated beverage.

Something about examining the numbers is kind of like being a detective. I get to root out where the problems are, where people have trouble using a piece of software or web application. I can’t help it, I did love Nancy Drew and Trixie Belden. So this aspect of my job is the one part that gives me the greatest satisfaction. I get to improve the experience for the user. I get to make the user more effective at what he/she does.

There is a huge difference between teaching the user to use the system and designing a system that works for the users because ‘good design makes user more effective’.