Design Iterations

In the process of reaching our final solution, we went through three iterations of design, going from lower fidelity to high fidelity. Each iteration was paired up with user studies to ensure user needs were met in the design of the system.

Lo-Fi Paper Prototype: 1st Iteration (P1)

In our first design iteration, we used use case scenarios to detail the paper prototype. A total of seventeen (17) task scenarios were generated. Using these scenarios as a basis, we constructed a series of screen steps animating how the system would react with the user interaction.

   
 
Some screenshots of the paper prototype in the first iteration (P1).

We performed Think Aloud Studies with 10 business process experts to evaluate this iteration. During the study, users were first introduced to the two-level flow diagram visualization scheme. Users were then asked to complete several tasks framed in the use case scenarios and articulate their thought processes as they went through the tasks.

For this prototype testing round, we were particularly interested in seeking answers to the following questions:

Lo-Fi Paper Prototype: 2nd Iteration (P2)

To further experiment with the idea of workflow modeling visualization, we proposed an alternative design on the workflow modeling interaction. We chose to stay on lo-fidelity paper prototype to rapidly validate our design idea. We also elected to cut back on the demo video feature and to shift our effort away from designing a robust set of process flowchart editing capabilities to concentrate on the other more features that were deemed as more innovative and important by both the users and our client.

   
 
Some screenshots of the paper prototype in the first iteration (P2).

Similar to the user testing we have done for previous iteration, we performed Think Aloud Studies with four (4) business process experts to evaluate this iteration. At the beginning of the study, users were asked to express their own understanding of the differences in process flow versus workflow. Users then were introduced to the workflow visualization in our prototype and asked to perform a think aloud walkthrough of visualization. Users were instructed to narrate as much information as they can get from the visualization. After this, users were given a broad overview of the system. Finally, users were asked to complete several tasks framed as use case scenarios and articulate their thought processes as they went through the tasks.

Our main test goals for this prototype testing revolves around learning how users react to the new visualization paradigm and the data mapping mechanism:

Iteration 3: Interactive Prototype (P3)

After two rounds of paper prototyping, we gained an in-depth understanding of user needs. We then moved on to create the interactive prototype that would eventually demonstrate our final solution. The third prototype (P3) contained most of the essential structure and features that were inherited by the final prototype. During this design iteration, we focused to determine the look-and-feel of our design and to improve consistency in terms of the tool bar and its location, navigation tools, color scheme and layout style across the three different environments in response to the feedbacks we received from an internal UI review.

   
Some screenshots of the interactive prototype in the third iteration (P3).

Four (4) comprehensive use case scenarios were generated for this iteration. The use cases were made high level in order to give users the freedom to explore the prototype:

We performed Think Aloud studies with three business process experts to evaluate the interactive prototype. At the beginning, we probed the users about their understanding of major concepts such as the difference between processes, tasks, and workflows. Luckily, the users expressed the same mental model we used in our high-fidelity designs. Each user was required to accomplish four tasks. They were encouraged to play and freely interact with the prototype. We asked them to speak aloud while interacting with the prototype and gave them an opportunity after the test to ask questions.

A benefit of having an interactive prototype is that it allows the observation of mouse pointer movements correlating user feedback. We learned from these observations that users respond positively when encountering animation effects such as button highlighting on mouse over gestures or the animation of information panels.