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.

 ‍

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.

‍

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.

‍

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.