Case study: Derby Museums

Redesigned website for Derby Museums, a Museum Trust with three different locations within the city

The client

Derby Museums is an independent charity organisation consisting of three museums in locations across Derby city centre.

The Challenge

The existing website was a template website that was no longer working for them. They wanted more control of their content and needed a refreshed look that better reflected their brand.

The navigation of the existing website was difficult to use both from a usability and accessibility perspective and visitors were struggling to find the information they needed.

My approach

Open and inclusive design

For this project we agreed with our client before any work was undertaken to document the process online. Our client was very open to this, having publicly shared other museum projects and it meant that both museum staff and visitors who were interested in the process could follow along with the project.

Screenshot of Tumblr page
All outcomes from research to design were documented on a Tumblr blog.

Research sessions

User research
The project began by conducting user research sessions with both visitors to a museum event (who were not always regular visitors). By speaking to visitors I gained vital information of what their needs and objectives were when using the website.

My team conduced research at a museum event that was aimed at general members of the public, rather than museum patrons. Interestingly when speaking to visitors, we received more honest feedback than museum staff conducting similar research. When people were asked if they visited the museum sites often, there were many cases of awkward ‘not as much I should’ responses. When asked the same question by museum staff, responses were much more positive.

We created various activities to better understand our audience. We had a simple survey for adults to tell us what the most important information they wanted on the website would be. I then made this information into graphic to share with the stakeholders. We also created child-friendly activities, including a drawing sheet so that younger children could tell us what they wanted to do at the museum sites.

User research day

Staff research
The staff session was really helpful in getting suggestions on what they would like to see on the website but, more importantly, gave insight into areas of the museum visiting experience that visitors didn’t like. This helped us to create content that addressed issues early on to make the visiting experience as positive as possible.

We conducted the research at one of the museum sites to make it as easy as possible for staff members to talk to us. We created an ideas/content generation wall where we recorded observations and ideas that staff had about the current website and visitor behaviour.

Once research had been done, we organised these ideas by category in a session with our stakeholders. The best ideas were then taken and included in the content plan.

Interviewing a member of staff

Wireframing and prototyping

Paper prototype
For this project I used paper prototyping rather than InVision. The reason for this was that our clients were very hands-on and wanted to be involved with the process. An advantage of working with paper prototypes is that our stakeholders felt that they could make changes to the layout as we could draw directly onto the design. Another advantage was that because they are hand-drawn, there are no styles so the focus was completely on the layout and functionality.

Photo of paper prototypes

I’ve explained the process more throughly in Paper Prototypes: What are they and why use them?

Having agreed the wireframe prototype with our stakeholders, I photographed them and, with the frontend developer created an annotated functional spec.

HTML prototype
Once the paper prototypes had been approved, we produced a simple html prototype so we and our clients could test the functionality and send it out internally for testing.

We collated the feedback and went through it with our stakeholders to identify the most pressing and important pieces of feedback to reiterate and retest.

UI design

Style tile
At the same time as coding the html prototype, I worked on the visual style for the website by producing a style tile. This showed design choices such as colour, text styles, button styles, image treatment etc.

Accessible UI
In order for the website to be as accessible as possible, I created a second darker style which has higher contrast. This makes text easier to read for people with certain types of visual impairments.

I also needed to adjust some of the brand colours to ensure colour contrast and readability of text over colours. I created tints and shades of the core brand colours so that dark or light text always passed WCAG guidelines.

High-contrast UI version

Responsive UI
Each module of the website was designed to look great on any size screen. I designed elements across several break points and these were accessible on the html prototype.

Modular UI design
The box at the top right indicates the screen size of the browser through the yellow highlight.

Design details

Opening times tab
From research with museum visitors, we had found that they found the opening times of the different locations difficult to find on the existing website. Also each museum site has its own set of opening times so visitors were not always sure when the museums were open.

Knowing that this was information that came out as the most important to users, I designed an opening times tab which sits at the top of the website (and perpetual footer link on mobile) so users always have quick access to the opening times.

The opening times tab appears in the header for easy access

Find the door
From research with museum staff, we discovered that the Visitor Services Assistants had received in-person complaints from visitors who had struggled to find the entrance to the museums (this had happened across all three sites). Having acquired this information, when we were planning content with the clients we came up with a “find the door” section of the visitor information page for each location. The more helpful information we can provide on the website, the better the visiting experience should be.

Screengrab of the find the door section

Easter eggs
We were tasked with adding Easter Eggs into the website to take it away from the corporate template and make it a fun experience to use. One of the Easter Eggs appears when a user clicks on the bug photo on the Nature Gallery page, little spiders and fly wander across their screen. After user testing this, we added a warning that users had to opt-in to so we didn’t accidentally terrify any Arachnophobic users!

Easter egg where the user clicks on the image and spiders walk across the screen

Outcomes

The existing website wasn’t encouraging visitors to donate to the museum. By introducing a supporter story page with information on how donations were spent, donations were up 133% within the first three months of launch.

Additional results included a reduced bounce rate, down 24.78%; page load time, down 67.66%; pages per session, up 38.43%; and, by adding an additional email sign-up form on the What’s on section, email sign-ups were up 3350%.

Voyage of discovery (sessions)

Storymap from discovery session

The big question for any website or digital product is ‘does it work for our users in order to drive and deliver our business needs and goals?’ It’s the users who turn into customers so making sure that your digital product is user-focused should be a big priority. Where should we start? How do we connect business and user needs?

This is where I raise my hand and tell you about design discovery. But before I tell you about that, let’s rewind the clock to my earlier days of web design. [Cue Wayne’s World style flashback]. Back then, maybe seven or eight years ago) many designers, myself included, were so keen to get started with projects that we’d go through the motions of a kick-off meeting where we’d get our client’s requirements and goals and then sprint off towards a solution. We had technical requirements, a chosen CMS, SMART goals and brand assets. Good to go right? We cracked on with sketches, visuals and dev and made the website that our clients wanted. The only problem though, was it the website they needed?

