UX DESIGN / user testing

Designing B2B application for communication

PrivMX Contact is a B2B web application for encrypted external communication with clients and partners. It allows you to exchange messages in threads, share files and conduct video meetings.

Business objectives

Creation of a B2B application enabling encrypted communication with customers and partners. An important element was to provide tools for structured communication - an improvement for companies using mainly email inboxes.

Discover

The product targeted companies operating in industries where strict privacy of processed data is important. One of the target groups was law firms exchanging important documents and personal information with clients.

Before starting work on the information architecture, stakeholder interviews were conducted to help understand the needs of representatives of the target groups.

Define

We started our work by preparing a list of the most important functions together with the Project Manager and the main Backend Developer. We then proceeded to outline the basic structure in the form of sketches.

Next, my task was to create an audit of sketches and design lo-fi wireframes to represent the target application architecture.

After verifying the wireframes with the design team, I proceeded to create hi-fi mockups based on the MantineUI library. I then created an interactive prototype, which was used to gather feedback from stakeholders already at the design stage.

Develop

In the meantime, I participated in meetings with programmers, so I could verify the possibilities and technical limits of the proposed solutions. The work with the development team took place in an iterative system, which made it possible to quickly find bugs and possible improvements. At this stage, together with the UX writer and front-end developer, we made sure that the interactions were properly designed. We created onboarding, messages, empty states, and designed a way to filter messages.

Test

After the demo version of the application was created, I proceeded to design usability tests. I conducted participatory testing with 5 users. The participants performed tasks to test the usability of all features of the application.

Excerpt from the usability report:

Problem 2

The user did not see the option to use search filters for a long time. When asked about his impressions, he said that the button was poorly visible and appeared to be separated from the search box.

Proposed solution

Vissualy connecting the search field and the "Filter" button, highlighting the borders of both fields when the search is selected.

Problem 4

Mass marking of items seemed to be unintuitive. The user said he was unsure when items would be selected as favorites and when they would be deselected. The user clicked on mass actions before selecting any item.

Proposed solution

1. Display mass actions only when any item is selected.
2. The mass action should first perform a positive action (e.g. mark as a favorite, archive).

This means that when at least one selected item is not marked as a favorite - the icon should perform "Mark as favorite". Only when all marked items are already marked as favorites - the icon should perform "Deselect from favorites".

EN
PL EN