UX & UI – useful designing of custom-made applications

UX and UI – these two abbreviations have been intermingling for several years when talking about creating digital products, although they are fundamentally different from each other. Sometimes they accompany the entire design process, and sometimes they are just part of it.

From our entry you will learn:

• What is UX?
• What are the assumptions of UCD
• Product creation strategy
• What is 4D?
• What is UI?

In the article below we show what principles we follow in our daily work and how the full process of creating applications for your company or your clients can take place: from building a strategy together with product stakeholders, through research, testing, implementation and cooperation with a development team.

What is UX? (User experience)

UX is the entire user experience created during contact with the service or product. More specifically, it is the emotional response that affects the user’s inner state and behavior. It depends on the user, product/service and the context of use that is created at every moment of the interaction, especially in the case of multi-channeling (i.e. distribution of the product/service in many channels, e.g. mobile application and internet application).

A well-designed UX has to do a few things. One of the most important designers care about is persuasion, i.e. the ability to influence the user’s attitude through a properly targeted process. If we build pleasant feelings for our service or product within the user, we are able to establish a good and lasting relationship with them. One of the important guidelines for designers is the UCD (User Centered Design) methodology.

What are the assumptions UCD?

UCD recognizes that the main goal of good design is to enable easy use of the system and its adaptation to the needs of various users in many contexts. UCD consists of choosing the appropriate actions and methods in the field of ergonomics and psychology.

As a result of works in accordance with the UCD methodology, a strategy is created to design user experiences. Strategies can reach for ethnographic research, user observations and experiments. These specific methods are designed to evaluate the emotional and cognitive aspects of user experiences. These are mainly: contentment, satisfaction, commitment, and time spent on the selected subpage. Any mistakes in the product interface that reach the end user are also important to us.

The main goals of UCD are:

• thorough understanding of users – their behavior, habits and contexts of use
• involvement of stakeholders and end users in product/service design and implementation
• regular validation of ideas and user involvement
• interactive implementation of the design process
• relating user experience to the context of the project
• creating an interdisciplinary project team

Applications used on many continents by users from different cultures are a special challenge. In this case, it is necessary to know very well the context of use and the users themselves: their preferences, limitations or styles of operation. This approach avoids costly patches associated with inadequately modeled processes.

Product creation strategy

In the era of RWD (responsive web design) interfaces, the needs and expectations of customers can be completely different on every device. That is why the first rule is “Voice of customer”: you should always listen to the voice of the customer. It is very important at this stage to develop a shared vision and choose assumptions that will actually be useful.

If we already have a preliminary set of requirements, it is worth validating them during frequent conversations (“Voice of Business”). Also remember about the limitations and requirements that await the project team on the part of your company’s departments (communication, marketing, IT, HR, etc.). Standards and market expectations (“Voice of Market”) are also significant.

4D – what is it?

One of the popular project management methodologies that also allows you to pay proper attention to UX is 4D. It leads us in turn through all important elements of product/service development, i.e. target group definition, benchmark, project management, UX, quality control. The undoubted advantage of this approach is continuous improvement and customer impact on the final quality of the product throughout the entire software development period.

There are several phases in 4D, respectively:

1. discover (strategy, vision, research)
2. define (design, prototyping)
3. develop (implementation, tests)
4. deploy (implementation, measuring the goal set at the start)

Of course, you should also remember about the so-called maintenance phase, in which the product should be constantly adapted to the market, dynamically changing just like the growing needs of users.

Discover – that is, what exactly we want to create

At the very beginning you should determine what problem our service is to solve. It is worth starting by creating a “Business case” that communicates the business need and arguments for carrying out the project. At this stage, it should not contain important aspects that determine the final shape of the product.

The added value is interviews with project stakeholders as well as effective collection of specialist information from the departments for which our service will be designed. This approach will allow us to collect a large part of the material for joint workshops where we will create a product strategy.
The introduction of workshops at an early stage allows you to create a sense of “ownership” of the project and to engage the company ordering the product. At the beginning of the workshop, we summarize interviews and set priorities for business goals. On this basis, we can specify preliminary measures for previously defined purposes.

It is also worth presenting the effects of market research and analysis of solutions that exist in the competition. This is an invaluable source of inspiration to create “Value Proposition Canvas,” which is great for a holistic view of the business model. On one sheet of paper we present all the most important aspects of business, which creates a broader perspective on the product idea. VPC makes it easier to analyze, design and, above all, choose the right solution to meet the needs of customers. Importantly, it does it in a systematic and visual way.

Our first challenge is to clearly define what tasks the end user performs (Customer jobs) and at what stage they can be problematic for them (Pains). They will include all kinds of negative emotions, risks, unforeseen situations and costs. In the next stage, we can determine the positive emotions and experiences arising from the completed tasks (Gains). Think about what makes your client happy, what solutions they like, which makes their life better. Finally, try to choose the most important, fundamental benefits.

When we specify the product user model, we can proceed to suggest a solution. It is worth it at this stage to create a list of services that our value proposition is to include. We can now focus on creating benefits, i.e. added values (Gain creators), as well as functionalities that alleviate the pain associated with the performance of tasks and interaction with the product (Pain Relievers).

The service designed in this way will allow us to create ideas. Finally, it is worth choosing only those functionalities that will allow you to enter the market (according to the MVP approach – minimal viable product), while other ideas should be left to the product development phase. The value and cost matrix will allow us to choose the target, most optimal version of our product.