The advent of UX

At some point, between then and now, the industry (and I) started recognising that designing websites for businesses’ requirements didn’t mean that they actually worked. User Experience, although it’s been around for decades, started coming to the forefront of web designers’ minds. The priority was no longer designing what our clients wanted but what our users wanted too. That’s not to say that we weren’t designing for target audiences, of course we were. But we were designing for what our clients thought they were or wanted them to be; not necessarily who they actually were.

With this sea change came a new understanding for many designers. A new perspective of identifying user needs through research, empathy, perspective taking and a desire to please our users and our clients. Suddenly our kick-off meetings were too business focused and not user focused enough. We needed to adapt our projects to being user-focused. We needed to champion the users, but before we could do that, we needed to understand them.

User research is the first and obvious way to do this and is insanely valuable. But is it the first step? Can we truly identify users without an intimate understanding of our client’s business? Can we design the best solution for our clients and their users without knowing what our clients are trying to achieve? If the value proposition is hazy, then is understanding the users hazy too?

Design discovery

There is no design with discovery”
– Dan Brown, Practical Design Discovery

My role now now is to clear the haze before projects commence. I do this through discovery. There’s no one way to do this and the tools I use vary depending on my clients and their situations. This article highlights a typical framework I use to get my clients thinking about their business and how they communicate their value proposition to their users.

Invariably web projects require a mixture of stakeholders, all with slightly different objectives. We might have marketing, sales, CEOs, operations, customer services and IT stakeholders, to name a few. And they all see their own business through different lenses. When the business stakeholders aren’t in alignment, how can they possibly communicate clearly to their users?

Storymapping

While there are many ways of accessing stakeholder information, one of the tools I’ve found most effective is ‘Storymapping.’ This was coined by Donna Lichaw in her book The User’s Journey: Storymapping Products That People Love. I highly recommend it. As with some of the best UX tools out there, it’s super simple but very effective. UX designers are naturally empathetic and predisposed to aligning themselves with users’ emotions and needs but this doesn’t come easily to everyone. More importantly than empathy, perhaps, is the ability to shift mental perspectives. Perspective taking, ‘the active cognitive process of imagining the world from another’s vantage point’, encourages stakeholders to think from their users’ perspective. Helping them understand how their service supports users’ pain points.

Storytelling is not new in design and development. A core component of Agile development is User Stories. These encourage developers to think about functionality from the user’s perspective. Storytelling evokes a strong neurological response in people. By framing a discovery activity around it, the needs of the user go from facts and stats to emotional connections with the intended audience.

What is it?

Storymapping takes place as a short session in which we create stories for our user personas, mapping out how and why they are interacting with our stakeholders’ website.

As with all stories, there’s a beginning, middle and end. We use the idea of simple narrative to drive this forward. As with any good story, we need a protagonist and exposition. Who are they? What’s their current state? Once we’ve set the scene, we need an inciting incident, a problem or pain point they need to overcome; a trigger on why they might need the stakeholders’ service.

Then in the middle, the action happens, how will they approach solving their problem? What assistance do they need? How does the service assist them? Who is the villain? What are the obstacles and barriers standing in their way? What’s the climax of the story? How do they overcome their problem and defeat the villain? What’s the value proposition of the service that makes them say ‘yes, this is exactly what I was looking for?’

But we don’t leave it at that ‘aha’ moment. It’s one thing to get our protagonist to the climax of their narrative, but the story doesn’t end there. How do they return home a hero? How does our user, our potential customer go from interested, to invested, to ambassador? What’s the ending? How do we know their goals have been met?

What are the outcomes?

You’ll notice that this entire session is based around question asking. It’s about framing the problem, not bypassing straight to the solution. When I first started introducing this session, I was worried that my participants wouldn’t get it. Would they think it was silly? Would they think it was unnecessary?

Thankfully, that’s not the case. Feedback has been overwhelmingly positive. Of all the perspective taking exercises I’ve facilitated, this has had the most engagement from participants. It’s not an easy exercise. It makes people think, it makes them ask difficult questions of themselves, it highlights internal lack of alignment and understanding. It reveals holes or distractions that stop users achieving their goals.

This could feel negative, but it’s not. As an exercise, revealing these issues means that we can fix them and ultimately improve not only the new website or product, but set in place improvements to the stakeholders’ business and service. It also highlights the positive. The result of one session with a client introduced a much clearer value proposition and benefits to potential customers; many of which were not communicated on their existing website. This allowed us to write much more value-led copy for their new site.

Shared understanding leads to better communication

There’s a wealth of information that each stakeholder holds and storymapping gets it out of their head and onto the wall. It helps stakeholders declare their assumptions to minimise assumed knowledge. It gets everyone on the same page. It also allows me as a facilitator to ask the difficult questions, the ones that internal teams sometimes avoid due to hierarchy. It’s essential that everyone feels an equal in these sessions.

There aren’t always opportunities, or the structure, in everyday life for people within an organisation to talk to each other about their customers. Having an interdisciplinary group of people in a session allows stakeholders to share stories of their customers and ask each other questions. Oftentimes we have a mixture of people from big picture, visionary, thinkers to those who are front-line and customer facing. Having these people bring their own experience of their audience and business together enables us to better understand the intents of the interactions between customer and company; user and website.

Front-line staff are often the best source of information for capturing and understanding user needs. They are the ones who field complaints, offer support and hear objections to their product or service. Customer service and sales representatives often know more about their customers than those in leadership positions. Having these people in storymapping sessions is vital. There’s much to learn from them and they often offer information about pain-points that’s unknown to leadership roles.

