Information Technology Aligned» Information Technology Aligned – Portal, Intranet, Governance, BPM and SOA

Misconceptions – Redesigns and Information Architecture

John Brunswick — Mon, 02 Nov 2009 06:29:55 +0000

In the world of web site management and development, the term “redesign” may at first seem harmless, but can have far reaching implications as to what will be done to deliver a successful project. I recently worked with a customer who was interested in redesigning various internal and external web sites for their organization. It quickly became apparent by observing their discussion that they were asking for something much broader than an exclusively aesthetic redesign. The word “redesign” is often generically used to refer to an updated look of a public web site, intranet or extranet. Unfortunately the expression “redesign” can be misleading about the actual work that will be needed to deliver a finished project and should alert anyone involved in the project that a much deeper understanding of the project needs much be gathered. This dangerous vagueness can been seen as the equivalent of someone telling you that you must pack for a trip, without knowing anything about the duration or destination.

Most major update efforts to a web site generally involve substantial work around “information architecture” that is combined with a visual “redesign” to meet the overall project goals. To complicate matters further there is also the possibility that the overall business messaging of one of more portions of the site may change. For the purposes of this discussion, we will only focus on the differences with design and information architecture from an implementation standpoint. This will help us to introduce formal, industry standard terms that will specify what is required to deliver a project.

To explain the various disciplines that go into a “redesign” it helps to think of a visitor’s experience at an art museum. The following aspects of a museum will help to map the analogy to the industry specific terms of User Experience (UX), Information Architecture (IA) and User Interface (UI).

Attributes of an Art Museum

Wings – analogous to major, top-level navigation on the site
Exhibits – can represent minor navigation that is dependant on what site area a user is in
Pieces of Art – content / applications that a user may interact with
Visitors – users

User Experience (UX)
The Information Architecture and User Interface disciplines both fall under the umbrella of User Experience (UX). Think of UX as how a museum visitor has perceived, learned and used the museum – or more simply – their overall experience. Visitors may not remember specific exhibits within a museum, but may recall that it was a pleasant experience. Within that pleasant experience there were a series of objective elements created that perception. Those elements are Information Architecture and User Interface.

In the world of corporate web site UX this equates to a site that is at its most fundamental level easily navigable, aesthetically pleasing and allows a user to achieve their goal of their site visit with minimal interference. In order to achieve this a solid information architecture and user interface must exist. When the word “redesign” is used for a project it will almost certainly involve both of these elements.

Information Architecture (IA)
Information Architecture dictates how the various wings of the museum are laid out and where various pieces of art are displayed within the wings. IA helps visitors to arrive at various focal points throughout the museum by way of a logical paths. To create logic paths, many museums lay out their exhibits by geography or time period. This helps visitors to enjoy some level of continuity throughout their visit.

IA helps connect users to content and or applications that they require based on their needs. IA can be simple or complex in relation to the diversity of content and actions that a user will experience during their site visit. IA is by its very nature organic and will change over time to continue to try to meet the needs of an organization’s constituents.

IA is like a blueprint of the museum or an upside down tree diagram that attempts to group exhibits and their contents in some logical manner, helping people easily locate them. Somewhat unlike the physical world, sites can allow visitors to arrive at one particular content item or application from a variety of paths.

User Interface (UI)
As visitors locate their areas of interest within the museum and walk through various exhibits they will constantly interact with singange. Museum signs can come in a variety of styles, are potentially highlighted by lighting and can be placed at a wide variety of places throughout the rooms. Rooms can also be painted different colors and contain many types of molding and flooring. Perhaps some exhibits allow visitors to press levers or buttons to engage audio recordings about various works.

UI allows users to interact with and consume underlying content and applications (art / audio) that are grouped together based on the IA that was addressed in the prior section. The UI sets the visual tone for the site – colors, fonts, positioning of various content and or application on the page. A good UI supports maximizing the value from IA underneath it. A visitor to a museum is going to most likely want to visit a specific set of works and be exposed to reference materials around each one of them. The optimal UI will help the visitor to maneuver and consume this with ease.

To further elaborate on this – leaving our museum analogy for a moment – it helps to think of the variety of MP3 players on the market. The Apple iPod is arguably the premier device on the market for variety of reasons, one of the strongest being its very easy to use UI. The iPod lets music listeners quickly and elegantly access their music.

