Graphics Reference
In-Depth Information
show their clients? What kinds of questions did clients have? What were their biggest wor-
ries? What kinds of information did they need from their financial professionals? What
kinds of apps did the professionals use now? Where were the pain points in these? What
did the professionals need to make better presentations? What did the customers need to
understand those presentations? None of these questions were specifically about design,
but their answers would be reflected in the app's quality and value.
All of this helped me identify what First Rate needed and how I could successfully de-
liver it. I made a list of the relevant pain points, recording them on index cards. I then
stuck each card on a foam core board in my office. Using the notes from my consumer in-
terviews, I mapped consumer tasks in the order they did them. I looked at each pain point
in each sequence, and all that led up to it. These observations helped me create a flow chart
of the common behaviors that led each pain point. Once I could identify these behaviors, I
could see where the process had broken down. Now I knew the context, the problems, and
the behaviors. Once I'd identified these, I began to get a clearer sense of my goals.
Using my research, I made a comparative market analysis of the products already out
there. What were investment professionals using now? What could these products already
do? What did their users want them to do? I printed out images from my analysis of these
existing apps, showing how they attempted to solve the problems. I pasted these onto foam
core board, and then made rough sketches of better solutions. These sketches helped me
visualize the new app's interface and how the interactions would work.
I took my own sketches and arranged them horizontally in a sequential flow on the foam
core board. This gave me a screen-by-screen, timeline-like presentation. I shared them
with my team and First Rate's project manager. This rough design was far from perfect.
I hadn't intended it to be. At this stage, the designer expects to find difficulties, and that
was true here. Some of these initial UI problems were easy to solve. This meant we had an
improved design even before we entered the wireframe phase.
I usually save real testing for the wireframe phase. This isn't the process of every de-
signer. Some use tools like Balsamiq, Axure and OmniGraffle. Balsamiq and Omnigraffle
have similar limitations; both enable designers to quickly create wireframes with pre-cre-
ated graphics and basic shapes. Axure allows for functional prototyping, testing and wire-
frame mockups. However, if the wireframe is the only deliverable I need, I create my wire-
frames in Adobe Illustrator. This gives me complete control over the wireframes' presenta-
tion. I've learned from experience: when showing a solution to a client, the presentation is
often almost as important as the solution itself.