The representation of customers enables us to put the users’ pain-points at the heart of the session and identify what the business does to address those. Storymapping, at the highest level, outlines how customers think about the website and therefore the service offering. Along with the benefits of shared understanding, it forms the basis of design improvements. If the content of the website doesn’t clearly state the value proposition, we can rewrite it. If the next steps for the user are not clear, we can rework the user journey. If the product or service doesn’t address pain-points, we can help clients create a roadmap of improvements to their offering.

Storymapping is one of the first steps I take in discovery. But it’s only the beginning. It’s the exercise that gets everyone in alignment before diving into other discovery sessions such as ‘How might we’, goal setting, content idea generation, user journey flows, and into Information Architecture planning and wireframing. It sets the stage and stops us skipping to the solve. It’s one of many tools, but one that I’ll be using time-again.

My user experience design journey; a reflection

Helen speaking at Tech Nottingham

At this time of year, it’s often a good opportunity to look back on the past and see where we’ve come from before looking to the future. My first full immersion into UX was NUX3, (Northern UX conference) in 2014, an all-day event focussed on how an understanding of people can help you define, design and build better experiences.

I had just quit a full-time graphic and web design job to start a web design company with my husband and I was in the early stages of starting to call myself a UX designer.

For those that aren’t familiar with the term ‘user experience’ or ‘UX’, it is the process of enhancing the user satisfaction on a website/app/product by improving the usability, accessibility and pleasure in providing interaction with the product.

Sat pondering at the conference, I started off feeling positive about the talks, but as the day progressed, I realised that I was completely out of my depth. By the end of the day, and upon reflecting on the experience, I felt deflated.

I chastised myself for thinking I was a UX designer. I’d just had business cards produced with UX designer as my job title and I wanted to throw them away and revert back to visual designer, where I belonged.

I was just me

That’s not to say that there was anything wrong with the conference itself, it was well-rounded with great speakers. But at the time, at least from my perspective, it seemed that UX was a team sport.

The speakers were from DWP, Salesforce, and dedicated UX consultancy companies, who were talking about the work they were doing with large organisations. I was just me. How was I going to be able to convince our much more modest clients that they needed to invest in UX?

Who was I going to learn from if I was the only designer? What was I going to do to get from this place to some form of, yet to be defined, success?

UX became more prevalent

This year the story is a little different. Recently I attended NUX6 and had a completely different experience. Rather than feeling out of my depth, I felt that the talks validated my own thoughts, my plans and my learnings. Rather than confidence-breaking, it was confidence-boosting.

So what’s changed? How have I changed over the last three years? Or is it the industry that has changed? Was I mistaken three years ago that UX was just for the big leagues?

We could certainly argue that UX year-on-year has become more prevalent, more requested by businesses. “We need some UX” is now on many businesses’ minds, even if they’re not completely sure what this “UX” thing is.

Organisations such as Government Digital Service (GDS) who led the way on transforming Gov.uk, plus design teams at Co-op Digital and BBC.co.uk, to name only a few, brought the concept of UX to the forefront of digital design. Their focus on UX has probably drip-fed through to the smaller businesses and companies, generating interest like never before.

The early days

So in 2014, I had a problem: how was I going to convince my clients that they needed UX and they needed me to deliver it? Looking back there’s not a single point in time that I can identify as ‘now I’m a UX designer’, it’s been a more organic process than that (and that imposter syndrome still creeps in every now and again).

Each project we took on in my own business got a little bigger and allowed a little more budget to do more until we got to the point where we could do user research, detailed IA and user testing.

Despite working on bigger and better projects, I was always conscious that I was the only designer in our two-person team. Was I even doing things right? As designers, we need peers. We need other designers working in different situations, with different clients, stakeholders, and in different environments to learn from and share knowledge with. When I started our company, I didn’t have those peers and it was hard going.

Getting ‘out there’

In 2015, I submitted a talk on inclusive web design to the Port80 conference. Buoyed by a successful project where we’d learned a lot and created some new ways of working for us, I felt the need to share it. To my utter surprise, it was accepted. This was a turning point in ‘becoming an expert’. Maybe I knew what I was doing after all. Or at least convincing in my application. Probably a bit of both.

Being accepted as a conference speaker opened more doors than I had ever anticipated. I was asked to speak at DxN, then, a fairly new design event in Nottingham where I was speaking the same night as Andy Clarke, who is a very well-known web designer, speaker and author (no pressure!). Since that first invitation, I’ve been back twice (they’re probably getting sick of me now) to deliver other talks, one on delightful design and the other a follow-on talk on inclusivity. I was also approached by leading web design magazine Net to publish an article based on the Port80 talk.

Earlier this year I was delighted to be listed on the top 343 female tech speakers in the UK. It was a surprise and a privilege to be listed with fantastic female speakers across the industry, some of whom I’ve seen speak at other events. Last August I was invited to an event in London to meet the other women on the list and promote women in tech; which, as an organiser of Women in Tech Nottingham, is a subject close to my heart.

Speaking in the here and now

Over the past year I’ve presented a few different talks at a range of events from conference; to meet ups; to, most-recently, guest speaking to the designers at the Co-op digital headquarters.

I still get nervous. It’s a big thing to put yourself in front of people and talk. So why do I do it? It comes back to peers. I want to share what I learn and I want to learn what other people know. As the only UX designer, I need access to that knowledge. This has lead to me being a regular event attendee. I go to design events, tech events and co-organise Women in Tech.

Sometimes I hear talks so far away from my day-to-day role, or so technical,  that I don’t really understand them, but I want to be exposed to new ideas, even if they go above my head. Through events, I’ve also built up an amazing community of UX designers. We share what we’re working on and provide each other with encouragement and support. We push each other to be better designers. I wouldn’t be where I am today without those peers and friends.

The power of going it alone

The biggest change that I can attribute to being the person I am today, was going it alone. Running our own business allowed me the freedom to choose what to learn and how I was going to work. After two and a half years, we wound the business down and I decided to move into a consultancy role where I was contracted to design a new product. For the first time, it was just me. I had to make my own decisions and be confident in leading the project.

