Design Process GDE.design
A design process by gde.design is a set and sequence of performing design tasks necessary to achieve the best possible product design results. Today we will share our design process with you.
Is there a single standard for the design process?
The short answer is no.
Each studio has a unique design process. They can vary in the number of steps, their order, duration, different specialists involved, and other essential details. All of them have only one thing in common — the concept of Design Thinking.
These are five crucial steps that will be repeated in a circle until we come to a good result — Empathy, Define Problem, Ideate, Prototyping, Testing. Each step’s content and duration differ even within the same company from project to project and from one iteration to another.
Is this process discrete?
For sure, it’s not. Discreteness implies a clear end of one stage and the beginning of the next one. In the case of design thinking, the steps are superimposed on one another.
Is it linear?
No.
The more times we can go through the cycle “Empathy-Define-Ideas-Prototyping-Testing,” the better the design solution is. Increasing the number of cycles makes the process more expensive. In the middle, we in gde.design came up with five iterations for the average static project. About five times, we go around in a circle, checking if our ideas are good, and each time we do it at a different level of immersion. For example, during the first circle, we test only the verbal representation of an idea. On the next ones — options for its schematic representation, and on the last one — a ready-made software product. Each circle begins with a new list of problems and ends with testing solutions.
What determines the structure of the design process?
Many factors do. From the nature of the project carried out by the team to the line-up. We at gde.design primarily focus on working with startups. Therefore, our design process is a squeeze of product and service design’s best practices, multiplied by experience in working under tight deadlines. We took the fastest and most effective techniques, built them in the correct order, and enlisted experienced specialists’ support. These steps look like this:
- Discovery
- Brainstorm session
- User Flow
- Wireframes
- UI
The result of each of these steps is artifacts — documents that solve the essential tasks of each stage. Let’s consider how we go through each set we create and what we get in the end.
1. Discovery
The Discovery phase in our design process covers 1.5 steps of design thinking — empathy and partly problem definition. We collect as much data as possible about the product and study how our client sees the problem. Sometimes, clients provide us with the Ideate part — how they see the solution. And also, with the prototype — as they already decided and even have the results of the initial Testing.
A designer is a specialist who cannot just sit down and immediately draw the right product. He needs to cover all parts of the product life cycle at once, starting from creating an idea for your business to its implementation, reincarnation, and even disposal. The designer asks how you are going to benefit from this startup. He is interested in your target audience and lifestyle, studies your competitors, your business goals, and plans to develop a future project. All this is necessary for him to immediately implement in the design to fulfill all the required tasks.
This stage does not take us too much time, and it does not cost too much money for the client. We involve the client in this process as much as possible. He knows his business and his customers well. As a result of our joint work, the following documents appear:
1.1 Vision
Vision is a powerful yet simple tool for understanding your business. Below you can see a canvas spreadsheet of 12 simple questions that describes your product from all angles such as Users, Marketplace, Solutions, and Business Goals. Earlier, we tried to apply Business or Linen Canvas, and in the end, we came to Vision, as it does not contain anything superfluous. The client fills it in — independently or with our help.
1.2 Persona
It is also crucial for us to understand the target client — his goals, pains, everyday tasks. We go through this stage with the client together. It’s good when the customer himself knows his target audience. Otherwise, it is necessary to carry out rather expensive research to determine it.
1.3 Competitors Matrix
You probably know a little more about your direct competitors than UX designers do, since you are more familiar with the subject area. Moreover, your USP will directly depend on who is fighting for your target client. In any case, we need this list to indicate which elements are useful and which are not. For this, there is a matrix of features. In it, we note what your competitors have done well, what is ineffective, and what is essential in your opinion they do not have. At this stage, we also conduct competitive analysis ourselves.
Additional Discovery Stage Artifacts
1.4 Use cases
Additional documents are what the client may or may not have.
It happens that a client comes to us with a ready-made vision of the functionality. In this case, we ask him to tell him about it using Use Cases.
Use Cases already tell us in detail how the interaction with the product will occur in the client’s opinion. In this case, we not only figure out how to solve the client’s pain but also check the validity of existing solutions.
1.5 Testing Existed Prototype
About half of our clients come to us with a working prototype already created and ask us to improve it. It can be a template created in design programs, or it can be a software product. Our task is to analyze it and find all the artifacts that we will be working with. Usually, for this purpose, we test a prototype, then lay out the application screens on the screen map and leave our comments on it, so that we can discuss it with you later. If the prototype lacks some functionality, we supplement them with Use Cases.
Usually, this is the end of the first circle of design thinking — by testing use cases, prototypes, or analyzing competitors’ products, we are essentially testing the idea for ourselves. We note what we liked or caused intense frustration, what we should pay attention to.
It is an essential part of the design process. Some companies only hire us to carry out this phase. To analyze an existing product and identify their vulnerabilities. If you need our expertise in this area, you can hire us, or use the calendar to schedule a call.
2. Brainstorming
Our task here is to combine the second part of the Define Problem stage with the Ideate stage. To do this, we study all the artifacts provided to us at the last step and collect a brainstorming session. As a result of this session (it lasts a maximum of 1.5–2 hours), we get two documents
- Decision Matrix
- Priority Matrix
2.1 Decision Matrix
Here is a table where we enter all the ideas related to solving users’ needs identified earlier. We can come up with solutions ourselves and partially borrow them from competitors, taking into account their mistakes. We evaluate each feature on a 10-point scale according to two parameters — the effort required to implement it (Efforts) and the impact that this feature will have on the user’s problem. The first indicator helps to evaluate the developer and ourselves. The second is understanding the target client and Kano’s method.
2.2 Priority Matrix
This tool helps us prioritize features. It is not hard to guess that, first of all, you should implement those features that have the most significant impact on the user’s problem at the lowest implementation cost. To see this clearly, we display the Influence and Effort metrics on a 2-dimensional chart — the Priority Matrix. Thus, it costs us nothing to divide the features into 2–3 groups. The first will include elements for the first release. Second and further — features for later releases.
During the brainstorm session, we test many ideas for strength. Therefore, here we are going through the second circle of design thinking. As a result, we eliminate less useful product functions and leave the most significant ones.
3. User Flow
3.1 User flow diagram
User flow is a schematic description of user experience in the form of UML diagrams and low-fidelity screen prototypes. The main goal is the optimal interaction scenarios, test them, and choose the optimal ones.
The User Flow stage is when we smoothly move from the emphasis to the Ideate stage to Prototyping. Why smoothly? The point is that User flow is a powerful tool for UX creativity. We can test multiple solutions for each event branch without spending a lot of time on it.
Some clients ask us to skip the user flow stage to start a high fidelity prototype immediately. This mistake could cost them much in the future. What can take 15–20 minutes to fix at the user flow stage turns into hours, days, and even weeks of work at later stages.
Additional artifacts
Depending on the project’s complexity, several additional documents may also be required at the user flow stage.
3.2 Data Model Diagram
It is needed when the project has many data, and it is challenging to keep them in mind. The data model helps to structure entities and understand what kind of hierarchy exists between the data.
3.3 Service Blueprint
This artifact is rarely needed since it describes a product with two interfaces — user and service- and interact in real-time. A good example is Uber, the driver-passenger interface. In this case, the service blueprint allows you to find all the involved segments of this interaction and optimize them even before you start developing the interface.
Here is where the third circle of the design process usually ends. User flow allows us to test the product by moving across all screens. We do this together with the client, discussing all errors and disagreements. At this stage, new features often may appear, and we cut off the lower priority ones.
4. Prototyping
4.1 High Fidelity Prototype
A highly detailed prototype is essentially a finished app that lacks color and final design. At this stage, we create and test the following artifacts
- Microinteractions
- Text data
- All possible states of components
- All possible transitions between screens
Customers’ widespread mistake is the suggestion to skip the highly detailed prototype step and go straight to the design. Yes, this is the right solution when you have a few pages and little data. However, it is sad to realize that the product you come up with does not contain all the data that needs to be displayed or violates usability. In this case, it is essential not to forget about this pyramid:
Thus, data and usability affect the design, not the other way around.
We have extensive experience developing “design without design” — when the first task is to create more meaningful, fundamental architectural solutions. If your product has UX vulnerabilities and you would like not only to find but also to solve them — hire us or use the calendar to schedule a call, we will be happy to help you.
4.2 Clickable and animated prototype
You can assess many decisions only over time. That is why we do both a clickable prototype — with basic animation and a prototype with complex animation of UI elements. If the product requires it, we will recreate the interface animation as it appears in the final design.
This stage ends with user testing, involving potential users of the product. Quite often, such a prototype is so close to the needed design that the client can use it as a finished product. This stage completes the fourth iteration of design thinking.
5. UI design
5.1 UI Design Concept
Before we “draw prototypes,” as customers sometimes mistakenly call it, we must seriously take care of the product’s correct perception. Color, contrast, typography, composition — all these parts of the design significantly impact the user in the first seconds of interaction with the product. The appearance of the product determines how many users do not leave it and start using it. It should support and complement a good UX that users will appreciate later. Therefore, we turn to our original user, competitor, and product data to create a user-friendly design on the one hand, and a memorable one on the other.
We create several pages of the layout, the most frequently visited and complex one. We test visual ideas, show them, evaluate the reaction.
5.2 Full UI & Design System
After the design is approved, we scale it to the rest of the product.
If the product is large enough or we plan further expansion, one more additional artifact is often required — a design system. A design system is a design arranged in templates and rules. Rigid enough to maintain consistency and uniformity of the product, no matter how large. And they are flexible enough to implement any number of product functions with their help.
Sometimes a product lives for many years and grows to such an extent that some parts are not like others. Also, functionalities appear that duplicate one another. In this case, you need to create a holistic design system that will help unify the design, make it morу consistent. You can hire us for this work or schedule a call.
Additional artifacts
5.3 Branding
Branding is product recognition. Without it, it is impossible to create a correct UI, since one of the UI tasks is to be remembered by the user. In some cases, clients come to us with a ready-made UI. In others, we provide such a service. If there is no corporate identity yet, we need to develop it BEFORE the UI stage begins.
5.4 Illustration
Most modern interface areas if faceless — equally light (or dark), with minimum graphics. Why is that? Because good design is the design that we don’t notice when we solve our problems with its help. But how can you solve the problem of product memorability? How to stand out from the competition? Even if the use of the corporate color is questionable. The answer is to show your brand where the user expects a system response or faces empty states. Here is the place for branded graphics — blank states, preloaders, loading screens, and tours. We have a team of professional illustrators who can complete this task at A +.
The final, fifth UI testing helps assess how the design helps support the user experience and creates a mood for the user. Each stage of Testing is about finding errors that we could miss in the previous steps.
To know more about how we work or to hire us, please use the calendar to schedule a call.
