Description of the project

F-Monitoring is a product for monitoring the condition of refrigerators in Silpo - Ukrainian retail corporation that operates a chain of grocery stores. Implemented in the form of an application exclusively for iPad Mini 6.

Process

Modern products are not created according to a linear scheme. The product is a living organism, so I had to jump forward several stages, or go back and update the source data.

Nevertheless, there was a certain process.

1. Defining the task

2. Research. Part 1: Refrigerators

3. Research. Part 2: Supermarket

4. Target audience

5. User scenarios

6. Use cases

7. Information architecture

8. Prototype

9. UI Design

10. Interaction design

1. Defining the task

A supermarket is a place with a huge amount of complex machinery. Its costs, and therefore profits, depend on how well the equipment works. So I tried to find a way to help the supermarket reduce costs.

The method is simple in its essence: to define and monitor the state of all elements on which the operation of the system depends. In our case, the system is a set of refrigerators, and its elements are parts of the refrigerators.

For this project, I used the Silpo supermarket located in my hometown - Kyiv district, Bila Tserkva city, Heroiv Nebesnoi Sotni street, 2a.

2. Research. Part 1: Refrigerators.

How refrigerator works?

First of all, it was necessary to understand the subject area, so I immersed myself in the study of refrigerators for supermarkets. I figured out how they work, what are the types of refrigerators are and what is the difference among them.

Details of refrigerators

When I understood what refrigerator types exist, I figured out what details they consist of. I was interested in details’ names, their tasks and how they work. After all, I will monitor the condition of the details.

Interviews with refrigerator masters

In order to move forward, I wanted to understand what kind of breakdowns occur in refrigerators and what are their causes. To do this, I watched 9 extensive interviews with masters on YouTube. This was enough, because they repeated each other by 80%. As a result, I had a list of possible failures and various causes of these failures.

Indicators for monitoring

Finally, I've reached the final point of my research on refrigeration systems - a list of indicators to monitor for every detail. For example, in the evaporator, you need to monitor the flow of freon, in the capillary tube - the pressure and temperature at the inlet and outlet, in the evaporator fan - the number of RPM, etc.

Competitors / Analogues

I did research among existing products to understand what user needs they were meeting, what features these products had, what visual packaging these products presented.

This is an important step in the research because according to Jacob's Law, "users prefer your app to work the same way as all the other apps they already know." That is why I maintain and develop application behavior patterns that are familiar to users.

Research. Part 2: Supermarket.

The legal side of the supermarket operations

Usually, supermarkets rent space and equipment from the property owner. I do not have data on the selected Silpo, because I worked on the project unofficially.

However, I accidentally managed to find out that the refrigerators are rented. This happened when the security guard "asked" me to leave the supermarket. I’ll tell more about it later.

All that is necessary to know at this point is that there are two parties interested in the existence of a monitoring system. The lessor, who is the owner of the refrigerators, and the lessee - the Silpo supermarket.

Refrigerators in Silpo

I counted 54 refrigerators in our supermarket, which can be classified into 4 types. 34 refrigerators are connected to remote condensers and racks with compressors (this is easy to check, such refrigerators are very quiet). The remaining 20 are plugged-in units with built-in compressors and condensers.

I came to each one, photographed the label with technical information and found refrigerators on the Internet on official sites. I additionally checked the type of power supply: plugged-in or remote.

It is important to understand that the compressors that make the refrigerators work are quite loud. The noise of 3-5 refrigerators is insignificant, but when there are dozens of them, it makes you feel uncomfortable. Therefore, a system with remote compressors is used in supermarkets. These are racks of 10 or more compressors that feed many refrigerators at the same time.

Condensers are also remote - in them freon changes from a gaseous state to a liquid state, and thus the cooling process occurs. Remote condensers are called air condensers, they are usually placed on the roof of the shopping mall in which the supermarket is located.

It was necessary to act carefully, because I did not have any permits. In my city they are wary of initiatives and recommend to ‘be quiet’. I would be happy to make everything officially. But in my case, taking into account the war against Russia, it is impossible.

In the process of research, when I was in the supermarket, I needed to understand which refrigerators were buzzing louder and which were quieter. Buzzing was a sign that one has a plugged-in type of power supply, and the other - remote. Therefore, I stayed for a long time near the refrigerators and recorded the results to iPhone Notes.

At some point, the security guard asked what I was doing. I told about the project, and he ‘advised’ to leave the supermarket. He tried to do it politely and on the way to the exit told that Silpo rents the equipment, so nothing can be written about it. This situation did not hinder my research in any way, because I figured out all the necessary information during previous trips and simply polished the collected material.

Supermarket map

One of the very important elements of my project is an accurate map of the supermarket with the correct dimensions and location of all the refrigerators.

It was necessary to find the area of ​​the room. It is a rectangle, so the area is found by a simple formula. But a starting point was needed. I paid attention to the floor of the room - they consist of identical square plates. Knowing the size of the plate, I will be able to count their number and find out the area.

On the website of the supermarket you can see what day and time it’s most busy. On weekdays it is 17:00 - 19:00. Time when people return from work. I was interested in this time because I wanted to become invisible in the crowd. I found a corner behind the bread counter, took out a tape measure and measured the length of the square plate. Exactly 60 cm. It only remained to find out how many such plates are there in the length and width of the supermarket.