Over the last few years, reading and learning had been an important part of my development, but now, it was essential. I had to know what I was doing. This was daunting but also liberating. I was the hired expert to deliver in whatever way worked best for the team, the stakeholders and the product.

Changes at Katapult

After a few months of consultancy, I joined Katapult as their UX lead. This was a switch away from product design and back to client-facing work. This was a big decision as internal product design and client-facing design are two very different ways of working, The principles are interchangeable, the processes can be the same. But whereas product design involves working with an internal team focussing on building and iterating a product; client design work is about quickly understanding client and user needs, not knowing at the outset what the best digital product for them will be.

As such, at Katapult, we begin any large-scale project with a discovery phase. This usually involves a one-day session including a variety of workshops to enable our team to understand our clients and their users’ needs. But also to help our clients clarify the project and business goals, their users’ goals and to ensure that the different stakeholders are in agreement of the scope of the project before it goes into production.

I recently changed role from leading the interaction design team to moving back into a consultancy role. This is to allow me to focus on the initial discovery aspect, facilitating workshops to ensure we’re designing the solution to the right problem. As a client-facing designer, I have to be able to talk to clients in a way that they trust my expertise and that of our team.

Speaking has helped build confidence, but it was running my own business that has made the biggest difference. I can speak to my clients as peers. I understand their business needs as I understood my own. Empathy and perspective taking are key components to being a UX designer. There are many analogies that can describe UX design, but for me, I think of myself as the bridge. I connect our clients’ goals to their users’ goals. I advocate the users, but I understand and support our clients’ needs too.

We never stop learning

I can’t overemphasise the importance of trust in digital design. Users need to trust that the business or service isn’t misleading them, clients need to trust that the designer understands their business, their customers and what they’re trying to achieve, and the designer has to trust themselves to deliver something that’s going to meet those expectations.

As designers, we never stop learning and wanting to improve ourselves. There’s many areas of UX that I don’t have an intimate understanding of and wouldn’t call myself an expert in, so that’s where I’m heading. I’ve come a long way over the past three years, but there’s still a long road ahead. The future is always unknown and there’s always more to learn.

First published at katapult.co.uk

How understanding user goals helps design better websites

In retail the saying goes, “the customer is always right”. Whether or not this is always the case, this sentiment often makes its way over to web design. If we treat our clients as customers, are they also “always right”? Possibly. But when web designers treat their client as the customer, they’re in danger of overlooking the end user.

To design truly effective website for clients, the designer must design for the client’s audience and that means understanding the audience’s needs. Often web projects begin with a brief from the client that covers the client’s goals for the website. This is obviously important as the website must support the business goals but it shouldn’t make up the whole brief and direction of the project. Finding out the audience’s needs should take equal prominence as they are the ones who will ultimately choose whether to buy that item, sign up to that service or go to that event. Oh and here’s the thing: often client goals and audience goals are poles apart.

So how can a web designer create a website that works for both the client and their audience? An important stage of the web design process is research. When web designers design websites based only on their client’s brief without conducting their own research, they only understand part of the story. Maybe the client is profit-focussed and the audience is information-focussed. The client expects that the audience will find value with them and spend money, but they haven’t given compelling reasons to the audience to do this. By designing websites based exclusively on the client’s goals, the website has not been designed to meet audience needs, so is likely to be less effective.

So how should a web team go about conducting their own research? In a large agency, this would be done by a UX (User Experience) specialist or a team of UX designers. But small teams or individuals should also being doing this, it might just be done more simply. Sometimes it seems that UX is a luxury that only large agencies can afford, smaller companies can be scared of doing UX if they don’t have a dedicated designer. But there are a number of easy things that any web designer can do to make sure they understand their client’s audience.

Talk to people

To begin to understand the client’s audience, all it really takes is investing time to get to know them. Speaking directly to your client’s audience is the best thing that you can do and there are a number of things you can do get gather information. If your client has a physical location then go there and speak to their customers or visitors. A huge advantage of this, I’ve found, is that the audience is more likely to be honest with you, as a third party, than with your client. I found this whilst researching at a client’s event, the answers I received about the organisation were different to those asked by employees of the organisation. Another advantage is that most of the time, people are pleased to be asked for their opinions, it shows that you and your client care. This makes people feel more involved and less likely to dislike the redesigned website just because it is different.

If your client is only online, there are still ways to get feedback from their audience. Ask your client to send out a survey, speak to their audience on the phone, or ask their audience what they want from the new website over social media.

In additional to speaking to your client’s audience, another group of people to talk to is frontline staff. This might be a sales team, call centre staff, receptionist, visitor services assistants or staff that deal directly with your audience in another way. These people have a deep understanding of your client’s audience. They speak to them directly, field their complaints, hear about successes, failures and everything in between.

For a project I worked on for a local museum, I spent time at the museum speaking to staff. A visitor services member of staff told me that sometimes visitors struggled to find the entrance to the museum, this had happened on multiple occasions. Not being able to find the door didn’t give the visitors an initial positive experience and they complained to the member of staff. After hearing this, a really easy solution was to add a ‘find the door’ section to the visitor information on the site. It included a photo of the entrance and a brief description of how to access the building. Now, it might not seem to be the responsibility of the web designer to address problems like these within the client’s organisation, but improving a visitor’s experience by providing more helpful information on the website means that the visitor has a better experience overall. As a side note, I was in an art gallery a few days after we thought about ‘find the door’ and overheard a visitor complaining that they couldn’t find the entrance. Through audience research, you may uncover something simple, but it could be a common problem that no-one else has noticed yet.

Questions to ask

