web app | mobile app | branding

Application for efficient printer management

Princity

story

Princity is an application that detects printers on the network or via USB, reads all data from them and, thanks to monitoring, allows you to save on printing and operating costs. It is a solution that is used by printer rental companies to comprehensively manage their entire fleet of devices.

Princity
is a Polish startup with an international reach, for which we have designed the entire design system and implemented it in a web application, mobile application and promotional materials. We designed the logo and the entire visual key of the brand.

Meet the most advanced tool for efficient printer management.

Princity is used mainly by companies offering the so-called MPS (Managed Print Services) contracts, i.e. leasing printers and taking care of their operation (repairs, ink replacement, usage statistics, etc.). Such a company must be able to manage a fleet of a huge number of printers with an extensive reporting system and the ease of quick analysis of the situation in any company in a specific printer.

Designing Princity applications is primarily about facilitating the use of a huge amount of data and the ability to quickly respond to errors and failures. The web application is the main management tool for MPS. On the other hand, the mobile application makes it easier for the printer client to connect to the network.

UI KIT, Mockup, Workshops

Understanding the application and drawing all its aspects was possible thanks to conducting a series of workshops and drawing all user paths - for this we used the Whimsical program. On the basis of this, the so-called wireframe (application sketch) and after a series of tests, the first mock-ups were created.

We had an existing version of the application at our disposal, and our task was to redesign it taking into account all comments from current customers and the product development team.

Parallel to the creation of the mock-up, the UI KIT was created, i.e. a set of elements used in the web and later mobile application. This complemented the branding we designed, which together form the Princity Product Design System.

UI KIT is not only a way to organize and keep the visual rules in the application, but also a huge time saving when implementing new modules and modifications.

Dashboard. Check company statistics.

The Dashboard is the first screen that the user sees in the web application. For a printer fleet manager, it is a place where they can analyze the health of all devices in any company they support.

We have designed two versions of the desktop - dark and light, which can be used interchangeably. We have prepared a number of original illustrations and charts that were to better visualize the data and draw attention to emerging problems as quickly as possible.

Structure, tables and design consistency

Princity has been divided into areas presenting the most important functionalities of the project: management of companies (clients), printers, consumables, service and reports. Our consistency in building views means that the user always looks for solutions in the same places - the name of the subpage, search, interaction buttons are always in the same places, regardless of the tab.

Tables are the most common element in a project. The choice of typography, colors or line spacing is to maximize the readability of a large amount of data, often shown in several lines. Green typography always means that something is clickable.

Access to relevant information in the application requires quick navigation between tabs within a given subpage and between the perspective of a specific company or printer. Therefore, we decided to implement two parallel menus on the left and on the right. The user can quickly search for items both globally (right-hand menu) and in detail (left-hand menu)

Configurations

Billing management is Princity's second most important functionality, apart from printer efficiency management. We presented a multitude of options using blocks with an illustration - the application is much clearer and more pleasant to configure.

Agent - additional application

The agent is an additional application that, when installed in the client's environment, reads data from printers according to a set schedule. We visualized the agent with a robot that changes its appearance and color depending on its status

Printers - the second dashboard

The heart of the project are, of course, printers that, connected to the Princity application, inform the user about their operating status. The most important thing is the level of consumption of individual materials - the printer, contrary to appearances, does not only have toners. The application allows you to track and compare all devices globally or view the details of each one separately.

We have two dashboards in the application - one for the entire application, where we can see the status of activities in all the companies that support it. The second is on the subpage with the selected printer. Thanks to the left and right navigation, the user can quickly switch between printers and between the tab of interest.

Switching between the tabs, on the left, we see a dedicated description and illustration that tells the user what the subpage is dedicated to.

The impending need to replace the material in the printer makes it appear in the "orders" tab. The application user knows which printer resources require replacement and can carry out the entire process of sending new material to his client in the application - select a courier, print a shipping card, mark as shipped.

When designing, we took care to simplify the process as much as possible, so orders can be made individually or collectively.

Illustrated notifications

Notifications in applications always appear. When we have an empty search result, filtering, an empty subpage and in many other typical application scenarios. We made sure that each alerts in the Princity application was as understandable to the user as possible - we prepared dedicated illustrations and we made sure that each description was understandable.

Supplies - complicated ordering process.

The version of the application designed by us is the next version of the Princity interface. Thanks to the feedback collected from users, we were able to approach each view from scratch - designing for specific needs and solving real problems with the previous version of the application.

One of the more difficult tabs to design were materials that reflect the status of materials in printers, indicate the ordering stage and manage the warehouse space.

We have simplified the division into tabs in the design process and highlighted those that require the user's attention each time they enter the application - they are additionally marked with a color and an icon in the menu on the left.

Most of the data in the application appears in the form of a table that the user should read as quickly and easily as possible in order to know how to react to a given alert. Individual material and order statuses have an additional pictogram that appears in the table lines as an aid to faster recognition of the problem.

Supplies and Orders are two areas that are related to each other. Each resource in the printer has some order status, and it is essential for the user to quickly read this step. So we designed a table in which the supplies are listed in the following lines, and the next steps of the order appear at the bottom of it. Thanks to the use of colors that distinguish each order status, we were able to paint the row with a given color - such a solution improves the browsing of resources in the context of the stage at which a given order is located.

Reporting system

Generating reports is the basic functionality of the application, which required us to design a proprietary system for creating basically any report. Together with the implementation team on the side of Princity projects, we managed to create assumptions and determine what possibilities we have.

The reporting system designed by us allows the user to freely create reports by selecting the scope, visible columns and rows. In addition to the configurator, it is possible to use previously developed reports in the form of templates. Additionally, each report can be saved and set up for its automatic sending.

Mobile application

The mobile application is a product of the Princity system, which is intended for companies that want to manage their fleet of printers themselves - without an intermediary in the form of MPS.

The first step after logging in to the application is to connect the printers using the wifi network. We have designed illustrations that help the user understand step by step what point in the configuration they are in.

Printer status and details

The user of the mobile application usually connects from a few to a dozen printers. Compared to the web application, this is a number that allowed us to approach the presentation of printers, their statuses and material consumption differently.

Purchasing process

We have also designed the process of ordering new materials along with the basket and payment selection. All the typical shopping options for an in-store application are available.

Alerts

The user can track the status of his printer fleet with the help of emerging alerts. We differentiated the colors of the notifications due to their importance and we designed the method of contact with the support.

Branding

The Princity project is not only an application interface, but also a logo and visual key, which we also had the pleasure to design. We also took part in the process of creating the name.

The Princity app manages a huge amount of data presented in tables and charts. From the very beginning, we wanted the logo and the visual key to "soften" the very thematically serious nature of the project. The very name and typography in the logo indicate that the brand is definitely friendly and does not want to scare the user away. The graphic solutions are dominated by soft shapes and curves, and the whole thing is full of illustrations and pictograms.

Branding and UI kit form an extensive Design System that determines the entire manner of Princity communication.

Illustrations

A separate illustration has been created for each tab in the application. Some of them are animated in order to better tell the user what a given part of the application does. We really wanted the illustrations not to be too light, but friendly enough to fit the main atmosphere of the brand. We used the main colors of the brand - green and orange, and in the background we added a background in the form of soft shapes also appearing in the main menu.