Design Systems
Next section
Siguiente sección
Product Design Handbook
“We overestimate the event and underestimate the process. Every fulfilled dream occurred because of dedication to the process.”
A well-structured and refined process is the key to any successful project. And, even though every project is an entirely different world, there are a number of patterns that we have identified and cultivated overtime. These patterns make up recurring pathways that can lead to many different outcomes.
Several months can span between the first email or the first informal conversation at an event, to the final submission of a project. However, no matter how long a project stretches in time, the process is always present. Foresight is key. Following a defined roadmap and keeping it updated helps reduce uncertainty and makes our client engage in all the events that take place throughout the project.
Here we will go into detail about the unique process we use throughout our work. In reality, this process is made up of many different processes. We have decided to differentiate between three key types of processes that transpire during a project’s chronology:
Every project is born from a client’s need. But sometimes, the client doesn’t know what they need or why they have come to us. It’s important to confirm that the client has a clear grasp of our company culture and the approach we take to our work so that they fully comprehend the distinctive value that we can add.
This informative endeavour can be done in different ways:
Why is this so important?
Projects are born out of the client’s needs. They reach out to us and explain their ideas in a briefing. Based on this brief, we formalise a proposal, evaluate our client’s ideas and goals, and work out how our skills can best be used to add value to their product.
Our proposals consist of:
Accepting or refusing a proposal can seem like a rational decision at first. However, a big part of it is based on our emotions. This is why the proposal must be a reflection of, and perfectly aligned with, our studio’s culture and identity. To achieve this we must never neglect the details, the narrative, or the aesthetic quality of our proposal.
Once a proposal is approved, and the services and the goals that will be provided have been defined, it is documented in Notion.
The understanding phase is a process that allows us to establish a framework for putting our work into action. This framework consists of a series of work processes that will take place − in accordance with our criteria − to extract all necessary information for the project development in future stages. The conclusions we come to during this stage must be presented to the client and validated by them, the same as any other product. This way we establish a dynamic in which we eliminate non-committal expressions such as “I like it” from our client’s vocabulary.
It’s during the understanding stage when any project starts taking shape. It’s probably the most important stage of the entire process. The key is to define the problem that we are dealing with very clearly. If the problem is not properly described, we may never find a suitable solution. There are many different ways we can properly get to grips with our client’s problem. Normally, this understanding phase starts from the very beginning when we first speak to the client.
This is the moment to prepare the project, technically speaking. We open a project on Figma and give access to everyone involved so that they can keep up to date with the progress and give feedback. At this stage we also create and organise all the documents and start setting up tasks on Notion.
In Project Management you will learn a little more about how to create and document a project.
One of the most common ways to begin to understand a project is through a brief, on occasion we receive one before the proposal. We receive briefs in a variety of different formats. It can simply be a document that details the client’s service request, or it can be much more than that. For us, the brief is a mental disposition that takes place during the first contact meeting and allows us to test what the client wants, anticipate possible problems and/or benefits of the project and, ultimately, extract as much information as possible.
In order to fully understand the product and the brand, we normally send a document created by us called Brand Strategy Brief. This is a small questionnaire that invites the client to make a strategic and conceptual evaluation of their organisation, from their vision, mission and values to their target public and competition. This way, the team at mendesaltaren is on the same page as the client and can adopt their principles and values throughout the whole project. This brief isn’t always necessary, but it is crucial if the project includes branding or if there isn’t a well-defined strategy.
Once the Brand Strategy Brief has been completed, a kickoff meeting takes place. In this meeting, we discuss the business goals that are to be met and what is expected of mendesaltaren. This kickoff meeting helps establish some measurable and achievable goals, and we establish a realistic roadmap. In this session, we must start to understand the client's dilemma, as well as create a hypothesis around where it came from. It’s interesting when ideas for different solutions are quickly put forward by our stakeholders, the client’s team and our own team. This allows us to test how receptive our stakeholders are, how flexible they are and how easy it will be to convince them of our decisions. A good exercise is the Product Canvas, which is explained below.
Product Canvas is a great tool that allows us to have a global picture of the product through the client-agency approach. It’s very similar to a business canvas but it focuses on the product. It’s basically a communication tool that looks to detect the client’s unfulfilled needs as well as the shortcomings and benefits of their product. We can then transform all of this information into a solid value proposition that will be materialised into a non-prioritised set of functions. From this set of functions we get a “letter to Santa” from where we draw the basis of the product.
This Product Canvas includes different spokespeople from the different teams in the decision-making process. It’s important to have a facilitator who takes notes on the participants’ contributions on our canvas. This facilitator mustn’t take part in decisions in order to properly be of help to the rest of the teams when it comes to verbalising ideas, selecting them, categorising them and avoiding delays.
The product canvas is also a great way for the client to get to know us, understand that we are here to listen and help them improve their processes and products.
Access the Product Canvas template.
Documenting the process is just as important, if not more important, than the process itself. Without proper documentation, the information will be lost as the days go by and we will make mistakes and fall out of synchronicity which will lead to uncertainties. We use different systems for documentation, focusing everything on Notion. We document our client’s impressions at each meeting. We include different aspects such as goals, roadmaps or deliverables, interesting and relevant links, conclusions that we come to and presentations that we have given to our clients throughout the project.
Once we have a series of clear hypotheses about the client’s product or brand, we begin researching it. Depending on the type of service we offer, the research plan may change. For a job that is more focused on branding, the research will be concentrated on competition and the market more than if it was a definition job. A definition job would be more about researching the user. However, no matter the plan, it will follow these stages:
When it comes to gathering valuable information, there are many tools and resources we can use. Here we describe some of the most commonly used ones in our studio:
The conclusions we draw can be represented in many ways. Here are the two ways mostly commonly used in product design:
Learn how we work with Notion here.
During the definition stage, we will set the foundations for our product or brand. In this stage, we need to prioritise simplicity in order to make a large amount of documents, charts and notes into a consumable entity.
The goals for this stage are the following:
Meet all the set goals to a great extent. This isn't about stating what the specific section of the form that is going to measure will be like, but rather thinking of those sections or modules that fulfil a function and specific goal.
The objective of this phase is to define and specify product functions, which have to be in line with our user’s needs.
Once we have validated and understood the problem, we start looking for solutions. The more the better, prioritising quantity over quality. In this stage, we explore ideas that go beyond the “obvious solution”. We try to come up with many ideas before starting with the selection and development of concrete concepts. We then review and consolidate everything afterwards.
Users’ experiences are a great exercise that help us during this phase to come up with new functions based on the users’ points of view, taking into account their frustrations, problems, needs and motivations.
Users’ Stories:
With users’ stories, we are not trying to define the solution but rather specify a function that would allow us to address the problem that we picked up on.
Once we are clear about what we want to do, we move on to defining how we are going to do it. Before thinking about graphics solutions, we must focus on the complexity of the task and organise ourselves to make the process easier. This means deciding what content is appropriate and what structure we should use to show it, organising available information on charts, content trees and flowcharts.
This information architecture allows us to:
Content architecture in terms of branding includes identifying all different contact points of the brand and how the user interacts with them.
We make concept maps to organise a variety of information. They can be used to organise the data of a table, allocate sections of a product, organise the content of a specific section or even reorganise all existing sections and try different allocations. The main goal of a concept map is to separate the content into groups.
Concept maps help us to:
Within a concept map we differentiate between these hierarchies:
Making a concept map is as easy as collecting all the information blocks that we have and organising them with a logical order, either horizontally or vertically. It’s very important to use some kind of code to organise them according to their importance. Once we have several conceptual blocks, we can establish greater correlations by organising, at a later stage, the groups between them. A logical next step for a conceptual map would be a content tree.
A content tree is like a conceptual map, only it has different sections and branches. It’s useful to organise and establish the groupings and dependencies of a digital product. This is always of great use when starting a project from scratch, or when the project already has a lot of information and content which we need to restructure. A content tree shows restrictions between the app and web pages and allows us to document the organisation and navigation of the website.
The process of a standard content tree, based on conceptual maps, could be described as follows:
Flowcharts show how a user interacts with a product or service, illustrating different paths according to those interactions. They allow you to detect pain points in the different app or web funnels as well as reflecting on the conceptual idea and making decisions about the different scenarios and options of a service or product.
There is a standard convention for the making of a flowchart called “flowchart system”. It’s very easy and it will allow us to make readable flowcharts for a multitude of profiles. The convention can be adapted to any product or service. We recommend using the file attached, developed by us, for the creation of your flowcharts.
During the componentisation we highlight all the different modules that compose our final product and/or all the pieces that are part of the brand. The idea is to find patterns that will allow us to solve all the different problems that will arise with the minimum possible number of solutions.
Depending on the starting point of the project, this can be done either by separating all the components of the product that we start off with, or by beginning with what has been developed during the wireframing phase. One way to do this is by separating all the modules of a low-accuracy wireframe so that we can identify which objectives and problems each module can solve. This helps us identify patterns that allow us to reduce the design options to a minimum and find versatile ways of solving issues.
More than just a tool, componentisation is a way of thinking that allows us to simplify a product or brand in any of its stages.
Concept
Representation of an object, a fact, a quality, a situation, etc.
Conceptualising is the only way we can give a soul to a product. A concept is the base on which a product’s narrative is articulated.
Conceptualising is absolutely necessary in a branding job. Without a solid concept to support the brand it will be fragile and unable to reflect the goals pursued at a strategic level. It’s important to be simplistic when defining a brand’s concept. A common mistake is to try to be too intricate because you will then find it difficult to express the concept with graphic or narrative resources. Being as obvious as possible is normally a safer bet when it comes to conceptualising.
During the creating process, be it of a brand, a product or anything else, we have to be conscious of the fact that we come from a far-off place in relation to the world of ideas.
If we manage to connect the work we do with one of those ideas, our public will be able to assimilate the values or traits that we are trying to convey. Only by being aware of these limitations will we be able to notice the effort that is made to see a clear concept in our work.
It’s common that conceptualisation gets pushed aside in jobs that are purely about digital products. However, if we aim to set the base of the job on a concept, we will give our product a guiding thread. This guiding thread is noticeable from the splash screen until the last copy of a button.
In order not to limit ourselves and apply the richness of the narrative of a brand, we tend to work with two types of complementary concepts: narrative and graphic.
Narrative Concept
A narrative concept articulates the language of a product or brand. For instance, if the narrative concept was “effort”, we could use expressions that convey the difficulty of carrying out an action.
Graphic Concept
A graphic concept allows us to find simplistic visual resources that support the narrative. Based on the previous example, to complement “effort” we could look for a concept of “visual tension”. This could be done by using stretched geometric shapes that appear on the verge of collapsing or foreshortened, for example.
An interesting and practical way of testing the possibilities of expressing our concept is to use the following formula:
For example:
If our concept is effort, our graphic resources will convey tension.
This point is key for the process. This is when we are going to materialise the value proposition that we have been cultivating in previous stages. At this point in the process, the product functions must be defined. If we have done a good job beforehand, we’ll be able to develop faster and with greater fluidity at this stage.
In order to proceed with the production of the product, we will move from the conceptual idea and general concept to the specific and particular. Roughly, the steps of this phase would be: wireframing 🡪 prototyping 🡪 design. We will go on to explain each of them.
A wireframe is a draft that is visually and schematically represented by the structure of the digital product or one of its parts. They are very useful to validate ideas and hypotheses with the client and to discuss our theories. These drafts can be either handmade or digital. What’s important is to dismiss all visual aesthetics, as it will be a waste of time to worry about them at this stage of the process.
The goal of the wireframing is to define the navigation flowchart, the product content blocks, the position, and functionality of the different components. For this, we differentiate between two different types of wireframes:
Prototyping allows us to test the product with different users in different stages and identify problems in terms of navigation and content. When we talk about prototyping, we are referring to: designs which, to a greater or smaller extent, are similar to the final product, which allows us to interact with the functions that we are proposing.
The prototype allows us to:
The prototype has to clarify the value proposition and give solutions to raised problems.
As we have mentioned before, it’s interesting to test the prototype with users to obtain their insights as soon as possible. User testing allows us to see if the problems have been satisfactorily solved.
The same happens with interviews or surveys. It’s of great importance to try and avoid user bias as much as possible. Asking for users’ opinions on the work, or asking for reviews, will often result in indulgent and uncritical answers. The key is to present them with a specific problem and observe if they solve it and how. It’s crucial to do your job as a facilitator and not as a guide and manage the environment so that they feel comfortable: ideally, they will use the product in an environment that resembles reality in order to avoid implicit bias.
A mood board is of great help during the first stages of a visual exploration of a product or brand. It allows us to translate into a visual language concepts and ideas that have repeatedly come up during the product definition process. It’s also a great way of letting our client know what we think of the product or brand to ensure that we are all on the same page.
This moodboard must be evocative, as it will serve as our inspirational starting point. Normally, we prefer not to concentrate on what we would recognise as references of graphic design and interfaces. Plastic art, photography, architecture, sculpture or, in general, any other field related to the representation of ideas and concepts, is a good starting point to find inspiration.
It’s important for a moodboard to be concise. A very interesting option is to create small sections focused on specific aspects such as colour, shape, texture, typography, communicative tone, etc. This way, we maximise the evocative power of a combination of images, and avoid losing them within a sea of different, mixed visual elements.
Here is a visual example of a moodboard that we use in our presentations.
Branding, along with product design, is one of the most important services that we offer in the studio. In fact, they almost always go hand-in-hand. A product can’t be understood without its brand and vice versa. It’s not a phase as such, because in an ideal project, the brand would be developed alongside the project in many of its phases, sometimes drawing from it (comprehension, definition, conceptualisation or componentisation) and other times feeding it (production, visual design, narrative). All of this is why we have decided to create a section specifically dedicated to branding, to briefly introduce the process that we follow to create a brand in the studio.
Once we have defined and tested all functional and structural aspects of the digital product, it’s time to give them a final visual polish that will help us enhance the user’s experience.
Good design is aesthetic
In his 10 principles of a good designer, Dieter Rams argues that the aesthetic quality of a product is an integral part of its utility. From our point of view, between user and product, a similar relationship is created to the one that is created between architecture, buildings, and people. In the same way that walking the halls of a nice building can have an impact on our wellbeing, using a digital product that was created well benefits the established relationship between user and product.
Usually, visual elements and codes that we need to use when creating a digital product are encased in a specific context, they must represent a brand. For this reason, a very important part of this phase is to define an ecosystem that evolves them. This ecosystem is the brand identity or branding. Before creating the product on a final visual level and, even if we have already defined the functionalities of the product, it will be crucial to establish that brand identity. This process is, in a way, independent from the product development process. That’s why, at this point, we want to define the branding process.
Once the brand identity is defined, we can move on to developing the design system. In it we will establish patterns that will make the use of commonly recurring elements easier, enhancing recursion. We will define a set of rules that will state the use of this system. We then lay out a base for a clear and consistent language, from which we will create and develop products.
Consult our approach to design systems.
The results of each part of the process must be shared with the client and their team as they are being developed. This will erase all uncertainty and allow the project to progress and the feedback to be actioned at an appropriate time, avoiding significant backtracks. Giving our clients access to Figma and sharing the progress with them step by step will give them the opportunity to see what is being done, to add comments and give feedback about the work. Working with transparency will speed up the project and keep the stakeholders engaged as we progress.
Consult how we work with Figma here.
The best way to submit a project is through a link to Figma in which we will have a deliverable. In case we need to modify anything, this will avoid us having to resend the compressed files or upload them to a platform like Wetransfer.
It is of great importance that the client understands that, even if the project appears closed, it’s possible to correct any mistake that we identify later on.
When it comes to preparing a project deliverable it’s very important to establish a system that the client can use that mirrors our procedures. We must select files that will be of value to the client, while ensuring we never forget the files that the client deemed essential in the preparation phase.
The deliverables of the project will be previously defined with the client and will be documented on Notion at all times.
When it comes to moving the project from design to development, we use Figma. Figma helps us reduce the gap between design and development, which makes implementing the design easier. The files that are ready for development will be left in the project main or will be marked at main using the cover system on Figma.
If you want to know more about the hand-off on Figma, take a look at this article.
Once the project is finished, we will run training sessions with the client. In these sessions, we share all the knowledge we have gained throughout the process with the client.
We train the client to make them understand the extent of the created design system and how to work it based on components that will, in time, enhance their product in a steady and consistent way.
When we submit a project, we always follow up with the front-end team who develop it. Thanks to this support we can make sure to resolve any doubts that might come up. In case there are any complications regarding the design, we will find the means to offer a solution via this team.
When we submit a project, the responsible colleague and all members of the team that have taken part in it have a hindsight session. In this meeting, they will analyse what went well and which points of the process could be improved in future projects. This information will then be transferred to the rest of the team so that all that was learned is reflected in all future projects of the studio.
Three months after a project submission, we will contact the client to see how the product is functioning, gather key information and, if it’s relevant or useful, compare it with the information and data we gathered at the start of the project. Thanks to this information we can analyse what has worked well on a product basis and how our work has contributed towards that. Retrospective analysis of all our projects ensures we can continue to improve in future projects.
Let’s talk
We help your business thrive through strategy and design. And while we’re at it, we have fun doing it. How can we help you?
