go to article
Following on from my article about how to create great UX documents, I thought that it would be useful to collate some example UX documents and deliverables together. This should hopefully provide a bit of inspiration and assist when it comes to choosing the type of document(s) to produce. For each document / deliverable I’ve included examples, together with a quick outline and links to more information. The following UX documents and deliverables are covered:
Content models | Empathy maps | Experience maps | Mental models | Personas | Process diagrams | Prototypes |Scenario maps | Scenarios | Sitemaps | Sketches | Storyboards | Style guides | Style tiles | System maps | Task grids |Usability reports | User journeys | User story maps | Visuals | Wireframes | Word clouds
Please note that the majority of these example documents are not my own. Click on a document to view the source.
Content models
A content model shows all the different types of content that you will need for a given design, whether it’s a website, app or even brochure. Content items are shown together with their fields, types and the different relationships (such as ownership) between the content. Content models are quite similar to domain models.
Whilst it’s more typical for a systems architect, developer or even content specialist to create a content model it’s something that UX designers should be aware of (and might need to construct). Decoupling the content from the design is also becoming increasingly important for responsive and mobile design. You can learn more about content models at Content Modelling: A Master Skill (A List Apart).
Empathy maps
Empathy maps typically (but not always) accompany personas. They provide information about users, such as what they might be thinking, feeling, doing, seeing and hearing; together with pains and gains that they might experience.
Empathy maps are a good way to bring personas to life, to encourage empathy with users (the clue is in the title) and buy in from the wider project team. It’s often a useful exercise to collaboratively create empathy maps, or at least to review with the wider team. There is more information about empathy maps, including even an online empathy mapping game on the innovation games website.
Experience maps
Experience maps (sometimes called ‘Customer experience maps’) show a customer’s end to end journey and experience for a given goal. For example, you might have an experience map for going on a holiday which would cover everything from researching holidays, to actually going on the holiday and then writing a holiday review.
At each stage of the journey an experience map will show information such as the touch points that the customer uses, what they are doing, thinking and feeling; along with any frustrations and ideas for improving the experience. They are great documents for communicating the customer’s experience and for designing multi-channel user experiences. Adaptive Path has an excellent guide to experience mapping that you can download for free. Also take a look at myMoving from task based to experience based design presentation that covers experience mapping and these additionalexample experience maps from UX Lady.
Mental Models
Similar to task grids, mental models outline the thought processes (i.e. mental model) that users employ when undertaking a given goal. For example, when planning a night out with friends or deciding where to go on holiday. Mental models show the steps broken down into tasks and the sort of questions and considerations that users will make at each step.
Mental models are useful for communicating and capturing user behaviour and for identifying design opportunities. There is lots more information about mental models in the Mental Models book, by Indi Young, the first chapter of which can be read for free.
Personas
Personas are fictional representations of your users (a bit like user stand-ins). They are fictional, but should be based on fact. They represent the goals, motivations, characteristics and behaviours of a real group of users.
Personas help to put a human face to users. They help the project team to get consensus on who the ‘users’ are (not always an easy thing) and help to communicate important information about users. Take a look at my Getting the most out of personas article for more about personas and how to best utilise them.
Process diagrams
Process diagrams visually show a process, including the different decision points and process flows. They are more commonly used by business analysts but can be equally used by UX designers to outline a set of user journeys, or the logic utilised within a particular part of a site or app.
Prototypes
Prototypes have arguably taken over from Wireframes as the UX designer’s number one UX document / deliverable. A prototype is basically a semi-functional mock-up of the design. They are great for communicating a design, for evaluating a design (for example via usability testing) and for generally showing what should happen.
I’ve previously outlined why I think prototypes are infinitely better than wireframes and with an increasing number of Prototyping tools on the market, there is really no excuse not to be creating interactive prototypes. For a comprehensive list of prototyping tools out there take a look at Adaptive Path’s Rapid Prototyping Tools list.
Scenario maps
Scenario maps show the steps that a user will go through for a given scenario (hence the name). They not only capture the steps but also good ideas, questions and other information that might be useful when considering a design.
Scenario maps can be created for current scenarios, along with future scenarios. They typically focus on what a user will do, not necessarily how they will do it. You can find out more about scenario maps in my step by step guide to scenario mapping article. Scenario mapping is also outlined in detail in the excellent The Persona Lifecycle – Keeping people in mind throughout product design by John Pruitt and Tamara Adlin (although it’s called ‘reality mapping’ and ‘design mapping’ in the book).
Scenarios
Scenarios either visually or narratively (i.e. using words) outline the steps that a user (usually in the form of a persona) will take for a given scenario. Like scenario maps they can either be for existing scenarios, or for envisaged scenarios.
Scenarios are great for identifying the features and functionality that will be required to support the desired scenario and for bringing a future product or service to life by telling the user’s story.
Sitemaps
Sitemaps show the pages and screens that make up a website or application, or a particular part of a website or app. They often indicate groupings, such as site sections and links between the various pages and screens.
Sketches
Sketches are usually more of a design artefact than deliverable. That is, they are usually created to help communicate a design or concept, rather than being a more formal document in their own right. None the less they can be a useful UX document for showcasing concepts and early designs. Take a look at my Joy of sketch(ing) article for more on sketching.
Storyboards
Storyboards are borrowed from cartoons and the movies (never be afraid to nab a good idea if you see one). They graphically show a scenario in a comic book fashion and are great for bringing something to life. Johnny Holland have a set of Storyboarding & UX articles that are well worth a read if you want to find out more about storyboarding.
Style guides
As Susan Roberson outlines in her excellent creating Style Guides article, “a style guide is a living document of code, which details all the various elements and coded modules of your site or application”. It will often not just cover the visual look and feel of elements (such as text, buttons, UI components etc…), together with the HTML and CSS code, but also detail design patterns and correct usage.
There are lots of example style guides out there. Some good ones include:
- Code for America Website style guide
- Starbucks style guide
- BBC global experience language web style guide
Style tiles
As described on the cleverly titled Styletil.es website style tiles are, “a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.”
Style tiles are more of a graphic design deliverable than a UX document. However a UX designer would certainly input into a set of style tiles and may well create a set if they have graphic design expertise.
System maps
A system map visually shows the different actors and artefacts for a given product or service, along with the relationships between them (think of it as an eco-system map). Actors might be users of the service or staff actually delivering a service. Artefacts could be everything from a website, to a physical object such as a brochure or print out.
System maps are great for capturing the different elements that are involved for a product or service (either existing or future) and for taking a more holistic view of the UX design.
Task grids
Task grids are often the main output of task analysis. Task analysis involves breaking down a larger task, such as sending an email into its constituent steps and stages. Task grids are very similar to experience maps, but typically show an existing task, rather than a future, desired experience.
For each step of the task the sort of questions that a user might ask are outlined, together with potential pain points and feature ideas.
Usability reports
Usability reports are typically used to either detail an expert evaluation, such as a heuristic evaluation or cognitive walkthrough or to communicate the results of some usability testing. The key for any usability report is to keep it as brief as possible (there’s nothing like ploughing through a 100 page+ report) and to use visuals wherever possible. You can find more information about expert evaluations in my A guide to carrying out usability reviews article.
User journeys
Whereas experience maps generally show the end-to-end customer journey, a user journey document typically only shows part of the user journey. For example, it might be the journey through a website, or when completing a particular task.
The journey is usually broken down into the steps taken by the user, often with visuals shown to help illustrate the story.
User story maps
User story maps are often created as part of an agile software development project. They map out the user stories that make up the various product features and future releases.
User stories are used within Agile to capture user requirements. They usually take the form of: “As a <role>, I want<goal/desire> so that <benefit>“.For example, “As a help desk operator I want to retrieve a previous help desk enquiryso that I can find out what has happened to date”.
You can find out more about Agile and UX in my Tips for bringing UX to the Agile party article. Jeff Patton also has lots of information about story mapping on this website. He has also handily written a book about user story mapping.
Visuals
Visuals, mock-ups, composites, call them what you will (I think the term visuals is clearest), graphic design visuals are a key UX document. They show what the finished design should actually look like. With the rise of responsive design more component based visuals (such as style tiles) are becoming increasingly popular.
Wireframes
For years wireframes have been the key UX document for UX designers. However, with ever more powerful and easy to use Prototyping tools on the market (not to mention an appreciation of the limitations of wireframes) Prototypes are starting to muscle in on Wireframe’s UX document top spot.
A wireframe basically shows the UI elements (text, images, buttons, links etc…) that make up a screen, page or UI component. They are a bit like a blueprint for the UI, showing which elements make up the UI and how they should behave, but not necessarily what the UI will look like.
Word clouds
Word clouds (sometimes confusingly called tag clouds) are simply a way of visually displaying a set of words as a shape. Usually that shape is a cloud (hence the name), with the size of words increasing with their importance or frequency.
Word clouds wouldn’t generally be a UX document by themselves, but can be useful for communicating UX related information, such as inbound search terms, customer feedback and on-site search terms. You can read more about word clouds in my Say it with a word cloud article. Also take a look at Three Ways to Improve Your Design Research with Wordle (Boxes and Arrows).
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.