So now you know who to talk to, what do you ask them? The main outcome you are looking for is finding out what the audience wants to do on the client’s website, the user goals. You can ask open, but not leading, questions such as “What’s the most important thing you want to do when going on the website?” or “What’s the main reason for using the website?” You can also create a survey where you list key pages on the website and ask people to number the pages in order of the most important to them. Ask questions to narrow down the user goals into 2–4 main goals. If a common answer to “What’s the main reason for using the website?” is “To find out when events are on near me” then this would become a main user goal for the website.

In addition to finding out what the user goals are, it is also important to find out problems that the audience has with using the existing website or with the organisation itself. Addressing these problems before the planning and content stages take place means that they can be addressed in the website redesign to help the audience have better user experiences with the new website.

Once the key user goals have been established, they can be mapped to the business goals. We can look at how they work together and if they are very different how we can start to align them. For example if the client’s goal is to get people subscribing to their services, but most users are looking for information before buying, then high pressure sales is not going to be effective for either party. Perhaps instead, the client provides a free trial of the subscription to let their audience try it out. This puts control in the user’s hands and they can choose to subscribe if they find the service useful. In this case both goals are being met and the client is more likely to get the sale.

These are just some simple ways to research your client’s audience, you can do much more detailed research but if you are not primarily a UX designer, then this should be a good start. Further documents can be produced such as user personas and journey maps, I’d recommend doing this, but for a small team having the audience research will be very helpful to the project as it develops.

After the research stage has been done, the design brief should be written by someone in the design team, it should address the client’s initial brief but it’s ok to change the brief (of course you’ll want your client to sign off on your new brief) based on your research. The design brief should include: the client’s business goals; the user goals; the target audience demographic, age, gender, location; look and feel; content requirements; technical requirements; plus anything else relevant to the project.

Having good, solid research means that the design brief that the team works to is based on real user needs and addresses goals for the website from both the client and their audience. Having research can also be really helpful in later stages of the project. When the wireframes are being tested, everyone can keep the user in mind. Does the website layout and structure aid user goals? When the visual design is being discussed, the end user should be central to the consideration. This can make it easier for the client to step into their user’s shoes and see the website from their audience’s perspective and not just their own, meaning that the visual styling is not in just the client’s or designer’s taste. In short, good research can help build more effective websites for your client and their audience and help backup design decisions throughout the process.

It’s time to throw away lorem ipsum

Use proto-content and highlight unfinished content.

Whilst a lot of web designers advocate a content-first approach (myself included), it is not always possible to get content from clients to fit with the project schedule. If the client is providing their own copy rather than hiring a copywriter, then delays in the process can be common. So what can the web design team do to keep the project on schedule and ensure that the design of the site will work with the final content?

I recently heard Robert Mills, Content Strategist at GatherContent, recommend using proto-content in the wireframing/prototyping stage of a project. The simplest form of proto-content would be content from the existing website, especially if you’re working on a redesign. But what happens when new content areas are identified? Until recently, I would prototype a website using existing content and then use lorem ipsum for new sections. Admittedly, this has caused confusion with users at the prototype testing stage where they have been puzzled as to why “the page is in Italian”.

Obviously lorem wasn’t helping this person understand the message of the webpage and also distracted them from the feedback that we were looking for on the functionality of the design. (One could also argue that the prototype was not fully functional because it didn’t have relevant content, and I feel bad about that now.) Having better understood the case for proto-content, I will no longer be using lorem ipsum.

So what should the designer do to replace the customary lorem ipsum? This is where Robert suggests the designer should be writing their own proto-content. Having identified gaps in content within a redesign, the designer could write a basic version of the new section copy. It doesn’t need to be perfect as it will be replaced by finalised copy at a later date but it means that we can user test the prototype with content that actually makes sense to the user.

Another advantage of working with proto-content is that the visual design takes realistic content into account. There is a GatherContent post about this by Liam King, Designing content-first for a better UX where he demonstrates that when the designer designs with lorem, they make everything fit as they want it to. Once the design is developed and the content added, things move and don’t line up, text no longer fits neatly into allocated spaces, and content is then either cut to fit the design, or the design needs to be edited to work with the content. If the designer has only been brought into the first part of the process, they don’t necessarily have the control to make changes to the design at this stage so visual changes are made by others whose skills lie in different areas. This is not a great way of working, so proto-content solves this problem.

After we’ve told lorem to sling its hook (by replacing it with proto-content) user testing, wireframing and visual stages won’t be delayed by missing content. But how do we identify whether the content included in a prototype is final text or placeholder (i.e. proto) content? We should have a content plan document where this can tracked, but I think there is a case for making it obvious in a visual way on the development site too. Not only to ensure that the website doesn’t go live with placeholder text but also to highlight content areas that are incomplete. Before I designed for web, I worked in print and we had a little trick we did to highlight placeholder text so it wouldn’t accidentally get printed: make it magenta. If there was any magenta text, the copy was not final and the design wouldn’t get printed.

This is an easy idea to translate to website design. Where there is placeholder copy, I use a css style, applied by a WordPress shortcode, to highlight it as such. To further develop this, I’ve also applied the same theory to highlight images as placeholders. There are many ways this could be done but perhaps the simplest is to reduce the opacity of the image and add a border to highlight that it is not finalised. Highlighting proto-content and images gives a quick visual representation of which content areas on the website are finalised and which are outstanding.

Highlighting proto-content on the development website

To make sure that all of the content gets replaced before the site goes live, I’ve also added a warning that the page contains placeholder content at the top of the screen so it is obvious to anyone viewing the development site that there is outstanding content, as this could easily be missed if it is below the fold.

A warning at the top of the page indicates that there is proto-content on the page

I’m now a convert to proto-content and will no longer be using lorem ipsum but I think that styling the placeholders in the developing website is also important to give clients (and the web team) an instant glimpse on what is final and what they need to focus on.

A better way to vote?

Could design come to the aid of democracy?

