How the Design Process Helps Develop Insurance Products for Qatar and the UAE
In this article, Alex Andreev, Lead Product Designer at QIC digital hub, will discuss how a comprehensive ‘end-to-end’ design process is established in a large company. The article will be useful for designers interested in structuring processes within a large company, as well as for product managers and design teams.
By the end of the read, you will gain an understanding of how designers at QIC collaborate within product teams to achieve an efficient design process for large digital products or features.”
What is the design process, and why is it necessary?
The design process plays a significant role in a product company because the outcome of developing an individual feature or an entire product depends on it, among other things. A well-structured design process helps simplify development and design, starting from the concept phase and ending with post-release metric analysis. Additionally, it reduces development costs and time to market, while enabling product designers in UX/UI to achieve high-quality work through close coordination with the product team.
In-Depth Analysis of the End-to-End Design Process
In our team, we use an end-to-end design process — designing the design from the inception of a task/problem/idea to release, and post-release refinements based on metrics or user feedback:
With this approach, the designer is deeply immersed in the product and can address tasks more professionally, as they have a much better understanding of the specifics of how the product operates.
Let’s go through the stages of the design process step by step:
1. Prepare — forming a precise understanding of the problem or task that we will be solving.
2. Explore — rapid prototyping of the solution and discussing it with stakeholders.
3. Detailed design — creating a detailed design in its final quality, taking into account all user interaction cases with the interface.
4. Copy review — checking and editing the text in the interface.
5. Developers hand-off — discussing the design solution with developers.
6. Design review — reviewing and providing feedback on the implemented solution in a testing environment (from the perspective of designers).
1. Prepare
The preparation and task-setting stage (Prepare) is one of the most important because it is crucial for a product designer to have a precise understanding of the problem they will be addressing. Otherwise, they may propose a solution that is irrelevant to the business needs.
To avoid this, we use a specific template for task briefing in design, allowing the product team to describe the essence and scope of the task/problem, as well as the criteria for success.
Additionally, the designer can discuss the task with the Project Manager of their team to ensure clarity or provide additional context.
If your company has a UX Researcher, it may be worthwhile to request relevant findings from previous research/testing at this stage to use them in the current task and build an argument for your solution.
Regarding metrics, it’s important to consider working with metrics at this stage.
Similar to interacting with a UX Researcher, it’s beneficial to study and apply the most basic metrics to your task. This is a significant advantage because you can rely on data rather than subjective decisions. Here are just a few of them that we consider in real-world tasks:
- CR — Conversion Rate
- Session Duration — Average session duration on the site
- Scroll Map — How deeply users scroll on a page, what content they see
- Heatmaps — Where users click in the interface
Unfortunately, it’s not always possible to use metrics due to technical limitations in products. However, you should strive to justify your design decisions based on metrics whenever the opportunity arises.
2. Explore
During the Explore stage, a product designer creates a low-detail solution in the form of wireframes and information architecture in the form of data, if it’s a significant feature/product. This allows us to see the entire user flow. Our goal is to view the product through the eyes of the customer and consider all scenarios of their interaction with the product or feature:
We also gather references from other products and use them as benchmarks. Among them, we often find ready-made good solutions that can be scaled to our product.
Once everything is ready, we validate the results with the Project Manager and/or developers, and sometimes this can be done in parallel. Sometimes, the Project Manager makes adjustments to the wireframes, but in general, developers can already provide a preliminary assessment of the scope of work, technical limitations, and implementation timelines.
3. Detailed Design
When the product designer has preliminarily discussed the interface logic and considered all the development nuances from the ‘Explore’ stage, it’s time to move on to the next stage — ‘Detailed Design’.
It’s at this stage that the designer visualizes the interface in its final state, including error cases such as 404 pages, data loading errors, form validation, ‘empty-state,’ and more:
The designer works on the interface using highly realistic content such as names, surnames, car models, etc., to pre-plan the interface narrative with the user and test the correctness of design system components. For example, the issue of component overflow and size often arises due to the large volume of text, causing the interface to ‘shift.’ This is most noticeable in cards, navigation, and text cells. Such cases should be anticipated by the designer and corresponding changes made.
If there is a UX Researcher in the company, it’s also advisable to provide the interface in the form of an interactive (clickable) prototype for moderated usability testing, to get feedback from respondents before handing over the interface for development. If this option isn’t available, it’s worth conducting at least ‘hallway’ testing to identify critical errors in the interface logic. Often, at this stage, errors in the product’s navigation can be found. This is a good thing because you can immediately adjust the solution.
In the end, the final design is approved with the Project Manager, who may accept it immediately or send it for revisions. Discussion of the design solution can take place in the form of a presentation if it’s extensive, or as a link to Figma within Jira.
Sometimes, after approval, we make several design iterations, and when everything is agreed upon, we move on to the next stage.
4. Copy Review
At this stage, our Content Designer reviews the text in the interface for text narrative logic, as well as compliance with corporate guidelines and tone-of-voice. The Content Designer edits the text if necessary. Sometimes, they may be involved in the ‘Explore’ stage, but it’s optional and depends on the scale of the feature or product:
Sometimes, the Content Designer looks at the screen and says, ‘You can’t solve this problem with text here; you need to show a different state or position the elements differently.’ If it’s a well-founded decision that will improve the user experience, we revise the design in that area (making sure to coordinate changes with the Project Manager and developers).”
4. Developers Hand-off
At this stage, the designer presents the entire development flow to the developers. This stage partly replicates the review conducted by developers at the ‘Prepare’ stage but in more detail. The designer examines each screen throughout the flow, including all interface details such as spacing, text, and more. Attention is paid not only to the interface’s logic but also to its design (UI) and animations, if present.
It’s also important for the designer to consider the following aspects at this stage:
- Prepare the Figma file for handover to development. This is a topic worthy of a separate article, but briefly, it’s essential to present all screen states clearly, including error and empty states, in an organized manner on the page.
- Clean the Figma file of unnecessary elements, such as blocks, sections, and outdated design variations. Their presence can confuse both developers and designers. You can move such elements to a separate page within the file, which you can name ‘Draft’ or ‘Archive.’
- Verify the components’ connection to the design system or UI kit. This helps minimize the need to create custom components. Of course, in real tasks, there are situations where you need to revise or refine a component. In such cases, we detach it from the design system and make the necessary changes. The frequency of such situations will depend on how well the design system in your company covers all the interface component needs.
5. Design Review
The design review stage deserves special attention because this is where potential discrepancies can be identified and the final solution can be refined before its release. The product designer carefully examines the implemented interface in the testing environment prepared by the developers and provides feedback in a convenient form. This typically includes screenshots in Figma or textual descriptions in Slack.
The design review stage usually consumes a significant amount of time as it precedes the release. Therefore, it is critically important to identify and rectify all possible errors to make the product as close to the intended design as possible. The designer usually allocates at least a day for this stage.
The designer evaluates not only the alignment of the product or feature with the mockups but also its functionality, ensuring that everything works smoothly and identifying potential improvements. The number of necessary iterations may vary depending on the complexity of the task.
In conclusion, when establishing a design process in your company, start with:
- Gradual development of each stage. Don’t tackle all aspects at once; start with something specific, such as improving the ‘Prepare’ or ‘Explore’ information gathering process. When this stage becomes successful and well-established, move on to metric analysis. It’s important that each subsequent stage builds upon a solid foundation created in the previous stages.
- Configuring metric analysis. This aspect is important because based on metrics after the product or feature release, you can prioritize tasks and structure the design backlog.
The success of the design process depends on your specific goals and the feasibility of its implementation. Approach this matter with a focus on facts and the current situation to achieve the best results.
Lead Product Designer at QIC digital hub
