NLMK Group is Russia's largest and one of the world's leading steel companies, with production facilities in Russia, Europe, and the US, and deliveries to over 70 countries. Such a vast company requires efficient management, so the top managers approached us at Redmadrobot with a request to create a tool that would allow them to effectively allocate their time and transform the company's management culture based on Ray Dalio's Principles.

As a result, we developed an app called Mera (en. «measure») for planning and evaluating the quality of meetings. We designed our own rating model that encompassed not only interactions between participants but also the preparation process, such as creating meeting documents, a well-structured agenda, and ensuring the correct participant list, among other crucial actions.

At the project's inception, I was the sole designer in our team, responsible for conceptualising and prototyping. I actively participated in research and brainstorming sessions and liaised with the client regarding design-related aspects. Later, when we added another designer to the team, I transitioned into the role of art director. In 2022, the service received recognition by winning the 1st place among Russian services for communities and communications in the RuNet Rating, and was named Gold Winner in Digital Workplace Awards 2021.

Research

Qualitative research and prototyping

We initiated the project with workshops involving a diverse team composition. Our team comprised a manager, a business analyst, two researchers, and myself from Redmadrobot. On the client's side, there were two top managers, their two secretaries, and the Head of the Information Technology Department. Given that some of our team members were also prospective users of the app, we collaboratively compiled a list of hypotheses and developed user interview guides.

The workshop topics were categorised into three main parts: personal efficiency, meeting efficiency, and feedback. Additionally, we addressed common topics that pertained to the overall company culture and communication dynamics. We conducted more than 30 interviews with top managers and their assistants. Subsequently, we held workshops to discuss and prioritise the interview results. During this process, I provided support to the researchers during interviews, assisted in analysing the findings, and drew conclusions based on the gathered insights.

Hypotheses list and interview results.

After completing the qualitative research phase, I proceeded with the prototyping stage. Initially, I developed a single prototype intended for both top managers and their assistants. However, during the first round of testing, it became apparent that their roles in the process were significantly distinct. Consequently, I created two additional prototypes, one tailored specifically for top managers and the other for their assistants. The entire process of prototyping and testing these three prototypes was completed within a week.

Prototype for testing.

Through our research, we uncovered several key insights:

• The primary pain point identified was related to meetings. Top managers often felt uncertain about the purpose of their attendance and expressed frustration at wasting time while being engrossed in their smartphones, checking emails;

• Feedback solutions were well received. Due to time constraints, participants found it challenging to engage in post-meeting discussions, but they were willing to invest a few minutes to provide ratings for future meeting efficiency;

• Even top managers had a limited understanding of the company's principles, referred to as "Meanings," and desired a simple and clear explanation of how to apply them effectively;

• Top managers and their assistants encountered distinct challenges during meetings. The assistants primarily struggled with organising meetings swiftly, such as finding available time slots and meeting rooms. Consequently, they required a separate product, akin to an admin panel, as the existing corporate tool was overwhelmed and impractical. However, our initial focus was on addressing the pains faced by top managers.

By recognising these pain points and insights, we were able to prioritise and tailor our solution to meet the specific needs of top managers and facilitate more efficient and productive meetings.

Navigation structure and data models

While our analyst started to work on a BPMN model for meeting organization, I structured and clarified the parameters we wanted to use to rate people and meetings. We also created a new, more detailed role model for the service, including a chairman and a participant. It was important because the chairman's responsibility was much wider: he could decide how many people to invite, what agenda to discuss, and in what order, etc.

I combined what people had said during interviews about their pains and created a model to rate meetings with 5 parameters:

1. List of participants (cost of the meeting vs. cost of decision);

2. Preparation quality (goal, agenda, prepared materials);

