UX/UI (user experience/user interface) design is a discipline whose goal is to give users a simple, comfortable, and intuitive way to navigate and use the features of a product or service, so that their user experience is as pleasant and positive as possible and, in general, to meet users' needs.
The two terms, UX and UI, usually go hand in hand, and being a UX designer with a grasp of UI will usually make the workflow much easier, but in reality they are quite different. They are two professions that can work either separately or together, and both are essential to developing a product.
As UX/UI designers, we focus on fully understanding our product. To shape the project and achieve our goal, we use a range of different skills to design a new user experience that covers three main aspects:
What does our UX design work at Deale involve?
User experience is the process that begins when our user navigates the digital interface. To reach the final product, we go through a series of development stages so that every decision made during the design process takes the user's needs into account:
Research and analysis stage (research)
When we start creating a flow(1), we first need to get to know the user: what their needs are and the best way for them to carry out actions.
To do this, the design team does research(2). We look at similar platforms, analyze the user and define them as our target (“user persona(3)” and even write interviews to get their more qualitative opinion (4).
How do we define our target?
By creating “user personas (3).” This means defining the type of user who will use our product: a description of an archetypal user that will guide us throughout the design process. We need to empathize with this user, understand what they feel and what needs they have, and understand why they use our product or service.
All of this helps us gather relevant information about users, drawing out their behavior patterns and key characteristics. We should use data that is as close to reality as possible.
It's important to keep reviewing the document and update it if new perspectives or characteristics come up.
Once the different users are defined, it's important to analyze how they feel as they navigate the platform. To do this, we need to build the customer journey(5), which is basically the set of interactions the user has with our product or service until they achieve something.
The simplest example of an interaction on a platform would be a user who wants to buy something online. The process would run from searching for the product to adding it to the cart, entering their payment details, and completing the purchase. At Deale, this interaction would run from the moment the user enters our platform and signs up until they match with a company, begin the Q&A process and upload their LOI. Building the customer journey(5) lets us put ourselves in the user's shoes and learn what frustrations they may have at a given moment, what they need, and how we can improve.
All these documents help us draw relevant insights(6) as we keep building our platform and providing the best possible service to our users.
Creation and brainstorming stage (brainstorming(7))
Once we have defined the user, their weak and strong points, their needs, and their frustrations, we move on to the first creation stage, where we build the different stages of the user journey that lead to the goal of the flow.
This is a key point in our process. Here we bring to life the value proposition we have been developing in the previous steps. Once we know all the views and features through which the user will interact with the platform, we can move through this stage with greater speed and fluidity.
At Deale in particular, we start working from the most abstract and general to the most specific and particular:
Our first goal is to create the wireframe(8), in which we define the navigation flow and content blocks, taking into account the position and behavior of the different components as a skeleton.
This stage lets us quickly build a structure of what we want the screen to be and identify and place its key points.
Implementation (UI functions)
This is the stage where we switch roles to UI functions*, where we begin to build more or less representative and interactive models that reflect the ideas from everything we studied earlier as UX designers.
However, the final product isn't developed yet. Before that, we move on to the stage of wireframes with high fidelity and prototyping, which gives us the flexibility to test the product with users in the early stages and detect content and navigation problems. This helps us:
In this process, we try to guide users as little as possible: we give them real problems and watch how they solve them.
Once the structural and functional aspects have been defined and tested, we move on to the stage where we solve all the problems detected in the previous stages and add the final visual finishes (UI design*) to help us deliver a good user experience.
Many points are taken into account during this stage, and in our case, for the platform to keep moving through its process correctly, we need close communication with frontend and backend development on every decision.
Once the designs have been validated by the entire product team, we hand the design over to development using our main work tool, Figma. This tool lets us close the gap between design and development, making implementation easier, so that developers can take on the proposed flow(1) and build the interface through code and logic.
Monitoring in PROD and metrics
Once the design has been delivered to the frontend team, we follow up together to make sure any questions that come up are resolved. If unforeseen cases arise, or questions come up when working out the logic, the design team looks for ways to provide a solution.
Once the product has been implemented, real users use it and interact with it. This is where we measure the events(9) we place in our journeys, to get visibility into how the product we designed is being understood. From there, we draw insights(9) and use them to return to the brainstorming stage, where we modify the design and create improvements.
What does our UI design work at Deale involve?
As mentioned earlier, we bring in UI design concepts during the implementation stage, where the platform's entire aesthetic experience is designed.
The functions we use as UI designers focus on the graphic and visual aspects of the interface, that is, all the elements that make up the flow and will be visible to the user.
When we talk about graphic aspects, we cover a range of features such as color, typography, sizes, layouts, structures, animations, and more. All of them are handled thanks to a large, well-organized library. In our case, Figma, our main work tool, is part of our day-to-day, and every project that comes out of Deale is designed with it.
Figma Deal
Besides letting all team members work at the same time, this tool lets us keep a library with all components organized and categorized (Deale design system*), and use them across different projects so they can be reused without having to recreate them constantly. This speeds up our workflow and prevents inconsistencies between designs with similar layouts.
Deale's design system
Deale's design system guarantees the consistency of our product. It helps with the user experience and shortens ideation, production, and development time. It is always evolving: we never let it stagnate, and keep it constantly dynamic to build a product that can scale and grow quickly in a controlled way.
In conclusion, at Deale we place great importance on offering an accessible, functional, practical, and visually clear interface. We make it our duty for users to want to stay on the platform and to be able to discover all its features quickly and easily. We also aim to present a clear, strong, positive, high-quality brand image in line with Deale's visual identity.
- Flow: A set of steps the user follows to achieve a goal.
- Research: Creative and systematic work carried out to expand the body of knowledge.
- User journey: Refers to the user's interactive experience, strategically built and designed to guide someone to a decision.
- Qualitative: There are two types of data: quantitative data, which give us a view of quantity (e.g., 44 people sign up on the platform each day), and qualitative data, which give us a deeper view of “quality” (e.g., users feel red is too aggressive to use as a brand color).
- Customer journey: The set of interactions a consumer has with an organization in the process of buying or obtaining something. In Spanish, the concept is sometimes rendered literally as “viaje del cliente.”
- Insights: An insight boils down to a finding, a conclusion, a piece of data, or a new path that had not been detected before and that becomes the starting point for working on new proposals, opportunities, and solutions.
- Brainstorming: Also known as an ideas session or idea storm, it is a group creativity technique whose goal is to generate new ideas about a specific topic or problem in a relaxed environment.
- Wireframes: Wireframes are sketches that visually and schematically represent the structure of a digital product. They can be made digitally or by hand. The important thing is to stay away from final visual finishes.
- Events: All the user interactions with our product that we can quantify. They give us visibility into how journeys and processes are being followed and whether the user is clicking where we want them to.
