Designing and prototyping interfaces

Designing user-friendly interfaces and experience of interaction

Contacts
Read more
Awards 6 awards 4 nominees in UI/UX
Raitings Profile Evergreen — Clutch Raiting Evergreen — CMSMagazine Profile Evergreen — Behance All All

What is the design and prototyping of interfaces?

Interface design is the development of a user experience of interaction with a service, a site, an application. In short, the design task simplifies the solution of the user task and prevents errors when interacting with the system.

A clickable prototype is a product of designing user interfaces, it is possible to understand on the prototype whether it is convenient to use the interface, whether the user's tasks can be solved.

During design, three key components of a viable product are considered:

  • User needs,
  • Financial and organizational capabilities of business,
  • Technical ability to implement a projected solution.

 

When do I need to design an interface?

New product development.

For new projects, lots of attention is paid to market analytics, analysis and study of the target audience, its needs and tasks. An accurate understanding of future users and the ability to predict behavior are prerequisites for creating a user-friendly interface. Ideas and functionality are visualized in a prototype, an instrument where the visions of the entire team and the owners of the product are synchronized.

A high-fi prototype is used for testing with potential users. Getting feedback from potential customers, you can quickly make edits by optimizing the functionality. This will help to save development resources in the future, avoiding "rework". The finished prototype of the interface is the basic platform on which marketers are oriented (evaluation of SEO promotion, etc.) and developers (understanding the functionality that needs to be developed).

Redesign of the existing project.

When you redesign an existing site, service or application, you need to keep in mind that there are users who are already used to the interface, so the task is not only to improve the existing interface, but also not to lose regular users by drastically changing the interface.

Analytics of the current site is the key source of information that will give answers to the question, what exactly needs to be improved and how. Such tools are used in the redesign: analysis of statisticall systems (Google Analytics), qualitative and quantitative research of the audience, analysis of user behavior, subjective satisfaction metrics, etc. In the process of analysis, hypothesis (assumptions that can be improved) are collected and the current audience of the site is involved in verifying the the hypotheses with the help of surveys, usability testing, scenario modeling, etc.

75%

– increase in the revenue of companies known as "design unicorns", which invest in a high level UX

UI/UX process in Evergreen

— compulsory stages of development

Аnalytics

Mock-up

Prototyping

Testing

Comments on the design process

slogan-img

Scroll to see other reasons

  1. Analytics and collection of requirements - a deep and complete understanding of the future target audience and its needs is a key principle on which we rely in the development of the interface. Until we can’t understand for whom we create the prototype and what motivations of the user are, we do not proceed to the next stage. In the process of analytics, the client is also deeply involved, providing all available information. At this stage, the market, competitors, target audience, and users are analyzed, functional requirements are collected, the restrictions and limitations of the project are specified.
  2. Mockup is a low-detailed prototype, which task is to synchronize the understanding of all the participants in the design - the client, designers, analysts, etc. The mockup includes pages needed to fulfill key user scenarios, all other secondary pages are drawn at the next stage. Faster creation of such a prototype makes it easy to edit, change the structure and components in the process of discussion with the team, without significant losses.
  3. A highly detailed prototype is a complete prototype of the future product with all the scenarios and interactive activities. This prototype fully conveys the essence and functionality of the project - it works as a real site. With the help of a prototype, you can test the usability of the interface, which saves time on redesigning the project when it is already designed and released into the world.
  4. Testing is the best way to verify the correctness of all hypotheses (assumptions that users will behave exactly that way). Testing is carried out live or remotely, its essence boils down to the fact that the potential user performs targeted actions. User experience (success, errors, emotional satisfaction) are analyzed and, if necessary, corrections are made to the prototype.
  1. Analytics and collection of requirements - a deep and complete understanding of the future target audience and its needs is a key principle on which we rely in the development of the interface. Until we can’t understand for whom we create the prototype and what motivations of the user are, we do not proceed to the next stage. In the process of analytics, the client is also deeply involved, providing all available information. At this stage, the market, competitors, target audience, and users are analyzed, functional requirements are collected, the restrictions and limitations of the project are specified.
  2. Mockup is a low-detailed prototype, which task is to synchronize the understanding of all the participants in the design - the client, designers, analysts, etc. The mockup includes pages needed to fulfill key user scenarios, all other secondary pages are drawn at the next stage. Faster creation of such a prototype makes it easy to edit, change the structure and components in the process of discussion with the team, without significant losses.
  3. A highly detailed prototype is a complete prototype of the future product with all the scenarios and interactive activities. This prototype fully conveys the essence and functionality of the project - it works as a real site. With the help of a prototype, you can test the usability of the interface, which saves time on redesigning the project when it is already designed and released into the world.
  4. Testing is the best way to verify the correctness of all hypotheses (assumptions that users will behave exactly that way). Testing is carried out live or remotely, its essence boils down to the fact that the potential user performs targeted actions. User experience (success, errors, emotional satisfaction) are analyzed and, if necessary, corrections are made to the prototype.

