Questions and Answers

Marie
Editor’s pick

What is UI design process?

share the question
No items found.
Design Glossary
Text Button
is a clickable text, placed outside the main text container. From the text the users learn what happens after the button is pressed. The text should be clear and laconic. Text buttons are used for secondary actions in system dialogs and content cards.
Read more

Quick Navigation

Before we start talking about developing a graphical user interface, let's clarify what it is, just in case. Interface — a common boundary between two functional objects, the requirements for which the standard is defined; a set of tools, methods, and rules of interaction (management, control, etc.) between the system elements. This is an accurate but boring definition.

In other words, but more interesting said Jeff Raskin:

The user interface is the way you perform a task with the help of a product, namely, the actions you perform and what you get in response

In everyday life, we are always faced with interfaces. These are social media sites, controls in the car interior, remote control for the TV, voice control of the smart home, and a button panel in the elevator. It turns out that we use one product to manage another product. But let's not list all the phenomena in our lives, but talk directly about web services and applications and how to make their use convenient.

Step 1: Get into the idea of the product and set goals

We ask many business questions, delve into business logic and understand what problems there are — looking for a solution to help.

Analyze competitors:

  • "Scour" the Internet for similar products and services;
  • See how similar products and services are presented in other markets;
  • Collect an essential list of advantages and weaknesses (mini-SWAT) of competitors and analogs.

Collect a list of the main ideas of the redesign and how it will help the client's business: for example, "improve the search form so that the product can be found in 2 clicks, and now you need 10 clicks", " make a personal account for wholesale customers".

Conduct a stress test of redesign ideas:

  • Ask questions about why it should be done;
  • Why it is worth the investment;
  • It will change personally for the client and his consumers, the reasons it is not worth doing.

Usually, the last question is the best way to understand how confident the client and we are that the idea is worthwhile.

Designed by Anna Kajda

Step 2: We study the audience and its needs

The most critical stage of UX design and analytics that affects the final result. We analyze the business audience, and it needs to understand who will use the product and take into account users' interests. We fix the context of interaction, conditions, technical and business restrictions.

Simplify your life and use the help-out tools:

Flowmapp Customer Journey Map Tool

A powerful tool for visualizing the customer’s experience. Use storytelling to capture key user moments and enhance communication.

Miro

Another for user story or customer journey maps.

Microsoft Visio

With this visualization tool, users can create simple or more complex customer data diagrams.

Step 3: We develop the design of critical screens and processes

We develop a rough interface design. We work through the main interface scenarios and build a user's end-to-end path. The first version of the invention is tested, and after the results, we correct errors, clean and get rid of excess.

Make a note of what you need to do:

  • Develop the information architecture of the service;
  • Agree on the appearance of the service and model the basic logic;
  • Cut off the excess in logic;
  • Check the data and bring essential mockups to the prototype level.
Designed by Fabricio Rosa Marques

Step 4: We scale the design solution to secondary processes

After working through 2-3 main scenarios, it becomes clear how to build the rest. At this stage, we work out similar plans: for example, making a delivery when buying in an online store, buying in installments, or choosing related products for the main order.

Step 5: Unifying the interface elements

We prepare a UI-kit or design system: we clean out styles, elements, blocks and modules, illustrations, and icons. We associate aspects with each other in dependencies through classes and variables.

The finished UI-kit can be downloaded for free. Here are some of them:

  • Ui8. Library of templates, whales, icons, fonts, and themes. Usually, whales are paid: on average, they cost about $20. But in the Freebies category, you can find and download a high-quality template for free.
  • Sketchapp. Sketch App Sources offers free Sketch kits. At the same time, under the whale here, we mean not only interface elements, but in general, everything that can be useful when working on a site-icons, mockups, landing page templates, and sites.
  • Market Designmodo. New projects appear periodically in the UI-kit category. Paid ones can be purchased for $ 20-40, but there are also free sets in the Free Goods section.
Work through hundreds of elements: buttons, icons, checkboxes, fields, headers, menus, lists, selectors, notifications, modal windows

Step 6: We launch and support

It and make sure that everything is fine. We help developers and control the quality of design implementation. We check the live interface, make a big list and give recommendations on how to fix them. If something is missing — we draw new screens.

In Alan Cooper's "The Inmates are Running the Asylum" it is said that excessive savings on the UI in the future result in spending on technical support, bug fixes, and training of new employees. A beautiful wrapper in the form of a modern design is not a human interface; the key to this humanity is designing for a real user.

User interface design reduces design time and simplifies user interaction with the product. Well-designed UI = grateful user = happy you.

No items found.
No items found.
No items found.

FAQs