Chapter 2

Design Process for Pros — Intro & Set-up | Comprehensive Guide 2023

Kickstarting the design process

Design project management work starts much earlier than the moment you pick up a pen and paper. The actual beginning of the design process is marked by getting ready for your design requirements meeting with the client. By being prepared and professional during that first meeting, you start building a relationship. The reward for your professionalism is the client’s trust in your decisions. This, in turn, leads to superior outcomes because there’s better cooperation, more room for open and honest discussion, and greater acceptance of ideas.

In this section, you’ll learn the following about building a project design process:

What first contact with the client looks like
What questions you should ask during the design process
How to talk to the client
Questions that are frequently asked by clients during the design process
How to set up Google Drive and Figma

Project design setup: First contact with the client

Your first contact with the client occurs in two situations:

You’re participating in the design requirements meeting with a client (pre-sale)
You’ve just joined existing project and are starting to contribute

Below, we will focus on the design requirements meeting within the pre-sales phase.

Steps for gathering design requirement information before the first meeting

Ahead of the initial meeting:

Provide a list of questions via email before the first meeting with the client.
Ask the client to send back answers to the questions, which will help you prepare properly and make the first meeting more efficient.
Be prepared to answer any questions that the client may ask via email, emphasizing the benefits of working together on the project.
Spend time researching the potential project and gathering relevant materials and documentation that the client has sent.
Carry out due diligence on the client and their organization by researching who they are company-wise and studying the roles and backgrounds of the people you'll be meeting with. Use their website, social media channels, and general googling for information.

Questions your client may ask by email:

Client’s Question: Why do you want to know “x,y,z” before we meet?

Your Answer: It allows us to prepare better and have a more focused design requirements meeting.

Client’s Question: Why do you want to know about our business model?

Your Answer: It helps us work within your constraints and tailor the optimal design process and solutions.

Design requirements meeting: Three client types

During your first meeting with the client, you’ll notice there are generally three types of people, classified by their willingness to talk.

People who don’t speak: With this type of client, you may inadvertently guide them through the questions in such a way that you answer them yourself, and there’s a real possibility you’ll miss details, background thinking, motivations, and the main aim of the project. The best way to optimize interactions is by asking “why?” questions as much as possible. (See the “five whys” method).
People who speak on the subject: The easiest group to manage. Just listen, ask questions, write down the client’s answers, and gather the design requirements in the most efficient way.
People who talk about everything: To help build a relationship with your client, it can help to listen to their stories and anecdotes, but that tends to make the meeting inefficient. With that in mind, veer the conversation back on track to ensure you capture the client’s design requirements.

Tips for gathering design requirements during the first meeting

When the time has come for the first client meeting, you will discuss your design process, collate design requirements, and ultimately decide whether you want to work together. Our top tips for making this a successful interaction below.

Make a good first impression: The first meeting with a client is your opportunity to impress them and showcase your professionalism. Dress appropriately, stay positive, and act on behalf of your company.
Choose the right setting: If the meeting is not face-to-face, make sure to choose a quiet and comfortable place for the call, free from potential disturbances. Also, use your camera to establish a more personal connection.
Start on time: Being punctual shows preparedness and professionalism. Make sure to start the meeting on time and stick to the agenda.
Prepare an agenda of key points: Creating an agenda of key points will help you stay on track and keep the client focused.
Manage client expectations: Review the main subjects to be discussed during the requirements design meeting and identify potential risk areas. Set appropriate boundaries and outline what the client can expect from your design process services. This will build trust and make it easier to manage the project.
Don't make assumptions: It's essential to ask questions and gather knowledge during the first meeting. Ask the client what they want from the design process, but also question the status quo and provide expertise and value.
Understand the client's previous design process experience: Ask if they have worked with designers before, and if yes, what their experiences were like. If they haven't worked with designers before, educate them on design best practices and principles. Make sure the client understands the role of a designer during the design process.

Implement consultative and solution selling principles: A consultative sales process focuses on the experience the potential customer feels and sees during their first interactions with you. During the first meeting, focus on providing consultancy and expertise value rather than selling the solution they asked for directly.

Five principles of the consultative sales process

To describe the consultative and solution selling sales process in more practical terms, their five principles are listed below.

Research: Be prepared and learn about the client as much as possible.
Ask: Ask questions that start with the words: Who, What, Where, How, Why, and When. Avoid beginning with Do, Are, You, and Can, because those types of questions tend to lead to yes or no answers, which is exactly the response you don’t want.
Listen: Take in the client’s answers and don’t interrupt them.
Teach: As you actively listen, you also need to respond and look for opportunities to teach. Note: This isn't about selling your product or service. It’s about asking the right questions that help the client understand their challenges. It also involves communicating how you can collaborate with them to reach their goals via building a project design process that works for them.
Qualify: After talking to your prospective client, it’s time for both sides to decide about working together. Consider if they fit your company’s culture, beliefs, and philosophy, and if you’re able to offer design solutions to their needs.

