On Creating and Preserving Irish Digital Design

I gave this presentation on behalf of Frontend.com at the 100 Archive’s ‘Save As’ event the National Library of Ireland in August 2018. The event addressed issues of how Irish design shall preserve digital content – websites, apps, software and systems – when our means of making, using and saving them evolve so rapidly. 

The intention of my presentation was to explore the topic through the lens of a professional practitioner, and to identify questions that I thought were worthy of further investigation. So this presentation does not provide many answers. This is a slightly revised version of the script I wrote and which I did not deviate too far from in whatever extemporising I did on the night.

—
Good evening.

Tonight I want to investigate whether we are taking the best approach in how we think about preserving Digital Design for future audiences. Do we tend to focus on the pixel, not the paradigm?

To set the scene, I need to talk about the kinds of work that we do in Frontend.com and how we go about doing it. The first thing most people think of when they hear Digital Design still tends to be websites. But, in reality, the scope of what we design is considerably broader than that. We design Digital Systems. That is combinations of front-end and back-end software which can be accessed and used in many ways. Whether that is over the Internet, in dedicated PC applications or smartphone apps, or even embedded within specific bespoke hardware devices.

We could be designing these products for use by general consumers, like this application. Or else be tailoring them specifically for particular cohorts of users such as financial analysts, medical healthcare professionals, and so on. Predominantly, these are tools that help people to achieve their goals in their working life.

I realise that not everyone in the audience this evening works in the Irish design sector. So, firstly, here are some useful definitions. In Digital Design we work in teams. These teams become get large and complicated, but at a high-level, the three core roles are User Experience Designers, Interaction Designers, and User Interface Designers.

To make a real-world analogy; let us use this library. (Note that this presentation was being given in the National Library of Ireland.) Working from the specific to the general. You can consider items such as this marketing leaflet as an aspect of the library’s User Interface.

The ways that the library’s contents are organised and how the physical spaces are configured, such as how many people the reading room can accommodate for example. Those can all be thought of as equivalent to its Interaction Design.

Then, at the highest level, User Experience takes responsibility for the overall experience people have here in the National Library. It requires considering every possible touchpoint, potential interaction, or conversation that people can have. Everything from the quality of your seat in the Reading Room, to the standard of coffee you get in the restaurant, to the kind of advice you get from the receptionist.

Now while this is an imperfect analogy, it strives to makes the point that a lot of the design thinking we have to do in Digital Design is concerned with Designing Experiences rather than Creating Artefacts. Obviously, this presents challenges when we want to consider how to preserve the outcomes of such design activities in the future.

If we think about the nature of the kinds of work activities being carried out.

User Experience is primarily delivered as a service: in workshops, design sprints, meetings, and conversations. While these processes produce a lot of ephemera, (the cliche of the wall of Post-it notes being the most obvious) there may not be much that can be archived in a meaningful way.

Interaction Design is the majority of the work. This produces copious documentation. So archiving those documents can be useful as they are rich in information. Although realistically we may have to consider archiving as periodic snapshots. I will go into more detail on that point later.

User Interface delivers tangible digital artefacts and its outputs are the closest equivalent to final end-products. Currently, these artefacts are the easiest to archive, and therefore are the most likely to be retained in the long-term by design studios. But the key issue to explore tonight is that the tendency to focus on this aspect of the process fails to capture the totality of Digital Product Design.

Digital Design Practices

In thinking about this topic it is important that we consider the behaviours and practices in use within Digital Design teams. How do we work today? How are the ways that we work evolving? How are the commercial realities that we operate within changing?

The most fundamental change that we have seen over twenty years in Frontend.com is that previously our projects were discrete units of work; with a tangible deliverable at their completion. The project scope was often such that we would be able to complete all tasks in-house, deliver something to our client, and later on showcase the work as something we had made ourselves.

It is not so simple anymore.

Digital Design now operates within an international context. For example, on a typical project today we could be working with Corporate Ownership in the USA, Product Management in Switzerland, and Software Development in Poland, with us providing the User Experience Design from Dublin.

The Digital Design deliverables which we create are typically an intermediate element within such large complex projects. Our outputs are taken by either the client’s own in-house development team or by their software partners who realise the final end-product from our specifications.

As a result of operating within these sorts of contexts, Digital Design processes have evolved in parallel with software development methodologies and practices. Clients have moved away from the so-called ‘Big Plan Up-Front’ approach of putting a huge effort into defined and numbered product releases, v1.0 and v2.0 and so on. Instead most now choose to work in a sequence of ongoing iterations.