Testing prototypes

Testing is checking how the user interacts with the developed interface. To perform the testing, you need a highly detailed interactive prototype, which is similar to the real product. Testing is internal (testing live with a moderator) or remote, which is conducted using special services.

Why do I need to test?

Confirmation of hypotheses. When designing the hypotheses are formed and testing allows you to check whether the user behaves as the designer assumes.

Improved interface. Determining where in the interface the user does not understand how to proceed further or he makes mistakes.

Error correction. Testing allows you to identify errors already at the design stage and fix them on a prototype is easier and cheaper than on a finished project.

What should I test?

Navigation

Navigation. It allows to make sure that the user can easily navigate within the content structure. The navigation tree is tested and card sorting is performed.

Interface design, prototyping interfaces, ux design - Evergreen 2
Interface design, prototyping interfaces, ux design - Evergreen 3

Behavior

Observation and analysis of user actions when performing a task. A full-time or remote usability testing and testing of the user's focus is conducted.

Interface design, prototyping interfaces, ux design - Evergreen 4
Interface design, prototyping interfaces, ux design - Evergreen 5

Perception

It is checked whether the prototype of the project corresponds to the mental model of the user. A test-comparison of two options or a 5-second test.

Interface design, prototyping interfaces, ux design - Evergreen 6
Interface design, prototyping interfaces, ux design - Evergreen 7

FAQ

     
  •     What do you need to start designing the interface?     

    Usually we begin designing the interface with the development of users’ portraits - who they are, what they do, why they use it, what information they seek, and what the final result of the interaction should be. This helps intelligently locate information and distribute visual accents.

        
      
  •     Do you do user testing?     

    Yes. Depending on the scale of the project, we conduct a different number of tests at different stages of development. Normally we test the prototype and measure the speed of the target action and compare it with the expected.

        
      
  •     Do you use surveys when designing the interface?     

    The survey is needed in a large-scale projects, where we need to know in detail the problems of each type of client (user). This document contains a list of carefully formulated questions for users, answers to these questions provide an opportunity to identify in more detail all sorts of problems.

        
      
  •     Can you design an interface for a completely new product that has no analogues?     

    Yes. We have a mature technical process of designing and creating an user experience. The team is working on the project, which studies the portraits of users in detail, develops a map of the user's behavior on the project and seeks the best ways to implement the user's tasks.

        
      
  •     How do you test the quality of the prototyped interface?     

    We have developed a testing process that has a number of formalized evaluation parameters of processes (metrics), each of the metrics is designed for a specific analysis of works, it reduces to zero the majority of errors and shortcomings. Metrics provide an opportunity to fix a variety of problems with the product.

        
      
  • The design of the interface can be done by any designer or freelancer

    Designing an interface is better done by the team, because the team approach allows you to more deeply immerse in the subject area and look at the product from different sides. The minimum project team is an analyst, a designer, a developer. The team approach protects from the subjective vision of one person and allows you to keep focus on the needs of the future target audience.

  • You don’t need a proto to make design

    Using a prototype, you can test all hypotheses on potential users without writing a single line of code. Thus, we will check the business idea or the quality of the interface without investing in development. Changing the prototype is faster and cheaper than changin html\css front-end code and back-end modules.

Order UI design

Contacts

Request a quote On-line request