The next important step is to conduct research. Their goal is to find needs that the recipients don’t know exist. Research brings us closer to learning about and improving the daily processes of users. Very often they last throughout the entire product creation period; they allow us to validate our ideas on an ongoing basis.

As a result, we will receive a person who will, among other things, answer the following questions:

• Who exactly are our users?
• What is the profile of our target group?
• What do end users want to achieve with our product?
• What are their needs and expectations?
• What tasks must they perform?
• What are their possibilities and limitations?
• What motivates them to do things?
• What is the context of use?
• What are the feelings users have when performing specific tasks?
• Are users open to changes regarding the application interface or even the process of their daily work?

The number and form of research is very often dependent on the business knowledge we have at a given stage. In the early stages they allow you to discover what problem we should address. However, when the problem is defined, it is worth determining which solution best responds to it. Interviews, analysis and observation of users with the current product will be helpful for us.

Define – transfer of the idea to the user interface

A solid foundation for designing the first lo-fi (low-detailed) mockups is cooperation with analysts and consultations with part of the development team. Analysts often help to look broadly at the product owner’s business, they have data on edge cases (e.g. how many specific situations can occur in the process, how long entries in the fields can be). Thanks to this information, we can see the size and scalability of the product vision.

An interesting approach is to create short workshops with analysts on which we design user journey maps. The workshop always ends with a summary of the full process by the moderator, while the other people determine whether it has been correctly understood and supplement the knowledge of the teacher on an ongoing basis. It is worth mentioning that such knowledge is also invaluable for the development team responsible for modeling business logic of the project.

What is UI?

With a considerable amount of knowledge, armed with a large number of notes and sketches, we can begin to create the first mockups, i.e. the initial outline of the UI (user interface). Depending on the scale of the project, there are two stages. The first of them provides for the creation of lo-fi mockups, on which only the basic and necessary elements for interaction are marked. We look at such a project with great distance and want to see what is the most important. You can simply draw such a model on a piece of paper. This is a good way to organize previously collected information.

If you accept the process presented on the lo-fi model, our team starts to design the “hi-fi” model, which largely resembles the final product. Then more and more emphasis is placed on the details of all elements, and not on the overall picture. At this stage, cooperation with the frontend developer is becoming stronger, who can pre-determine how costly the solution is designed to implement. Such consultations often lead to further improvements in the process and simplification of the user interface, which ultimately allows the entire team to save a lot of hours that could be lost on the implementation of a project with an unrealistic budget. The added value is the fact that based on such mockups, the development team is able to estimate the final cost and the exact time-consuming implementation faster and easier.

When designing a prototype, it’s worth not creating complex interactions. For the development team, elements such as: transitions between individual views, color palette used, specifications of spacing between components are important. The mockup/prototype is a tool, not a product. Creating elements that nobody can use in practice is a waste of time.

The exceptions to the rule are situations when the mock-up is to be used for testing with users, presenting the functionality to project stakeholders. However, if you know that no one will use this function or the operation of the element is obvious, there is no point in creating these complicated mechanisms.

The professional UI/UX team creates a set of re-usable components in graphic programs, so that each change is not a very heavy time burden. The prototype prepared in this way is made available to the development team for joint analysis and implementation.

Develop – prototype care, development team support and improvement

When the prototype is handed over to programmers, then the UX specialist plays the role of a consultant. At this stage, the role of UX Designer intertwines with the role of the analyst. Thanks to this, the team has greater business support and knowledge about processes. When one full process is implemented and we make sure that all the solutions work, we can proceed to designing the system design. It is a set of rules, patterns, restrictions and rules implemented in the project and code. These 4 attributes perform separate functions and ensure a consistent order, from buttons to individual pages. Good system design includes a set of components from which you can build further modules in the project. Often these are: buttons, tables, forms for larger amounts of elements, or ways to use a graphical grid.

It is good practice to combine graphic principles with developer instructions. The ideal situation is when each component has a sample of previously prepared and tested code – this practice allows you to implement subsequent functionalities faster and more effectively. It is important that the system design is not a static style guide, but is constantly improved as the product matures and customer needs change.

Deploy – implementation and measurement of effects

Measuring the implemented solution is very often based on previously assumed product goals.

Tests can be performed in several forms:

• observation, shadowing, diary studies
• expert research
• individual interviews
• user surveys (moderated)
• remote testing (unmoderated or automatic)
• online surveys containing tasks to be performed

We often recommend tests requiring direct participation of end users. Joint tests and observation of user behavior on the interface allow you to quickly draw conclusions and indicate weak points of contact (bad customer experience when interacting with the product). Usually, proposed changes are introduced ad-hoc to the prototype or test version of the application, which allows you to carry out A/B tests later and make sure that our target solution meets your requirements.

Once you have the production version, you might want to consider connecting a cursor tracking application. It allows you to generate a user interaction report on the page in the form of a heat map. Reports allow answering questions whether we are taking the right actions to improve the effectiveness of the application as well as to achieve the relevant business goals of the company.

The measurement of traffic in individual modules by Google Analytics is also significant. GA answers our business questions: which type of customer is the most valuable, how is the website traffic shaped and which marketing campaigns are the most effective.

Sebastian Sztyper, Lead Frontend Developer