Tag Archives: UX design

Last Post

Final Reflections On A Website Design Project

In my first post three months ago, I outlined my personal learning objectives for this module.  I discussed how I wanted to:

  • develop an understanding of the theory behind web design and
  • to acquire technical skills  to support the delivery of a user-centred information service.

 In this post, I will consider the extent to which I have fulfilled these objectives.


UX design cartoon

I was initially sceptical about website design, as I had associated the word “design” with advertising. I wasn’t convinced that there would be much substance or theory to what I thought was a product-centred industry.  I was proved wrong; Although Bowles and Box (2011) highlight the potential difficulties that UX designers can encounter in the workplace (both in an organisation or an agency), they emphasise that the evidence-based arguments which a UX designer relies upon have the credibility required to deliver a sound, user-centred product.  As a result of this project, I have revised my opinion; information architecture/UX design is a reflective, evidence-based practice which really does put the user at the centre of its activities.


By Exploring and Assessing Software…

Netbeans logoI have experimented with a range of software; it’s been challenging to explore tools and use them to produce the different elements of our design process in a short space of time.  However, on reflection, I think that the usability criteria that we have applied to developing our website also apply to the usability of software; I can now see that software should be intuitive with good support documentation.  Consequently, some of my preferred tools have included Netbeans and WordPress.  Interestingly, this has led me to consider the role of librarians in “training” people to use referencing software or to search databases with overly complicated interfaces.  This perpetuates a product-centred approach which users should not accept!

And Through Learning To Code…

Learning to code using Jon Duckett's book

With no previous experience of coding I was unsure about how to tackle this aspect of the module.  However, I have learnt basic coding in HTML and CSS.  By using a logical and step-by-step approach, I have been surprised at what I have been able to produce.  I am pragmatic about what I need to learn; why re-invent the wheel when there is a wealth of resources available with the snippets of code available for creating rounded corners, horizontal secondary navigation bars and scrolling imagery?  I am confident that I can now read and write basic code and I am able to use resource materials from authors such as Duckett (2011), McFarland (2009) and W3schools.

And By Exploring Content Management Systems (CMS)…

Wordpress logoWorking on this project has made me increasingly aware of the extensive use of CMSs in the workplace.  As we designed a flat site, I think that my task in the forthcoming weeks will be to review the website I recently created to experiment with CMSs; I will focus in particular on switching the CMS from Drupal to WordPress and experiment with customising a template, as I think that this would be of relevance for a future role in an information environment.


You Don’t Have to be Able to Draw to be a Designer

One up sketching exercise for creating a wireframe

I had mistakenly believed that drawing skills were essential to design.  However, reading about the application of design in a wider context  (Papanek, 1985) and activities such as the “Six Up” and “One-Up” sketching exercises as suggested by Bowles and Box (2011) have made me realise that the generation of design ideas is not exclusive to the artistically-gifted.  I can see the value of using sketching exercises for generating ideas in a wide range of contexts.

Collaborative Working Works!

Teamwork wordleDysfunctionality in a team causes anxiety and stress for all concerned.  On this occasion, I  collaborated with colleagues who were from diverse backgrounds but who crucially, shared a commitment to the project; this resulted in us working effectively as a team.  We all had the opportunity to contribute to every stage of the process.  Basic IT skills were essential for this module, as was an appreciation of the implicit boundaries for support when working as a team on an academic task.  This was understood by the majority of the group at the outset of the project and I hope that it was accepted by all by the end.  Overall, I think that the website is evidence of our synergistic relationship; I found the democratic aspect of the work rewarding and in the future I would like to continue working in a similar way.

Iteration (kaizen) is good

Homer Simpson saying d'oh“Iteration” has been a key word throughout the project.  As discussed in previous posts, we iterated  ideas, wireframes, prototypes and the pre-launch website on the basis of user research and team decisions.  I think that in general, learning from big mistakes can be difficult, whereas learning from smaller errors is more manageable, less costly and more likely to produce successful results.   Team members agreed that all individual pieces of work would be subject to group iteration.  Working iteratively enabled us to develop collective responsibility for fulfilling the project aims.   I was able to trust and rely on team members and enjoyed the positive energy in our meetings.


