Hewlett Packard Printing and Digital
Imaging Product Advisor
Packard's Printing and Digital Imaging product line is their
core set of products that just about everyone equates with HP. Unfortunately
HP makes so many products, it's had for customers to figure out
which one to buy. HP, through their solutions partner Selectica,
hired Imagesmith to develop
a new interface and flow for their current printer advisor.
team of Imagesmith staff and contractors worked on this project
for about seven months. I was the project manager and information
architect, working mostly with one contract designer, Tom
Vinzce. Early on in the process, we had another IA work on the
flow with the team, Rick
Carmichael. The user testing was done by Marianne Bishop and
HP team was comprised of senior level marketing individualswe
were able to leverage their experience and marketing expertise to
resolve questions of user definition and identity, and information
seeking goals.Much of the length of the project timeline was due
to only meeting once a week with most of the key decision makers.
the team solved all of the client's problems with the original advisor.
During development we also sat on a committee to help develop new
standards for HP Web application user interfaces. Due to the success
of this project, Imagesmith was hired to work on several other projects
with similar interactive requirements and challenges.
defined an initial flow for how the Advisor would work. This was
done before we really had details about all of the product lines,
but it helped us build a model for all of the products. Along
with this flow, we began to define more formally how the process
would map out, and designed a low-resolution user interface to accompany
the HP PDI initial flow (PDF 119K)
much work with the HP team and the engineers at Selectica, we came
up with what we called the product determinant factors. This was
a list of questions asked for each product line and the key product
specs that differentiated products in a line. This was build out
based on the flow we had already defined.
sample of Determinant Factors (PDF 67K)
building the determinant factors on the questions we would ask the
user, we began to sketch out user interface elements needed to provide
the most freedom and flexibility for the user. These interfaces
were designed with the HP interface guidelines in mind, as we were
working on a project that had to be incorporated directly into their
look-and-feel. This also meant we could start very rough, knowing
that their guidelines would help hone our designs.
a side note, we were invited to be part of their (web user interface)
Early Adopter's Committee. Due to the timing of our project, we
were the only application development team using HP's revised interface
guidelines. This allowed us the opportunity to help influence their
new user interface, helping them solve some problems with interactivity
and user freedom. Alas, some of the solutions we came up with ultimately
didn't get approvedthat is partly why the interface for the
current Advisor doesn't look exactly like the screen shot below.
Prototype & User Testing
built a faux-functional HTML prototype and did user testing. This
prototype presented what a user would interact with and how pages
would react to choices they made. It of course didn't show the actual
choices a user would make, since it wasn't hooked to a database.
a side note, I found the women we user tested to be much more comfortable
with getting results inconsistent with their choices (due to it
being faux-functional). Even though we told everyone this was not
truly interactive, the men invariably had troubles.
tests were designed around user profiles built up in discussions
with HP. We built user scenarios and goals, tasks that we felt users
would want to accomplish, as well as context for user testers who
might not exactly match the profiles (like a young woman who is
not in college, but we want her to accomplish a task as if she was
a college student). We also designed a user testing script, with
an exit survey.
testing and presenting the results to HP, we made several small
(and a few large) changes to the flow and user interface. We produced
a user testing report for HP, of which the following screen shot
was included with call-outs. We then moved forward with developing
the final interface and documentation. The screen shot below shows
redundancy in buttons, something that confused some of our testers.
addition to screen shots and all HTML-based graphical elements,
we provided Selectica with lots of documentation to make sure that
the final application met all specifications. One document was the
ingredients list. This defined all the elements on a page, in text,
much like a check list.
list sample (PDF 7K)
completion, the product was launched with multiple references throughout
the HP site, and of course contextual links were placed throughout
the shopping and product pages. Below is a screen shot of the application
right after launch. Call-out details are noted below.
the steps in the process are clearly shown in the upper left content
area, with the current step in bold. Users could click to any step
they wantedexcept for the grayed out one, due to logic limitations
(you can't compare without first selecting from the found set of
throughout the first step, the "products found" display, in the
upper-right, shows how many products fit their chosen criteria so
far, with a list of the options they have selected so far (i.e.
"Printer, Black and White, Personal", etc.).
this screen shot shows step 2, where the user sees a list of the
3 products found that fit their chosen criteria. From here they
see the four main decision-making criteria for this product line:
price, B&W print speed (we made sure the user knew it was for draft
mode), B&W Print Quality and Duty Cycle (there wasn't any data for
the products shown in the screen shota big reason to make
sure that the data you feel is valuable is always available). These
criteria were defined by HP marketing staff, the ideal individuals
to identify this valuable information.