These five principles provide a basic outline of the consultative and solution selling sales methodology, helping you optimize your initial contact with a prospective client.

Strategy questions for the design process

During the first requirements design meeting, alongside focusing on the client type and consultative and solution selling principles, there are some useful “questions to ask” guidelines to remember.

Start by asking general questions, making it clear what the design process and project will look like from the outset. Make sure everyone understands what’s agreed on. Below are our recommendations regarding questions to ask.

General example questions

Time and money:

What’s the indicative schedule?
What’s the basic scope of work?
What’s the indicative budget?

Client’s design process goals and motivations:

Why are you here?
What’s your motivation for change?
What are your roles/responsibilities?
What are your pains?

Company details:

Are you a mature company or a startup?
Who are the main contacts?
Who are the stakeholders?

Client’s assumptions:

What are your main assumptions?
In your opinion, what will make the product a success?
How does this project fit into your long-term goals?

Design process tools:

Can you grant us access to your analytics tools?
What can be automated or outsourced?
How do you test new features/ideas?

Business-related example questions

After gathering answers to the general questions, move on to more specific business-related ones.

Money:

What’s your main selling point?
What’s your money-making funnel?
How do you intend to fund your business in the future?

Business model:

What’s your business model?
What’s your strategy?

Business goals:

What are the targets you want to reach?
What’s your main short-term objective?
What KPIs would you like to achieve?

Market-related example questions

No company is an island; every industry exists in an ecosystem. Because of that, get to know as many things about your client’s competitors as you can. It’s also your job to educate the client about the importance of running market research. With that in mind, ask the following:

Do you run market research?
Do you have a niche, and if so what is it?
Are there similar product offerings or alternative solutions to the same problem?
What are people doing today instead of using your product?

Other requirements/laws/restrictions:

What country (or region) is the product to be launched in?
What language is the product to be designed in?
Are there any special requirements regarding the market to consider (for example, cultural or religious limitations)?

Product-related example questions

Now, after gathering general, business, and market-related insights, move on to questions that are directly related to the product or service you’re about to work on. Remember that to build value, the product/service must satisfy business and user goals. Ask the client:

Do you have a working product?
What’s your product’s value proposition?
What other touchpoints are valid for you?

User-related example questions

Building a product for the users and not solely for stakeholders is the key to achieving success. This is an important approach you should discuss and implement with your client. However, answering user-related questions is difficult because it requires a lot of research and empathy.

With that in mind, ask the client:

Have you run user research?
Who are the users?
What are their jobs, pains, and gains?

Visuals-related example questions

These are crucial, so don’t start the UI design without asking the following:

Do you have branding, a brand book, brand guides, a design system, design patterns, or a style guide?
Do you have a corporate identity?
Do you have any benchmarks/inspirations/visual styles in mind?

KPI-related example questions

Speak about the exact points you’re going to monitor. Remember that useful KPIs take into account business context, predict success, show early warning signals, and validate achieved results. Keep those factors in mind with identifying and creating tailor-made KPIs for the client.

Ask the client:

Have you discussed KPIs internally, and if so, what are they currently?
What would you like to achieve with your product?
What’s your definition of success?

Make sure you know how high you’re aiming at the start. Read more here: 12 Steps System for the Most Challenging Metrics and KPIs. Also, be sure to document agreed KPIs for current and future team members.

Questions to ask yourself at this stage of the design project management process

Have I asked the necessary questions?
Do I have the relevant answers?
Is the project card created?
Is the project structure created on Google Drive and linked to the project card?
Is all project info gathered in one place and accessible to everyone?
Was the design process explained to the client?

After the first design process meeting

After your meeting, write a design requirements update and send it to the client, summarizing the key points. The notes are mainly for you, so only write down the essentials – we suggest using bullet points to elaborate on later (if necessary). Agree on next steps and what needs to happen for you to start the design process together should you both decide that’s what you want.

In addition, thank the client for taking the time to meet you, and reassure them that you’ll be in touch if any issues arise. Encourage two-way communication by asking them to contact you when there are any questions.

Output at this stage of the design process

By this point, you should have a clear idea of the following:

Client’s business goals, needs, pains, and expectations
Client’s competitors, plus information about their jobs, value proposition, and innovation aspirations
End users and their needs, goals, pains, gains, and jobs
Project’s challenges and restrictions

Explaining the design process

Once you have a client on board and you’re ready to work on the design process together, what next? Start by explaining your design process and what the client can expect. With that in mind:

Educate the client