Closing Thoughts
The next time that someone talks about doing a site “redesign” stop to contemplate what is really being requested. Most often a redesign is not purely aesthetic. As organizations change and grow it is essential that they continue to make their online efforts as effective as possible in supporting their businesses. This means that the User Experience will need to be supported by great Information Architecture and User Interface implementations.

Intranet Page Usability – Like a Good Dinner Party

John Brunswick — Wed, 02 Sep 2009 05:39:59 +0000

A great web page is structured like a good dinner party – not everyone can be the center of attention at the same time. To maximize effective participation it is best to have small pockets of focus exist throughout the dinner that people can engage with. In order for those pockets of focus to stand out in the crowd, there needs to be space for people to differentiate themselves. For this same reason not everything on a web page can scream for attention if the guest is to have a good experience.

If everyone at a dinner party were to be shouting over each other, they would be be drowned out in the crowd and create a confusing, noisy, chaotic, user experience for any visitors. Contrast needs to exist to help people to quickly decide what information or discussion they would like to engage in. Thinking about a web page like a dinner party can help to guide how many things on a page can speak to the users and a particular volume.

This analogy has helped me to highlight the importance of establishing focus on pages to non-ux oriented business analysts. In order to make the most of all of their hard work gathering business requirements and forming a solution, we need to ensure that the party we host is enjoyable for our guests. To take our analogy a bit further we can view a site (our dinner party) as simplistically having two parts – an “arrival” (a home or departmental landing page) and a “joining a discussion” (detail page) portion.

This generic framework helps us to establish some guidelines that can be extrapolated out further as needed.

Arrival – Critical to have Effective Contrast
When arriving at a good dinner party there are small groups of people, perhaps three to five clusters, that are carrying on individual discussions. From quickly surveying the room a guest is able to get a sense of who is involved in each discussion and the topics of conversation in each. In each conversation there is generally one person that at any given time is the main participant in the discussion, allowing the guest to discern the composition of each discussion.

This is exactly how we want our guest to experience our site upon arrival to a home or departmental page. This allows users to quickly understand the content and or actions that are available to them without having to arduously examine the page. It is critical that only a few messages on the page can have high contrast – all other supporting material must be displayed at a lower “volume”. This is just as with a series of dinner party discussions – there needs to be contrast, it cannot be a noisy room if the guests are to comfortably navigate the page.

As illustrated above, the top layer of the above pyramid accommodates a few main points that represent the discussion groups within the room. The supporting materials take a back seat to the main focal points and provide further detail to help the user understand if the content or action pertains to them. Any unrelated material should only have briefly detailed links for more detail.

A good example of this might be a page that supplies information about travel and expenses to users within an intranet. The page would have guidelines on meals, corporate credit card sign-up, automobile rentals, and an application that will let users submit expenses as well as contact information for accounts payable employees.

To demonstrate polar opposite examples of a poorly structured landing page vs a well structured one please reference the following examples.

I am not singling out Microsoft due to beliefs around their platform, but from a user experience standpoint Microsoft has done a very poor job of structuring their home page. I would guess that they have ended up designing the site by “committee” and the poor user experience is not due to lack of design experience within their organization.

In sharp contrast, SAP also has many products and services, but does a much better job of giving users a clear understanding of where they should look and interact for more information. They closely follow the Arrival Volume Pyramid methodology.

Group Discussion – Tight Focus with Relevant Material and Depth

Once within a discussion it is even more important to constrain the volume of each participant if the discussion is going to be effective. There should be one message and all supporting materials shoudl directly support the main message.

For the purposes of relating the dinner party group discussion to an intranet page, we can continue our example from the “arrival” scenario described above and think of this as a detail page describing expense policies for automobile rentals that was accessed from a page outlining all expenses policies.

The pyramid above illustrates the increased focus that is needed to make a detail type of page effective for the guests. The supporting information on the page only supports the main point. Any of the other material generally does not have more detail than a nagivational link to another section of the site.

I hope that the above explanation can help people to convey the importance of contrast in their designs in order to make a guest’s experience as efficient as possible. For information around prioritizing, organizing content and messaging on a page take a look at Intranet User Experience Design.

