Interface for a Smart Housing and Communal Services Mobile Application

Client

Smart Housing and Communal Services is a platform for developers, management companies, residents and providers of housing and communal services. The platform combines information on the housing and utilities sector in one system and provides interaction between the residents and the management companies. Owners, administrators and suppliers each have their own personal account as a separate user category.

The objective

We have known the Smart Housing and Utilities Project team for a long time. After launching a pilot project for several management companies, the backlog of the product began to expand. Along with the new features, the Smart Housing and Utilities team decided to update the visual part. 

The project consisted of two parts: interface redesign of the administrative panel and development of an updated design of the mobile application on a tight schedule and with limited budget. In this case study we will talk about the development of the mobile application.

This is what the redesigned mobile app looks like.

We have solved similar challenges before, for example, we developed applications for an online pharmacy TabStore and a cashback service Kashbaka.

Course of work

The current interface was used as a working prototype for the application. In 2021, the client planned to scale the application, add new features, and make slight changes to the architecture.

This is what the application looked like before we started working on it.

In addition to the current interface, we analyzed some references — the «YIT+» application that simplifies the interaction between the residents, management company and contractors.

We were working on the mobile app at the same time as we were designing the administrator panel. We started with a two-hour onboarding — the client gave our team a guided tour around the platform. The product manager outlined the problematic areas of the existing solution and told us what features were present in the product development plan for the near future so that we could design keeping them in mind. In addition, we were provided with the latest feedback and requests from the application users, which allowed us to highlight and take into account the weaknesses when doing the design.

The following five cases were the client’s priority:

• payment
• sending a request
• news
• delivery of meter readings
• voting at owners’ meetings.

We took the apps of Sberbank and Tinkov bank as the main reference for the mobile app. We needed to bring miscellaneous elements into a unified design system, making work in the personal account comfortable for real users. 

In the first iteration we tried using the Google Material design system - the same one that we used for the administrator system and that we chose together with the customer. This system has an implementation for frontend frameworks, and the component base allows the designer to create user experience and solve specific challenges instead of coming up with individual ui-elements.

However, after the first iteration, we realized that the system did not look organic on iOS — we needed a more universal design without the legacy of any particular platform. After discussing this situation with the client, we dropped references to Google Material and drew our own version of the design. Our team of two designers, a lead and a middle, drew four concepts and created the UI Kit. We also tidied up the stylistics of the sitec in the process — we worked on fonts and indentation, accessibility and contrast.

This is what we ended up with.

The development

During the development together with the client we decided that the main menu should be dynamic and consist of three to five icons. We also agreed on how to make unique pages and complex design components, such as the services page with a large number of items.

This is how the development of the login screen proceeded.

This is how we worked on the services page with numerous items.

The client also asked us to tidy up the modal windows. We developed an algorithm in order to solve this issue. In this algorithm we described what information we print on the page and what we sent to the modal window. As a result we got short and neat messages.

The client's pain was the colour palette and low contrast of the current interface. We needed to choose a palette and font scheme that would kind of soothe the interface and also correct the application styles in accordance with the web standards for contrast. Some of the users are elderly, and they have trouble reading small, non-contrasty fonts.

Before and after

This is what the app looked like before and after the redesign.

We chose green as the client's primary colour in the corporate identity, and we also introduced additional accent colours for the web version.

We also took into account the possibility of customizing the platform for different management companies — the landing page and web version are branded, and the colour of icons changes in the mobile version. Each brand and management company has their own colour and gradient — the rules are described in the guide that we created and gave to the client.

Example of a colour solution for one of the MCs.

The guide makes it much easier to adapt the design to the corporate style of any management company.

We also do designer supervision of the client's development — we follow the style and UI. Below is the work of the client's designers and our edits on it. 

Testing

During the testing phase we didn’t only test different options for interfaces, filters, and buttons within the team but also used client features. The product manager on the client side tested our work with the help of a group of volunteers — residents who actively use the app. Their suggestions and revision helped us make a comfortable product that best meets the users’ needs. We thank everyone who participated in it for their contribution to our joint work!

The project feature

The app in the default colour palette will be used for demonstration among a small number of users. Management companies have the option to brand the app by customizing their colour palette without diverting from the Material palette.

The result 

The result of our work on the mobile app is an updated interface design that has been positively received by real users.

We also developed a guide to adapting the design of the application to the requirements of the Managing Company: we described the algorithm, how to choose colours for the application, and how to align the control elements with the updated colour palette. The client will be able to offer each managing company a ready-made solution, aligned with the design of the entire mobile app.

Time costs

130 hours for the first version.

What's next

We continue to develop the app and make the interface more accessible and user-friendly. After user feedback about the low readability of elements and fonts, we worked on the contrast and size of elements on the home page: we changed the contrast to meet accessibility requirements (A11y). 

Accessibility in web development exists to ensure that the product (site, application) can be used by as many people as possible, including people with disabilities, such as impaired vision. 

In the screenshot below you can see that all the text blocks in the layout have passed the contrast check.

This is how we worked with the accessibility of the application: the first screenshot is the original, the following ones are the detailed layouts with the client’s and users’ requirements taken into account.