Design Process For Pros
01

Project introduction & setup

Introduction

Your work begins much earlier than the moment you pick up a pen and paper. Preparing for the first meeting with the client marks the actual beginning of a design process. By being prepared and professional during the first call, you start building a relationship. The reward for your professionalism will be big: the client’s trust in your decisions is at stake here.

In this section you can learn:

  • What questions to ask a client before and during the first meeting.
  • Communication tips: how to talk to a client.
  • How to setup Google Drive/InVision asset folders.
  • Questions most frequently asked by clients.

Stakeholders

  • Client
  • Designer(s)
  • Business Development Representative
  • Project Manager
  • Developer(s)

Kick-off meeting checklist

Before the first meeting with the client:

Together with the Project Manager, organize a meeting and collect all the project info. Ask the PM, BD, and devs – don’t make the client answer the same question twice. Things you need to know:

  • Does the client have a working product?
  • Does the project have a clear scope?
    • Y/N (at this stage, the project should already have a scope; otherwise, you need to run a Scoping Session)
  • Is the project idea ready to be turned into a design?
  • What platform will it be designed for?
  • In the case of web design: will it be responsive?
  • Will it be developed by our team?

First meeting – explaining process to the client:

  • Educate the client
  • 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 that the scope is big enough, always suggest a design team. Learn more from: Why a Team Approach Is the Key to Successful Product Design
  • Emphasize that it’s impossible to predict users’ behavior accurately We rely on research and available data – the validity of a solution can only be assessed with relevant tests.
  • We cannot guarantee a business success Try to make it clear that even the best product design does not guarantee a product’s success in terms of revenue.
  • Give a quick overview of all the Product Design phases

First meeting – get some info from the client:

General info

  • What is your deadline? (design/release date)
  • What will make the application a success in your opinion?
  • What will make our work a success in your eyes?
  • Have you collected any user feedback yet?
  • Can you grant us access to your analytics tools?
  • Are there any similar products or alternative solutions to the same problem? What are your potential customers doing today instead of using your future product?

Questions specific to UX Review:

  • On the call, try to establish the scope of the review:
    • The narrower, the better – a more focused scope is superior.
    • Try to get to know the client’s requirements and expectations for the review.
    • Try to get to know what user journeys are key to the client.
    • In a perfect scenario, narrow down the scope to just one.
  • After the call, discuss the client’s requirements within the team and ask the team about possible blockers.

Visual:

  • Do you have a branding, brand book, brand guidelines?
    • If not, give a heads-up about the importance of those in the later phases.
  • If the client wants to use corporate fonts in the UI, be sure they own a web/mobile licence.
  • If you suggest an alternative paid font for the UI, be sure that the client is open to buying a licence.
  • Does the client have any benchmarks or a visual style in mind?
  • Does the client have the source files for the old designs?

Make sure that all answers are documented and available for other team members – both current and future.

Communication tips

General rules:

  • Be active, not passive – recommend solutions.
  • Listen to the client’s expectations, don’t be afraid to ask questions.
  • Consult your solutions with the developers from day one.
  • Make sure you explain to the client how to use communication tools e.g. comments in InVision; explain the difference between tour-points and comments

Feedback

  • Does the client have enough time to give you feedback? If not, try to ask which active stakeholders can actively participate in the communication.
  • Make the client aware of the value of an active and collaborative approach (feedback, communication).
  • Make sure that there is only one final point of feedback on the client’s part.
  • Make sure that you will have an opportunity to present your solutions to all stakeholders.
  • Make sure that the client knows that we don’t work on the basis of a fixed number of reviews but rather in a constant feedback-and-iteration mode.

Previous experience:

  • Has the client worked with designers before?
    • If not, try to educate the client on the best practices and basic principles of design during your meetings.
    • If yes, what are the client’s experiences of working with designers?
  • Does the client understand the role of a designer?

Milestones & priorities

  • Make sure that the client has a reasonable approach to the creation of an MVP (keep the scope small).
  • Make the client aware of the importance of going step-by-step in terms of functionalities.

Why is it important to sell the outcomes of your work?

  • By selling yourself or your work well, you gain the client’s trust in your decision.
  • When you hesitate or don’t know the “whys” behind your design decision, you scare clients off.