As outlined above, I have exceeded my personal learning objectives for this module; I now need to reflect on my skills and future career path in an information environment.  But as I wrote in my first post, I intend to approach this new scenario in the same way as I build Lego.  One brick at a time.

Blue lego brick


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.

Duckett, J. 2011. HTML and CSS: design and build websites. Indianapolis, IN: John Wiley and Sons

McFarland, D. 2009. CSS: the missing manual. 2nd ed. Sebastapol, CA: O’Reilly Media

Papanek, V. 1985. Design for the real world: human ecology and social change. London: Thames and Hudson.

Wordle of 5S methodology

Using 5S Methodology for Evaluating a Website Redesign Project

As our website design project nears completion, I will take this opportunity to evaluate our work.  Hoekman (2007) discusses the relevance of the Japanese “5S” management approach, to UX design.  Grounded  in a philosophy of minimising waste, I can see its relevance to the largely Agile project management approach which we have adopted. I will give a brief description of each of the 5 features of this model and then outline their relevance to our approach to the project and the website.

5S methodology

5S methodology


Wikipedia (2012) describes this as a process whereby all unnecessary materials, tools and procedures are eliminated.  This was reflected by our research and analysis of the organisational and user requirements. For example, promoting the festival was a key requirement, whereas setting up e-commerce facilities for merchandise was out of scope.  In an ideal situation, it would have been satisfying to produce a fully functioning site.  However, by defining our requirements we were able to avoid “scope creep” (Bowles and Box, 2011) thus making the best use of our limited resources to produce a site which met the stated key organisational and user requirements.


Hoekman (2007) discusses how this process aims to reduce wastage and increase efficiency by ensuring that resources are accessible and organised so that the most relevant information is prioritised.  We managed our work flow so as to achieve maximum efficiency, as illustrated by our use of social media and cloud-based file storage:

Facebook, Dropbox and Google Drive

Setting up a closed Facebook group enabled team members to communicate despite working and living some distance from campus and we regularly exchanged information  about task progress/completion, support, advice and links to useful resources.  The “alerts” function allowed the group to stay in touch and to respond quickly to messages and queries.The group Dropbox folder for the project enabled team members to access all aspects of the project.  We were able to review our output, thus highlighting areas which had been completed or which required further development. 

In the future I would consider using a closed social media group for a project, although I would prefer to use Google+ for its Hangouts facility and and also for its less public interface.  Dropbox was easily accessed by all team members.  However, I prefer using Google Drive, as it allows team members to work simultaneously and collaboratively on a document, thus reducing time spent in reviewing, discussing and amending documentation.  Given that some team members were unfamiliar with Drive, we opted to use Dropbox but I would certainly use Drive in the future.


According to Wikipedia (2012), this process ensures that the workplace is kept clean, tidy and organised. This is illustrated by our methodical approach to the management of the project. For example, although we did not number the individual files until the end of the assignment, we maintained a clear folder structure in Dropbox which reflected the assignment’s 5 deliverable documents.

Dropbox folder contents

Screenshot of some of the contents of our Dropbox “deliverables” folder

By doing this, all team members were able keep track of progress.   Hoekman (2007) describes how the graphical elements of a website such as alignment and colour palette should contribute to its mood and personality.  Thus, we chose the font Adobe Caslon Pro for the title of our website:

Adobe Caslon Pro typeface

Adobe Caslon Pro typeface

as it is derived from William Caslon’s first original English typeface; we felt that this complemented the historical aspect of folk music which the festival organisers seek to preserve.  Similarly, the festival logo was subtly adjusted to include the dominant colour from the town’s crest:

Town crest and our redesigned logo

Colour matching between town crest and our redesigned logo.

The use of a pale blue background supported the vibrant colours in the logo and photographs featured on the homepage, thus creating a colour scheme which was both easy on the eye and accessible to users with low vision.  As a result, users described the site as being clear and inoffensive.