Intranet User Experience Design

John Brunswick — Mon, 17 Aug 2009 19:53:35 +0000

In the world of corporate web portals user experience tends to take a backseat during a project. After all – with the requirements gathering, coding, configuration and additional tasks that need to be completed, who can bother setting aside time to deal with something wildly subjective like user experience? What intranet team has a dedicated user experience person on staff? Besides – we are going to be showcasing all of the difficult integration work and sophisticated development and content that we have created, right?
User experience is an inherent part of an intranet project – whether it is consciously addressed or not. Generally intranet deployments or deployments of a project within an intranet are carried out by the technical team supporting the technology and with their existing workload it is difficult to entertain putting into place another process or piece of paperwork that stands in the way of “getting the job done” (for a better approach see an alternative, pragmatic, delegated approach to portal development). The downside of this is that great technical solutions, regardless of their brilliance could have only a fraction of their value ultimately realized by the end user community. Your production line may have produced the Mercedes of technical solutions, but it is imperative that we do not skimp on the door handles, upholstery and paint job. In the context of a corporate intranet the following items often need answers that a purely technical approach cannot address

General page structure and content placement
Button and link placement
Navigation options
Titles for buttons, links, content headings and navigation

Even though we are creating bits and bytes – we must not overlook that the end product is essentially tangible and because of this a clear direction for rudimentary user interaction will help tremendously.

The User Experience Bull’s-eye

Thankfully by employing some very lightweight user experience design fundamentals we can drastically improve user experience. A simple framework – our “Experience Bull’s-eye” – can provide a way to guide design and development of a solution, producing much higher returns on everyone’s investment of time and technology. Since this concept has such a great impact and requires a minimal investment of time, this Bull’s-eye should become part of every project’s documentation. It provides a top-down approach to the fundamental design of the project to maximize user benefit. The Experience Bull’s-eye will explicitly or effectively

Provide everyone with a shared understanding of the main goal for the project user interaction
Get buy-in from stakeholders about the priority of various goals for the project
Create a compass to guide and mediate decision making around how the project’s basic user interaction will be developed

The framework is inspired by a method that Hillman Curtis outlined in his book “Flash Wed Design – The Art of Motion Graphics” created by Roger Black. Although we are most likely not using Flash for our project – the basic idea that a user is in the middle of many daily activities during their visit and we need to harness their attention in a focused, effective manner on the task at hand. This is imperative if we hope to add value to their experience and support our intranet success.

To create an Experience Bull’s-eye that will act as a compass for any user experience design decision making throughout our project we need to

Build – conduct a brief meeting with the project sponsors / business analysts and interactively create the Experience Bull’s-eye
Use – leverage the Experience Bull’s-eye to guide design and development of our solution

Meet with Project Sponsors / Business Analysts

To construct the Experience Bull’s-eye it is important to have a meeting with the sponsor(s) of the project and other stakeholders that have a vested interest in the success of the project. During the meeting the team leader will draw 3 concentric circles on a whiteboard or flipchart. The leader should clearly state that this exercise is intended to ensure the most value possible from everyone’s hard work and the highest level of user productivity once the solution goes into production. They will then explain that the goal of the meeting is to define the main goal of the user experience in the project. There will be a primary goal for the user interaction that can exist with a series of supporting goals. The remainder of the meeting will then be spent with the leader facilitating open discussion around the main and supporting goals. In a short amount of time this should yield the development of a solid Bull’s-eye.

The guidelines for the meeting should be as follows

The leader should use three circles.
Only one goal can exist in the center – one has to be more important than the others.
Do not have more than 3 items in total – if there are over 3 items the project needs to be further defined and or decomposed into smaller projects.
The final ranking of priorities should be generally agreeable to the group. Any large gap here indicates that the purpose of the deployment should be revisited.

Retail Chain Store Project

