Kadromierz is a staff-management application made for the HoReCa market. It lets managers and business owners create work schedules, record work hours, communicate with their employees and improve their businesses in many other ways.

Started just as a time clock, Kadromierz grew into one of the leading solutions on the polish market, supplying hundreds of businesses and thousands of employees.

Since 2018, during my ongoing work with Kadromierz, I was responsible for all of the product design process stages. I conducted multiple product workshops, designed mobile and web applications, websites and marketing materials, developed a fresher visual language and many more.
‍
Together with the Kadromierz team, we are constantly improving the platform, adding new features and extending the company’s service range.

In this case study, I would like to show you some of the more interesting designs and changes. Since I don’t find out of context whiteboards with a lot on doodles and post its very informative, I left out all of the workshops photos. Also, keep in mind that Kadromierz originally functions only on the Polish market, therefore all of the screens were translated into English.

It was crucial to roll-out the new interface parts carefully and not all at once. Radically changing the interface of an everyday work tool, however intuitive and nice the change might be, might disrupt the user's routine activities in the app.
‍
We decided to launch the improved UI elements one-by-one, starting with the ones that needed the most attention.

There was several things wrong with the current shift tile design. First, the colors used for the majority of the element were really strong and saturated. Also, because of inconsistent brightness and saturation levels in the palette, the white font used on all of them had different contrast with the background - which o course was not the greatest thing for the overall readability of the view. 
‍
While it was easy to make the color scheme more eye-pleasing, with that significant change we needed to make sure that it won’t affect anyone’s everyday job. Managers were used to certain colors meaning certain positions, so we needed to do this carefully.

First up, the palette needed to have a consistent starting point. Every existing color was tweaked a little bit to provide similar saturation and value levels across the palette. Also, because some of the colors were hard to differentiate from each other, 7 of them were dropped, resulting in 18 total base colors in the new palette.

Next, every base color was given 2 darker and 2 lighter variants to be applied when needed. Darker ones are used for fonts, accents, and icons, while lighter ones for elements backgrounds and other bigger interface elements. That enables to keep different parts of UI clearer by applying less intensive colors while keeping recognizability of particular hues. Eg. the bartender is still associated with color purple, sometimes it’s just lighter and sometimes darker.

The first thing implemented in the redesigned app was the toolbar - a fixed container on top of the screen, existing in most of the views in various forms. Before the redesign, the toolbar took up a lot of the screen, making fluid work far more difficult. It contained some obsolete elements like the huge title and buttons that belonged in different parts of the interface, as well as controls that were not intuitive and too small (despite the overall size of the toolbar).
‍
The new toolbar is way more compact without losing its functionality, all of the functions are grouped and controlled by adequate and more intuitive UI elements. After the new toolbar was rolled out, users were happy with way more space on the screen, the convenience of the new controls and buttons and overall impact on their everyday work.

With a product of this scale, it is necessary to move around different views with ease and fluidity. As the platform grew, it turned out that single-level side navigation is not enough for all its functions - first, it got kind of overcrowded, then some views received inside tab navigation, and links to others were hidden in different parts o the interface than the main navigation. Ugh.
‍
We started working on the new navigation with card sorting exercise. That resulted in grouping related views and features together. Then, out of it, we made a two-level side navigation with groups and single views possible to reach without diving deep and clicking through different parts of UI.

As a result, the schedule view (and most of the other ones) became more clear and easy to work on. Users can do what they did before with more fluency and fewer distractions. Also, with the gradual implementation of those features, their everyday job won’t be affected by drastic changes and getting used to new UI elements will be easier.

Of course, that was only a part of what was done in the Kadromierz web app. Apart from these elements, a whole new design system is being developed and implemented. To ensure better usability and seamless experience across the entire product, we created new inputs, modals, buttons, switches, dropdown and a bunch of other stuff, some of which you can see below.

The onboarding process was divided into 2 bigger steps - firstly, still on the website, we ask the users to fill some basic data about their company. Then, inside the platform, we help them set up the app to test it on leaving and breathing data.

Most of the time, managers that want to try out the app don’t necessarily have all the time in the world. Based on that we prepared two test versions of the website. First, the quicker option is to choose one of the pre-filled demo versions of the app. Kadromierz team prepared test accounts simulating existing companies from different industries - each having an adequate number of employees and locations whether it’s a restaurant, gym or a hotel.
‍
The second option, in exchange for some additional time, gives the users the possibility to set up their own company. Instead of just giving them access to the empty platform right away, we prepared a few forms that helped them add their employees, their positions and locations. That way, they could operate on some of their own data, and, if decided to keep using Kadromierz, wouldn’t have to set up the app from scratch.

Since most of the companies employ tens and hundreds of people, business owners should not be forced to devote a lot of time to explain the product to their employees. That’s why, after logging in to the application, every user is presented with a quick onboarding explaining what they can find in the app.

For the app, we also wanted to develop a slightly friendlier, less corporate look. Though for business owners Kadromierz is a time-saving tool, some employees might associate the product with supervision or another office tool. Therefore, the mobile app uses different fonts, colors, shapes, illustrations and communication language.

For all the outside communication, we developed different styles of visual language prepared for different needs. For most of the marketing and client communication use, we created a style based on photography positioning the brand in particular environments. On another hand, visual language inside the platform, in the employee mobile app, and, in some of the landing pages, uses a lot of soft, flat and friendly illustrations.

Some of the websites and marketing materials were prepared in different styles to test their performance in different target groups.

Apart from the digital products, I work with Kadromierz on a number of marketing and print materials, consulting ongoing design changes, implementing already designed elements and supervising other designer’s work. Also, a living product with a lot of users is never finished - we still tweak, change and add a lot of things - from buttons placement to changing the whole screens website layouts.
‍
If you want to see more of my work - be sure to check out other digital products case studies - linked below.