Wireframe+Prototyping

=Phase 4: Wireframe Prototype=







The results from the previous phase provided us with some preliminary ideas for website layout. It also further identified a navigational structure for the information the website should provide. This information was enough of a basis for us to create our first iteration of wireframe prototypes.

Objectives
The results from the card sorting and prototyping sessions provided some tangible and feasible ideas that we wanted to incorporate into a single design to discuss and evaluate with the participants. We devised a wireframe design for the homepage of the website, as well as a set of pages encompassing a new feature called the virtual portfolio. The virtual portfolios were a function incorporated into the new design to showcase the work of the users and to facilitate collaboration between users.

The goal of this phase was to test the wireframe prototypes’ design with the participants. This was conducted through the use of activity-based scenarios. We wanted to learn about their interaction patterns and hear any concerns or comments they may have about the overall wireframe design.

Design Session
Date: Friday February 18, 2011 Participants: 3 fourth year student 1 third year student 1 alumni/ administrator Total: 5 participants The users were given a set of scenarios to perform with the paper printouts of the wireframe prototypes. They were asked to describe their activity by indicating where they would look for a particular piece of information and the various actions they attempted to perform on a page.

Results
Overall the wireframes received a positive reaction from the participants. They were able to clearly communicate their ideas and concerns about the design and structure. Also the additional virtual portfolio feature, which was the proposed solution to the networking, communicating and display of work of users, was liked by all participants. This session provided us with much constructive feedback on the placement of content, navigational structure and labelling issues.

Assessment
The goal of incorporating scenarios in the evaluation of the design of the wireframes was to structure their ideas in a procedural way. However, sometimes participants shifted away from the scenarios and focused on other aspects of the prototypes if something caught their attention. The scenarios were useful in initiating an overall operation for the participant to perform within the prototype, yet at the same time the scenarios constrained their flexibility to ask questions and generate ideas.

The wireframes were also confused with visual design mock-ups and **some participants expressed their concern for colour and graphics**. As with all the other stages it was challenging to assure that the participants did not rush to future stages without giving the current session deep thoughts. Maintaining a level of abstraction was difficult, but the wireframes helped to bridge the visual and conceptual gap by providing a blueprint to the new website design.

Another overall observation we had during this phase was on user participation levels. We felt that by this phase in the design process participation had drastically reduced. We expected that our lack of tangible deliverables may have caused the decreased interest in our design efforts. The reason that we did not provide the wireframes earlier was because we wanted to facilitate the opportunity for design innovation and allow participants to rethink and reassess their ideas before a concrete prototype was created. A wireframe prototype would have discouraged participants to voice new ideas or concerns with design decisions. We believed that by having a very low-fidelity and interactive initial prototype design initiated the creative process. It allowed participants to think through abstract or intangible ideas in various permutations to provide a stronger basis to refine ideas through digital images, words, pixels and vectors (Baskinger, 2008). However the trade-off of delaying the wireframes was a decrease in user participation. For more information please refer the Reflection on Participatory Design section.