ABC Retail Chain Franchises relies on a central corporate intranet to connect their various locations to central information. Headquarters has been struggling to provide their franchises with better information and guidance so they can be successful with their operations and respond quickly to changing market conditions. Currently ABC Retail Chain keeps inventory levels in their mainframe system and wants to make this available to the stores to help them gauge their stocking needs and allow customers to understand when an item might be arriving if it is out of stock. This information will also help the stores to plan when and how they will stock their shelves. Further examples of this guidance might include changing end caps to highlight top selling products or posting advertisements in the store tied to a particular promotion. Headquarters would also like to make sure that instead of holding many management to employee meetings throughout the week that they can maximize their communications using a single delivery channel where information is stored, so that it does not need to be repeated. Based on feedback from one franchise that created their own web forum for employees, ABC Retail Chain has learned that allowing peers to asyncronously ask questions with each other was very helpful to quick problem solving and increasing productivity amongst workers. In a similar vein – a staff directory of names, phone numbers and email addresses has been very popular in helping employees to connect and resolve issues and has been photocopied and sent to each franchise. There have been problems keeping this book up to date though, as the stores frequently have employee turnover due to seasonality.

ABC Retail Chain’s IT department was put in charge of the project and knew that they could aggregate all of the data requested and create an intranet for the franchises. What they struggled with was how to place it all together for the end user.

Tom the IT project leader was responsible for delivering the project under tight deadlines and was getting a bit lost with how his team was going to be able to cobble everything together in some cohesive manner for the users. He pulled his technical team into a meeting and after a few hours they had hashed together the following diagram of the portal that they were comfortable in delivering.

After the meeting the design still did not seem correct, but Tom did not have an expert on his team to tackle User Experience and was short on time. Desperate for some guidance he began to search the web about corporate intranets and struck upon an article on the User Experience Bull’s-eye. Fortunately Tom is collocated at headquarters and he was able to quickly pull together a meeting with his project sponsors and a few local franchise owners and within a hour had created the following Bull’s-eye.

Using the User Experience Bull’s-eye

Now that an Experience Bull’s-eye has been constructed it can act as a compass for any user experience related needs. When designing a page or portion of an end user experience we can now use the Experience Bull’s-eye as a guide.

Now, clear decisions can be made rapidly around the placement of items, labels on buttons and links and other components of a project. Best of all – because the Experience Bull’s-eye was collaboratively developed by the project sponsors and other stakeholders, there is little debate about what the most important part of the experience should be. This will let the technical team focus more on development and no longer have to deal with getting marred down in discussions that detract from their development, integration and deployment time.

Let’s now revisit the ABC Retail Chain Store Project with the Bull’s-eye that Tom has just created. Based on the Bull’s-eye the team decided to

Deletions from the Initial Design

Remove “Human Resources” from the navigation area. It seemed like a good idea to add, but given the priorities in the Bull’s-eye no longer makes sense.
Remove “Rewards” from the navigation area. It seemed like a good idea to add, but given the priorities in the Bull’s-eye no longer makes sense.
Remove “Stock Ticker” from the page body. The tech team loved this idea because they had the data and it looked interesting to have it scrolling along the page. Given the direction from the Bull’s-eye it is obvious that this does not contribute to any of the goals for the project and should be removed.
Remove “Interoffice Personal Buy and Sell”. This seemed like an interesting feature that the tech team liked, letting store employees buy and sell goods with each other. As above – this is technically possible, but does not contribute to the bottom line and should be removed.

Updates to the Design

Move “Stock Levels” navigation item information to actual data within the “My Store” page. The “Stock Levels / Shelf Management” data is the most critical on the basis of the Bull’s-eye that was designed and should be front and center for the employees to best do their jobs.
Rename “Stores” to “My Store” in the navigation. It is important to personalize data and user experience given that the franchises will not care about other franchise owner’s stores – only their own.
“Corporate Announcements” and “Store Announcements” are displayed on the right in order to criticality based on the Bull’s-eye. Management wants a way to communicate with their store owners and managers within the store need to be able to communicate with their employees.

Conclusion

In a project tight on time and short on resources taking a quick pass at understanding how to create a better user experience is critical to creating a portal that is an effective vehicle for communications and data to aid decision making. A small upfront investment will yield significant gains from the result of a more focused user experience. With the Bull’s-eye User Experience approach a minimal amount of time is needed to create a compass that will act as the source of truth throughout a project and lay the foundation for an impactful user experience that directly addresses the purpose of the project, adding the most business value possible.