Objective

Build a Software as a Service (SaaS) Rich Internet Application (RIA). A client brought us an opportunity to help realize a product that would ultimately improve efficiency for employee review scenarios. The intent was to produce a Flash/Flex based interface that would allow employees to be graded against each other on a bell curve using 8-15 traits or “Dimensions”, such as accuracy, customer service, communications with peers, etc.  All employees are asked to review 5-6 others from their same department or departments they interrelate with.

Overall Project Tasks

This project covered Web and branding strategy, product development, design, application programming and SaaS establishment.

Duration

First phase of the project lasted three weeks from start to finish.

Screenshots: Public Facing Site (PeopleIQ 2.0)

(IA Work JBF, Design/Improvements by Browsermedia, LLC 2004/2005)

Task Summary: Information Architecture (IA) Development

When designing the structure of any Web site, application or service, the categorization of information is pretty important. My job involves the categorization of information into a coherent structure, and if it’s done well or the opportunity presents itself, you can develop something that most people can understand quickly. The ultimate goal is for users to understand this inherently. The information we present is usually hierarchical, but you can have other structures as well.

I’ve organized a few information architecture projects by project:

Project: SAI Global Corporate Web Site (2009)

Task Summary: IA Diagramming, Format: Omnigraffle

This project was particularly complex with a focus on parsing together taxonomies in use across the world, two distinct business divisions (Assurance and Compliance) with a third (Publishing) that supported the other two and had their own business to run, (and three more not so distinct sub-product lines that could easily be business divisions themselves.)  The bottom line, ensure a Web site that currently looks and acts like it’s organized by department and country and turn it into a Johnson & Johnson or General Electric class of site. The new SAIGLOBAL.COM has to route people to the services they need and having a solid Web strategy combined with solid support from the executive team to drive implementation helped quite a bit. This was a huge success for our Global CIO, Brett Lenthall (who I answered to directly) and the worldwide management team.
IA Diagram Examples:

Task Summary: Taxonomy Development, Format: Microsoft Excel

As a part of developing an Information Architecture for SAI Global, we had to look at the Taxonomy being used across a variety of business divisions, regions of the world, specific countries and identify the original source of the Taxonomy reference. This is just an example of what we ran across when looking at the word training and the meaning across various sources of content within the organization.

Project: PeopleIQ Promotional Web Site (1.0)

Task Summary: IA Diagramming, Format: Microsoft Visio

In producing this light Information Architecture, we didn’t go too deep, not in our thoughts about the product nor in the design. We felt something simple, to the point would be useful. It’s a brochure site after all, and the real meat is in the application. The results were very successful.

Task Summary: User Experience (UX) Brief:

A UX Brief is typically more than a single page, telling a story. It is designed to help the team identify and focus on the experience you want the user to have. This covers service standards, interaction protocols and any other factors of consequence within the product strategy.

Project: PeopleIQ

UX Brief Example

Task Summary: User Scenarios

A User Scenario is different from a Use Case, in that it describes a task in greater context. It covers conditions, motivations and the environment of the task, usually directed toward  a particular user or user group.  This is usually accompanied by a Wireframe storyboard or some other visual (a UML flow for example) is more commonly provided for this task,  but for the sake of speed they were originally omitted.

Project: PeopleIQ

Focused User Scenario Example:

Task Summary: Functional Task Flow Development

Iterate critical functional task flows for a service or application. This can be an important process tool for everyone to understand and improve on the underlying process for any task. This is usually presented as a portion of a larger site-mapped workflow, or an outline or task analysis grid of the process in question.

Project: PeopleIQ

Task Flow Development Example:

Task Summary:

Establish a visual workflow showing a process. My focus tends to be on operational, task related or user focused workflows.

Project: PBS: The Business Channel Learning Management System

Format: OmniGraffle

I was brought aboard PBS The Business Channel specifically to architect a method for bringing the video training content we were delivering via satellite straight to the desktop using video streaming. By doing this we would be saving millions of dollars in satellite airtime and increasing our reach to the marketplace for corporate training. Part of the concept of this product was not just delivering video to the desktop, but providing testing with remediation built in, and a 360-degree service approach to the effort. This meant workflows had to be developed for everyone participating in the service:

