Intranet Application
I have been working in interactive media for over 7 years, and in that time I’ve acquired a set of deliverables for solving interface problems. Some are from books, some are from colleagues, some are my invention. Not all are needed for all projects. For instance, this project did not need a Creative Brief. Because I played the role of a whole interface design department on this project, it is a good example of how I approach interface design.
Out
of consideration for my client, some areas are blurred out and I won’t
write about the application in concrete terms.
The first step was to read a telephone book sized stack of requirements documents. From that information I built this hierarchy. This answers the questions, “What is more important?” and, “What goes with what?”
It helped me communicate what I had learned and confirm my understanding of priorities and organization with other team members.
I created this diagram because users will have to manipulate data within a complex system. It answers questions like, “What are the things?” “What can I do with them?” “If a customer can have multiple purchases, can a purchase have multiple customers?” If the answer to the last question is yes, then we have something to talk about.
“How many purchases will a customer have?” If the answer
is two, then we’re looking at checkboxes. If the answer is thousands,
then we need a good search.
A page sketch is a quick page design that can answer the questions, “How much can fit on a page?” and “Is this what you were thinking?”
I used page sketches of high traffic areas before creating a page flow.
This helped me be more realistic about my plans and saved me from building
pages in HTML that could not work.
While you can't draw a site map for an application, you can diagram a basic flow of pages. With this diagram, I had names for pages and could create a spreadsheet to track progress in building them.
The big green blob represents the pages in the first release.
Then we really get into the details. This diagram represents one of the boxes on the high level page flow (above).
I built out a basic interaction scenario in HTML and used it to demonstrate the system to the client.
The client was expecting ugly wireframes. I sampled the colors and styles off of their public web site and incorporated a design that felt correct to a business-like application that still maintained the correct branding. The client liked it so much they accepted the design as-is.
After the presentation I got a round of applause.
Information architects like taping stuff to walls. I used the main conference room to display printouts of the screens with highlighted buttons and arrows showing how they work together.
This was a unique usability test. Three users performed tasks on the system simultaneously from three desktops. Because of the limited functionality of the system we had to carefully plan the timing of each interaction.
The test script became useful
to the developers, giving them a concrete goal to work towards.
