In Pragma UX/UI teams, we focus on offering users an intuitive design that evokes positive emotions. We seek to make the product relevant and valuable to provide excellent and memorable user experiences.
In this article, we identify activities and techniques we can use during the design phase of a product while maintaining an effective relationship and communication between the UX/UI team members.
This team designs the structure and aesthetics of a product through an iterative design process; specifically, UX designers perform various activities focused on the practical and enjoyable use of a product. Meanwhile, the UI designers focus on its appearance, presentation, and attractiveness. Both teams work to create a great design, satisfying the user's needs and preferences visually and functionally.
Once we have a broad vision of the product, the audience, and the environment, we begin the Design Thinking process with activities such as empathy, research, definition, ideation, prototyping, and evaluation.
We build artifacts in the above activities to communicate our ideas, research results, and context to all stakeholders. An outstanding group of artifacts we elaborate on during this process includes: Benchmarking reports, research reports, user-personas, user journeys, navigation maps, user flows, sketches, wireframes, wire flows, mood boards, style guides, interactive prototypes, user test reports, and heuristic evaluations.
Let us describe artifacts such as navigation maps, user flows, wireframes, mood boards, style guides, and interactive prototypes.
Navigation Maps
A navigation map is a diagram that represents the structure or architecture of a product. This document serves as a starting point to distribute, organize and prioritize the content of each screen. The navigation map represents the distribution of the content and the relationship between its components; it also offers a visual representation of these contents.
User flows
The user flows are routes or user decisions to navigate a product, website, or application. A user flow represents all the steps from access to the product to the completion of a given task, identifying the different options depending on certain conditions and all the possible ways to complete the task.
Wireframes
A wireframe is a schematic representation of a user interface that allows us to visualize the structure of each product screen, where we represent the visual distribution and the hierarchy of the contents. Wireframes help us define information architecture, content spacing, functionalities, and structural design, understanding how the user flows work within the product..
Wireflows
A wireflow is a diagram that combines the layout of pages in wireframes with a representation of a user flow. The wireflow allows us to represent the user flow and the initial screen designs they need to navigate the final product. We use these artifacts to review and communicate interaction design, and user flows with stakeholders.
Moodboards
A moodboard or inspiration board is a visual tool that can be physical or digital; it consists of a collage of a selection of images, photographs, or materials. These elements are related to a possible solution or design. When creating a moodboard, we apply a strategy to our ideas seeking a solution.
Style Guides
A style guide is a collection of design and content guidelines agreed upon by stakeholders that help establish coherence and consistency in product design. This collection can include visual styles, colors, fonts, typography, and the specification of UI behaviors, for example, error messages. Style guides are not static; we recommend updating them periodically, based on changes in user needs and design trends.
Interactive prototypes
An interactive prototype is a more advanced version of wireframes, where we incorporate the interactions with high fidelity in terms of visual design. We recommend creating interactive prototypes.
The closer a prototype is to the final product, the more reliable the user test results will be. This will allow the product to be corrected, improved, or evolved.
Professional tip: the artifacts proposed here are not limiting, nor is it mandatory to use all of them; the selection of those that we are going to build during the design process will depend on the users, brand, business objective, and the type of project in which we are going to participate.
