Design Process at Techstack: 7 Steps to Create a User-Focused Product
Tags: tutorial, design, ux, product
Published: 2022-06-22 10:45:26

When designing a product, there are many critical things to consider: business goals, industry trends, competitor efforts, market specifics, and much more.

Still, the main point of attention here is the user needs that the product must satisfy.

In this article, we share insights into the Design process at Techstack: why it’s important to follow, what stages it consists of, and which ones we consider crucial in making a product successful.

## Design Process: What It Is and Why It Matters
A Design Process is the ensemble of actions a design team takes in creating a digital product (website, application, etc.). At Techstack, this includes interaction with stakeholders, participation in research, development, testing of future product prototypes, and analysis of results to implement upcoming improvements.

We consider the design of a product to be one of the key phases of its creation.

By building a [user-focused design](https://tech-stack.io/services/ui-ux-design?utm_medium=referral&utm_source=dev.to&utm_campaign=design_process) and testing its effectiveness, the team influences the success of the future product, which meets both users needs and business goals.

## How We Conduct a Design Process at Techstack
When working on the design of a product, the Techstack Design Team follows 7 main steps:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w9huhbisgm45qtig4li.png)

Let's take a closer look at each stage.

### Step 1 - Briefing
We start with a briefing, where we communicate with a customer to immerse ourselves in the main product idea and goals for its creation and to define the mandatory requirements.

In most cases, the briefing is conducted as a joint meeting with a customer representative, the head of the Design Team, the product owner, and other stakeholders.

First, a customer shares their vision of the product. Then, we conduct a Q&A session to clarify the most important points:

1. Who will be the users of the product? For whom this product is created and how a customer imagines the perfect user (age, gender, social status, etc.).
2. What user problems should the product solve? What problems and wants the user has and how the product should satisfy them.
3. What business goals should the product achieve? What business expectations exist regarding the future product (increased sales or brand awareness, winning a certain market share, etc.).
4. How will the product relate to the company's brand? What elements of the company's brand can be implemented in design  (corporate colors, icons, fonts, etc.).
5. What are the budget and timeline? What the design budget is and when a customer expects the final result.

Having collected all the necessary information and requirements, the Design Team analyzes it and estimates all the design process stages to present them to stakeholders.

If all sides agree on all points, the Design Team gets to work.

### Step 2 - Research
Before starting work on the design, we conduct research to delve into market conditions and end-users’ needs to make sure that the future product can meet them.

The research is carried out in 2 stages:

**Stage #1 - User Research.**
At this stage, the Design Team interacts with the potential users.
Depending on the goals, stage of the product life cycle, and available resources, we determine the methodologies that will be used for user research.
Surveys, focus groups, in-depth interviews, card sorting, etc. - these and other tools can be used to determine whether users really have the problems that were discussed at the brief stage and whether a new product can solve them.

**Stage #2 - Market Research.**
Next, the Design Team dives deeply into market and competitor analysis.
It is important to notice that competitors here are not companies, but products that have already solved similar user problems. Our goal is to figure out how well it is solved, and whether our product can do it better.

We consider the research stage to be fundamental in the entire design process.
It brings answers to critical questions - who real end-users of a product are, what real problems they have, whether a product can really solve them, and whether business goals really meet market conditions.

The research results are discussed with the product team and stakeholders. If necessary, the team together with the customer makes changes to the concept of a product to make it user- and market-focused.

### Step 3 - Design
After connecting the initial idea of a product to the research results, the Design Team proceeds to the building design.

This phase includes:

**1 -  Making User Stories.**
A user story is a text definition of users’ goals in interacting with the product.
Starting to work on the design, we describe several user stories about why the user needs the product and how the product can help them.
For example, a story for a user looking to rent a house might read: “As a user of a property rental site, I want to rent a house by the lake to spend a weekend with my family.”
An accurate description of user motivation at the earliest stage helps us to make the design as user-centric as possible.

**2 - Building User Flow.**
User flow is a visual framework that describes the user's entire journey - from the first contact with the product to the endpoint where the user's problem is solved.
At Techstack, we build a user flow as a flow-chart: the start here is the entrance to the site or application, and the end is the target action point (a button to buy, register, download, etc.).
User flow contains many possible paths that a user can follow when interacting with an application or site. The main objective is to develop a perfect path to reach the endpoint as quickly and easily as possible.

**3 - Creating Wireframes.**
A wireframe is a flow fragment sketch, a 2D image.
It demonstrates the logic of positioning elements such as buttons, text, images, etc., on a web page.
Using Figma, our Design Team draws wireframes for all product pages, and then discusses and adjusts the results with the team and stakeholders.
This allows us to make all possible edits before the next stages - design, development, release.

**4 - UI Design.**
Based on wireframes, the Design Team creates a complete product interface.
Color, fonts, scale, appearance, and arrangement of elements and text - everything here looks the way end users will see it.

How the product moves from low-fidelity wireframes to UI design can be seen in an example of creating a contact form interface for the Techstack website:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0rxl37ze9q2g72rjw82.jpeg)

When creating UI design, we are guided by principles of consistency and responsiveness. This way we improve the user experience and simplify the interaction with the product.

Near the end, the Design Team holds a meeting with a development team and stakeholders to clarify all the necessary details before transferring the product to the prototyping stage.

### Step 4 - Prototyping
Once the product design is approved, the designers create a prototype, a simplified version of the product.

The prototype may not contain the full product functionality, but should fully reflect its design.

Prototyping allows us to check how the product works in real-time and how user-focused it is.

Learn more about what prototyping is and what its main advantages are in the product development process here: 5 practical reasons to prototype.

### Step 5 - Usability Testing
Here, our Design Team passes the finished prototype for testing to simulate real user behavior within the product.

We offer testers various interaction scenarios, watch how they go through each stage, and collect comments - how difficult it was to reach the endpoint, what obstacles arose, etc.

Based on the testing results, we evaluate the success of the design, identify its strengths and weaknesses, and analyze errors to make the design better.

Constant iteration allows us to improve the design until it best suits the users’ needs. Once this goal is achieved, the design is transferred to development.

### Step 6 - Product Development
In this phase, the development team creates a full-fledged version of the product in accordance with all the specifications.

Here, our Design Team conducts UIT sessions with developers to verify that the design complies with the requirements.

After the end of development and the final review, the product goes through the testing and bug fixing stage, and then the product is released.

### Step 7 - Analytics and Improvements
After a product launch, we analyze KPIs to understand how good the design is at solving user problems and meeting business objectives.

Here we dive into users’ behavior - whether they follow the user journey and what obstacles they have.

For example, when analyzing the website effectiveness, we pay attention to:

- bounce rate. How many visitors left the site directly from the login page.
- duration on-page. How much time visitors spend on the site.
- the number of targeted actions. How many visitors have reached the final point of the user journey and done a targeted action (purchase, registration, download, etc.).

Based on users' behavior, as well as competitor efforts and market conditions, we build hypotheses on how the product can be redesigned to increase its effectiveness.

The most promising hypotheses are implemented and the design is updated.

## Summary
The success of a digital product depends greatly on how user-focused it is.

The more a product satisfies users' needs, the higher its popularity, and the more chances it will capture the market and stay ahead of the competition.

The design process at Techstack helps to build a design that meets both user needs and business goals.

We conduct research, build a user flow, and analyze interactions with the product to make it the way users love it.  If you want to improve your product with design, [contact us](https://tech-stack.io/contact-us?utm_medium=referral&utm_source=dev.to&utm_campaign=design_process) and we help you create a bold solution that drives transformative outcomes.