3. Meeting process (moderation, quality of speakers' reports);

4. Emotional comfort (engagement and constructive discussion);

5. Time efficiency (meeting relevance to the participant personally).

Additionally, together with the business analyst, we created another model for person rating based on the company's 4 Meanings:

1. Personal efficiency;

2. Creativity level and innovation commitment;

3. Close communication with colleagues;

4. Sustainability.

Meeting rating model.

Personal rating model.

After obtaining all the necessary information in an organized manner, I began creating the navigation structure of the service. In a simplified form, it consisted of the following sections and scenarios:

1. List of meetings and tasks for assessment (those that require evaluation);

2. Meeting assessment scenario;

3. Human assessment scenario;

4. List of colleagues (a type of address book);

5. Profile with statistics of my performance.

Simplified app structure scheme.

So, during the immersion period, we gained an understanding of the goal, approximate functionality, and two rating models for providing feedback. Based on this, I created a navigation map outlining the main components of the future service, allowing for a more deliberate design approach. The research phase as a whole took approximately 1.5 months.

Design & UI-kit

Brand visual style

Before I started working on a design concept, I received a brand book from the client (created in 2015), and they also had a corporate website. Based on our previous discussions, we agreed to maintain the new app within the current style boundaries, while also incorporating a fresh and modern touch. They wanted to maintain a serious tone but also wanted to introduce entertaining elements. So, I began with a mood board. I defined three key visual characteristics for the product:

• Durability and stability;

• Geometric simplicity;

• Clean and cool aesthetics.

It was an exciting experience explaining to individuals involved in metallurgy what a mood board was and how it could help us achieve the final result. In fact, they were also inspired and impressed.

Typography and colors

Based on the available inputs, I began my search for a visual language, starting with the selection of a font to be used in the application. The brand book indicated Circe as the corporate font, a high-quality font created by Paratype and already in use on the website. I proceeded to test Circe in various situations, paying close attention to complex letters like у, ё, ж, д, etc. However, I found that it was too specific and didn't evoke a sense of cleanliness. Instead, it drew too much attention while reading, making it unsuitable for the interface. Additionally, Circe featured very tall capital letters, long callouts, and large line spacing.

Consequently, I decided to search for another grotesque font that would harmonize with the corporate style. In my search, I adhered to the following principles: the font had to be modern, clean, and compact. It would also be advantageous if the font designer were a native speaker of a language with the Cyrillic alphabet, as this often results in a better understanding of the shape of Cyrillic letters. After trying around 10 different fonts, I eventually settled on Gilroy, designed by Radomir Tinkov from Bulgaria. Gilroy managed to strike a balance between seriousness and friendliness while meeting the criteria for a modern and clean font choice.

Gilroy looks cleaner and clearer. Its figures have more geometric shapes, which is good for numerical data.

What's for the corporate color palette — I retained the main color but suggested a slight refresh. Additionally, I designed a system of additional interface colors to indicate errors, success, and user progress. It is worth noting that unsatisfactory results were highlighted in violet within the interface, rather than red. This was a deliberate decision to avoid excessive user annoyance (as red can be challenging to perceive). Red was reserved for cases where it was truly crucial, such as errors requiring special attention.

Accent color chosen for the app was brighter and lighter than the corporate color. Right diagram illustrates approximate colors ratio in the interface we tried to stick to.

UI-kit

I started my work with the UI kit right after the first design concept screens were created, so that it could serve as a foundation for future apps within the client's corporate system, anticipating the rules and elements that would be necessary for our tasks. I created a table of contents within the UI kit file to share it with other designers at NLMK and to showcase our results to the client. Later, when another designer joined the project, it proved to be incredibly useful, as it enabled her to quickly and effortlessly dive into the workflow.

UI-kit pages describing typography and colors.

Many user flows in the application were designed with a playful approach, which led to the frequent use of illustrations alongside the main interface elements. We created over 30 unique illustrations specifically for this project. I established the visual style for the illustrations and created the initial ten. Subsequently, a designer who joined the project continued the work on illustrations. Additionally, I animated some of them using After Effects, exporting them to JSON files for integration directly into the interface. For instance, these animations were used to demonstrate the rating when dragging a handle while evaluating a meeting or a person.

Some of 30+ illustrations for the project.

Another crucial and fascinating aspect of the UI-kit was the inclusion of graphs to visualize the statistics of human performance assessments from various perspectives. Ensuring that the information was presented accurately and aesthetically on the charts posed an analytical challenge, particularly when dealing with limited data or periods of no data. To address this, I developed a dedicated library of graphs within the UI-kit, allowing for seamless integration into layouts. The library offered flexibility in terms of scaling, adjusting the display principles, and selecting the timeline period.

Examples of different types of graphs and their states for the user statistics in the profile.

Overall, this UI-kit served as the foundation for NLMK's corporate digital design system. As a result, an in-house product design team was established to work on internal products, including this app. The UI-kit played a significant role in ensuring consistency and efficiency in the design process, enabling the team to build upon existing components and maintain a cohesive visual language across different applications.

Functionality

Meetings list

One of the most important parts of the app was the meeting list, resembling a calendar. However, the purpose was not only to help users navigate their meetings but also to emphasize those that required their attention, such as meetings with a high rating or those involving document preparation. The most critical meetings from the list were highlighted, for instance, if it involved a meeting with the Chairman of the Management Board. Additionally, we planned to implement a smart algorithm that would prioritize meetings based on the user's ratings. The initial list was obtained from the NLMK internal calendar and supplemented with our service information.

The main features I designed were as follows:

• A meeting list with evaluation requests;

• Intelligent search functionality with filters to facilitate navigation within the list;

• A calendar that displayed the user's workload level (this feature held particular significance based on the client's request).