Interestingly this means that our design output is never truly fixed and is always in a state of flux. When designers are operating within a cycle of daily releases, their everyday reality is like the old expression: ‘You can never step into the same stream twice.’

So operating in this context and thinking about digital archiving the first question becomes: where does one draw the line? At what point do you step off the wheel and take a snapshot to archive?

Digital Designer Behaviours

The next facet of this topic we need to explore is the mindset of today’s Digital Designers. Would they ever make significant use of any significant national Digital Design Archive, or would such a resource prove more valuable to an academic audience?

Based on my own observations, Digital Designers more inclined to look sideways rather than look back to precedent. That is, they seem more inclined to draw from international best practices, heuristics, and design patterns in their areas of expertise, rather than from a deeper history of design.

I suspect that this is the case because Digital Designer’s mental bandwidth is occupied with keeping afloat in the ever-present waves of technological innovation that just keep coming at them. The various disciplines of Digital Design are not yet settled. They are characterised by ongoing iterations and reinventions, both at the minute level of craft-based details and all the way up to fundamental paradigm shifts at the macro levels of activity.

Of course, we can hope and expect that these Designers do have the wherewithal to look to precedent for some overarching general principles of User Experience Design. But we are not talking about a long period of time here.

If you consider that the Nokia phones top left were the cutting edge of mobile UI when Frontend.com was founded in 1999. The first ever web page was only published eight years before that. Then seven years previously the core user interface patterns we all rely on today were being defined with the first Apple Macintosh. In that same year, Jet Set Willy was the level of user interface that introduced me to digital design on my 16k ZX Spectrum. Look much further back and at a certain point, you run out of reference materials once you get to punchcards in the 1960s..

So we can say that the realistic event-horizon of historical reference points for a Digital Design project does tend to be limited by whenever the underlying software or technology platform was created.

What Do We Preserve?

Every studio I have worked in has a dusty drawer full of unreadable ZIP disks, JAZ disks, CD-ROMs, and so on. Eventually, these legacy storage media do all end up in a skip and ultimately landfill.

In our studio, we do have a server with a working digital repository of projects going back to when we were founded. However, it is quite likely we may no longer have the means to access, edit, or even view a certain amount of those archived files.

It turns out that this is not actually much of a business problem. As there are few, if any, client requests to go back into our digital archive and engage with our older design resources and files.

Examples of our work where we can no longer feasible or easily view our end-products include:

• Flex applications or Flash-based websites.
• Applications that need specific Operating System versions to run.
• Embedded Applications in depreciated hardware, particularly medical devices.
• iOS and Android apps that only run on earlier releases of either operating system.
• Applications that depend on depreciated cloud services to provide live data and content to present. When that data is no longer available or does not even exist, how can one represent those digital User Experiences in the future?

No Paper Trail

The paperless office is another factor we have to address if we are thinking about what design legacy may survive into the future. I am sure archivists would love to get their hands on lots of Digital Designer’s black leather notebooks crammed full of carefully hand-rendered UI concept sketches. Unfortunately, there are also a lot of less of those these days as well.

Today that process tends more towards collaboration. As, for example, in our studio the vital initial ‘thinking by drawing’ work all happens on the walls, the tables, and the desks. We have adapted nearly every flat surface in our studio for writing and drawing on.

While that facilitates an efficient process of Design, Redesign, Redraw, Erase, and Repeat. It ultimately means no physical paper trail and no permanent record.

What Should We Be Preserving?

We need to ask ourselves what is it that best captures the true essence of a Digital Product?

• Does a dance step diagram capture the dynamic experience of the tango?
• Does an architectural drawing capture the experience of walking through a historic building?
• Does a UI specifications document capture the experience of using a complex digital product?
• Obviously, the answer to these questions is no. Each is a facet of the designed experience, but none of them provides the complete picture.

If we visualise the Digital Product at sitting the centre of the context diagram below. Working outwards, to the left, there is the context of the user-facing hardware and interaction elements that house the digital construct. Do you need to archive those to capture the holistic experience of using the Digital Product?

Then working backwards, to the right, there is the vast ecosystem of all the potential inputs into the digital construct: content, databases, networks, location data, images, sensor data etc. Without those, the Digital Product is only an empty framework. So, do you also need to archive that to capture the holistic experience?

Novel UX Interactions