As a member of the design and tech community, last Friday was a dark day indeed. As someone whose career has always been within the creative industries, I worry that the tear away from Europe will have devastating effects on arts and culture. The UK seems to have little regard for the creative industries despite the fact that last year they contributed £71.7bn in gross value added (GVA) to the UK economy, and export over £10bn to Europe (I guess that won’t be happening any more).

In the first few days after Brexit, we’ve seen promises backtracked on immigration and NHS pledges, the demise of the UK economy with figures worse than 2008, blatant and completely unacceptable racism and the rise of #Bregret.

Now, all of these things are upsetting, but it’s ‘Bregret’ that depresses/angers me the most. Some people believed the lies of the Brexit campaign saying they felt “conned” and “robbed of their votes”. One guy “didn’t think (his) vote was going to matter too much because (he) thought we were just going to remain.” And then I found a comment from ‘JE’ on the Daily Mail (urgh) comments saying “People dont (sic) HAVE to know why they voted: they still have a right to vote.” Really!?!

Whichever side they’re supporting, people must know WHY they are voting. Democracy isn’t about making a 50/50 choice without understanding the facts. If you don’t know why you are voting, why should your vote carry the weight as those who are well informed and have reasons behind their vote?

There’s nothing I can do to change the results of this referendum, but as I designer, I can share my idea of a better voting system. It’s 2016, I think we’re ready for electronic voting (which would avoid the whole pencil conspiracy). There seems to be a very real sense that some people didn’t actually know what they were voting for. I think it’s acceptable to ask people to demonstrate they understand what their vote is for. After all you can’t take a driving test without knowing the theory so why can you make a decision that has thrown Europe into turmoil without having some comprehension of what the issue is? Here’s my idea:

If the answer given is anything other than the description of the vote (which is on the polling cards!) then their vote would carry less weight than if they answer correctly. (Disclaimer: I’m not a political scientist so would suggest the above as a starting point on which to test and iterate.) Now obviously there is no way of knowing whether this would have impacted the final count but it might mean that JE from London who doesn’t know why he’s voting wouldn’t be representing the population of voters who did their research and made informed, sometimes difficult, decisions on the future of our country in Europe.

Here’s a little video of my suggested voting interface:

The benefits and barriers of eHealth

The benefits and barriers of eHealth

I’ve just finished weeks one and two of my first MOOC (Massive Online Open Course) on eHealth. I’ve designed websites for healthcare organisations including POSNOC, a website for a international breast cancer clinical trial, as well as Derby Hospitals Charity and Derby Private Health. In the days before I was a web designer, I also worked on print projects for NHS trusts and Bupa.

Despite having some experience of designing for health, I wanted to learn more. After all, the traditional method of design is for the designer to be briefed by the person commissioning the project. Without additional knowledge, the designer is often guided by a single person or a team of experts but they don’t necessarily have access to other expertise. User testing brings us closer to designing effective websites for both the organisation and user but what about industries or sectors where professional opinions differ? How do we know that the commissioners of our project have the right objectives to brief us with in the first place?

This is why I am learning about designing for health, not based on the opinions of a client, but those of people across the healthcare sector, and across the world. To be honest, I’ve felt a little out of place in parts of the course so far. When asked how I might design something to aid depression, I don’t have the expertise or training to know, but in this case I have been able to observe how hundreds of other healthcare professionals would solve the problem. Just reading though the comments and discussions has been really interesting.

Even though there are hundreds of comments and opinions, there is an emerging theme to the answers. People on the course are psychiatrists, pharmacists, biomedical engineers, nurses and many more types of healthcare professionals, and while there is a general consensus to the solution, there are all these little insights that come from individual experience. In addition to the healthcare professionals, there are software developers, IT professionals and UX designers making sure that concerns such as security, usability, accessibility and user experience are also addressed. If I were to get nothing else out of this course, just immersing myself into a topic that so many people are passionate about being involved in and improving has been refreshing.

As a way of learning, I am very taken with this MOOC. It’s much more immersive than reading articles or watching documentaries (although I enjoy both of these too). The course is structured for people to post their comments and engage with each other so I’ve been exposed to a lot of opinions and it’s been very eye-opening. The course I am taking is eHealth: Combining Psychology, Technology and Health at Future Learn.

So what is eHealth?

Generally speaking, the term eHealth refers to delivery of health services and information through technology. This could be a website, app, or even discussions between patients and doctors over Skype or IM. The course breaks eHealth into three domains: self-care and prevention; supportive Care; and societal health. Self care is patient-led, for example a person using an app to quit smoking or a person using a website to find health-related information.

Supportive care is where healthcare professionals are more involved, ideally working with patients. An example of supportive care might be an app for a diabetic patient to share data with their nurse so in their appointments, the nurse has the information beforehand and the appointment can focus on discussing the patient’s concerns or questions rather than gathering data.

Societal care is more about the big picture. For example, educating people about the spread of disease and infection across the world though educational or gaming applications.

What are the benefits of eHealth?

The course outlines several benefits including: access to care; equity; patient-centredness; effectiveness; plus more. Immediate benefits of access to care is that patients could get the medical advice they need without making trips to hospital or their GP. For people who struggle to make appointments within normal hours, part of their consultation could take place online. In a similar vein, equity means that patients who live in remote areas could seek consultation online rather than driving to a medical centre over an hour away, or people suffering from certain conditions could discuss their health with other suffers who understand without having to get to a physical support group.

Patient-centredness allows people to take responsibility for their own health. By helping patients learn about their health, and by giving them access to their health records, patients can make more informed decisions. Effectiveness can be improved with eHealth, for example in appointments where nurses have to input patient data, the data could already be being tracked through wearables and inputted automatically. This takes repetitive tasks away and means that appointments can focus on care.

What are the barriers?