Since I have already been kicked out of Silpo, I didn't want to appear there for several weeks, so as not to run into trouble. Therefore, I asked my girlfriend, who is the best woman in the whole universe, for help. She kindly agreed to do all the necessary work.

The task was simple: to take a cart, walk around the supermarket, put goods in the cart from time to time and take photos. A lot of photos. To reproduce the map, I needed to know the dimensions of the refrigerator and other counters. The easiest way to do this is to count the number of plates near the camera in the photo. As a result of this operation I received more than 100 photos and began to create a map prototype.

After the prototype, I created the design of the map based on the design approach that I will talk about near the end of this case study.

4. Target Audience

There are two parties interested in refrigerators working properly. They are the owner (area and equipment) and the lessee (Silpo). Both of them want to reduce costs and increase profits.

The owner team needs to monitor the condition of the refrigerators and carry out their inspection or repair in a timely manner. The Silpo team needs to control the level of electricity consumption.

5. User Scenarios

For the MVP version of the product, I identified 7 scenarios from the owner team and 2 scenarios from the Silpo team. All functionality is available to members of both teams. Scenarios are based on the needs and responsibilities of the parties.

To put it simply, the owner is responsible for the state of the refrigerators, and Silpo monitors the electricity consumption, remotely changes the temperature and conducts dialogues about the refrigerators in the respective chats.

6. Use Cases

I imagined and described each of the scenarios in detail and turned them into use cases. This made it possible to move on to creating a map of the application pages and a prototype.

7. Information architecture

A well-architected application is one that is easy to use and flexible enough to scale as features increase. Creating an architecture is as dynamic a process as writing use cases or creating a prototype. It was changed and improved as my understanding of the app changed.

It is important to understand that the menu on the left is fixed and never disappears. It provides access to all pages of the application. And you can travel deep into the application and among pages, mainly from the page of a refrigerator.

A special feature of the application is that the map also never disappears. All pages hover over it, and page navigation takes place over the map.

8. Prototype

The main thing I built the prototype around was the map. A real supermarket map that you can navigate and interact with refrigerators. I've looked at alternatives like cards (similar to online stores), list table, etc. But I came to the conclusion that only 2 ways of displaying cameras are needed: Map view an List view.

Fundamentally, they differ in user scenarios.

1. The Map view is necessary to get to the exact refrigerator using visual memory. So it is easier to find it on the map, than in the list.

2. The List view is displayed with filters that will show only a certain category of refrigerators. For example, only those that need to be repaired.

I went through 4 stages of revision of use cases, because during the creation of prototypes I added new functions and removed the irrelevant.

When I described them with words in use cases - they seemed like necessary ones. But, after displaying them in the prototype, when the connections among pages, functions, etc. became visually clear, I realized that some things were needless and removed them.

In fact, I regularly noticed details that could have been improved. In most cases, ‘to improve’ means ‘to remove the excess’. As Dieter Rams says, 'less is more'.

User Flows

To demonstrate the user flow in different scenarios, I've put prototype screens and commented them out.

9. UI Design

Silpo website

The Silpo website became an important reference for the visual style. I borrowed colors and the principle by which they were applied to such elements, as: text, primary and secondary buttons, background, etc.

Font



I moved away from the font used on Silpo's website (Proxima Nova) and chose a more familiar one for users of Apple products (San Francisco Pro, abbreviated as SF Pro). SF Pro letters are slightly narrower, allowing more characters to fit on a line. In all other aspects, the fonts don’t make much difference to the average person, so moving to SF Pro them does not change much the perception of the interface.

References from Apple

I wanted to make the product visually similar to iOS and macOS design. So I relied on Apple's HIG for the visual design, and I also researched a number of apps on Product Hunt made for macOS to borrow elements from them.

Design elements

After combining the logic of the prototype with the chosen visual style, I created the design of the final product. The prototype was highly detailed and looked like an almost finished product. But I wanted to go a step further and improve every part of it.

During the UI design phase, I looked at the prototype with the fresh view and forced myself to look for better ways to visualize it. From my experience, this approach to myself allows me to apply maximum of my efforts as a designer.

I want to emphasize the size and location of all interface elements. Users will interact using their fingers via a small tablet. According to Fitts' Law, ‘the time required to reach a target depends on the distance to the target and its size.’ Accordingly, the interface should be such that the finger always aims exactly into the desired element, or at least with a minimal deviation.

10. Interaction Design

The process of interaction with the interface, expressed in the form of animations, is of great importance from both a functional and an aesthetic points of view. My approach to animations is simple: there should be exactly as much of them, as needed. F-monitoring is a functional application that is used every day. Complex and beautiful animations will create a wow-effect only once, but with constant use they will be distracting.

This approach is optimal if we recall Dohertys’ Law of the threshold, according to which ‘performance increases when the interface and the user interact at a rate of less than 400 ms, and provide a state in which neither of them has to wait for the other.’

I used only widely used patterns for interacting with the product: tap, scroll and swipe. This approach allows users to quickly adapt to the interface and perform their tasks.