Now to add one further complication. We need to address the kinds of novel Digital Designs that may prove even more challenging to archive in future. As our smart devices are now location-aware, we observe more products which are deeply context-dependent. Think of the furniture app that shows you an augmented reality 3D view of how that armchair would look in your living room. The experience of these products is completely dependent on and tied to, the unique physical space that the app is being used within. You simply cannot replicate that experience in any another physical space. From an archival perspective, I would see these digital products as being akin to site-specific, location-based artworks.

Today our UX design practice extends to designing conversations. Experiences like chatbot interactions can be either text-based with an on-screen visual expression, or can be purely vocal. How might one archive user interactions for purely voice-driven technology platforms?

So while there has been a tendency to consider Digital Design in association with printed materials. There are interesting conversations to be had about exploring ways to preserve Digital Design which may have more in common with how physical objects are preserved in a museum or artworks in a gallery.

Possible Solutions

What we find interesting would be to consider approaches to how one would go about archiving Digital Design outputs which are:

• Complex
• Multi-faceted
• Multi-platform
• Multi-channel
• Continuously Iterated
• Use Live Data

The Pixel or the Paradigm?

At Frontend.com we find it most helpful to think of design as a narrative. It is more important to somehow capture as complete a representation of that narrative. For, if we only capture the pixels then we risk losing sight of the larger picture.

So, to that end, we have experimented with using narrative videos to capture the overall experience of our Digital Products by telling the story of those products. These videos include the products being used, along with conversations with their users discussing how the product's functionality and utility benefited them. Here is a short excerpt from one such video about the MyMilkman system we developed for Glanbia.

Perhaps narratives like this can point towards one of the necessary solutions to preserving the multi-faceted experience of using Digital Design products. I am looking forward to discussing this further with you all after we hear from our next two speakers.

Thank you.

Image courtesy of the National Library of Ireland.

—
‘Save As: Creating and Preserving Irish Digital Design’ was presented as part of Heritage Week and the European Year of Cultural Heritage. Other speakers included design historian Sorcha O’Brien and Joanna Finegan of the National Library’s Digital Collections Department. The 100 Archive is a community-centred initiative to capture and record the diverse history and practices of Irish graphic design.

Clarity and Focus in Blog Layouts

Working my way through the process of typesetting my old blog posts for the print-on-demand edition of Thoughtport had one unforeseen outcome. I began to appreciate the simplicity and clarity of seeing my words typeset on a clear white page without any digital clutter surrounding them.

When I returned to writing on the Blogger platform, I found the online presentation of my content too busy and distracting. Up to then, I had always used some variant of the conventional two-column blog layout. This was a primary column containing the posts with a sidebar column of ancillary information, navigation, and outbound links. I adopted that fundamental layout structure on the first day of this site. Over the years I had updated and adjusted the types of content displayed in both the sidebar, and in what became a deep footer. But I had never taken a top level review of what I should include and what I should remove. Were the sidebar functions in any way helpful, or were they distracting from my primary content?

I read all my blog subscriptions within the Reeder RSS aggregator app. This imposes one standard visual treatment on to all blogs. So I had become unfamiliar with the design layout of the HTML versions of the blogs I read regularly. I did some ad-hoc research to see what was working well.

Gemmell follows his own design principles in the layout of his blog.

Jeffery Zeldman’s layout seems perfectly optimised for reading on a tablet.

Although John Gruber still uses a sidebar.

Having decided to simplify the design of my blog to deliver some of the positive features I observed in the clarity of my book layout, I was fortunate to then read this wonderful post by Matt Gemmell: ‘Designing blogs for readers.’ (I recommend you read his whole article.) He advocates a merciless editing of blog layouts to focus on legibility and content.  I found that, whether consciously or otherwise, many of the writers I admire had adopted many of his recommendations in the presentation of their material. Gemmell’s arguments convinced me to go much much farther in redesigning this site than I had considered. These images of my previous blog layouts illustrate how much I have changed this site’s design over time.

How this blog looked way way back in 2006. Jiminiy!

Still very busy in 2010 presenting too many distracting links.

This was the last layout I used before introducing the new clarified treatment.

In the end, I removed everything from both the secondary sidebar and the deep footer this time. I changed the harsh white background to a soft creamy white and replaced all of the san-serif typefaces with a serif faces typeset at a larger size. One significant outcome of this new design is that this site is now far more tablet-friendly.

The new reconsidered layout brings my content to the fore and optimises for attentive reading. By reducing distractions and providing some necessary stillness, I hope that I have improved your engagement with my writing.

Quite meta I know, but here is a screen-shot of this post in the new layout.