To list just a few, barriers include: lack of stakeholder support; cultural, organisational and psychological factors; legal issues; and non-adherence. For eHealth applications to be effective, all stakeholders need to be invested. For example, if an app is designed for a nurse but they are not given training on how to use it and it is thrust upon them, they might not think it relevant and it might not fit into their work routine. Concerns might arise that are of a cultural factor, what if the use of technology means that human contact is taken away from vulnerable and elderly people. E.g. Paro the Robo-Seal. Then of course there are legal issues. What happens if a wrong diagnosis is made through an app? Who is responsible when a wrong decision is made? And then we have non-adherence. Will people engage with the technology? Will they use it obsessively for a few days and then forget about it. Will they use only a small percentage of the application and not use it to it’s full potential. Will they find motivation in using it and keep coming back to it. Will they understand it? Is it too complicated to learn?

In week one, we were asked whether we thought the benefits of eHealth outweighed the barriers. Looking through over 300 comments, the general consensus was that the benefits do, or at least will, outweigh the barriers even if we’re not quite there yet. Several comments suggested that the barriers need resolving before eHealth can become the status quo and that it needs to go hand-in-hand with traditional healthcare and not be seen as a replacement.

I agree that perhaps more time is needed before eHealth becomes fully accepted in society. Web design has been going for over 20 years and is still a relatively young industry and one that many people commissioning it don’t understand. So I think it’s going to take quite some time for eHealth to really establish itself. The education of it will need to be spread equally amongst the creators, designers, implementers and the users.

Instagram rebrand: a step too far?

New Instagram icon (left) and my idea for retaining more of the brand identity (right)

My thoughts on the new Instagram logo

There’s an adage coined by Antoine de Saint-Exupery, a early 20th Century novelist that goes, “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

It’s something that as designers, we are always aware of. The whole design process, when at its most successful, works like this. We come up with ideas and concepts and narrow them down to the most effective design. We then take that design and iterate it, take away the unnecessary elements, the clutter, the noise. When we can’t take any more away, we have a clean design with clear communication at its core.

So I can’t help thinking that Instagram have taken a step too far. There’s certainly nothing left to take away but I think there is something to add. In the Medium post, Ian the head of design at Instagram says,

“The question then became, how far do we go? If you abstract too much, the glyph doesn’t feel tied to the history and soul of Instagram. If you make it too literal, it’s hard to justify changing from what we currently have.”

Whilst I don’t disagree with this statement at all, I feel that they have actually abstracted too much. If I was shown the new logo without knowing it was Instagram, would I recognise it? No, I don’t think I would. To me, it’s lost its Instrgram-ness.

So what could have been added? I think had they just kept the top part of the camera in the logo, it would have tied in much more closely with the existing brand. Ian says they wanted to “Honor Instagram’s identity while reflecting its growth” Have they honoured it though? When Instagram started, I really liked the old-school camera vibe of the icon and the filters. The top contrast of the camera, to me, is what makes Instagram unique. To me, the brand has that feel of retro photography and the new icon loses that. It becomes generic and more like a stock photography camera icon.

Ian also says,

“Brands, logos and products develop deep connections and associations with people, so you don’t just want to change them for the sake of novelty. But the Instagram icon and design was beginning to feel, well… not reflective of the community, and we thought we could make it better.”

Now I might be missing something here, but I’m not sure how this new icon reflects the community. It’s a bold move to take an icon so far away from the original in one move and I wonder if it’s less about being ‘for the community’ and more about internal boredom and wanting a refresh in-house. After all, Ian says “As a part of our process, we also asked people at the company to draw the Instagram icon from memory in 5 seconds. Almost all of them drew the rainbow, lens, and viewfinder.” But I wonder if they tested this outside of Instagram?

Looking through the comments on the Medium post, the new icon is not being met with overt enthusiasm. Now we know that often new brands are met with distain, just look at the new Google branding revealed last September. Personally I liked this redesign as it kept the feeling of the previous logo and tied in more with the rest of its branding. But some people disliked it. To choose one typical tweet: “Not a fan of the new #Google logo — understand why they’ve changed it, and it does look cleaner, but also very childish.”

We’ve seen instances of brands redesigning logos met with such distain that they’ve boomeranged back around. Look at the infamous Gap redesign and Waterstone’s.

Gap’s old (left) and much derided new logo (right)

Waterstone’s old (left) and short lived new logo (right). Both brands are using the originals again.

Both were so far off the mark that they were rather quickly reversed and swept under the rug.

I don’t think that we’re looking at getting the old-school colour camera back in the Instagram icon, and that’s ok. But I’d like to see a hint of it return. My mock-up at the top shows what I think they should have done to keep the essence of the brand. Maybe we’ll see changes, maybe we won’t but it’s a good lesson in how far to take a brand version to version.

Of course, everything I’ve written here is my opinion and there will be always be internal parts of the design process that we’re not privy to. But looking at is as an outsider, these are my thoughts.

Wit on the web

I recently found out that there is an updated second edition of A Smile in the Mind, my art school bible. I had been thinking just the other day about the book, how it influenced several generations of young graphic designers, and how a 20 year old book could relate to today’s digital design and online experiences.

I didn’t attend the type of course that had set reading lists (we were much more informal than that) but I seem to remember that every student on BA Graphic Design in 2002 had a copy. We were taught that for effective graphic communication, wit and humour was key.

On pulling the book off the shelf to inspect it earlier today, mine is well-worn. There’s a rip on the dust jacket where it fell off and tore on the cheap, industrial shelving from my first year room, which really, really annoyed me at the time. There are also some 13 year old page markers from when I had to do a presentation with slides. (Actual glass slides, with a projector and everything! Although I think this was outdated for the early 2000s.) I’d highlighted classic designs including work by Bob Gill and Milton Glaser’s iconic I heart New York campaign.

The synopsis of the book says: “The best graphic design does more than capture attention and make the audience linger. It prolongs the encounter, compelling the reader not only to notice, but to remember. This book is about making graphics memorable by using witty thinking.” Sounds fun doesn’t it?

