If you want to build a successful, intuitive website and give your users a great experience when they navigate it, design it with their needs in mind, not yours!
User stories
It needs to start with a story, a bit like the opening line of a movie script:
“So where are you? You’re in some motel room. You just – you just wake up and you’re in – in a motel room. There’s the key. It feels like maybe it’s just the first time you’ve been there, but perhaps you’ve been there for a week, three months. It’s – it’s kinda hard to say. I don’t – I don’t know. It’s just an anonymous room.” Memento
- What does she want to do?
- Why does she need to do it?
The user stories will be the referral, the inspirational source which will dictate the design of the prototype. It will describe all the key tasks that a user will perform on the future website. A good user story will help the designer to understand all the users’ needs and how to meet them.
Further resource: Gov.uk website on writing user stories.
Workshops
You should meet with internal/external stakeholders and hold workshops – your role is to act as a facilitator: listen attentively and help everyone to voice their ideas.
Your first task is to identify each potential user (or persona), and then define their needs. Finally, stating the outcome of the user journey is essential in order to understand if the goals have been reached. The successful path will be built when discussing the information architecture.
A great way to give birth to the information architecture is to use a card sorting system. Stakeholders’ opinions are also extremely useful when it comes to labelling and sign-posting elements on the page: you should use their vocabulary and terminology whenever possible. Gathering all those requirements will build what is called a use case and you may end up with several of them.
That’s a great start: a good script and a solid set – this is essential foundation work. If you skip it, your website may end up looking like this movie.
Prototype
Once the user stories and use cases have been crafted, the designer will build a prototype. It will lay out the core elements of the future web design, and also help to organise the information in a hierarchical and logical way. The user journey will emerge from this work.
After drafting the key screen/template with the project team on paper (which is still the quickest way to do this), we move from those early sketches to the computer monitor using Axure.
This prototyping program helps to quickly visualize how and where elements will be placed on the web page.
Axure allows us to have a fully interactive, clickable prototype; once this skeleton is in place, it’s a lot easier to discuss the elements’ interactivity, navigation, structure and hierarchy. Below is an example of a prototype for an intranet.
It doesn’t have to be black and white: your prototype can become as close as you want to your future design.
The taxonomy is discussed at the same time and can evolve quickly, tackling obvious issues which will appear during the build. The key is to use this initial prototype to reveal the following: navigation, signposting, labelling, and ease of use…
Testing
Once you have selected your use cases and your key prototypes, then you are ready to start the testing.
Tools
There are plenty of tools available online. We use Chalkmark and Gazepoint. The former allows first-click intention testing; the latter records a full user journey with the help of an eye tracking device. Their results can be visualized in the form of heat map.
Audience
Make sure that you select a representative group of users for testing! The minimum numbers of users needed is discussed at length in this Jacob Nielsen article.
Post-testing discussion
User testing can appear clinical and aseptic and we recommend running an open debate in parallel to the workshop. These discussions will generate more complex thoughts and feelings than the tools can record. You will understand fully the motivations of your audience.
Results and Analysis: Enhancing or Simplifying UX?
We always try to provide a simple but satisfying user experience with a solid GUI. Sometimes a minor change can simplify a journey and give the user a better experience. Those two examples show that the anticipation of the user’s needs can lead to great improvement:
So, you have captured the user stories, created the prototypes, run the workshop, and analysed the results. Are you satisfied with the answers to the following questions?
- Did the users achieve what you were expecting them to?
- Did they open new paths or journeys that you should consider?
- Are you sure that you have met their needs?
Talk to us if you would like to refine your design and improve your user engagement.