Monthly Archives: January 2013

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.

1. DEVELOPING AN UNDERSTANDING OF INFORMATION ARCHITECTURE AND UX DESIGN THEORY

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.

2. ACQUIRING TECHNICAL SKILLS

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.

BUT THERE WAS UNEXPECTED LEARNING, TOO…

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.

WHAT ABOUT THE FUTURE?

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

REFERENCES

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.

Advertisements
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

1. SORT (SEIRI)

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.

2. STRAIGHTEN (SEITON)

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.

3. SHINE (SEISO)

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.

4. STANDARDISE (SEIKETSU)

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”.

5. SUSTAIN (SHITSUKE)

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.

CONCLUSION

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.

REFERENCES

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].

South Park cartoon Linux joke

The Open Source Movement And Me

The open source movement has been a thread running through my studies over the last 18 months.  Each module has provided opportunities for students to explore the role of this movement.  Thus:

Open source and modules

What Is The Open Source Movement?

According to Wikipedia 2012, para. 1,

“The open source movement is a broad-reaching movement of individuals who support the use of open source licences for some or all software.”

However, I would argue that the Open Source Movement is an illustration of a wider Crowdsourcing Movement.  Howe (2006) cited in Wikipedia (2012, para. 3) says that “crowdsourcing represents the act of a company or institution taking a function once performed by employees and outsourcing it to an undefined (and generally large) network of people in the form of an open call.”

On reflection, I can now see that my (small) role in classifying galaxies in the Galaxy Zoo 2 astronomy project in 2009 is an example of crowdsourcing for scientific research.  The satisfaction gained from making a small contribution to a large project is reflected in other socio-economic environments.  Design, research, fundraising and social campaigning are benefitting from this wider movement.

What Are The Key Issues Regarding Open Source Software For Information Professionals?

The Open Source Initiative specifies criteria which must be met by software seeking to be defined as “open source”.  Graham and Kramer (2012) outline issues which I consider to be of relevance to information professionals, including the potentially limited documentation, patchy support, requirement for greater technical understanding and non-functioning of some applications.      These issues were evidenced in my recent experiments with Drupal.  However, the authors also describe the advantages of choosing from a wide range of free applications which are supported by a vibrant community of supporters.  Thus, small organisations could avoid becoming “locked-in” to a product  by a vendor and benefit from greater customisation.

Implications of Open Source Software For Our Group Project

The group project has provided some practical illustrations of some of the abovementioned issues.  Thus, We were unable to use Adobe’s Dreamweaver software for coding the website as the project duration exceeds the free 30 day trial period for the product.  Instead, we used the open source Netbeans 7.3 software (interestingly now sponsored by Oracle).  I found this to be a better product than Dreamweaver as it highlighted potential coding errors.  We also successfully experimented with Gimp as an alternative to Adobe’ s Photoshop product.  Obtaining a copy of Microsoft’s Visio software (for wireframing) via the complicated licensing agreement between the vendors and the University was complex and time-consuming; some students on the course did not succeed in obtaining access to the product.  As working part-time students, we have very limited access to on-site computer facilities and open-source products have been essential to designing and building the website.

The second implication for our group assignment is reflected by our approach to the management of the project.  I have discussed the Agile approach to project management in a previous post.  On reflection, it seems to me that the Agile approach, with its flattened management structure and iterative nature is an applied example of crowdsourcing.  Thus, all group members are able to contribute knowledge and expertise at different stages of the project via an open process of iteration.

Implications Of Open Source Software In The Workplace

My current role in the Fines Section of a university library has highlighted a potential role for open source software.  The library management system software and vendor servers are sometimes affected by technical problems which can result in borrowers incurring fines incorrectly.  Problems can only be solved by the software vendors (and only if they deem them to be of a high priority), which can cause frustrating delays for the product users.  It would seem logical that libraries with their commitment to open access should support the use of open source library management systems and other related software.  This becomes of greater significance to librarians when software companies are juggling the demands of owning information and journal databases with those of selling library software to search information resources.  The advantages of integrating the two sides of a business may not be in the interests of library users.  It is therefore encouraging that as shown by research by Winkler and MacDonald (2012) there is growing interest in developing standards-based open library management systems.

My experience of using both a range of proprietory and open source software has emphasised the need to consider a number of issues regarding software:

  • the implications of a product to the organisation’s business aims (can the business afford to become dependent on a software product?)
  • current and future customisation and interoperability (will the product enable or limit business requirements?)
  • costs (both immediate and longer term)
  • ethical considerations (does the business have policy requirements to fulfill?)

I think that these criteria will vary in importance depending on the workplace environment and would be matched against other explicit and implicit criteria (for example, familiarity with a product) in an organisation’s decision-making process.

So What About Open Source And Me?

In the interests of fairer access to digital technologies, I would prefer to see greater use of open source software and resources in education and the workplace.   These can only thrive thorough adoption, so I will make my small contribution to the Movement by recommending the open source products I have used in this project to friends and colleagues.

REFERENCES

Adobe Systems Inc. 2012. Products [online]. Available at: http://www.adobe.com/uk/products/catalog.html Accessed: 08 January 2012].

Galaxy Zoo. 2012. Homepage [online]. Available at: http://www.galaxyzoo.org/#/ Accessed: 08 January 2012].

Graham, R. and Kramer, J. 2012. Introduction to web content management systems site development [online]. Cambridge, MA: Harvard University Extension School. Available at: http://www.trainingcraft.com/Harvard/CMSWeek1/CMS-Week%201-slides.pdf [Accessed 03 January 2013].

Netbeans. 2012. Homepage [online]. Available at: http://netbeans.org/ [Accessed 08 January 2013].

Open Source Initiative. 2012. The Open Source definition [online]. Available at: http://opensource.org/osd [Accessed 08 January 2013].

Wikipedia 2012. Open source movement [online]. Available at: http://en.wikipedia.org/wiki/Open_source_movement Accessed 08 January 2013].

Winkler, M. and McDonald, R.H. 2012. Kuali OLE: a collaborative community model for software development. Information Standards Quarterly [online]. Available at: http://www.niso.org/publications/isq/2012/v24no4/winkler/ [Accessed 08 January 2013].