Must-haves when communicating with a client:

  • Know the benefits and outcomes of your work.
  • Gain the client’s trust – they will care about your opinions.
  • Your client’s future often depends on you, your decisions, and your work. Everything you do serves to convince them that their business is in good hands.
  • Don’t ask basic questions to which you can easily find answers on Google.
  • Every decision you make must match the business goals of your client – always and unconditionally.
  • You can use the structure: [What you did] + [how you came up with the thing you did] + [why you did it/how this will help the client’s business]
  • There are no maybes – there is confidence. Be absolutely sure about your statements.
  • Speak about the “whys” of your design and how your work will improve your client’s chances of achieving success.
  • Don’t talk about the things the client can see on their own. Say it this way: “This element is placed here because it will help X achieve Y/with Z”.
  • Use data. Whenever you assume something, base it on best practices, behavior studies, and statistics.
  • 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.

Gathering feedback

We use InVision at Netguru as the main tool for gathering feedback on each iteration and for keeping all comments in one place. Check out how it works. We also have a dedicated process to get more precise feedback from other designers within our team.

From Teammates

Remember that if you have any difficulties with your design, you can always ask other designers for feedback. It’s also important to share your solutions with the team before sharing them with the client. With this approach, you can improve your designs, spot bugs or logic issues in your solutions or, alternatively, read people’s praise for you and collect thumbs-ups.

  • Just go to your team (use messaging apps or simply talk to them), share a link to your designs and ask for some help, opinions or comments.
  • Ask another designer for a review.
  • If you are not sure whether you can spend more time preparing dedicated designs, ask your PM if you have enough resources/time/money to develop such features.

From the client

Gathering feedback from the client is the key to a successful project.

  • Ask for the feedback you want to receive.
  • Add designs to the project and share a link with the client. The best way to go is to always keep links to your designs in a project management tool, e.g. Jira.
  • Ask whether the client knows how your tools work or just guide the client through the process of adding comments to designs (mentioning a user’s name when adding a comment will send an e-mail notification – recommended).
  • Reply to comments and mark them as resolved.
  • If something is unclear to you or the client, try to explain until everything is crystal clear to both parties.
  • Preparing clickable designs (links between views) will enhance the client’s experience.
  • Stay in touch with the client. Send the client up-to-date links to the designs and give progress updates. Last but not least, ask the client about the feelings and emotions that the design evokes.
  • You get in touch with the client to present your designs. Sometimes, you need to sell your vision or just present the bigger picture behind your designs.

Design files – organization

This section presents the way we organize our files and folders by default. Of course, this file structure is only an example, and you might want to organize your files and folders in a way that suits you best.

1. Preparation

When we start a new project, we create a Designer folder in the client’s main folder.

Designer folder

2. The structure of the Designer folder

Designer folder structure

A. Sources

Sources folders

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

Source files subfolders

Each source file is presented as a preview in the .jpg or .png format.

B. Fonts

In this folder, we put all the fonts which we have used in the project, even if they are free. They are grouped by font name. Like so:

Fonts folder

C. Assets & Exports

This folder contains two subfolders:

Assets and Exports subfolders

Assets & Exports is a folder for FrontEnd Developers.

  • Assets

Assets contains all additional assets that we couldn’t put in Exports. For example, SVG icons, etc.

  • Exports

In Exports, we put all exports from Sketch or Photoshop.

D. Images & Icons

If we have some external images (Shutterstock, etc.) or icon sets, we upload them here.

E. Documentation

IMPORTANT! At the end of a project, we create a list of all screens with URLs to particular screens on the InVisionApp broken down by different platforms, breakpoints, and so on.

In this folder, we upload all documents related to a specific project. Those documents can be personas, user stories, etc.

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

Initial interview folder

Questions your client may ask

Q
Why do you want to know the business model?
A
This will help us focus on important things and prioritize work.
Q
Why do you have to know this stuff before we meet?
A
This will allow us to prepare better and have a more focused meeting.
Q
We don’t have: [a business analysis, market research, target customer base]. Can you do this for us?
A
We can help you with some parts of it.

Questions to ask yourself at this stage:

  • Have I asked all the necessary questions?
  • Do I have all the necessary answers?
  • Was all the project info gathered during the first meeting with the client?
  • Has the process been explained to the client?
  • Has the project structure been created?
  • Have InVision prototypes been created for all target platforms?

Desired outcomes of this stage

  • The project info has been collected.
    • I know the project requirements and problems we need solve.
    • I know what will make the project a success.
    • We understand the client’s business.
    • We know if the client understands their own business.
    • I have collected the answers to design- and business-related questions.
  • I have a folder structure set up.
  • I know and have collected all the available materials from the client (including brand guidelines, etc.).

Additional reading