An Observation on Type Sizes

A short note to any book designers out there. The vast majority of commuters I observe reading Kindles have their on-screen type size set much, much larger than the default text setting. I think that this is an interesting observation, particularly given how people really avoid ever reading large-print books in public. (‘Oh, I don’t need to read a book with big type like that, my eyesight is just fine’.)
I do not know what percent of the publishing market is represented by large-print books, but it has got to be pretty niche. However, now that they have been empowered by the technology, people do tend to pump-up the type size to whatever setting they can read best at.
Perhaps we designers have been typesetting books in too small type sizes all along? A decision that up to now has always been constrained by the publishing economies of paper costs and the human ergonomics of carrying around larger books with massive page counts as much as it has by designer’s preferences for using small type sizes.
So perhaps the default type size for the next ebook you publish needs to be twice as large as what you have been using to date. Think about it.

A Novel Feature Idea for iOS

iOS should present a default device owner’s avatar image to any apps that request one.

Getting started on any new social media platform – or on one of the majority of apps which increasingly require an initial login to create a presence within the app’s community – is now a pretty efficient and streamlined process. If you do not want to login with your Facebook or Twitter identity credentials [1] then you just need to provide a user name and a password (sometimes an email address is not even needed any more) and you are good to go. You get a generic avatar icon to speed your way directly into the service: completing your user profile by adding a photo and any other information can always happen at any time later on. Because including your avatar photo is not a step within that initial on-ramping workflow one can see a lot of default avatars being used in the early stages of community building.

Sharing Your Sign-up (or Twaring Your Twign-up, Even)

Here is a novel UI pattern. I was investigating a new Twitter-related service called Twournal* yesterday. I was applying for a beta invite to see how it worked. The ‘Request An Invite Code’ button did not take me to a page requesting the usual level of authentication (typically an email, a Twitter login or a Facebook login). Rather, to request this particular invitation, the process required me to activate the above viral tweet that would let all of my followers know that I was making the application.

BFK Site Redesign 2008

I have completely rethought and restructured the BFK website for its new version which has just launched. My intention is that this new iteration of the site will not need any substantial redesign in the near-term and that this new structure defines a stable content platform which we can optimise and refine over time.

I wanted to promote the ‘News’ section to the forefront of the site. Rather than only having news headlines on the home page as before, I wanted the articles themselves right there for people to start reading immediately. Therefore, constructing the new site in a blog structure seemed to be the most appropriate way to achieve what I had in mind. I have grown familiar with the logic of the blog approach through my writing here on Thoughtport. All of the sites that I read regularly publish in an RSS-friendly blog format, yet too few branding and design companies so far have grasped the potential of this format for their own sites, most still preferring to continue with presentation-style site structures. I dispensed with the whole construct of a separate ‘News’ section as well: the stream of news posts is now the central spine of this site.

As with previous builds of this site, the CMS back-end is constructed on the Strata3 Publisher platform. Strata3 had not built a blog-format site before and their Publisher product is optimised for more traditional page-based websites. So it took a certain degree of customisation to deliver on the specific site structure and internal linkages that I required.

The whole site is now laid out and typeset on a strict 25-pixel grid to satisfy my more rationalist design tendencies. To draw attention to the image content, I used lots of white in the layout and typeset everything very sparsely in Helvetica.

One of my primary aims was to retain the depth of content that we have built up over the years. The most disappointing weakness I find with so many design company websites is that they rarely feature any work that is more than a few years old. It is as if every time that they redesign their sites, they abandon all of their existing content. There are design companies that have been operating in Dublin for twenty years who only include five or six projects on their websites. I wanted our new site to not only accommodate all of the relevant content we had going back to 1999, but more importantly to make that content easy to discover. No matter how good your design work is, if people are unaware of it then it may as well not have been produced.

After operating our previous CMS-powered site since 2003, we have all gotten pretty adept at writing 150-200 word posts to explain each branding project, but our existing site was limited to displaying our work in images at only 198x198 pixels in size. What had once been appropriate in the days of smaller monitors and pre-broadband download speeds was now looking pretty out of date. As a brand consultancy, it is important that we are able to showcase the visual aspects of our work in a far more engaging manner. My new layout features full-width images in the primary content panel and now allows for multiple images per news post.

