Digitalizing repairs
Renovating an apartment is a tiring process as the owner must find contractors, purchase supplies, and stay in touch with a foreman. It becomes even more difficult when all of this must be done remotely. Our client knows this firsthand, and they are not alone in this struggle. Many owners of apartments in Dubai either reside outside of the country or have busy schedules. Additionally, some people invest in real estate but are unable to oversee all of their properties. Our clients decided to create a service that lets users monitor construction progress from afar.
Settler is meant to help users manage renovations for their Dubai property from anywhere in the world. Users just need to fill out a request form, provide their requirements to the contractors, set a budget, and hand over the keys. The Settler team will handle the rest .
We at Purrweb had already developed real estate services such as Pad for finding neighbors and Post-a-Room for gathering information on the London housing market. So we understood the specifics of this field and knew what was in store for us.
We had to digitalize the entire process of renovating and combine everything in a single app
Thorough planning
During this major project, we were supposed to make:
- a user app for Android and iOS
- an app for interior designers
- a web-based administrative panel
- a landing page to collect user requests
We had to meet a deadline set by our client, who approached us in September and requested that the application be released by New Year’s. The goal was to showcase the service to their friends and seek investors in a calm environment. It was important to consider that stores could take up to two weeks to review the application, so it had to be completed with some time to spare .
To meet our deadline, we opted for the versioned approach. To do this,we prioritized all the features and planned 5 versions of the app.
Versioned approach in action
First, we compressed the feature list as much as possible and made an MVP, so we could publish it to stores in time. Afterwards, we worked on updates and expanded the service over time.
With this approach, every new version is an updated form of the previous one and contains new features and additions
The versioned approach modified the development process. After every two-week sprint, we updated the app in the stores. Thus, everybody could see how the product was evolving gradually.
Besides, this method allowed our client to revise feature priorities: they could determine which features to include in the next version of the app.
Less visual noise and more coziness
During our briefing session, the client shared their design ideas with us. Some of the references they sent included our projects, so we quickly found common ground .
We went for a minimalist design to help users stay focused on the main objective — renovating their place. The clients wanted the app to evoke a warm and cozy atmosphere, so we chose the color of Spanish oranges as an accent color.. And yes, you guessed correctly, it’s indeed called Spanish Orange.
Minimalistic design takes the pressure off the user and helps to focus on what’s important
We chose Lexend Deca as the ideal typeface for the Settler app. This rounded sans-serif typeface looks friendly and gentle. Its readability makes this typeface a perfect fit for mobile UIs. Plus, it was free, which was a nice bonus for our client. Little things can make you happy too.
Lexend Deca is a variable typeface that works well for mobile app UIs
To design the app, we determined the main renovation stages and used UX design to provide the best possible user experience.
User won’t have to fuss around with a tape measure
Measurements are an important part of the preparation stage. If something goes wrong during this stage, workers may run out of supplies, such as tiles or wallpaper.
To eliminate the user’s worries, our client decided that the measurements will be taken by a specifically trained person, and all the information on the layout will be stored in the application. In addition, the measurements themselves will be taken in 3D using a third-party application and uploaded to Settler via the admin panel.
We created a feature that allows users to upload photos, so that all the nuances of the apartment can be taken into account. Additionally, a feature we added allows users to view the layout of each room if they want to check specific measurements.
On the left, you can see the measurements of the whole apartment, while on the right, only for a specific room — this could be useful for those who only need to renovate certain areas
Making a design concept and saving time
Settler was meant to be an interaction tool for an owner and their contractors, including an interior designer.
From our own experience, we know that briefing sessions can simplify and speed up a designer’s workflow. That’s why we integrated design briefs into the onboarding process. To make it as visual as possible, we decided to offer ready-made interior images for users to choose from. This makes it easier for users and designers to communicate and saves time on initial calls.
We prepared a design brief with photos of interiors in advance to make it easier for the user to express their desires, and for the designer to implement them
In the end, the user will get a design-project right in the app and will be able to discuss it with the designer via chat if necessary.
The whole renovation process on a single screen
Settler is supposed to allow users to monitor the renovation process from any location in the world. So we focused on the Stages block, which shows the important renovation stages: completed, being renovated, and to-do.
The Stages block clearly shows the renovation progress
This way, users will always have the latest news on the renovation of their apartment. If necessary, they can always contact an administrator and ask a question.
How did $1,500 turn into $200,000?
Renovations require expenses. It was important to the client that the users could keep them under control with Settler. Therefore, we included features that allowed:
- selecting a budget during the onboarding process
- monitoring expenditures
- viewing past and upcoming payments
- keeping all invoices and receipts from contractors in a single place
Here a user can see the recent payments, the amount of money spent on the renovation, and the current balance
Development: saving on technologies
During development we used our usual stack: backend on NodeJS + Nest, mobile app on React Native, admin panel on React.
We decided to make a single React Native app for Android and iOS. This cross-platform approach allowed us to save up to 30%, compared to native development. To learn more about the pros and cons of these two development methods, read our article.
We made a custom admin panel instead of using the React Admin framework. This way, we can easily scale it if needed.
This is the administrative panel that allows an administrator manage all processes
As we develop an app, we always strive to find simple ways to implement features so that we can quickly test and improve them in the future.
Read further to learn how we achieved this
📺 Streams.The client proposed adding live streams so that users could watch the renovation process in real-time. We searched for a suitable tool. At first, we aimed to use webcams, but we discovered a more affordable and simple option: linking to an active broadcast..Admin adds a link to the stream, and a user can tap it to watch the stream on a third-party service. This option was six times cheaper to implement , costing only $500 instead of $3,000.
💸 Payments. To save on payments and speed up development, we came up with this payment option: users receive payment details to transfer money through a banking app. Then they make a screenshot of a receipt and upload it to Settler. This solution was 7 times cheaper, so we saved $7,250 for our client.
After making a payment through a banking app, users must upload the receipt to Settler
📅 Calendar. A user needs a calendar to plan and schedule calls. At first, we wanted to integrate it into the app, but later decided that a third-party app would be a better option, and chose Calendly. This solution cost only $300, so we saved $2,700 for our client.
Why our client went for in-house development in the end
We planned to work on the project for almost a year, but after a few months the client thought about switching to an inhouse team. He liked the speed and quality of our work, but he wanted to save money because he had no investors yet and was spending his own money.
Initially, a large team of 10+ people worked on the project to meet the tight deadlines. We offered the client to reduce it — yes, the speed of development decreased, but we saved about 30% of the monthly budget.
The client was uncertain, so we had a few more meetings.
First, we discussed the advantages of working with our studio. For example, we take on the risks: if someone falls ill, we can always find a replacement. Also, our processes are transparent and we always meet deadlines.
Second, we came up with another way to minimize costs — the client could let us develop the app and assign their in-house team to develop the administrative panel.
Still, our client needed to reduce the budget dramatically. They were ready to spend time and energy to find and coordinate freelancers in order to save money. Besides, they knew how the product would function and what was necessary for its further development — by that time, we had already made the project’s foundation and planned its development out. Eventually, they opted for an in-house team.
Getting ready to let go
We did our best to make this transition as seamless as possible. That’s why we:
1️⃣ updated all the documents, created a file with access data for all of the services, and made a special list of all the non-priority bugs.
For example, this is what part of the ER diagram of a database looks like, showing how the main objects are interconnected and how data moves between them. It will make it easier for developers in the inhouse team to understand the structure of the project
2️⃣ updated the UI kit and included all the styles, options, and states we used during the development. We also created a Figma file with all of the screens and developed a user-friendly navigation for various scenarios and roles.
The UI kit contains all the key design components. This makes it easier for designers to create new pages and saves time for developers
3️⃣ made a file with all the plans and ideas we had discussed with our client.
There was a product manager on the client’s side – we made a document for him in which we described all entities in the admin panel, roles and basic flows. Also, we gave advice on team selection.
4️⃣ had calls to discuss our internal project processes and held an onboarding session with new employees, where we explained the internal processes, the code structure, and the tools we used. Then we answered their questions and passed on the code.
5️⃣ made a general chat with new developers so we could help in case of difficulties.
We still keep in touch with the in-house team and answer their questions
In many aspects, the process resembled our typical final stage when we deliver a completed product to a client.
The result
We at Purrweb made the first version of the service: a user app, an administrative panel, and a landing page. Laid the foundation for further development and still keep in touch with the team that is currently working on Settler.
