Learn more about user experience, web development and digital marketingView training courses

Our thinking

A few months ago, I spoke at City University London about Wireframing for Responsive Web Design where I proposed that paper could be a useful tool for responsive design. Since then, I haven’t had many chances to try the technique I proposed hands-on, but a suitable opportunity came up recently when we decided to look into making our own Webcredible site more responsive.

I helped facilitate a workshop to start our responsive design project, and I decided to introduce the idea to my colleagues taking part in the workshop, both UX designers and internal stakeholders. As we were adapting an existing site, we already had a baseline for the content we could include so I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Here’s some examples of what came out of that workshop:

Linear layouts of Webcredible pages

What we all really liked about this method was the speed (as we didn’t have to sketch much from scratch) and the flexibility of rearranging pieces of paper before committing to a final solution. The developer in charge of delivering this project also found it helpful to have a visual overview of the intended mobile result based on the existing content. Of course, there’s some limits on how much interactivity you can try to convey through paper, but this didn’t stop us from trying. One of the tricks I really like is this folded piece of paper showing how a long list of tags in our blog might be collapsed into a drop-down menu:

Folded piece of paper signifying a drop-down menu

To see more high-resolution photos (and a sneak peek at our upcoming responsive site), take a look into our responsive design Pinterest board. And let us know what you think in the comments below – would you consider using paper for responsive design?

 

Last week I had the privilege of presenting at Figaro Digital – Design & User Experience Seminar. It was certainly a good event with an interesting debate on whether or not research is worthwhile (you can probably guess which side of the discussion I was on).

My presentation – which you can browse through below – focused on tactical methods you can employ to optimise conversion rates so as to sell more online. The presentation is split into 3 sets of categories, outlining how you can:

  • Help users find products
  • Provide a perfect product page
  • Craft an easy checkout

All the guidelines and recommendations are based on our  research over the years on websites (mobile & desktop) that are selling online. I hope you learn something new and find something useful!

You can also watch the video of me presenting it over at the Figaro website – probably worth doing if you’re interested as there’s not too much text in the deck below.

It has taken months of planning, user testing, thinking like our clients, creative concept building, mood boarding, wireframing, re-thinking the information architecture, graphic designing, copywriting, coding, more project coordinating, photoshop-ing, and towards the end of the final month increased blood pressure and not much sleep – all to align our website with our brand strategy and deliver a better customer experience for you!

Was it worth it?

Yes, definitely. Aligning your digital customer experience with your brand aspirations is imperative for all businesses to succeed.

Top tips for marketing managers to get it right

  • Remember who your customers are – don’t make your site around your internal organisation. If in doubt, get a customer experience agency in (like us) to help you separate your internal perceptions from your real customer needs to deliver on both your business and client requirements
  • Use professionals – your site will be better and quicker but keep your eye on the ball at all times to make sure it all comes together
  • Have a vision, business objectives and strong brand strategy – you will doubt yourself at some point and going back to the purpose, be it the business goals, customer needs or brand vision, it is very useful to keep you on track. Especially when all those internal opinions start bouncing around
  • Planning and lists – have a plan to work to, you will need more time than you t
    hink but it’ll be a good driving force, and have rolling to do lists for you, your designer, and your developer to keep on top of things. (Especially towards the end when it’s all about the finishing touches)
  • Get it live with a fix it list after – it’ll never be perfect so don’t stress about that. Get it live and with the things you know you want to do next in a prioritised list. Then ask for your customers honest feedback on the live site, then put a plan together to get the updates implemented!

What’s next?

It doesn’t stop here. Great branding means having a consistent and appropriate customer experience across all brand touchpoints. We will be updating our brochures, advertising, business cards, etc. and office environment to make sure that you get that Webcredible feeling where ever you interact with us. We will be reviewing and updating all of our other digital platforms too (like mobile website and social platforms). One other thing to remember about this… it all takes a bit of time.

What do you think?

All it leaves me to do now is to ask you all for your feedback! So, what do you think of our new site?

We have a ‘next steps’ to do list for our website so if there is anything that you think we need to do to improve our new website or things you love that you wouldn’t want us to change in the design then please, let us know in the comments below!

Here’s an interesting website design issue that I came across the other day. I wonder how many companies make the error of seemingly putting internal business process and requirements ahead of the needs of their customers when designing interaction points?

I tried using the Aer Lingus website to check in online and print a boarding pass. It sounds simple enough: Provide a booking reference, identify yourself, confirm that the retrieved flight details are correct, check in and print the pass. But the process was presented in such a confusing and alienating way, that it felt more like a puzzle. It is so enraging and amazing to me that, in an era where we are bombarded with promises of exponential improvements in technology, something so simple as checking in to a flight early can be made to feel like unlocking the secrets of the Da Vinci code.

After providing the reference, departing airport and email address, passengers are presented with this page:

It’s not even immediately apparent that there are two alternative calls to action, let alone why there needs to be and what the difference between the two might be. It’s reasonable to assume that passengers won’t bother reading the War and Peace style text, and will instead plump for the ‘web check in’ button. But if they are trying to check in before the 30-hour limit, they must first choose their seats (not necessary if you check in between 30 and 2 hours before the flight). There isn’t necessarily a connection in passengers’ minds between choosing seats (which sounds optional) and checking in but they can only choose seats via the ‘advance check-in’, and they have to pay – none of which is clear.

Once they have chosen the correct fork in the road through trial and error, they’re presented with a series of unclear and unnecessary hoop-jumping steps that must be completed in their entirety for each leg of a return journey. For example, having checked in for the outward leg, users can click back to the screen shown below and choose the return leg airport. But pressing ‘continue’ here does nothing. It doesn’t even generate an error message. Instead, users have to start all over again from scratch.

Presumably this ‘design’ isn’t deliberate, but it did make me wonder why web processes like this are still so prevalent.

Clearly, the check-in process in this example is just driven by internal business processes, the constraints of which are of no interest to passengers. Passengers’ heads are filled with many more pressing concerns such as all the travel arrangements either side of a flight, baggage restrictions, what to pack etc etc. Checking in online should be so easy as to be utterly unmemorable. The whole idea of it is to make it more convenient than checking in at the airport. So why isn’t it?

The functionality of these pages has been built around only what the process needs. The interface is purely an afterthought.

Here is an illustrative example: imagine there’s a house you must enter in order to achieve some task.

  • The builders have built a secure house with all the rooms you must visit to successfully achieve the task. But the house has no windows and no doors.
  • Only after the featureless brick walls have been completed, do the builders suddenly realise there’s no way for people to access the rooms inside. So they take a sledgehammer and knock holes through to all the necessary rooms. And that’s it. They’ve supplied access. Job done.
  • Now imagine people with a need for access. They walk up the garden path and must search around the whole building for a way in. Perhaps there are several doors, or none. The order the rooms are to be visited in isn’t clear. Perhaps it doesn’t matter.

You wouldn’t build a house like this. But web processes like this are ten-a-penny.

I live in hope that one day we will look back at these experiences and laugh. Perhaps in a nostalgic way we’ll even miss them, like the websites that we occasionally stumble across in the 21st century that remind us of the way the web used to be. Or maybe we’ll still be struggling with processes that are presented as IQ tests, it’s just that we’ll struggle with them on ever-more advanced handheld devices!

Have you come across any great interface design, or any more terrible ones that really got in the way of you doing what you want to? Let us know in the comments below!

House with no windows image thanks to dphclub

Illogical information structure leads to bad user experience. Read this article on tree testing and make sure you get it right so your users can find what they are looking for.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320