Nikola Rajić UX/UI

❖ Nikola Rajić

UX/UI designer

Case Studies

About

Contact

❖ Nikola Rajić

UX/UI designer

Overview

Product

CheckIT Labs is a multi-product company consisting of 6 different products, covering HR, medical, utility, educational and IT sectors. The platform CheckIT Learning is a combination of Learning Management System (LMS) and Student Information System (SIS). It means that it covers all the needs of a typical modern school or university. The platform was made for diverse markets covering multiple continents.

Role

I worked on a CheckIT Learning platform as a UX/UI designer in a design team of 3 people. I worked on the learning platform as a UI/UX designer but I also did branding and design system for all the products. I collaborated with product, development and marketing teams.

Duration

Project lasted 24 months.

Challenge

Problem

When I arrived at the company there was only one designer in the team, and all design was created in Adobe XD - already back than discontinued software. There was no design system in place, the platform lacked consistency in some areas and made the design work slower. Design workflow between developers and designers needed to be restructured. So the first task was to convert XD files to Figma, mostly done by hand since conversion plugins didn't provide optimal results. Next task was to create clear structure of new files and naming standards that follow development cycles.

Once the main bottleneck in a workflow was dealt with, the design team was able to focus on the product challenges. At this point the product was already 2 years old and founders realized late in the game that their original approach needed to be redesigned almost from the ground up, since the existing product didn’t work well on the market. At the same time when I arrived new learning specialists was introduced to help with this transition. Together we created a Low-Fi UX workflow of the ideal platform and pinpointed main topics that needed to be researched to fill the gaps. What helped us a lot was that we did a competitive analysis and we did preliminary interviews with other learning specialists.

Constrains

Since there was already a lot of code done the main constraint was to use as much existing code and design into the new platform. We had to keep scope doable and fit into the project time frame. So there was constant negotiation on the 3 questions:

Can we justuse what we have?

Can we tweak what we have?

Do we need to start from the scratch?

Approach

General approach

Since the main issue in the design process of the previous platform was lack of research and testing with customers we decided to actually do that. There were many initiatives covering different aspects of the platform for all the user roles, but in this case study I will focus on teachers since they use the app most out of the mentioned roles.

Research

We designed a research for 15 teachers in 2 phases. In the first phase we did a workshop where we figured out what the main pain points in their work were, how does that relate to our platform and how we can improve it. In the second phase we did individual interviews where we shadowed them in their daily computer work with the idea to figure out if there was something left out in the workshops and to get a better understanding of their work.

Key insights

The main issue with the existing solutions teachers face were: constant app switching, lack of integration between the apps, big amount of time during the week was spent on the mundane administrative tasks which took them time and energy from the students and teaching. Some of the issues were trivial UX problems, some were on the system level lack of features.

When creating lectures, teachers had problems with easily assigning students in groups. The process was so convoluted and involved multiple modals that they found easier to assign each student one by one, since the students were not organized in the fashion they needed.

All teachers were complaining that they needed to use many different apps over the day in order to finish simple tasks. One teacher had 22 different apps, almost every job was a separate app. What added complexity was that they were poorly integrated, so teachers had to copy-paste the same data in multiple places. For example curriculum app was not connected with reporting app, so in the reports they manually had to input names of their lessons.

Design Decision

We decided that we need to streamline the whole teacher-student workflow and cover all main needs in one integrated platform solution with a special care to user experience.

Solution

General approach

We created simple navigation where features were logically grouped. All teachers needs were covered in one integrated solution.

Dashboard

Calendar

Gradebook

Dashboard

Resources
& Materials

Here are screens made in transitional design system showing: dashboard, course content, activities, course grade evaluation, student roster, and calendar.

Open all screens in Figma

Important interactions

Here you can see design tackling assigning issue teachers were facing. Teacher can choose 3 assigning options: everyone (select all students available for the content type), sections (select specific sections of students) and individual students (allows filtering, sorting, batch selection of students). Everything is reachable from one dialog.

Branding and a transitional design system

When I arrived there was no design system but there was a visual language, colors, and typography in place, but it wasn’t always consistent and in some cases same UX patterns were using different approaches. It was also clear that CheckIT had other products that could benefit the same design system with custom theming. Since redesigning a whole platform went against the idea of reusing existing code, we had a transitioning design system first and later I did a completely new design system. For the transitional design system we took all the existing components, audited them, simplified them and made clear color and typography styles. What was possible to do without any refactoring is branding, so I designed all the logos of the products under CheckIT Labs umbrella. Click here to see all variations of logos in Figma.

Open all logo variations in Figma

CheckIT Design System 2.0

Once it was the right time for the team I made a completely new design system that can be used for all the products. It had to follow WCAG accessibility standards (something that was brought up on several occasions in the research), support easy themeing (needed for different brands and dark/light interface, requested by many users), and support large desktop monitors (used by administration and teachers) and small notebook devices (used by students). To achieve this I used design tokens and collaborated with developers in order to be on the same page and make sure that designers software (Figma) and code base used by front end had the same values and have the same look and feel.

Open full design system in Figma

Top image is Transitional design system and bottom is the Design System 2.0. New design system have more components, clear design language, color pallet with sufficient contrasts between foreground and background elements, and clear typography structure.

Since everything is defined by color, typography and spacing tokens making new themes is trivial for designers and developers. Here you can compare White VS Contrast Black themes.

Impact

Results For Users

Teachers experienced a more unified workflow by reducing the need to switch between multiple disconnected tools.

Administrative tasks such as grading, attendance, and course management became more centralized, reducing manual duplication of work.

The new student selection feature made it easier for teachers to organize students into meaningful groups, improving how they distribute and delivered lectures.

Overall, the platform became more predictable and consistent, reducing confusion caused by previously fragmented UI patterns.

Results for the team

The introduction of user research shifted the design process from assumption-driven to evidence-based product development.

The transition design system improved consistency across existing products while allowing the team to continue development without a full rebuild.

CheckIT Design System 2.0 created a shared foundation between design and engineering through design tokens, improving implementation speed and reducing UI discrepancies.

Collaboration between design and development teams became more structured, especially around prioritization of what to reuse, adapt, or rebuild.

The ecosystem of CheckIT Labs products became visually and structurally aligned, enabling easier expansion into new markets and product lines.

Lessons learned

Working in a legacy system with existing code constraints forced constant negotiation between ideal UX and technical feasibility, which shaped a more pragmatic design approach.

Introducing research late in the product lifecycle highlighted how much design decisions depend on early validation.

Building two design systems (transition + final) showed the importance of incremental change when working with large, established code bases.

One of the key takeaways was that in enterprise products, solving fragmentation is often more valuable than introducing new features.