I have established a three-stream labelling system that classifies all of our projects by the nature of the work, by client name and by client sector. So we now have a comprehensive network of cross-links between all of our content. These three choices are based on feedback we sought from existing clients. It has been a recurring theme in such client feedback and research over the years that our clients are most interested in solutions we have achieved for clients in their own particular sector who face similar challenges – and dramatically less interested in solutions delivered for clients operating in different sectors and industries. This new labelling scheme will help potential clients to discover the work that is most relevant to their own interests and needs. Greater awareness of relevant projects should lead to a greater understanding of the strengths of our offer and ultimately to increased sales.

Time For A New Template

Thoughtport is about as low-tech as a blog can be these days. I am using one of the default Blogger CSS templates. I compose most of my posts by hand on my Palm PDA and I have to manually edit the code of all the outbound tag links. Ouch! Did anybody say labour intensive?

The benefit of this set-up is low maintainance: write it; post it; forget it. However, the designer in me (or more realistically the incessant tinkerer in me) keeps nagging at me to take the plunge with some grown-up blogging software and create a bespoke structure and layout for Thoughtport. Now the very thought of the time commitment involved in learning how to hack WordPress to some level of competence is usually enough to send me back into the comfort zone of Blogspot. But every now and then do I see a site that makes me say “if only...”

I was looking at Ben Hammersley’s blog yesterday. His primary blog posting page looks great. It incorporates the better aspects of web 2.0 design tropes: using large, legible, 37-Signally, sans-serif post headings and the like. But there is more. If you click on the photos you see each post presented with its text superimposed over its photograph. Nice. He is appropriating the editorial design conventions of magazines to create a very unique blog design here. Admittedly, this structure implies short post lengths, but that is the metier he has chosen to write in, and his photographs tell half the story anyhow.

My Bloglines feed-reader cannot currently present those posts in that visually rich format. Does anyone know a feed-reader which can? Or maybe I should just migrate from Firefox to Opera 9?

Delicious Tags: Hammersley | Blog design
Technorati Tags: Hammersley | Blog design

Elemental Particles of the Web

Time was when the fundamental unit of the online experience was the web-site, then it was the web-page, and the ‘post‘ is now angling to become our dominant paradigm. Well it looks like things may be being granulated to an even finer scale again. I have been reading up on microformats, which is one of those ‘so-simple-its-obvious’ kind of ideas. (Onwards towards the semantic web and all of that.) I know that my Web-Fu is not up to the task of hacking together any complex microformat implementations into this blog. But I imagine that I may not have to wait too long for these to become an integrated feature of the major blogging engines. I could see myself using hCards and hCalendar from today.

I might see about embedding an hCard into my contact page on my work site. I will put one up here too. But, in the true spirit of cart-before-horse I have gone ahead and designed the icon first.

Technorati Tags: microformats

My Corporate Web-Fu (BFK Site Redesign 2005)

My redesign of the BFK home page and news page has now gone live, as they say in web parlance. I made no major stylistic alterations, but directed a change of emphasis on what we are presenting to our readers.

I finally got to retire the ghostly-looking ‘BFK face’ image, which has been a prominent visual element in all of the company’s marketing communications since I joined in 1999. I replaced that static image on our home page with a randomly-served image from a selection of our recent work. My reasoning was that potential clients reading the site get more benefit from seeing some or any of our creative work on the home page, rather than having to drill down into the site to find it. Similarly, I downplayed the two statements of intent within the layout. No doubt they are important for positioning purposes, but they needed to move down the page hierarchy. So, if you have the time, and the thought of refreshing the home page thirty times is your kind of thing, then you can go and review our currently highlighted work. Knock yourself out.

My primary design improvement was to reduce the number of dynamic case study link panels to one and add two dynamic panels linking to our most recent news articles. This was done for a few practical reasons. Carving out the time to write longer case studies has proved problematic within the normal pressures of a busy design studio. So linking to our case study archive meant that our home page was remaining static for too long (we were only writing one or two of those a year). However, we were generating a healthy amount of concise news stories; at the rate of one a week or so. Therefore linking to those now means our home page should vary a lot more often and present our readers with more timely content.

The changes in the News section were mostly housekeeping. The ever-lengthening news archive list has been trimmed and now groups all articles by year. The thumbnail images are now larger, as the previous postage-stamp-sized versions did not display packaging or literature design work all that well.

Morgan in Strata3 did all of the heavy-lifting and coding in the back-office for me. At present my corporate web-fu does not stretch much beyond hand-coding tags into Blogger posts and moblogging camera phone images directly into my Flickr site.

As I do not generally get to do much web design interface thinking, this was an interesting exercise. I suppose that the official BFK Blog will just have to wait for the next iteration.