UX Design Process – Design

Design

Here comes the exciting part of our product development. After a lot of research and collecting valuable data for our team, now we can start thinking about designing the product itself.

In the design phase, we conduct a meeting with all the other teams in our company, including managers, the marketing team, the design team, developers, sales people, user support, and any other team inside our organization. During this meeting, we unpack all the knowledge and research data that we have collected during the previous UX process stages and show them to the team.

We show to the team all the information that we have collected so far, with no exceptions, as follows:

  • We start the meeting with a general presentation from the project manager and UX leader by explaining to the other teams the idea of the business and the opportunities within it.
  • Then, we start showing them all the competitive research that we have done so far and explain how and what our competitors are doing differently and what our approach will be.
  • We explain the problem that users have in carrying out the specific task, and how we will try to solve that problem with our product by showing to them the user research that we have done.
  • A detailed overview, approach, and a walk-through for our proposed solution will be presented to them.
  • We will provide the created user personas to the team members so that they can also try to understand what kinds of user we have to deal with and for whom we are solving the problem with our product.
  • All other related analytical data from the UX research phase, such as surveys, field study, and user interviews, will be shown and everyone will be given access to it.
  • The measure of success is the business metrics that we will try to achieve during this process and by creating this product.

This meeting is really important because every team needs to be on the same page with the UX team and with the product that we will create. This will make the process easier because, at a later stage if any team needs help from other team, everything will be easier because every team has a general idea of the product that we are going to build.

In the correct order, the stages of Design phase from UX process will be like this:

  • Concept, sketching, and flows
  • Wireframes and prototyping
  • Visual design and interactions
  • Documentation
  • Development

Concept, sketching, and flows

At the beginning of this phase, you need to check whether you have enough data to start the design to achieve your main goal for the product or whether there is still something missing. The goal is to have enough data to make it easier for you to take any decision to start the design of the product.

When it comes to the concept, you can use different methods, such as storyboards, project briefs, or project outlines, to start sketching your product design ideas.

Sketching is one of the easiest ways to visualize your concept ideas, which will allow you to see different design solutions before you decide on the concept you want to go with.

As UX professionals, you will probably sketch every day, no matter which phase of the UX process you are in. Some other professionals who work in UX fields like to start immediately by creating a prototype on the computer because they think it is easier, but you need to avoid doing this because it is not the best way to visually solve the problem. As I mentioned, the stage of the UX process doesn’t matter; if it is needed to provide a visual idea of the new digital product through storyboard workflows or user flows, the more efficient way would be doing it through sketching.

You don’t need to have perfect sketching skills; as long as they are understandable and clear, everything is fine, because the more often you do it, the better you will get. By sketching, we try to express our way of thinking to solve a specific problem.

Think of sketching as a form of visual communication that will help others understand the visualization that you have put down on the paper.

Depending on your needs, you can involve other things during sketching as well, such as sticky notes for more explanation on a specific area of your sketch if more information is needed. You can use a ruler if you have to deal with more advanced problems or for small details that you need to involve in your sketch.

The technique of sketching is not used only by UX designers, but also by other team members, such as project managers, developers, or business analyst, who explore their ideas for their own needs in their area by doing different sketches.

Creating good sketches will make your life easier by having a better understanding of the design problem that you are trying to solve, and you will also save time. But also it is important to be aware that this type of method is helpful for basic prototyping and brainstorming on early stages of product development mostly, because in later stages, the product gets bigger and more complicated, so to re-do prototypes we need to use prototyping tools instead of paper. Whenever you start creating the sketches, don’t force yourself to immediately come up with a final result; draw some flows first, brainstorm your idea, and then put all of those things together, similar to the following:

Another good thing that you can do during the sketching phase is to brainstorm at the same time since sketching is a key element when you have to deal with design brainstorming as well.

Feel free to use any kind of sketching technique, as long as your goal is to provide a design with a great user experience in the end, because you can get as many idea as you want when you sketch, and, in the end, you can choose the best one to start the wireframe process.