In the future I will continue to integrate “seiso” in the management of my work.  This seems almost instinctive, perhaps due to the nature of the information management course I am undertaking.  As discussed in a previous post, I have limited experience of using design principles.  However, I think that that by working collaboratively and then testing and iterating a design, I would be able to support the development of a sound UX-based design for a website.


Wikipedia (2012) describes the role of standardisation in the 5S methodology, as illustrated by the standardisation of work stations for employees performing similar tasks. This element was reflected in our project by the standardisation of our  user research.  Thus, we created a template for the questions, format and collation of user research.  We also wanted to achieve consistency within the website (something which was missing from the original site) to improved its usability.  In order to standardise the layout we initially created a wireframe/prototype in Visio by collaborating on the design iterations on campus.  One team member was then assigned to update the changes.  Similarly, when constructing the website, we assigned a (different) team member to be the “keeper of the code”.  Thus, although all team members were responsible for coding content, embedding maps, videos etc. in individual pages, this approach ensured that coding errors were minimised and  that the site maintained consistency. 

Overall, I feel that our approach to the user research and website layout was successful.  However, I think that this was largely due to the opportunity for team members to work collaboratively prior to standardising an approach.  Thus, instead of being “standardised”, I would describe our work style and website content as “consistent”.


This aspect of workplace organisation is described by Wikipedia (2012) as being an ongoing effort to find ways of improving existing processes.  This is closely linked to the Japanese word “kaizen” meaning “improvement”.  Its meaning has evolved over time to describe an iterative approach to both design and project management and is an inherent aspect of Agile projects (Bowles and Box, 2011).  Consequently, our final round of user testing (pre-launch user journey task observations and corridor tests), revealed user requirements necessitating adjustments to the website.  For example, clearer content layout for the Line-Up” page.

Our website is the result of the iterative (shitsuke/kaizen) approach to our decision-making and design process.  On reflection, although I was not fully aware of it at the time, I can see that evidence-based kaizen was key to supporting our team cohesiveness and confidence.  For example, our original hand-drawn site map evolved through ten versions into its final incarnation:

Site Map V1

Version 1 of our site map

Version 10 of our site map

Version 10 of our site map

By viewing the iterative process as evidence of progress and as a means of minimising errors in the construction phase of the website, we consequently felt more positive as a group.


Designed originally for the Japanese manufacturing industry, the 5S model has relevance to other work environments, including information architecture and UX design.  As with all management models however, I think that it is important to focus on the broader rather than the detailed aspects of the model.  For example, standardising work practices would be overly restrictive to UX designers but essential for staff working in a hospital.  Using the 5S model has been useful in describing some of the key aspects in our website redesign project; its elements fit implicitly within the Agile project management approach but is also suitable for the management of projects in hierarchical organisations.


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.

Hoekman, R. 2007. Designing the obvious: a common sense approach to Web application design. Berkeley, CA: New Riders

Wikipedia, 2012. 5S (methodology) [online]. Available at: http://en.wikipedia.org/wiki/5S_(methodology) [Accessed 26th January 2012].

Scenarios and Personas: A New Take on Commedia Dell’ Arte

It struck me this week, that there is a striking similarity between the principles of scenario and persona development in UX design and the Italian Commedia Dell’ Arte.  In the C15th, troupes of actors would put on open air performances using stock characters.  Scenarios would be tailored to the audience and dialogue was improvised, thus allowing the actors to comment on social and political issues of interest to the particular audience.  Similarly, scenarios, personas and user journey planning are techniques used by UX designers (the actors) to generate ideas for discussion by stakeholders (the audience) of a given website.

As mentioned in my previous blog post, I am interested in understanding the process of turning analysed data into a design idea using the abovementioned techniques.  I was heartened by the thought that these techniques have been used successfully in theatre for a long time!

Our Group’s Approach To Developing Personas

