Last week, at a user meeting held by Firefly, Andy Reid, our Network Manager, and I spoke about the way the St Paul’s website has been developed over the last couple of years. A summary road map may be of interest to friends and to colleagues in other schools, and this is a story that certainly feeds in to some topical issues.
*****
In brief and in diary form, with a few notes at the end, the work to date:
- Summer term 2008. Discussions going on over some months about how we could improve our site are brought to a head. We draw up a short list of prospective designers and agencies with whom we might want to work. Small, in-house group formed for website development, including me, Andy, John Barlow (webmaster-to-be of Colet Court’s site — Colet’s our junior school), our Director of Studies and Deputy Head, and the Heads of both schools. Work of the short-listed companies reviewed; two companies invited to meet with us. Initial feedback indicates our existing site has lots of scope for improvement: visual design could be much more interesting and the information architecture needs attention. Beginning of summer holiday, Clearleft selected: they have the track record of achievement and the range of in-house expertise we need. At this stage, we are clear a good, local design service could give our site a face-lift for 10K; a top agency, working from and focused on user experience, might cost anywhere from 15–20 up to 40K, depending on the work required/requested. To keep these sums in perspective, we compare the cost of a prospectus and annual information booklet over a four year period (the probable life of a new web design before it might need to be overhauled extensively).
- September–December 2008. Planning and research. User research (involving: selection and recruitment of suitable user volunteers; testing of feedback about existing site; subsequent testing and feedback about new site); competitive analysis; content analysis (spreadsheets of content and pages); creation of personas. Workshop: Clearleft learn about St Paul’s, uncover much more about our goals for the redesign and what we think makes us distinctive; we all consider how the site will develop over time. Here’s a shot of some of our affinity diagram work (KJ Method) — this ‘helps groups reach consensus on what the most important aspects of a product should be’*:
We discover personas: ‘research-based documents that describe typical users. … they get people talking about user experience and how to design a website for customers’*. Profiles built of key users, leading to creation of user stories, in turn leading to compilation of a feature-and-function list which, in turn, means we can better deliberate priorities and cost implications. User experience design phase: card sorts (users reveal how they group topics: ‘card sorting can help you understand how users form relationships between concepts and allow you to create a shared vocabulary from the results’*), the understanding of the journeys users (will) make through our site. Information architecture work leads to a new site map and we receive a spreadsheet of how the old content and structure map to the new, along with the final site map. First meeting with professional copy writer. Initial work on copy, including interviewing pupils.
- December 2008–January 2009. Usability and testing. Wireframes (‘A wireframe is a low-detail representation of an interface. It omits colour, image detail and other visual design specifics, providing instead a simple inventory of what’s on the page and how it should be laid out’*) built for key pages, providing clear guidelines for both design and build and a platform for usability testing. Usability tests lead to further refinement of the wireframes. This phase brings together the needs of the users with the goals of the school and proceeds iteratively. In this way, we can create and refine a site with a cohesive look and feel.
- February–July 2009. Final wireframes. Final sitemap and old-to-new content maps. Visual design (developed by James Bates): intensive work and development of concept, coupled with intensive photographic work. Final design proofs. Completed front-end build: HTML/CSS templates (pattern portfolio) delivered.
- Summer holiday–September 2009. Software development: Firefly, our existing content management system, is developed considerably to provide for the new site. Intensive back-end integration also undertaken in-house.
- Autumn half-term 2009. First version of site launched, privately. Steep learning curve for all. Further developments to Firefly and continued extensive in-house development of back-end integration with databases in our MIS (iSAMS). Photographic work continues, including new aerial shots.
- Late Autumn 2009–Spring 2010. Full revision of copy and completion of most new photographic work.
- April–May 2010. Feedback from Clearleft about our implementation as we go, leading to changes in our methods or Firefly or both. Launch.
- June–July 2010. Enhancement of copy and photography (this never stops). Completion of videos for 16+ entry.
- August–September 2010. Revision of homepage image and small-screen optimisation.
(School holidays prolong the re-design process and one of the challenges is managing the project over these gaps. Things gets easier as we near completion, but in the earlier stages the full group of people involved does need to be available for key decisions to be reached collectively. Added to this, we are developing two sites, St Paul’s and Colet Court.)
*****
This has been the largest and most collaborative project I’ve been involved in, engaging the attention, time and skills of a distributed group of professional designers, our home team, our photographer, software developers and others over many months. The work of so many people was critical to the project’s success. (Communicating with and coordinating this distributed team went on through meetings, via email and Basecamp, and by phone.) I am grateful to all our team (mentioned above), and also for the indispensable work of our in-house developers, Simon and Zar, who oversee much of the back-end integration. Great thanks is owed to Jonathan Player, our photographer — unstinting in his efforts to get the shots we need. Clearleft’s work speaks for itself and they have been endlessly helpful, creative and astute. Hugely experienced, they have guided and grown this project every step of the way. At Firefly, Joe Mathewson, in particular, has done extensive work in developing Firefly’s capabilities. He was immensely patient as we bombed him with feature requests and bug reports.
Cennydd was Clearleft’s project and UX lead and his book (quoted above*), Undercover User Experience Design, is subtitled, ‘Learn how to do great UX work with tiny budgets, no time and limited support’. That alone should make schools buy a copy. It’s on my desk now and comes highly recommended.
Finally, we’ve all learned a lot more about CSS and HTML. If you want to explore things further, there’s Andy Budd’s (Clearleft), CSS Mastery: Advanced Web Standards Solutions. Jeremy’s (also Clearleft) new book, HTML5 for Web Designers, makes a complex thing seem alluringly approachable.
*****
At the Oxford Firefly meeting, I said that the small-screen optimisation we asked Clearleft to effect is a first step as we think about the life of a site in an increasingly small-screen-accessed, “mobile”-accessed world. As Jeremy has put it, ‘The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all’. Jeremy’s set out his thinking about responsive design in a number of very recent posts on his blog: A responsive mind; Delivering Sorrow; Responsive refresh; Responsive enhancement.
Last week, James Pearce picked up on this work and the responsive design initiative, and both Cennydd’s and Jeremy’s comments there, along with some other, excellent contributions (eg, Max Flanigan: ‘whilst CSS media queries may not represent a single revelational panacea for mobile, they do represent a step in the right direction. One that if taken more often can be iterated further’), repay thoughtful attention. We knew we weren’t trying to build a mobile site, and we’re well aware that media does not simply equal context.
St Paul’s is unique in my experience in having not one but two full-time, in-house developers on its IT team. Most schools I know don’t have one, and where they do have someone it’s almost invariably a talented individual who programs and develops in his or her spare time. Factor in the budgets schools can throw at this and the difficulties of developing a separate mobile site might seem insurmountable. All the same, we need to be thinking about these issues and, as I’ve said to James privately, it’s very useful to have his mobile-centric take on where we are now and what additional, cost-effective, smaller changes might help.
The way forward is going to take some thinking about. My ha’p’worth:
- I'm seeing some rapidly changing behaviour around devices and their use. Just look at how things have developed since we first commissioned Clearleft in 2008 to do the re-design! Every day, there’s evidence of the greater and greater use of “mobile” devices (very notably, iPads, of course, so often sighted around London, on tube and train) and what we know of how these then get used in the home tells us that the shift away from desktops is now very significant. Whereas even recently “mobile” devices did seem to mean ‘a few moments’ of use in a busy life, this is no longer an adequate summary of how they’re being used.
- Moreover, one of the fascinating things about the iPad is the way it makes a computer a social thing. Evidence of this came in very soon after its arrival. Here’s a scene I see now a lot, but this was back in June, in one of our main desktop-provisioned rooms:
And it’s not just around games, of course: the easy, intimate, sociable way we can gather around that screen with its 178° viewing angle … Once experienced in class, you realise things have changed. A decision as important as private education may be served better in some ways via a shared iPad than via a desktop — one person sitting at it and others having to stop what they’re doing and come and stand behind the viewer in order to have any part in the experience.
So the context and manner of “mobile” use is changing very fast for us (we’re of course London-centric). “Mobile” is often noticeably immersive now, not simply briefly dipped into, and also often shared. - Another complication, as Jeremy points out in a comment to James’s post, ‘Large screen size does not equate to large bandwidth’, nor small to small.
- There’s the difficulty of who the site is for (primarily). If we prioritise the “delivery” of news or calendar for a mobile device, will the primary audience be best served (remembering the rapidly changing patterns of user behaviour)? And how well will users adapt to changes in navigation?
- And finally, how many taps/clicks from the homepage is too many to get to a phone number? It’s currently one.
Interesting days. Perhaps, as James says (in the comments to his post), ‘There will soon be a time when mobile users are be considered first, and their sedentary brethren as an afterthought. One day, I think the desktop browser will be the trade-off!’. Right now, for a few hours of work, the media query approach is a very good option to take and then run with. The paint has barely begun to dry on the small-screen optimisation of our site. In its short life, it's yielded delight and pleasure. Inevitably, it involves compromises and we're very interested in the UX considerations, the context of use and user.
*****
Over the summer, I was re-reading some of Brian Eno’s essays and thinking again how what he said in a Wired interview (with Kevin Kelly) in 1995 about things not being finished really fits our times. It’s rather out of context here, but it works for me now when I think about building a site:
The right word is “unfinished.” Think of cultural products, or art works, or the people who use them even, as being unfinished. Permanently unfinished.
Recently, I saw Chris Messina tweeted this:
That chimed, too, and made me think back to Dan Hill’s telling comment about the birth of Monocle (2007):
… it’s both thrilling and sobering to see how the creative and industrial process of making a magazine has been honed to streamlined effectiveness, given a few hundred years’ practice. Sobering, as it makes new media seem a clumsy, gauche ingenue.
So it gave me real pleasure, when I was thinking about writing this, to read again,
The launch or redesign of a website is the beginning of the story, not the end. We provide ongoing support, analysis and strategy towards improving and adding to existing functionality based on real world use. — Clearleft
Our attention is now turned, as it should be, to building and developing the site further, to thinking responsively ( :) ) about small screens and mobile users and to enhancing as much as we can (within the constraints of budget, competing claims and available time) the experience of people using our site.