Wireframes and prototyping

Wireframes are usually referred to as a visual guideline that explains our digital product structure, such as its hierarchy and its key elements. Usually, wireframes are mostly used when we are creating a web or mobile application; the UI designer will take them as a reference for creating prototypes and visual design.

During the process of creating wireframes, we also start connecting the dots, or in our case the screens, by creating the product flow. By flow, we mean what will happen on each screen when our user interacts with it, what their next step will be, and where the user will land after any action they take on that specific screen.

Most of the time, we start creating wireframes by sketching them on paper. So, during that phase, we will also try to figure out the flow of each screen so that we have a better understanding of the steps and actions that can be taken when using it.

Design flow describes the processes and graphical assets needed to make a working product.

There are different tools available today, which allow you to convert your paper wireframes into digital ones, such as SketchApp and Balsamiq, or even more advanced design tools such as Adobe Illustrator.

It is obviously clear that we need to start the wireframing process at the beginning stage of design, where our product didn’t have a proper structure and the design ideas were only on paper.

Also, another benefit of wireframes is that they can give the client an overview of what their product will eventually look like. This way, we are also removing an issue that could happen later with a client arguing about our design elements and why they were created or placed that way. The following screenshot is an example that presents wireframes screens, how they are connected together, and their flow; usually this process is known as screen-flows:

Wireframes stand mostly on low-fidelity groups of prototyping, which generally have a limited function and limited interaction compared to high-fidelity ones where prototypes take place. After wireframes and interactive wireframes, a higher requirement stands for prototype. The prototype stands on high-fidelity groups because they are more interactive and fit better on the final user interface.

We create wireframes mostly to get a clear idea of structure and the visual hierarchy and also to experience interacting with them to get a better understanding of both areas, that is, how the product looks and feels when using it. The prototype is usually referred to as a simulation of the product and is commonly created using clickable wireframes.

For creating wireframes and prototypes, we can use different kinds of tool, such as Adobe Experience Design, InVision, Balsamiq, UXPin, Sketch, or Figma.

Here, it’s important for you to understand only the general meaning of wireframes and prototypes because we will go into them in detail later in Chapter 8Wireframes and Prototyping, which will focus only on creating wireframes and prototypes.Never move to the next step until you finish all the wireframes, product screens, and their flow. You need to have a clear idea of how many screens you have inside your product, how they are connected with each other, and how the user can navigate through them.

Visual design and interactions

Here’s where a design comes to life: how the screen looks, how it behaves or interacts, and more.

We create a visual design by combining both sides, UI design and graphic design, using different elements of design itself, such as colors, types, images, and form, to create and improve our product’s user experience.

This part is mostly done by a UI designer. Unlike a UX designer, who is involved in the overall process of the product, a UI designer is a person who creates the visible part of our product and how the product is laid out. The UI designer is responsible for designing each screen or element of our product based on the data that we provide to them. Besides this, another side that UI designers are responsible for is creating a cohesive style guide for our product and ensuring that a consistent design language is applied across the product.

Tools that can be used to create a UI design include Photoshop, Sketch, Illustrator, Fireworks, and Figma. It all depends on the UI designer’s preference. But what’s important is to achieve high-fidelity mockup results, as shown in the following:

One general responsibility of the UI designer is to produce high-quality visual designs, from the concept, sketching, and wireframe stage up to its execution. It depends on what kind of digital product we are building; if it is an application, the UI designer has to provide various solutions for visual design, including all different devices, such as desktop, web, or mobile, by providing the assets as well, such as icons, graphics, and other needed graphical materials.

Another key part during the creation of UI design or visual design is interaction. You experience interaction every day on your mobile devices, for example, when you pull down your mail to refresh it to check whether you have any new emails, or when you swipe left or right to access a specific action or menu. That is the work of an UI interaction designer. Compared to a visual designer, who usually creates static visual assets for us, an UI interaction designer creates animation inside our product.