Given that we had not conducted the research on the primary users yet, we decided to focus on the information gathered from the SurveyMonkey survey which had been sent out mainly to secondary users to develop personas.  The group put forward ideas and then tested them against the quantitative and qualitative data obtained from the survey.  For example, when developing the persona of a secondary user, it was evident from the research that viewing photos on the festival website would be a key activity for this secondary users.  We consequently sketched a secondary persona with a smartphone.  In the midst of generating personas, I remained mindful of the fact that the lecturer (an experienced IA and UX designer) had explained that it is a technique which she does not use as often as user journey mapping.

How Useful Are Personas?

Bowles and Box (2011) discuss how personas are used most successfully in cases where many users are interviewed to identify common themes.  They put forward ideas for making use of existing marketing data to create personas in cases where time and/or money limits research.  Our project has these constraints upon it.  The limited data we have available could, as argued by Evans (2012) result in the creation of a persona based on the group’s own rationalisations and beliefs.   This was demonstrated by the group’s initial idea to use familiar secondary users to develop primary personas due to time/resource limitations.  A reconsideration of this idea has led to research with two primary users whose behaviours, needs and goals are dissimilar to the group’s initial expectations of personas for people who attend folk festivals.

Wechsler puts the issue of personas into context by describing personas as the characters which populate a scenario.  In turn, this can be used to plot a user journey through a website.

Our First User Journey

We developed a persona for a secondary user and created a journey using different colour post-its on a whiteboard.  We took photos to record our work but then reproduced the work on slides to make the journeys easier to read.  We initially plotted the journey using the existing site.  The number of steps reflect the potential user’s difficulty in accessing relevant information:

I was impressed by the flow of this process; the incorporation of the persona into a scenario and the subsequent journey helped to stimulate questions, comments and ideas about the existing site.  Our lecturer then suggested that we plot an “ideal” journeys for the same persona.  The slide below reflects a more intuitive route through the website:

I can therefore see that focussing on personas alone could result in an inaccurate interpretation of user research.  However, I think that any inherent bias or sterotyping becomes less problematic when personas  (both primary and secondary) are seen as part of a wider UX planning process whereby the personas are put within the context of user journey maps, thus generating design ideas which span a range of user behaviours, needs and expectations.

I am looking forward to analysing the the results of the user interviews and task observations; developing primary personas will be the next step in our design process.  I hope that they can be as colourful as the personas in the Commedia Dell’Arte…


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.

Evans, W. 2012. Customer research & persona development [online]. San Francisco: slideshare. Available at: http://www.slideshare.net/willevans/customer-research-persona-development [Accessed 01 November 2012].

Wechsler, J. 2010. Using scenarios [online]. Available at: http://uxthink.wordpress.com/2010/11/30/using_scenarios/ [Accessed 01 November 2012].

“If I had asked people what they wanted, they would have said faster horses.”

This quotation, attributed to John T. Ford, encapsulates the tension that exists between user-centred and designer-led product design approaches when managing the development of a product.   Hawley (2009) summarises the debate surrounding website development by discussing design from both the users’ and the organisational perspectives.

User-Driven Design

Hawley argues that users’ criteria for judging the success of a product includes learnability, efficiency of use and satisfaction.  From the organisation’s perspective, the value of these criteria is debatable; user research-based design process is expensive, does not lead to innovation or creativity and design goals frequently include other aims, aside from usability.  For example, the desirability of a product.  The author uses the spoof video created by Microsoft employees to draw attention to the restrictive design objectives set by the organisation:

Genius Design

A designer-led approach (which Hawley terms “genius design”) focusses instead on the creativity and skills of designers to innovate products without an interative user research-based process.  According to the author, this approach initially requires fewer resources and is unconstrained by existing products.  However, it is evident that entrepreneurial designers frequently refine design ideas after launching a product unsuccessfully.  For example, the NeXT Step operating system was designed by Steve Jobs after leaving Apple.  The product failed but was later refined and incorporated into Apple’s OS X operating system when Jobs returned to the company.  Moreover, Horton (2009) argues that users have many different goals and are not clear about how to meet them.  As a consequence, a user-driven approach to a design project can result in too many unfocussed objectives which do not fulfil the organisation’s business needs.  Kuniavsky (2003) argues that a product ultimately must meet the business aim of generating revenue.  This is consistent with the Garrett (2003) model which defines user needs and site objectives as the key aspects of the strategy which underpins a web development project.

