The documentation that a UX and UI designer must create and use – | Blog

There are many analyzes on what documentation and deliverables should be generated by a UX designer and a UI designer.

In particular, I prefer Garrett’s analysis: “During the “strategy” phase the objectives must be identified, in the “scope” phase the needs of the users, in the “structure” phase the functionalities and requirements must be specified. of the web, in the “skeleton” phase the design of the navigation, organization, labeling and search systems and in the “interface” phase, prototype the page.”

Therefore, a more synthesized and simple analysis, we could say that the deliverables are the set of documents that have been produced during the development of the project.

UX and UI documentation have several objectives, among which we can highlight:

  • They are an element of communication of the scope of the project for the client.
  • They are an element of communication with the work team and with the rest of the teams that will participate in the project.

The deliverables or documentation that a UX and UI Designer must provide

user stories

It consists of making short descriptions of the customer or user requirements. User stories should be accompanied by acceptance criteria, up to a maximum of 4 per story.

User stories follow the following format: As (who) I want (what) For (goal).

An example: As a buyer, I want to know if a product has a promotion to take advantage of and buy it before it ends.

In the acceptance criteria it is necessary to define what outputs the user or client will have when the task execution process ends.

See also  UX and UI. They don't clash, they complement each other! - USABLES | Blog

People

The persona construction technique helps us define user profiles when it comes to discovering characteristic features of the target audience of a website or application.

Knowing, understanding, understanding and empathizing with the users of a system is key to its success. It is one of the most used in the HCI and UCD field.

It helps the UX designer of the digital product understand who the product is designed for, in decision-making and not lose focus on the project’s objectives and user needs.

scenarios

It consists of representing the reality of the user. It is the creation of an environment with a story that helps to understand the archetypes of the person. Identifies relevant elements that affect the use of the product in the real world of users.

Creating the UX scenario consists of identifying the most important aspects that intervene in the use of the product in the real context of the users.

Content Maps

Content maps consist of collecting, for example, the organization of the content in a table.

This table includes:

  • The structure.
  • Location within the structure (where it is located).
  • The life cycle.
  • Type of validation of each of the contents.
  • Responsible for validation.
  • The frequency with which the content is updated.

Analytics and usability tests

It consists of collecting user browsing data that allows us to identify their behavior and patterns.

We must include the evidence, results and conclusions of:

User surveys

Surveys and interviews carried out with users that allow knowing the information collected from users on the issues that were raised.

See also  How to measure in UX. Google HEART method - | Blog

We must include:

Experience Maps, User Journeys and User Flows

It is about visually representing the flow of a user of a product or service. Included are your goals, needs, thoughts, feelings, reactions, frustrations, expectations, etc.

shows the path that a user executes when performing a specific task through the product or service.

wireframes

they are the schematic representation in low and high definition of the structure of the pages that make up the website. If sketches have been made on paper, they should also be included.

They are illustrations also known as “Blueprint”. They help define the information architecture, the structural design and understand how the user flows work within the product.

Wireframes are a transversal communication tool between different teams: design, product and development, fundamentally.

prototypes

Interactive prototypes that faithfully represent the final digital product. They help demonstrate how the entire product works. They allow to apply with users.

The main advantage of the use of the User Experience is that they help to visually capture the business objectives and how they align with the expectations and needs of the users and if they are satisfied through the designed digital product.

specs

It is about providing the functional requirements document so that Front and Back developers can consult and face the layout and development phase of the product’s functionalities.

Style Guides and Design System

The style guide is necessary for the developers of the front end of the digital product. A style guide manages to give coherence and consistency to the entire interface of the site or digital product. This is a document that collects the UI behavior.

See also  Take the 5 Second Test with UsabilityHub - | Blog

A style guide is a manual that defines the identity of the brand or company, its colors, fonts, the tone in which it addresses its customers and users. In short, they are all the necessary elements to build a solid image.

If a style guide and design system are not followed, it is likely that the website will end up being a mixture of elements without coherence between them, or consistency in the design.

The design system will provide the necessary consistency and harmony in a complex work environment. and variable in terms of content and functionality.

credits

Loading Facebook Comments ...
Loading Disqus Comments ...