“Iteration” is a word which I had not encountered until embarking on this web design project. According to Wikipedia (2012) it is:
“…the act of repeating a process with the aim of approaching a desired goal, target or result. Each repetition of the process is also called an “iteration,” and the results of one iteration are used as the starting point for the next iteration.”
With its roots in the mathematical and computing community, the concept has been adopted by UX designers as a feature of the project management process. Garrett (2003) advises that
“…you should plan your project so that work on any plane cannot finish before work on lower planes has finished. The important consideration here is not to build the roof of the house before we know the shape of its foundation” (??)
Evidence of Iteration In Our Group Project
Mapping our group project onto Garrett’s Five Planes model shows that we are entering the “Structure Plane” phase of the project. In line with Garrett’s abovementioned advice, we have taken the opportunity to review our output in the previous “Scope” and “Strategy” planes. For example, we were advised by our lecturer to refine our user journeys and we were consequently able to clarify our ideas about the personas involved, thus finalising the archetypes. Building personas was a task assigned to Week 3 of the project schedule but in retrospect, it is clear that it would have been almost impossible to achieve the level of detail for each aspect of the scenarios, personas and user journeys without having progressed the project.
This week we have focussed on wireframing, an activity characterised by iteration. Bowles and Box (2011) argue that wireframes are a key aspect of the outputs or “deliverables” which document design choices. However, wireframes play a more useful role by representing a design which can be tested with stakeholders. Kelley (2011) argues that testing early in a project will provide a wealth of information to refine and improve a product before too much time and effort is invested in an idea. Bowles and Box (2011) discuss the “fidelity” (level of detail) in the deliverables and outline a range of tools to create wireframes with varying degrees of fidelity.
WIREFRAMING WITH LOW FIDELITY TOOLS
Do I Have To Draw?
I am not very confident about expressing my ideas thorough drawing; sadly for me, the artistic gene passed from my mum to my younger sister (an embroidery artist). However, I was confident that this week, somebody in our group would take the lead and demonstrate a talent for drawing the wireframes for our website design.
It soon became evident that my interpretation of designing on paper was not one shared by the lecturer. Although we undertook some sketching exercises in a recent class, the lecturer emphasised that the aim was to enable everyone in a team to express their ideas, regardless of their drawing skills via sketching games such as “Six To One” and “Design The Box” (Bowles and Box, 2011). This seemed like a commendable idea but I could not envisage myself needing to undertake this kind of exercise in the workplace. I was proved wrong this week.
How I Was Proved Wrong
Our group planned a site map together, as shown below:
We then began to discuss the key elements of the homepage. It was clear that we had many ideas but that they were jumbled up and difficult to describe. It was at this point that the lecturer suggested that we undertake the “Six To One”sketching exercise. It became clear that drawing ability was irrelevant, as the aim was to generate ideas and refine them collaboratively. On reflection, this exercise was in essence, a highly focussed iterative process which highlighted two key issues:
- as with the persona and scenario-building exercises, this sketching activity could be used as a problem-solving activity in the workplace
- this is a very democratic approach to reaching a mutually agreed decision; it allows everyone in the group to have a voice and to be heard
I will consider these issues in more detail as follows:
1. The Contribution of Iterative Design To The Economy
The first issue came to mind when I listened to Monday’s discussion on “Start The Week” (BBC Radio 4, 2012) with Antony Gormley (sculptor) and Ron Arad (designer, architect). The programme focussed on the current squeeze on Art and Design subjects in the education curriculum in favour of an exam system biased towards Science, Technology Engineering & Mathematics (STEM) subjects. The aim is to develop the country’s skills base in these areas (House of Lords, 2012) so as to improve the country’s economic productivity. The participants argued that technological and scientific innovation is grounded in good design principles and maintained that the skills gained through an art and/or design-based education can be transferred to economic sectors outside the creative industries. I am beginning to see that activities such as the personas, user journeys and sketching exercises are a minor example of the creative approach which could be used more widely to generate ideas with economic benefits in other sectors. For example, some commercial organisations, such as Dyson capitalise on the relationship between design and engineering. The company’s founder, James Dyson trained at the Royal College of Art in London. The design for his bagless vacuum cleaner was inspired by a structure at a sawmill which span out saw dust. His first machine, the DCO1 took five years and 5,127 prototypes, an iterative process during which he targetted and tried to solve the key issues which affected users of standard vacuum cleaners.
2. The Rejection Of Elitism
The second issue came to mind after attending a talk on campus about the UX industry from two experienced practitioners. It was evident that the work culture in this sector is based on collaboration and “a rejection of elitism” (Bowles and Box, 2011) via a relatively flat organisational structure which echoes the culture that I experienced when working as a teacher. This is in sharp contrast to the library environment where a very strong hierarchical structure continues to dominate the decision-making process at all levels of the organisation. In my opinion, this type of culture stifles creativity and limits opportunities to solve problems with consensual agreement.
Was Sketching Useful?
Overall, I found that the sketching activities were the key to generating and developing ideas as well as acting as a tool for solving problems; they bridged the gap between our researched user journeys and creating a design for the website.
Would I Use Sketching In The Future?
Having understood the aim of the activity and seen the positive results, I would recommend this activity as a tool for generating ideas. In the future I would approach it with more confidence and I would feel less self-conscious about using a variety of resources, including different types of marker pens, felt tips and large sheets of paper to help express my ideas.
Given that I would wish to use wireframes to test ideas as part of an iterative design process, I would think carefully about presenting sketches for testing ideas; some stakeholders may find this form of presentation confusing and this could detract from the research being undertaken. However, I would certainly use the abovementioned techniques to sketch wireframes with a group of people so as to mock-up a consensual design using medium/high fidelity tools.
WIREFRAMING WITH MEDIUM/HIGH FIDELITY TOOLS
Having produced some hand-drawn wireframes, our group was encouraged to try out different tools to produce documentation which would be consistent in appearance and easier for stakeholders to understand. I consequently tried out demo versions of “Axure”, “Mockingbird” and “Balsamiq”. (The free versions all had restrictions on their functionality.)
Choosing Software For Wireframing
Overall, I enjoyed using Balsamiq the most, as it was flexible, easy to use and it allowed notes to be added. Axure had the potential to be a powerful tool but there is simply not enough time for us to learn to use if effectively, even though it has a built-in HTML function.
As a group, we decided that Mockingbird was the easiest tool to use but its main drawbacks were that we could not edit collaboratively in the trial version and and that secondly, it did not have an HTML function for us to test a prototype. After an impromptu tutorial of Visio from our lecturer, the group agreed to use Visio to design the remaining wireframes and prototypes. Its familiarity (it is part of the Office Suite), accessibility to the full version, HTML functionality and ability to work collaboratively on designs were the key reasons behind our decision behind using this software (although I think that PowerPoint would produce very similar results for our project).
On reflection, if I was adept at using all of the abovementioned packages, I would probably choose a tool to suit the client and the style of website they require. Thus, I might consider presenting wireframes made in “Balsamiq” to clients in a creative business and use “Axure” for an engineering-based client.
An Iterative Approach To Group Work
Wireframing has been a focussed and well-recorded exercise in iterative design for our group. However, on reflection, I can see that we have used iteration throughout the project. As shown above, this has applied to our work output but it has also been implicit to our approach. We have accepted as a group that our individual contributions whether oral or recorded should be refined by the rest of the group as our collective understanding is greater than the individual’s. This is not always the case and I will explore the reasons why this approach to the project appears to be working well for our group in a later post.
Axure Software Solutions. 2012. Axure RP [online]. San Diego: Axure. Available at: http://www.axure.com/products [Accessed 22 November 2012].
Balsamiq. 2012. Balsamiq mockups [online]. Sacramento: Balsamiq. Available at: http://www.balsamiq.com/products/mockups [Accessed 22 November 2012].
BBC. 2012. Start the week: art and design with Antony Gormley and Ron Arad [online]. London: BBC. Available at: http://www.bbc.co.uk/programmes/b01nx5jv [Accessed 22 November 2012].
Bowles, C. and Box, J. 2011. Undercover user experience : learn how to do great UX work with tiny budgets, no time, and limited support. Berkeley, CA: New Riders.
Garrett, J. J. 2003. The elements of user experience : user-centered design for the web. 2nd ed.Berkeley, CA: New Riders
Kelley, D. 2001. Design as an iterative process [online]. Stanford: Stanford eCorner. Available at: http://www.academicearth.org/lectures/design-as-an-iterative-process [Accessed 22 November 2012].
Microsoft Corporation. 2010. Visio 2010 [online]. Washington: Microsoft Corporation. Available at: http://office.microsoft.com/en-gb/visio/ [Accessed 22 November 2012].
Some Character. 2012. Wireframes on the fly: mockingbird [online]. San Francisco: Some Character. [Accessed 22 November 2012].
Wikipedia. 2012. Iteration [online]. Available at: http://en.wikipedia.org/wiki/Iteration [Accessed 22 November 2012].