Our Approach To The Project

Our group has decided to incorporate the forthcoming results from our user research into our objectives and requirements.  I hope that this will reveal overlapping objectives which we will take forward into our final design and I have sketched this simple model to focus my thinking during the research process:

To date, we have encountered some of the problems outlined by Hawley in the research phase of the project:

  • Research is time-consuming: the target users need to be identified, located and booked in to undertake research whilst adhering to tight project deadlines
  • Research can be inaccurate: the pressure of deadlines can result in the selection of unrepresentative users, thus skewing research results
  • Research can be expensive: a suitable venue has to be booked and participants need to be recompensed for their time

As a result, our initial research was comprised of a survey that was sent to group members’ friends, family and colleagues.  The results of this survey are being used as the basis for the interview/task observation and as a contributory element for further research activities including personae development and journey mapping.  Given that the majority of respondents were largely representative of the secondary users of the website, it could be argued that the resulting product may not appeal to the target user group.  Fortunately, we have identified two primary users for the interview/task research.  In a real-world scenario I would expect the commissioning organisation to make available the contact details of mailing list subscribers and Facebook users, thus generating a more representative sample of primary users.

So what is the best approach for designing a website?

Hawley and Horton agree that a merger of the user-centred and design-led approaches is a pragmatic solution.  By obtaining a broad understanding of the motivations underlying users’ behaviours, designers can become better informed about needs and aspirations of the target group and design a website accordingly. To achieve this, the use of techniques such as personae and scenario creation, user –journey mapping and sketching are widely advised (Bowles and Box 2011; Hawley 2009; Garrett 2003).

User Experience Design

It is becoming increasingly evident to me that a user-centred approach does not necessarily meet either the user and/or organisational objectives and that there may be an underlying truth in the John T. Ford’s words.  I had been using the term “user-centred design interchangeably with the term “User Experience Design”.  However, I think that the latter is a more accurate description of a bilateral approach to the design process.  This creative approach to using research-derived qualitative and quantitative data is something that I will explore in my next blog post.


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

Hawley, M. 2009. Design research methods for experience design [online]. Available at: http://www.uxmatters.com/mt/archives/2009/01/design-research-methods-for-experience-design.php [Accessed 28 October 2012].

Horton, S. 2009. Why research-directed website design will make your website better [online]. San Francisco: Peachpit. Available at: http://www.peachpit.com/articles/article.aspx?p=1403982 [Accessed 28 October 2012].

Kuniavsky, M. 2003. Observing the user experience: a practitioner’s guide to user research. San Francisco, CA: Morgan Kaufmann

Steele, C. 2011. 7 Steve Jobs products that failed [online]. New York: PCMAG.COM. Available at: http://www.pcmag.com/slideshow/story/286886/7-steve-jobs-products-that-failed/2 [Accessed: 28 October 2012].

Walsh, B. 2006. Microsoft re-designs the Ipod packaging [online]. Available at: http://www.youtube.com/watch?v=EUXnJraKM3k [Accessed 28 October 2012].

Error 404 with attitude: good UX design?

Our task this week was to undertake a competitor analysis and I decided to focus my reading on the benefits and costs of  such a review.  I began by reading the Withrow (2006) article which discussed the advantages of understanding the business context in which a product and user exist.  However, I was puzzled by the author’s suggestion that user-centred design and information architecture are separate aspects of website design:

“While user-centered design focuses on user needs/tasks, and information architecture focuses on content, these two aspects alone offer an incomplete picture. What is missing is the context: the environment in which the website or web application is used as well as the market in which it exists.”(Withrow, 2006, para. 1)

Consequently, instead of looking at the role of competitive analysis in the project management process, I decided to concentrate on clarifying my understanding of the concept of “usability”.

Usability Models

