Introduction

When we think of UX design, the word “documentation” probably isn’t the first thing that comes to our mind. But documentation is a key part of the UX design process for many teams. The funny thing is, many design classes don’t even talk about documentation.

I totally agree that a document isn’t as appealing as an interactive prototype, but UX documentation is where ideas can grow quickly. Consider it to be the building blocks to the end goal; it helps everyone working towards that goal stay on the same page. It’s where thoughts morph into words, and words blossom into usable solutions.

But why do you need documentation?

At 17Seven, for example, as I am writing this blog, I am pairing with UI Designers to enhance the experience and usability of “ Project one ”, working with developers to finish the implementation of “ Project one ”, talking with our Design Head to start the interaction plan for “ Project two ” and being added to new internal project meetings to brainstorm ideas and discuss risks for “ Project three ”, which will kick off a few months down the pipeline.

Understood what I am trying to say? No? Let me explain:

We all multi-task at work, juggling multiple projects at any given point in time. Same goes for my workplace. There is no way my brain can ingest all this information and retain it for a lifetime. The truth is I will forget most of those discussions, lose track of what's happening and even worse, wouldn’t be able to pass it ahead when needed.

That’s really why we need documentation.

How does UX documentation help?

We do believe it's every UX designer’s duty to make their UX deliverables discoverable and self-explanatory for when they are needed at work. It’s about investing some time to create a single point of reference for all the small milestones we accomplish to complete the overall project.

When done well, a good UX document can be helpful for the following

A Point of Reference: If we go on a vacation, does our team have access to our assets and do they understand the context behind them? The document should be self-explanatory and sufficient to paint the entire picture to our team-members.

Onboarding new members on team: If someone joins the team next year, how will they come up to speed on your project, be able to comprehend the research findings or get the logic behind the decisions already made, for example?

Stakeholder buy-in: If our stakeholders want to see the project progress, can they find it? If they can find it, can they understand the logic behind it the way we had understood it?

What are the main components of a UX document

At 17Seven, we make UX documents for every project. All projects need to start somewhere, and for us, it often starts as a shared google doc.

We were recently working on the redesign of a mobile based product for our clients at Cityflo which is a premium daily-commute service targeted at car users on high density routes.

This service provides commuters the comfort of a car at the cost of a bus ride. As a result, commuters leave their cars behind, thereby reducing road congestion and pollution in the cities. It also gives these commuters more personal recreational time.

In this blog we will showcase some of the UX deliverables documented by our team during the execution of the live project.

Below are 10 UX deliverables which will help you build a good self-explanatory UX document. If you establish the habit to document your projects by following the template below, I can bet that you will be able to manage your future projects more smoothly.
‍

1. Business Model Canvas Understanding

Always start your design projects with a thorough understanding of the “Business Model Canvas”. It's the strategic management sheet, filled by the clients (Stakeholders or Project managers etc) for developing new or documenting existing business models. This deliverable helps describe a firm’s or product’s value proposition, organizational structure, history, customers, finances and potential setbacks.

Here’s a sample of how to document business model canvas understanding:

2. User Personas

Personas are a fictional representation of the real Target Audience data, gathered from previous research methods such as user interviews. Personas help us identify who are the users that we are designing for, and recognise that different people have different needs and expectations. This deliverable is crucial in understanding our users needs, experiences, behaviours and goals.

Here’s a sample of how to document User Personas:

3. Feature List Development

This deliverable is a list of features which are arranged in a sequential manner. The main objective of the feature list is so that the developers and stakeholders can plan the technology roadmap and postpone unnecessary features using prioritization methods.

Here’s a sample of how to document feature list:

4. Sitemaps or Information Architecture

Sitemaps are hierarchical diagrams that show the structure of a website or application. It's an important step of the user centered design process as it makes sure to place content in places where users would expect to find the same. This deliverable helps us understand how our users will navigate through the website or application.

Here’s a sample of how to document information architecture:

5. Task Flows

Task flows are similar to user flows, except they’re generally linear without multiple branches or paths. They mainly show the detailed level steps that a user would take to get to a specific goal or end point. These flows consists of user actions and corresponding system actions. This deliverable helps developers start building the backend of the application or website.

Here’s a sample of how to document a task flow:

6. Navigation

Navigation is like the map of your website or application and usually gets users deeper into the site or app experience. It’s like the vehicle that takes users where they want to go. It's purpose is to help users find the information they are looking for. This deliverable gives teams more clarity of the final structure of the product or service which has been validated by using UX research insights.

7. Wireframing

Wireframe is a visual representation of a user interface excluding any visual design or branding elements. It's used by UX designers to define the hierarchy of components on a screen and communicate what those components should be based on user needs. This deliverable gives UI designers a basis to start creating screens and even a reference point for developers and stakeholders to check the functional specifications of the product or service.

8. Prototyping

A prototype is used to understand how a product or application works, what it does and how you should interact with it. They are simulations of how the finished product will look-like and behave. The goal of this deliverable is to test the flow of a design solution and gather feedback on it, from both internal and external parties, before constructing the final product.

9. Usability Testing

Usability testing is a way to check how user-friendly your product is, by testing it with real users. Users are asked to complete tasks, typically while they are being observed by researchers, to see if they encounter any problems or experience confusion and the exact points where the challenges occur. If many users encounter similar problems at similar places, recommendations are then made to overcome these usability issues. This deliverable helps solve issues and potential problems before a product is launched and minimizes the risk of product failing.

10. Interaction Design

Interaction design is the design of interactive products and services in which a designer’s main focus is to define how users will interact with the product or service. This deliverable aims at creating meaningful relationships between people and the product or service that they use, right from computers and mobile devices to appliances and beyond.
‍

Take aways

‍

• As a basic rule of thumb, if you’re writing up something just to hand it off to someone else, it probably wasn’t worth your time in the first place. Only create documentation that moves design forward.
• Remember to keep it useful and precise — remove extraneous details.
• Know your audience, and their needs. Ensure that the documentation you create will be used to drive design-decisions, otherwise you are simply wasting your time.

At 17Seven we believe that a good UX Document is as important as the UX Process itself. Drop us a message, if you would like to collaborate with us to create a meaningful UX design process for your product.

If you found this blog helpful and wish to know more about UX Research, do read our post on A crash Course on UX Research