Meeting grouping logic and timeline in case of meetings conflict.

Meetings feed on the main screen, workload calendar and search.

Feedback process

Another important aspect was providing feedback for meetings and colleagues. Based on our interview-based model, we developed two questionnaires consisting of five steps each (five questions in total). The evaluation scale for individuals was quite specific, ranging from B to AAA, aligning with the company's internal rating scale (where "B" represented a very low level and "AAA" indicated the highest).

To make the user experience more engaging, I designed each user flow as a mini-game, incorporating elements like swiping cards and dragging sliders. However, I considered an issue where having ten questions after every meeting proved to be too overwhelming for busy individuals. Recognizing this, we addressed the problem by implementing a randomizer. Our analyst calculated the optimal number of people and questions to obtain significant information after each meeting, taking into account the number of participants and the repetition period. As a user, you would see different questions after some of your meetings—typically two or three—making it less burdensome to provide feedback while still gathering valuable insights to enhance future efficiency.

Questionnaire steps and success screen.

Colleagues

One of the key problems addressed by the application was the lack of a unified contact database for NLMK managers. To tackle this issue, I created a dedicated section within the app where users could find colleagues and access relevant information about them. This section allowed users to initiate conversations and, importantly, rate themselves or request a review from their colleagues.

An important feature we implemented was the option to rate anonymously. While such ratings carried less influence, it was a significant aspect at the time, as not all managers were comfortable openly criticising others. This feature aligned with our goal of fostering an open corporate culture. Additionally, we developed an algorithm to remind users about leaving reviews. At NLMK, they had an internal grading system that directly influenced salaries, thus motivating individuals to receive positive ratings and actively participate in the process on a regular basis.

Colleagues chapter: contacts and feedback chats.

Profile and self-efficiency analysis

The user's profile served as a place where they could draw conclusions by consolidating all the data gathered about themselves and their meetings. This section presented the results on four distinct charts:

1. "My Meanings": This chart reflected the user's alignment with the company's corporate values.

2. "My Meetings' Efficiency Rating": This chart assessed the efficiency of the user's meetings.

3. "My Workload Analysis": This chart provided an analysis of the user's workload.

4. "My Meetings Cost": This chart calculated the cost associated with the user's meetings.

This data empowered the user to observe and analyze their accomplishments from various perspectives and make adjustments to their working strategy accordingly. The collected data was envisioned to become a crucial component of the future service, as we planned to develop a new ML-based predictive model. This model would have the capability to:

• Personalize coaching for users based on the collected data.

• Manage work-life balance to promote user wellness.

• Create a personalized plan for professional growth.

• Implement an internal loyalty program, offering corporate bonuses for better results.

• Automate the management of meetings and required materials.

These features aimed to provide users with comprehensive support and optimize their overall work experience.

Results and conclusions

This project serves as an exemplar of full-stack designer work, encompassing activities from pre-research and ideation to design concept creation, client presentations, and overseeing the product's development process. I established the groundwork for a designer-friendly environment and facilitated seamless collaboration with developers, analysts, and QA professionals. The final result is a remarkable service that I take great pride in.

Throughout the project, I held a leadership role as the sole designer and later transitioned to the position of art director. I saw the project through from its inception to the end. My involvement concluded in 2021, right after the initial release of the app on the App Store. Additionally, I occasionally performed analyst work, such as creating a scheme to explain to the client how recommendations could be generated by our in-app machine learning model.

The scheme I made to explain how we plan to gather results to train the ML-model.

Indeed, the next crucial step would have been to distribute the key corporate principles and their corresponding "meanings" to all employees of NLMK. This would establish a comprehensive role model for the app and potentially pave the way for additional services catered to assistants. The aim was to make the corporate culture an intrinsic part of every individual within the company, like DNA.

Based on the available information, it is evident that the product experienced successful growth within the company. It has now acquired its own Product Owner (PO) and product team. Additionally, my previous team at Redmadrobot began working on an admin panel specifically designed for manager assistants. These advancements demonstrate the ongoing development and expansion of the product and its related services.

Screencast made in a real application right on the final QA testing stage (some animations are not working smoothly yet).

By the end of 2020, the total duration of meetings for top managers decreased by approximately 15%. This resulted in a monthly cost savings of at least 600,000 ₽ per person on average, totaling around 3 million ₽. These improvements were observed within the first 2-3 months after launching the service.