• Instructional Designers – Responsible for course design and require knowledge of where courses are not effective, so they may be improved.
• Marketers – Responsible for establishing up to date copy and encouraging the sales of TBC courses.
• Course Participants – Require the ability to start and stop a course, where the course can be continued where they left off.
• Course Reviewers for Certification – They need validation that people taking a course will receive continuing education credits or certification.
• HR Departments – Requiring confirmation that the participant actually took the course.

Two types of processes were developed for this, a simple process overview and a detailed process.

Operational Process Overview

Process Detail (Operational): Copy Content into WYSIWYG Editor

Task Summary:

Iterate critical functional task flows for a service or application. This can be an important process tool for everyone to understand and improve on the underlying process for any task. This is usually presented as a portion of a larger site-mapped workflow, or an outline or task analysis grid of the process in question.

Functional Task Flow Development

Project: PeopleIQ

Task Flow Development Example:

Task Summary:

Develop a list of functional specifications that are provided to the client and developer for approval, development and sign-off.

Project: PeopleIQ

Functional Specification Example

Task Summary:

Produce wireframes that were clean and easy to understand so even a developer not that familiar with the chosen technology could build the application quickly to specifications.

Project: PeopleIQ

Format: OmniGraffle & Microsoft Word

This application (PeopleIQ) is a Rich Internet Application based on Flash 2004 MX, with Java and a mySQL back-end. We went for Flash 2004MX in preparation for an eventual move to Adobe Flex after initial product launch. We’d include a Word based companion document, showing numbers in the Wireframe align with functionality notes help further explain the need for features and behaviors. This wireframe includes references to data elements that were found in a separate schema and reference list so data remains trackable in a convenient check-off list.

Project: Verizon Developer Center for Mobile Web

Format: Axure RP Pro, HTML, CSV

Axure is a wonderful tool that allows you to produce wireframes that you can build simulated functionality into. From the build you can generate screenshots, object tables containing footnotes on all actions as well as plenty of other usable documentation, in several formats. One of the best aspects of this an export of HTML wireframes you can use to actually experience the results. You can make the wireframes as low or high fidelity as you care to manage. This project was perfect for Axure — it called for a new website, community forum and social media campaign built around the concept of Verizon supporting the development of pages for the Mobile Web 3.0. You can see the results of this work at:
http://developer.verizon.com/jsps/devCenters/Mobile_Web/index.jsp

Documentation Example:

Mobile Web Dev Center Home
The Home Page represents everything that’s planned for coverage in this particular “Dev Center”. The expectation has been set by the content team that as far as navigation (and IA) is concerned, we can take away any one menu item, but not add any. Nor can we visibly tree the list like you see in the  “Community and Support” pod. Once you’re past the primary sub-navigation, you can do whatever you like below that point.

One of the conceptual problems is trying to promote Mobile Web 2.0 and 3.0 at the same time. We’re unable to have more than one dev center for it, so we must merge the two at this time.  For this round of submissions, the three sections our team is responsible for in terms of supplying content are “Getting Started”, “Technical Resources” and “Go-To-Market”.

Task Summary:

Develop a set of personas designed to provide situational examples of potential users for pre-testing usability. The chosen environment is the ER Nursing & Technical Team for a local hospital. Replacement images have been used to replace original photos. We developed a Brief and individual profiles as a part of this project.

Personae Brief Lead Page (Portion)

Personae Full Page Example

Task Summary:

The branding and creative brief covers an overview of the project and provides the necessary background to produce effective branding and a look-and-feel for the PeopleIQ application. It outlines the objectives, audience, and assumptions for the project and details the creative concept the team intends to use moving forward.

I was asked by some people I know who happen to produce political cartoons (we’ll call them “WilsonToons.com” , which is a fiction to protect the client) to consider a Widget that could be presented on Facebook as well as other social networking services. Continue Reading »