Product design is a process that includes iterations, resulting in the improvement of the product or service. The final version is complete when the client's and users’ goals are achieved.
Design is about how things work, not only about how they look. Educate the client about your role and expectations. Establish design process boundaries and expectations at the outset. Check the article “Hiring a UX Designer: Overcoming Doubts and Finding the Right Fit.”

Avoid multi-platform designs at the early stages of the project. If the client needs a multi-platform design, ask another designer for help. If you believe the scope is big enough, always suggest a design team. Learn more from “Design Team Structure: Key Factors for Successful Product Design Collaboration.”
Emphasize that it’s impossible to predict users’ behavior accurately. Instead, let the client know you rely on research and available data – the validity of a solution can only be assessed with relevant tests.
You cannot guarantee business success. Make it clear that even the best product design doesn’t guarantee a product’s success in terms of revenue.
Give a quick overview of the Product Design phases.

Milestones and priorities during the design process

What else do you need to consider throughout the design process? Prioritizing is essential, as is building milestones into the project. Therefore, keep the following in mind:

Make sure the client has a reasonable approach to the creation of an MVP. We recommend keeping the scope small.
Make the client aware of the importance of a step-by-step approach in terms of functionalities.

Communication tips during the design process

Throughout the design process, clear communication is key. Below, we outline a list of general tips to keep at the forefront of your mind during the design process.

Be active, not passive – recommend solutions.
Listen to the client’s expectations; don’t be afraid to ask questions.
Consult solutions with your developers from day one.
Make sure you explain how to use your chosen communications tools to the client.
Gather all the Figma links in a handover doc and share it with the client.
Know the benefits and outcomes of your work.
Gain the client’s trust – they care about your opinions.
Every decision you make must match the business goals of your client – always and unconditionally.
Use the structure: What you did, how you came up with it, and why you did it/how it helps the client’s business.
Display certainty in your decision-making by being confident, talking about the “whys” of your design, and using data to back up your points.
It’s much better to present a small number of excellent arguments than flood the client with dozens of mediocre ones.
Adjust your language – don’t use jargon.
Be smart in meetings: Ask about things that are important to the client.
Be sure to set clear goals regarding what you want to achieve.
Review the Business Model Canvas for inspiration to collect your thoughts.

The importance of client feedback during the design process

During the design process, regular client feedback is invaluable, helping shape the project while maximizing its chance of success. With that in mind, consider the following:

Does the client have enough time to give you feedback? If not, ask which active stakeholders can actively participate in the communication.
Make the client aware of the value of an active and collaborative approach around feedback and communication.
Make sure there’s only one point of contact for feedback on the client’s part.
Ensure you have an opportunity to present your solutions to all stakeholders.
Make sure the client knows you value constant feedback and an iterative approach, rather than a fixed number of reviews.

Design files organization

This section is more practical, presenting the way we organize our files and folders by default. Of course, our preferred structure is only an example, so organize your files and folders in a way that suits you best.

1. Setup

When we start a new project, we create a Designer Google Drive folder in the client’s main folder. Then we create the Team account in Figma with all the projects, and give permissions to the team members: designers, developers, reviewers, and necessary stakeholders.

2. Structure of the Designer Google Drive folder

2.1. Sources

Each folder (Visual and Wireframes) contains all source files (.psd, .fig, .sketch, etc.). It depends on the project, but if we have multiple file sources, we create subfolders for each .psd, .fig .sketch file, or any other extensions.

2.2. Fonts

In this folder, we put the fonts we’ve used in the project, even if they’re free. They’re grouped by font name as follows:

2.3. Documentation

IMPORTANT! At the end of a project, we create a list of every screen, with URLs to particular screens and prototypes in Figma, broken down by platforms, breakpoints, and so on.

In this folder, we upload documents related to a specific design project – personas, user stories, etc.

We also create an Initial interview subfolder, containing the most important data collected during the initial interview, materials sent by the client, and scoping session notes related to the design phase of the project.

3. Figma file setup

Taking care of your Figma file setup at the early stages helps you avoid chaos and clutter later on as you add new frames, components, and pages. Having a common ground in this area makes it easier for all members of the product design team to jump between projects. It also saves time, during handoff to developers or the client.

3.1 Set up a thumbnail

With a lot of projects, it's really useful to set up a cover for each one.

Prepare a frame with the dimension 400x240.

Add key information to distinguish the project from others, including name, team name, tags, etc.
Right-click on a frame → Set as a thumbnail.

Example of a Figma file thumbnail

3.2 Organize your pages

Below is our recommended page structure, making your files better organized:

