Redesign of the resident web application

Numbers

Start — January 2022
Project time — 2 months
Labor cost — 140 hours

About client

"Smart Housing and Utilities" is a digital integration platform for management companies, developers and residents, and our regular customer. We have already implemented the design of two key products from the platform ecosystem: a control room for a management company and a mobile app for residents. We have talked about these projects before.

Problem statement

In January 2022, the platform product team began redesigning the tenant's web app. Our task is to adapt the design of the mobile app to the desktop look, using the UI Kit we used to work on.

The second part of the task is branding for several management companies.

Why such a task is a challange

Imagine that a ready-made UI Kit developed for a mobile application comes to you. And the task is to turn it into a web application for the desktop.

The first problem is that some elements are in principle created only for the mobile view, with the expectation for the size of phones.

The second is that many of the scenarios implemented with multiple screens on the desktop obviously need to be reworked and repurposed.

If you're an evangelist of the mobile first approach, this is an ideal task to test your skill.

Looking for the home screen layout

We started the project with the development of the home page wireframe. This is the most time-consuming and responsible task. The layout of the home page sets the grid for the rest of the pages. After several approaches, we decided on the layout and widgets on the home page. And we decided to work through detailed scenarios in the design.

First variant. We took a look at the requirements, saw how everything fits on the page.

What if we go in the direction of an analytical dashboard? No - it's too complicated.

Guys, we have a breakdown in logic here! So far, the wireframe is inconsistent =(

Final. The list of apartments is separate, with information on each apartment on the right. We abandoned the summary view, leaving ideas for the future.

Getting to the design

The client really wanted the main page to display as much information as possible. Specifically, the task was to minimize the time it takes to get the desired figure, status, and data.

We tackled the issue of hierarchy of widgets, worked out the accents block by block. We prepared about 10 variants of the concept, experimented a lot until we came to the final design.

First variant. Apply styles to blocks. Assemble the list of problems.

Testing options for arranging blocks of the main content part.

The final version. We have set the accents, removed the noisy elements.

In most of the scenarios that are launched from the main screen, the second screen is the apartment page. We worked on it pretty hard, too. This is the version that we ended up with.

Финальная версия страницы квартиры в Веб-приложении Умное ЖКХ

Difficulties of adaptation. Metering devices

One of the difficult blocks to adapt is metering. In terms of markup, these are just a few simple forms. But these forms contain as much business and interface logic they:
– classic field validation and checking for extreme values
– data submission periods and field activity
– different units of measure
– from one to several input fields, depending on the type of meter

Keep in mind that the metering devices functionality is hot (let's call it that =)). That is, the functionality of the metering module on the platform is not yet established. New requirements appear on a regular basis.

The appearance of the meters page before the redesign.

First variant. All the basic styles are already taken from the UI Kit.

Final version. We added navigation to the page header and moved the main button under the content.

More services

After the page with readings and meters, we moved on to adapting the Service Cabinet and the application page for the management company. The complexity of the service cabinet is that this section is highly dependent on content.

My client and I did some tests on how best to shape the covers, descriptions, application form:
– metaphor icons only
– a solid background combined with a stock photo
– only stock photo

We chose the most universal variant for the catalog and the cover of the service.

Trying service categories in the wireframe.

Page with a list of category services.

On the page of the service, we implemented the order form.

Archive, receipts, voting

There were no tables in the mobile app, so we developed the item lists anew.

But we were able to adapt the developments for displaying receipts, votes, and the archive of meter readings. As a result, the interface of the web application has no place for cumbersome tables - everything is clean, minimalistic, and to the point.

Voting is an important feature for many management companies.

We adapt the design of receipts from the mobile app to desktop.

One of the screens in the receipt payment script.

Expanding the design guidelines for Management Companies

We had already met the task of branding the interface to match the corporate colors of the management company, and we were ready for it. We had a guide for selecting and adapting colors. Even the most "unsuccessful" UI colors could be transformed and used. Moreover, even at the stage of homepage design we began to try on how the other color styles would "fit".

As a result, branding tasks took only a couple of hours for each manager.

Results

We drew the main screens, did branding and built a workflow for another product from the platform ecosystem. Now the project is on pause - we are waiting for the implementation of the already designed functionality to conduct designer's supervision.

Learn more about the platform update on the client's website