The interaction designer has to deal with what an interface does after a user performs an action on it, such as touch, swipe, and shake. A properly-done interaction becomes an integral part of the user interface by providing a static visual design with a better understanding of how to use the product.

Tools that interaction designers use to create animations include Adobe After Effects, Core Composer, Principle, Framer Js, and Flinto.

Similar to wireframes and prototypes, we will go deeper into visual design and interactions inChapter 7Visual Design Principles and Processes, where I will guide you through which tools to use and how to create a visual design from scratch. Here, these are explained so that you can understand the basics and the design stage, so bear with me.

Documentation

The documentation stage is the part where you realize that after all these long processes, it is time to create the full documentation to finally start developing our product. In this part, we will create all the style guidelines to help our development team, especially the frontend one, to have a clear idea of our design elements, the colors that we should use, the design layout, fonts, assets, and other elements that we create during all those phases, especially on the visual design part.

This documentation will include other assets as well, for example, what animation will happen on a specific area of our product when the user interacts with it and what should or should not be visible to a specific range of users.

Having all these things documented in a very clear way will help the developers to clearly understand the product we are going to build. Also, then they can decide on the different frontend frameworks that they will use during the development stage. For example, for CSS frameworks, they may choose bootstrap, foundation, skeleton, material design, or even create their own from scratch. Based on the complexity of the project, they can also decide which JavaScript framework to choose, such as Angular, ReactJS, and VueJS, or even–if the product is really simple–the jQuery library.

Designers nowadays upload their complete work via tools such as Zeplin, Sympli, or InVision Appare after finishing their design.

By uploading your final design in these kinds of tools developers will have a much easier life, because they can access all the main things in one place. It doesn’t matter what it is as long it is related to that visual design. They will be able to access all the different colors, even customize whether they want HEX colors, RGB, or RGBA, download all the images or other assets, have specific measurements that they need, CSS styles, and tons of other features.

Refer to the following screenshot to have a better understanding of what a developer will be able to get from designing with the Zeplin tool:

After this phase, we are ready to go on to the development of the product. You have come a long way, but things are just getting more exciting here, so let’s dig deeper into all those product-design creation parts.

Development

Finally, after all the research, documentation, workflows, design, and interactions, the time has come to bring our product to life. By starting the development process, we have to improve our communication skills with all teams around our company, because communication is the key skill for creating a great user experience.

The development team is now responsible for creating a functional implementation of our product interface. During the previous phases of our design process, we created all the required information for this team; now, we hand over static visual design and the other documentation to them so that they can translate the designs into working and interactive experiences.

All these assets are provided to the frontend development team, and they start coding the visual interaction that the interaction designer has come up with.

The tools or skills used during the frontend development stage are HTML, CSS, and JavaScript. The development team will share their work with us and other departments on each screen implementation.

Also, they will gather feedback for each part of the product that they have developed, and if it is necessary, they will implement the required changes to their code.

During the development stage, the product designer plays a really important role. Their job is to be generally involved in the process and provide any answers about the look and feel of the product that is being created.

During the process of development, various design roles can be very fluid; for example, some designers will be expected to do interaction design, the UI designer will create new visual designs needed by the development team, someone will be involved in updating the documentation on every new change that we make, and even, in some cases, they will be involved in small amounts of coding if we have a full stack designer in-house.

By having all these different teams and tools involved in the development stage, it will be easier to think harder and come up with better ideas for how to delight our users.

The trend on the part of UX teams to involve different areas inside of it, such as providing colorful designs, better product performance, a lot of motion UIs, and different coding approaches, is increasing rapidly; that is why, in the upcoming years, we will have even more delightful products for our users and give them a better experience when they are using the products.

Whether we are using light tools and a light process during our development stage, the goal of each UX design is to come up with a great product for our users. During development, we can evolve our UX process because even the product itself will evolve over time.

So far, the goal of this chapter was to clearly explain all the dots in the UX process to you; now, we will touch on each part in a more comprehensive way and give you a bigger picture of the complete product design and development, and the required tools and skills.

Previous Process – AnalysisNext Process – Production

Leave a Comment