Thumbnail: Clear and concise cover for your file.
Project info: A page where you keep a handful of useful information about the project.
Design: Latest UI designs that you’ve prepared. If the project is already approved by stakeholders and you’ve started working with developers, name it “Ready for Development.” Keep older and alternative versions on a separate page named “Previous Versions.”
Wireframes: A space for low-fidelity mockups.
Discovery: A place for mood boards and other outcomes related to the discovery phase. If you create large mood boards, this page can make the entire file heavy. In that case, it’s worth considering moving the discovery page to a separate file.
Local components: If you need to create components outside of an external library, it’s worth creating a separate space for this.
Archive: A page for older and alternative versions.
Exploration: A place where you can work on drafts.

Depending on how big the project is and what the design process looks like, add additional dedicated pages – for example, prototypes with flow animations, information architecture, competitor analysis, etc. You can also use blank page dividers to keep them visually separated (see the example below).

Example of Figma pages structure

For larger projects, consider creating separate pages for other aspects like epics, issues/tickets, iterations, etc. However, don’t go overboard with the number of pages within a single file. Sometimes, it’s better to split your file into smaller ones, for the following reasons:

Each file has its own history version, which is useful to retain.
Larger files take more time to load.
Working on larger files may slow your computer down.
There’s a memory usage limit on every file: 2GB. However, hitting that limit is something you should avoid.

3.3 Create components

Ok, the basic setup is ready; it’s time to start designing.

Basically, every design process file has recurring elements. If something repeats at least once, it's a sign to create a component. This may appear to slow down the creative process, but when you’re about to expand a project, it makes it much easier and faster to work on the next iterations.

Be sure to name your components recognizably – this makes searching for them more convenient later on. The easiest way to find your components is to open the assets tab in the Figma panel on the left.

Tips and tricks for managing components during design project management

Read on for ways to take your component game to the next level:

Place similar components in one frame (for example, buttons) and name this frame descriptively. That way, you create a distinct asset group for your components that’s visually separated in the panel on the left.
If your master components are placed on different pages, that makes the division visible in the assets section. However, consider keeping all master components on one page to keep track of them.
Use the “forward slash“ naming convention to create an organized hierarchy for your components. For example:

button/primary/large
button/primary/medium
button/secondary/large
button/secondary/medium

Use multiple variants. Do you have 100 button types in a single Figma file? If you name them according to the “forward slash” convention, you can easily turn them into one component with multiple variants. Thanks to that, adjusting a single button in a project is much easier. Learn more in this well-explained video: Figma Tutorial: Variants.

3.4 Naming and using styles

Styles allow you to maintain file consistency. Their strong advantage is you can adjust properties like font sizes or colors in the entire file, all at once.

You can create:

Color styles for fills, strokes, text fills, etc.
Text styles
Effect styles such as shadows, inner shadows, borders, directional borders, etc.
Layout grid styles

The “forward slash” naming convention for grouping

The “forward slash” naming convention for grouping also works great here. Example: background/light grey, background/white blue

3.5 Layers naming

If you name your components and styles appropriately, you're on the right track. What about the other layers?

First of all: DO NAME YOUR LAYERS. Please! And not just the ones at the top: All of them!
Adopt one layer naming convention and stick to it in the file. We recommend naming your layers using Title Case (as opposed to “Sentence case”, “CamelCase”, etc.).
Remember that the way you name your layers is also important. Good examples include:

When you create a Button with a text layer inside, make sure you name the text layer a “Label.”
When you create an Input component with a placeholder text, name the text layer “Placeholder.”
When you create an Input component in a filled state, name your text layer “Value.”

3.6 Working with shared libraries

As your components and styles grow, it's worth ensuring that from the very beginning, there’s a dedicated space for their storage and documentation. The best place to do that is a shared library.

All you need to do is prepare a file where you collect your components and styles in an organized way, and then publish it as a library. Now you can enable the library in all project files and start using it.

When you update the library, all component instances in the design files can be updated (or rejected if necessary) with a single click.

For big projects (or products), you may find it useful to have multiple libraries instead of one. On the one hand, maintaining more than one library requires more work, but it also facilitates scaling and working in a larger team.

Example of a design style guide in Figma

We’ve outlined a set of guidelines and recommendations, rather than rules that are written in stone. File organization depends heavily on a project’s size, feedback loop, and progress. Always remember to organize and maintain your files, so that if you hand a project over unexpectedly or a new designer joins, you won't have to spend hours cleaning up a disorganized structure.

Design process guide

The design process involves many steps, starting with a project's introduction and setup. Within that are multiple phases, from communicating with a client and getting them on board to preparing for your first design requirements meeting and setting up your project design in Figma.

As you move through this stage of the design process, there are a host of pointers to keep in mind, including our “questions to ask” guidelines, focusing on the client type, and implementing consultative and solution selling principles. Clear communication throughout is key, whether it's explaining your design process and what the client can expect or establishing design process boundaries and expectations.