2. Process
The importance of having a process
We overestimate the event and underestimate the process. Every fulfilled dream occurred because of dedication to the process.
– John C. Maxwell
A well-structured and mature process is one of the keys to the success of any project. And although each project is a World in itself, there are numerous patterns that over time we have been developing and assimilating into our workflow, finding these recurring paths to help us achieve uniquely different results for each project we embark on.
From the first contact email or informal conversation to the final delivery, no matter how long a project takes, the process is always present. Predictability is the key. Following a defined roadmap and having it updated will help us reduce uncertainty and help our client awareness in all the events that will occur during their project.
We are not going to talk about a single process. It will not be a one-off discourse either. In reality, our process is composed of many processes: we have decided to distinguish three of them, which will alternately succeed each other in the order of our work.
Strategic definition processes, which allow us to carve a path to follow to help our customers. The strategy starts with a market, context, objectives, needs and specific audiences, laying the foundations for all our work.
Product processes, related to the solution of complex problems for users based on a series of objectives in a specific context.
Graphical definition processes, since visual communication is our main tool (and not the only one) when it comes to making a digital product a success.
Every project is born from a specific need from a client. But it is very common that the client themselves do not know exactly what they want or why they should trust us. It is very important to make sure our clients get to know us before starting a project, so that we transmit with clarity our culture and our approach to the work that we do, thus the client understands the differential value that we bring.
This preparation can be given in several ways:
We train the client. Clients usually identify us with their preconceived idea about graphic design, focusing only on the aesthetic part. When they start working with us, we teach them a holistic view of product design, learning from our methodology.
We train designers for the client. A very important value that sets us apart is the service of finding talent and training them during a project to then have seamless incorporation with the client.
Why is it so important?
Sharing vision and culture. It is very important for your client to know what they are going to get from you and what they are not.
Avoid clients who do not fit in. It is better not to do a job that is not part of your professional focus and refer it to other colleagues. It improves the sector, it is being honest with the client and it allows us to focus where we really can contribute.
Improve the value of our work. By conveying the process and details of other projects, we enable the client to understand the day to day work complexity, which improves their ability to criticize and understand what we do.
The projects are born from the client's needs. He contacts us and tells us his needs and requirements through a Briefing. Based on this, a proposal is formalized, materializing the ideas and objectives that the client has in the services that we can offer to provide value in their product.
Our proposals contain:
A detailed description of the phases that will make up the project.
An estimate of the phases deadline.
A detailed quote.
Conditions of service.
Materials and deliverables to be received by the client.
On certain occasions, examples of other projects.
Although accepting or rejecting a proposal may make a priori seem like a rational decision, much of it is based on the emotional. For this reason, we must never neglect the detail, narrative, and graphics quality of our proposal: it must be a reflection of what we are offering and be clearly aligned with the identity and culture of our study.
Once the proposal has been approved, where the services are to be carried out and the objectives to be achieved have been defined, they are documented in Notion and the tasks are transferred to Asana.
The understanding phase allows us to establish a framework for our work. It is a series of exercises and processes that must follow a defined criteria. This way we can extract all the necessary information to help build the project in later phases. The conclusions in this phase will then be shared with the client as one more product and validated by him. Only in this way can we eliminate such expressions as "I like" from the vocabulary of our clients.
Knowing the problem
With any quality project, whether it is product, branding, or some other type of service, it begins with the understanding phase. It is the most important part of the whole process. The key is to define the problem we are facing. Because if we fail to define the problem, we may never find an adequate solution. There are many ways to discover the problem at hand. There is no single way to do this. The understanding phase starts from day one.
This is also the time to prepare the project at the technical level. We create our projects in Abstract and then give access to all the people involved in the project. This way they can see the progress and provide feedback throughout the project. It is also the time to prepare the folder structure, organize the documentation in Notion and to begin creating tasks in Asana.
👉 In How We Organize you will learn more about how to create this structure. 👉 In Notion you can learn more about how we create and document a project. 👉 In Asana you can see how we organize the tasks needed to complete each phase. 👉 In Abstract you will read about this tool and how to set up a project.
One of the most common ways to begin to understand a project is through a brief. That is if there had not already been one before the proposal. There are a variety of formats. In its most common form, it is nothing more than a document detailing the client's request for services. But it can be much more than that. In our case, the brief allows us to test what the client wants, anticipate potential problems or benefits the project can bring. Basically, we want to extract as much information as possible. It is about asking the right questions and making the right proposals during the first meeting.
To get to know our clients better, we usually send them a Brand Strategy Brief. This brief is a small questionnaire that invites the client to reflect strategically on its company's vision, mission, and values, as well as its target audience and competition. In this way, the mendesaltaren team can align itself with the client's vision and values, as well as its target audience and competitors. This brief is not always necessary, but it is essential if the project includes branding or if they do not have a well-defined strategy.
Once the Brand Strategy Brief has been completed, a Kick-off meeting is held in which the business objectives to be achieved and what is expected of mendesaltaren are delved into. The Kick-off meeting helps to establish measurable and attainable objectives, as well as setting a realistic roadmap. In this session, we must begin to unravel the problem, as well as throw out hypotheses as to why it has arisen. We want to be quick with coming up with possible solutions, both from our stakeholders, the client's team and our own team. In this way, we can assess how flexible and receptive our stakeholders are, and how easy it will be to convince them of our given solutions. A good exercise to use in this phase is the Product Canvas, which is explained below.
The product canvas is a very useful tool that allows us to have an overview of the product. It is very similar to a business canvas but focused on the product. It is, ultimately, a communication tool, which seeks to identify a client's unsatisfied needs as well as the shortcomings and benefits of the product. From here we can create a solid value proposition that is later translated into a set of non-prioritized functionalities. From this set of functionalities, "a wish list to Santa", we will be able to obtain the guidelines for the product.
This canvas involves representatives from the different teams which creates a more dynamic decision-making process. It is essential to have a facilitator taking notes of each participant's contributions. This facilitator should not take part in the decision-making process but focus on helping the rest communicate their ideas, prioritize them and avoid mental roadblocks.
The product canvas is also a great way for the client's team to know us and understand that we are there to listen and help them to improve their work processes and products.
Customer segment What is the target of our product? Who is it aimed at?
Unmet needs What are the identified needs in the market to which the solutions are being made?
Pains What are the pain points that the client has in order to carry out the product? → Weaknesses
Gains What are the customer's strengths that can help contribute to the realization of the product? → Strengths
Value Proposition The value proposition is the last corner of the rectangle to be completed. It is important that it be the last one, as it must nourish all that has been brought up on the other corners. The value proposition represents the competitive advantage of the product over those already in the market. What will make customers choose our product over others?
Feature set What are the features of the product?
UX What UX tools and methods are going to be used to get to know our users? How are we going to get information about them?
Channels What are the channels through which the product will be made known? What channels does the product use?
Pricing How will the product be monetized?
Documenting the process we carry out is as important or more important as the process itself. Without correct documentation, the information will be lost with the passing of days, and we will have mistakes or inconsistencies that enter the terrain of uncertainty. To document our work we use several tools, centralizing everything in Notion. We document the feedback from our clients at each meeting, aspects of organization such as objectives, roadmaps or deliverables, related links of interest, conclusions we obtain and presentations we make to our clients throughout the project.
Once we have a series of very clear hypotheses about the problem at hand, we go on to research the subject. Depending on the type of service we are offering, this research plan will change. When a project focuses on branding, there will be a greater emphasis on the competition and market than on projects focused on the definition phase, where a large part of our time would be focused on user research. But whatever this plan is, it will follow the following phases:
Gathering information. We will propose those activities or tools that are necessary to obtain all the information that we think is valuable to begin to validate our hypothesis and propose the following ones.
Draw conclusions. We will create those documents that allow us to establish and communicate any conclusions that we can come up with based on the data obtained through the collection of information from our research.
Share and validate. All the information generated must be shared and validated with the client, not only for the usefulness it may bring, but also to give value to our work and support the decisions we make later in the process. This phase could result in further research.
When it comes to gathering valuable information, there are many tools and techniques. We describe some of them because they are the most frequently used within the studio.
Shadowing. This consists of following and observing the user on location and at the moment in which the platform is used. It is advisable not to interfere with their interactions with the platform. It also allows us to extract valuable information on real use cases with few biases.
Desk research. Here we are looking for information in everyday use, be it articles, research, interviews, testing similar products and services... The objective is to document the problem to be addressed according to the research that others have done and gather as much information as possible about the context, competition, market...
Surveys. Conducting a series of user surveys will allow us to extract information about our product. They are particularly useful when measuring a large number of people. It is important not to ask straightforward questions or ask for evaluative responses as the biases that are brought about often incline the answer towards their contentment and satisfaction. In general, it is advisable to create straightforward questions if the sample is large, leaving the open-ended questions for small samples.
Interviews. A few interviews will be much more valuable than a large number of surveys if we want qualitative information. Again, it is key not to impose our users with too many closed questions. The key is to create a comfortable environment where interviewees feel free to express themselves without being judged, with the interviewer taking a passive role as a mere facilitator. It is also valuable to conduct interviews with key members of the organization.
The conclusions we come up with can be represented in many ways. We highlight two as they are the most frequently used in product design.
User Personas. There are two types: protopersonas, if the basic information is invented, and personas, if we are creating them based on real information that we have previously extracted. It is about composing a realistic personality of our users. It allows us to highlight their needs, frustrations, tastes, tools... in order to attack the design from the right point of view.
Customer Journey. It visually shows the process that a user follows during the use of our product or service. It show his motivations and feelings during the process with special attention to those points where frustration is generated. It allows you to point out those processes that cause friction and where improvement is possible. It is ideal to establish these journeys on real information.
Other methods include benchmarking, market research...
Let us not forget to document all the results of each phase in Notion.
👉 In Notion you can learn more about how we create and document a project.
While in the definition phase, we will lay the foundations of what will be our product or brand. At this stage, we must take away as much complexity as possible to turn a bunch of documents, graphs, notes, and annotations into a consumer entity.
The objectives of the definition phase are as follows:
Subtract complexity from the product or brand. This may include the definition of a naming system across the teams.
Generate the narrative that allows us to sustain our discussion.
Comply with all the objectives at a global level. It is not a question of defining what the specific form field we are going to create will be like, but more about thinking about those sections or modules that fulfill specific functions and objectives.
Build the information architecture that will be the outline of our product.
Establish a realistic hierarchy of which functionalities will make up the next release or MVP and why.
Turn the abstract into concrete.
The objective of this phase is to define and specify the functionalities of the product, which must be aligned with the needs of our users.
Once we have validated and understood the problem, we start looking for solutions. The more we come up with the better, prioritizing quantity before quality. In this phase, we explore ideas that go beyond the "obvious" solution. We try to generate many ideas before starting the process of selecting and developing concrete concepts. We do divergence work and then converge.
User stories are a good exercise that helps us define features from the point of view of our users, taking into account their frustrations, problems, goals, and motivations.
User stories:
They give us context about the problem.
They help us to be focused on finding solutions for our users and empathizing with them.
They allow us to easily differentiate between the different types of consumers of our product.
They help us to define features.
To create our user stories we use the following outline, taking into account the user's needs and the value that meets that need.
As a___________ I want ___________ so that ___________ .
In a supermarket application, an example might be: "As a returning customer, I want to be able to search through my previous orders so that I can place them again quickly."
The created feature that would result from this user story would be: They have a list of orders placed within their profile to be able to reuse them whenever they want.
When creating user stories, we do not seek to define what the solution will specifically be like for the user, but only to detail the features that allow solving the detected problem.
Constant feedback from stakeholders and the client team is important.
Once we are clear about what we want to do, we will move on to defining the "how". Before thinking about visual design, we must organize everything in order to make it manageable. It is a question of deciding what the ideal content will be and our overall structure of how we will show it. We do this by organizing the available information by means of conceptual maps, content trees, and user flows.
Creating an information architecture allows us to:
Identify and prioritize the components that will be present in the app or web in which we are creating.
Organize, structure and name components in an effective and sustainable way throughout the project.
Identify KPI's and give them the priority they require.
Make high-level content decisions quickly, reflecting, in a nutshell, the order and relevance of each section and their intended functions.
The architecture of content with regards to branding includes the identification of all the different touch points of the brand and how the user interacts with them.
We create concept maps to organize information that includes a diverse array of topics. It can be used to organize data in a table, to distribute sections of a product, to organize the content of a specific part or even to reorganize the existing ones trying different layouts. The main function of a concept map is to group content.
Concept maps allow us to:
See at a glance all the content that is going to be in a thematic group.
Sort and understand blocks, giving meaning to the information.
Create hierarchy and discard the unnecessary.
In a concept map we distinguish between the following hierarchies:
KPI: most important action or content.
Actions: actions of secondary importance.
Notes: components that have a main function or purpose.
Secondary notes: modules and components with supporting information.
Making a concept map is as simple as compiling all the blocks of information that we have and organizing and arranging them in a logical order in a horizontal or vertical way. It is very important to use some system to prioritize the different blocks according to their importance. Once we have several conceptual blocks, we can establish their overall relationships by organizing the groups among them in a second step. A logical evolution of a concept map could be a sitemap.
💡 To make concept maps you can easily use the concept maps system library.
A sitemap resembles a concept map but has several sections and branches. It serves to organize and establish the groupings and interdependencies of a digital product. It is very useful when we create a project from scratch or when the project has a lot of content that needs restructuring. A sitemap shows us the constraints between the pages of the app or website and allows us to document its organization and navigation.
It is important not to confuse a sitemap with a user flow. A sitemap reflects the pages and their hierarchical level, but it does not reflect the order or the different scenarios of user interaction.
A process of working with a sitemap, building upon a concept map, could be described as follows:
Organize all the blocks identified in the concept maps into a global structure of themes. This structure should consider the different levels of navigation (primary, secondary, etc.). It is not necessary to bear in mind all the blocks that make up the concept maps, only to identify them.
Organize the content into different pages.
💡 You can use the Sketch flowchart system library to create a content tree.
The user flows show how a user interacts with a product or service, exposing different paths depending on the interaction of the user. They allow us to detect pain points in the different features of the app or web, as well as to reflect and make decisions based on the different scenarios observed during the use of a service or product.
User flows can be made throughout the definition stage and will always be helpful. Before making the wireframes it is important to have created a user flow to validate with the client both the navigation and structure of the app or web.
There is a standard convention for the realization of user flows called "flowchart system". It is very simple, and knowing it will allow us to make user flows readable by people of different backgrounds. This standard can be adapted to any product or service. We recommend using the attached file, made by us, for the creation of your user flows.
💡 To prepare your flows you can use the Sketch flowchart system library.
Here we highlight all the modules that make up our final product and/or all the parts that are part of a brand. The idea is to find patterns that allow us to solve all the problems we are faced with the minimum possible number of solutions.
Depending on the starting point for a project, this work can be carried out either by separating the whole product into components or by starting from what we generate during the wireframing phase. One way to do this could be to separate all the modules of a low fidelity wireframe so that we can identify which objectives and problems solve each of them. The idea behind this is to help find patterns that allow us to reduce design solutions to a minimum, finding multiple ways to solve these problems.
More than a tool itself, creating components is a way of thinking that allows us to simplify a product or brand in any of its phases.
Concept
A mental representation of an object, fact, attribute, situation, etc.
Concept creation is the only way we believe we can endow a product with a soul. The concept is the foundation on which its narrative is articulated.
Conceptualizing is absolutely essential in the work of Branding. Without a solid concept on which to base a brand, it will only be fragile and difficult to portray the objectives pursued at a strategic level. That is, it will be completely unprepared when it comes to finding ways to approach them. It is important to keep the concept simple. A common mistake is to try to be fancy. It often results in a later inability to express that concept in graphics or narrative resources. A well-conducted truism can surely add a lot of value when conceptualizing.
During the process of creating, whether it is a brand, product or any other piece, we must be aware that we are starting from a place far from the world of ideas. If we manage to associate the work we do with any of these ideas, the public will be able to assimilate those values or adjectives that we intend to express. Only by being aware of this limitation can we recognize the difficulty involved in identifying our work with a clear concept.
It is common when conceptualizing to be limited to works of a purely digital product. But if we work on the basis of a concept, we will provide our product with a common theme. This thread can be seen reflected from a splash screen to the last copy of a button.
In order not to limit ourselves and extend the narrative richness of a brand, we usually work with two types of complementary concepts: narrative and graphics.
Narrative concept
A narrative concept articulates the language of a product or brand. For example, if the narrative concept were "effort", we could use expressions that value the difficulty or arduousness of carrying out an actio
Graphic concept
A graphic concept should allow us to find simple visual resources that support the narration. Starting from the previous example, to complement "effort" we could look for the concept of visual "tension". This would allow us to use, e.g., stretched geometries, about to collapse, or foreshorten.
An interesting and practical way to test the possibilities of expressing our concept would be to use the following formula:
If our concept is ________, our graphics resources will/will be ________.
And continuing with the previous example:
If our concept is effort, our graphics resources will stress tension.
This is a key point within the process. In it, we are going to materialize the value proposition that we have been developing in the previous steps. At this stage of the process, the features of the product must be delimited. Having done a good job beforehand with clearly defined ideas will translate into greater agility and fluidity in the development of this phase.
In order to proceed to the production of a product, we will work from the abstract and general to the most concrete and particular. Broadly speaking, the steps of this phase would be: wireframe → prototype → design. Let us explain each one of them.
A wireframe is a sketch where the structure of a digital product or any of its parts is represented visually and schematically. They are really useful to validate ideas and hypotheses with the client and make iterations on our theories. These sketches can be done either by hand or digitally. The important thing is to stay away from the final visual versions because it would be a waste of time to worry about them at this stage.
The objective of the wireframing phase is to define everything from the navigation flow and the content blocks of the product to the position and functionalities of the different components. To do this, we distinguish two types of wireframes:
Lo-fi. As designers, they are our starting point for translating the value proposition into a layout. They should provide us with a very simple picture of how the information will be structured at a general level. We work on the basis of blocks that meet objectives, without delving into how each block works on the inside. They serve to validate the different modules that will make up each section and the relationships between them. They also help reduce the components to a minimum, and generate a well-defined structure quickly.
Hi-fi. High wireframes are the natural evolution in which we begin to see how each module and component works. The idea is to validate the final functionality of the product before worrying about the visual.
💡 Tip: To create the wireframes we use the library wireframes system.
Prototyping provides the versatility of being able to test the product with users in the early stages and detect problems at the navigation and content level. When we talk about prototypes we are referring to: designs to a greater or lesser extent close in relation to the final product, which allow us to interact with the functionalities we have proposed.
The prototype allows us to:
Understand and experience navigation in a visual way.
Validate with the client the structure of content, components, and modules that will eventually go on each page. The prototype provides the client with a quick and faithful idea of what the final product will look like.
To test with users the structure of content, components, and modules that will eventually go on each page.
Validate with the development team that will later be in charge of its deployment.
The prototype has to clearly portray the value proposition and propose the solution to the problems raised.
As mentioned, it is very important to test the prototype with users to get insights as soon as possible. This test with users allows us to see if the problem has been solved in a satisfactory way.
As with interviews and surveys, it is very important to try to minimize user bias. Asking for their opinion about the work or asking them for evaluations and judgments will only bring complaisant and uncritical answers. The key is to pose real problems to them and see if and how they solve them. It is vital to act as a facilitator, not a guide, and to manage the environment so that they feel comfortable. Ideally, they should use the product in an environment as close to reality as possible so as to get objective results.
In order to test our users, it is necessary to have a checklist of tasks to be completed by them. In the session in which the test is carried out, it is advisable to remind the user that he is not being judged by their actions, but that we are testing the effectiveness of the application or web. They will also be told which tasks they must complete. When a task is completed we will mark it on the checklist, serving as a guide to see if the problem has been solved successfully or if it is necessary to iterate over it.
A moodboard is of great help to us in the first stages of the visual exploration of a product or brand. It allows us to translate into visual language complex concepts and ideas that appear repeatedly linked to the product. It is also a good way to convey to the customer our vision of your product or brand so that we are both aligned in that sense.
The moodboard must be evocative, as it will serve as an inspirational starting point. Normally we prefer not to focus only on references directly related to what we could understand by graphic design and interfaces. Plastic art, photography, architecture, sculpture and, in general, any field related to the representation of ideas and concepts, are a good starting point to seek inspiration.
It is important that your moodboard is concise. A very interesting possibility is to create small sections focused on specific aspects such as color, shape, texture, typography, the tone of language, etc... In this way, we maximize the evocative power of the combination of images, avoiding that it is diluted in a sea of visual elements fighting for attention.
Branding, along with product design, is one of the most important services we offer in the studio. They are, in fact, practically undividable. You can not understand a product without its brand or the other way around. It is not a stage as such since in an ideal project the brand would develop parallel to many of the stages already dealt with, drawing on some of them (understanding, definition, concept or component creation) and feeding off others (production, visual design, narrative). This is why we decided to create a specific section to make a brief introduction to the process we follow for creating branding in the studio.
👉 See an introduction to our branding process.
Once we have defined and tested all the functional and structural aspects of a digital product, it is time to provide them with final visual touches to help us enhance a good user experience.
"Good design is aesthetic"
– Dieter Rams
In his 10 principles of good design, Dieter Rams argues that the aesthetic quality of a product is an integral part of its usefulness. From our point of view, between user and product, there is a relationship of use that can be akin to that created in architecture between buildings and people. In the same way that walking through a pleasant building affects our well-being and state of mind, using a digital product created in a harmonious way benefits this relationship established between user and product.
Usually, the visual elements and visual cues that we need to use when we create a digital product are framed within a certain context: they have to represent a brand. Therefore, an important part of this phase is the delineation of an ecosystem that encompasses them. This ecosystem is the brand identity or branding. Before materializing the product at a final visual level, and although we have already defined the functionalities of the product, it will be essential to specify that brand identity. This process is somewhat independent of product development. Therefore, at this point, we define the whole process of branding.
With the brand identity already defined, we will be able to develop the design system. In it we will establish some patterns that will facilitate the use of common elements in a recurrent way, boosting resourcefulness. We will define the rules that articulate the use of it and the basis of a clear and consistent language where we can create and develop products. On this other point, we develop in-depth everything related to the design system.
👉 See an introduction to our branding process.
👉 See our approach to design systems.
The results of each part of the process should be shared with the client and their team as they are implemented. This eliminates uncertainty and allows the project to move forward and the feedback to be applied in due time, thereby avoiding having to redo entire parts. Giving our clients access to Abstract (or Figma if applicable) or sharing little by little our progress in tools such as InVision or Marvel will allow clients to see what is being done, add comments and give feedback on the work on the go. Working with transparency streamlines the project by involving stakeholders in all the stages.
La mejor forma de entregar un proyecto es un link a la carpeta de Google Drive o Dropbox donde tengamos el entregable. Esto nos evitará, en el caso de que hubiera cualquier modificación, tener que enviar de nuevo archivos comprimidos, o subirlo a plataformas como Wetransfer.
It is very important that the client understands that, despite having finished certain items, it is possible to later correct any mistakes we have made.
When preparing a deliverable it is very important to establish a structure that the client can understand through established standards. It is necessary to identify those files that are valuable to the client, not forgetting those that have been defined as required by the client in the preparation phase.
We create a folder structure inside the "deliverables" folder with all the resources agreed upon with the client. It will be this subfolder that we will share with the client.
The project deliverables will be those previously defined with the client and will be documented at all times in Notion.
How to prepare sketch files for delivery?
Merge all possible branches in the Abstract project to the Master branch.
Export the files of the Master branch.
Save them in Dropbox
✏️ See the documentation on how we use Abstract in the Abstract section.
To bring our designs into the development stage, we use Zeplin. It allows us to reduce the design-to-development gap, making it easier to implement the design. We only upload to Zeplin those files that are in the Master branch of Abstract, to have better control of what is uploaded.
👉 If you want to know more about how to prepare your files for handoff you can read our article about Zeplin.
Once the project is finished, training sessions are held with the client. In these sessions, the knowledge acquired throughout the process is passed on to the client.
We train the client to know the scope of the design system created and work on the basis of components so that your product is scalable, maintainable and consistent over time.
Upon delivery of the project, we follow up with the front-end team that will develop the project. Thanks to this support we can ensure that any questions that may arise are resolved. In the event of a design complication, ways are identified to provide a design solution.
When a project is handed over, the person in charge and the members of the team who have formed part of it carry out a review of the project. In this meeting, we will analyze what has gone well and what aspects of the project can be improved upon, all with a forward focus on the subsequent projects. This acquired knowledge is transferred to the rest of the team so that the learning is mirrored in all the projects of the studio.
Three months after the submission of a project, we contact the client to see how the product is performing, obtaining metrics and comparing them against metrics took at the beginning of the project (if they where available then). By obtaining this information we will be able to analyze what has worked at the product level, and how our work has contributed to it. A review at this point encourages the improvement of future projects.