My initial interpretation of the term “usability” seemed to reflect a similarity with the marketing concept of putting the customer/user at the heart of the business process.  According to this model, the information architecture of the site should be designed so that it can be used intuitively by the user.  I was heartened to see that my interpretation of usability (or user experience/UX) is supported by Brinck et al (2002) and also by Bowles and Box (2011) who discuss its centrality at every stage of the project management process.  Garrett (2003) clarifies the issue for me with his 5 planes model:

The author argues that the user experience community was developed from two separate fields: those who approached the problem from a product (software) development perspective and those who perceived the Web from a publishing and information science perspective.  This duality of approach seems to partly explain the confusing terminology.  For example, the interchangeability of the terms usability, user experience and UX design.   By splitting each plane into a “Web as a software interface” and a “Web as a hypertext system” section, the author proposes a model which takes account of both aspects of user experience. For me, this integrated approach to designing a website is probably the most successful in terms of defining UX.  The model brought to mind a comment made by the lecturer who suggested that a website should be like a duck swimming on water; the duck appears to glide effortlessly whilst invisibly below the surface, its feet are paddling furiously…

Analysing A Website’s Usability

As part of our heuristic usability review we compared the analysis tools proposed by Bowles and Box (2011) and Userfocus (2009).  This quickly revealed that the majority of criteria could be mapped easily from one tool to the other.  However, the “accessibility” criterion was surprisingly not a distinct element of the Userfocus tool.   A team member with experience of managing assistive technology undertook additional research and was able to add key questions on accessibility to the review.  The review was undertaken using a free online tool which focussed on sight-related disabilities.  My experience of working with stroke survivors with aphasia (communication difficulties) has raised my awareness of other forms of disability which can affect access to the Web, including mobility problems, deafness and cognitive impairment.  The Web Accessibility website summarises some of the issues which designers should take account of when creating websites; this is especially important given the need for organisations to uphold the Disability Discrimination Act (1995).  However, given the constraints of this project, I feel that the questions used in our expert review will highlight the need to meet the most common accessibility standards.

Usability and Error Minimisation

My final comment in this post is related to the issue of error minimisation.  It is certainly the case that I don’t see the old-school “Error 404” message as frequently anymore.  Instead, when I do encounter a problem, I am presented with messages tailored to the website and the organisational image.  Longanecker (2012, para 1.) argues that

“the websites and apps we truly love have one thing in common: soul. They’re humanized. They have emotional intelligence designed into the user experience. And this emotional intelligence is crafted through thoughtful interaction design and feedback mechanisms built into the website.”

Hence my unashamed inclusion of the South Park Error 404 message. Although the user does not want to be confronted with an error message, good UX design ensures that the technical failure remains in keeping with the brand identity.


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.

Brinck, T. et al. 2002. Usability for the Web: designing web sites that work. San Francisco, CA: Morgan Kaufmann

Garrett, J. J. 2003. The elements of user experience : user-centered design for the web. 2nd ed.Berkeley, CA: New Riders

Great Britain. 1995. Disability discrimination Act 1995 [online]. London:HMSO. Available at: http://www.legislation.gov.uk/ukpga/1995/50/part/III/crossheading/goods-facilities-and-services [Accessed 17 October 2012].

Longanecker, C. 2012. Give your website soul with emotionally intelligent interactions [online]. Freiburg: Smashing Magazine. Available at: http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/ [Accessed 17 October 2012].

Travis, D. 2009. 247 Web usability guidelines [online]. London: Usefocus. Available at: http://www.userfocus.co.uk/resources/guidelines.html [Accessed 17 October 2012].

web-accessibility.org.uk. 2012. Web accessibility: improve the Web for everyone [online]. Available at: http://www.web-accessibility.org.uk/ [Accessed: 17 October 2012].

WebAIM. 2012. Welcome to WAVE [online]. Logan: WebAIM. Available at: http://wave.webaim.org/ [Accessed: 17 October 2012

Withrow, J. 2006. Competitive analysis: understanding the market context [Online]. Available at: http://www.boxesandarrows.com/view/competitive_analysis_understanding_the_market_context [Accessed: 17 October 2012