Creative Bloq recently ran a print design feature of 100 brilliant print ads and these are perfect examples of the type of witty thinking outlined in A Smile in the Mind. In the introduction, there is a long list of the benefits of using wit in design, including: inviting participation; getting people to engage with the design for longer; amusing people; building a brand; and being memorable. This is what I was taught as a graphic design student, and this is still relevant to today’s advertising and print designers. But how can we use it to better effect our online interactions?

In comparison to clever, award-winning ad campaigns, I sometimes feel that online interactions are a little dry in comparison. Why is that? Perhaps it’s because we know that users are trying to accomplish tasks on a website, whether it’s a purchase, signing up to a service or posting something on social media. We want to help our users achieve their goal as efficiently as possible so adding a bit of humour along the way can not only seem frivolous, but actively distracting to our users accomplishing their given task.

But is this really the case? Where do we find engaging and humorous online interactions? Out of all the services I use, MailChimp is one of the few that has embraced the Smile in the Mind way of thinking. MailChimp successfully use fun in their interface, without distracting from the task in hand. Alas, one of my favourite interactions disappeared when they brought in responsive previews. Before this, Freddie Chimpenheimer’s arm hovered over the preview window and if you pulled it really wide, his arm popped out of his socket.

Ouch! Image from http://littlebigdetails.com/post/4983862770/mailchimp-as-you-stretch-the-browser-window-the

Another little interaction that I love are the animations you see when sending an email. I regularly send emails to lists with hundreds of subscribers but that doesn’t stop me freaking out when I have to hit send. Even though the email has been checked multiple times, I worry I may have written something stupid, spelled the company name wrong or generally done something that hundreds of people will see and think I’m a idiot. When you are ready to send your campaign, you get an animation of Freddie’s hand hovering above a red button, after a couple of seconds, it starts sweating and shakes a bit.

Designed by Brent Clouse: https://dribbble.com/shots/1552347-MailChimp-Button

This is a great example of emotional design, MailChimp are empathising with you, they know that sending emails can be a bit scary but make you feel better about it. After you press the big red button and send your email (how much better it this than just a basic web button) you get another animation of Freddie high-fiving you. Awesome.

https://dribbble.com/shots/1548634-MailChimp-High-Five

This fun approach to sending email will ultimately divide opinion, but with over 600 million emails being sent a day, they’re striking the right chord with enough people. A quote from Fast Company says “MailChimp has added a splash of mischief to a product category not known for…well, much of anything.”

I’m not sure if Aarron Walter, former General Manager of New Products at MailChimp ever read a Smile in the Mind, but he certainly subscribes to the ethos. In his book, Designing for Emotion, he asks:

What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed! That would be an experience you’d recommend to a friend; that would be an idea worth spreading.”

Looking at digital design today, there are lots of different principles. We’ve got emotional design, design thinking, Human Centred Design, UX design and more. What they come down to though is great communication, designed for real people, with an outcome of greater engagement and enjoyment. Let’s put a smile in the mind of our customers and users in their online experiences and see if our work could make the third edition.

Update: This blog post was expanded into a talk at DxN (Design Exchange Nottingham). Slides of the talk can be found at Speaker Deck.

Toast (or how to please your customers by making them do more)

A few years ago, on a sunny Winter’s morning, I walked into the breakfast room of a B&B. At first it seemed like any other British countryside establishment, but then I noticed the toasters. Toasters, you ask? Toasters. Every table in the little dining room had its own toaster with a loaf of bread sat next to it. There was a slightly worrying extension lead configuration to host the eight or ten toasters. But after the initial confusion (and a passing thought to health and safety fire hazards) Pete and I started toasting.

Now you might be thinking that this was pretty lousy hospitality. If you’re on holiday and paying for breakfast, shouldn’t someone bring you toast and look after you? Why should you do it yourself? Although on casting furtive glances around the room and seeing other couples happily making their own toast, we shrugged our shoulders and joined in.

There are a few reasons why this highly unusually DIY toast situation was awesome. Firstly, you could butter the toast as soon as it was done and eat it while it was still hot — none of the trying to spread cold butter on cooling toast that’s been sat in the kitchen for minutes before you get it. Secondly, it was bespoke. If you liked your bread lightly toasted and just golden, you could have it. If you prefer a darker bronze, then you could do that too. You could also control the supply, if you were hungry, you could have as many slices as you wanted, without having to ask for more. If you didn’t want much, then there wasn’t wasted food. It seemed the perfect set-up.

I’m not sure if the reasons behind the toasters were to give customers exactly what they wanted, or if it was to free up time in the kitchen by not serving toast every few minutes. The proprietor seemed pretty savvy, so I’d like to think it was both. We thought it seemed like a good idea and it was actually quite fun so we enjoyed our breakfast but eventually forgot all about the unusual toast situation.

The other day, I was staring down the top of our toaster at home waiting for it to pop when I remembered the dining room full of toasters. It got me thinking, the customers were doing the labour that they were paying for, but they were happy. A quick check for the B&B on Trip Advisor shows 22 five star reviews all mentioning the table-top toasters. It seems that the pay-off for putting in a minimal amount of effort resulted in receiving an efficient and tailored service. Where else might we be able to implement this approach?

With the toast situation, only a small part of the process was given to the customers. They still received a full breakfast from the kitchen (and were not expected to do the washing up) but they had control over the extras. So I’m not suggesting that customers are made to do all of the work that they are paying for, but there seems to be an opportunity to let them get involved and take on some actions that result in benefits for the customer and suppliers.

Are there any parts of your online service that you could hand over to your customers? Are there any processes that take up your time that would be easy for your customers to do themselves? What could you achieve with the extra time you’d save? Would your customers actually be happier to do some work themselves if they see a real benefit? Food for thought.

Originally published at www.clarkcx.com on March 6, 2016.