Contents

    Client

    Build.BRO is a chain of home improvement stores. It has been on the market since 1995 and is rated one of the TOP 10 largest online stores in the country. 

    Note: the company name was changed under the terms of the NDA.

    Project Idea

    Converting the features of the web service Build.BRO into a mobile application. 

    Challenges

    Creating a service that feels organic on a phone

    One of the segments of our target audience is repair professionals. They are always on the go and often fill out site data or draw up bills of quantities at night or lunch. This means data gets scattered across several chats, notes, and bits of paper. A mobile app could become a comprehensive tool they could use to quickly enter all the project information with just their smartphones. Our team had to create this tool for construction supervisors and heads of repair crews.

    Converting the tool that helps manage several sites of varying complexity into a mobile app

    Build.BRO is a service popular among construction supervisors and heads of construction companies. It enables users to simultaneously manage several projects that may vary in complexity: anything from a simple renovation to building a house. To help users keep every detail in mind and make numbers add up, the service provides features to create bills of quantities and do financial accounting, helping create shopping lists of construction supplies and purchase them right on the Client’s website, calculate footage and lineal yards for projects, and track payments from clients. 

    Web Version
    A sample bill of quantities on the web service Build.BRO

    Cutting down on time-to-market 

    Build.BRO needed the MVP to be launched swiftly to make sure that the service would be popular among its target audience, and only then keep developing it. To implement the project, we chose Flutter. Thanks to this cross-platform framework by Google, we could approach deadlines in iterations and cut our time to market and the budget down to 40%

    Results

    In half a year, Surf had created an app with a starter set of crucial features:

    • reference: a set of standard works that can be combined like building blocks to estimate the future project quickly,
    • BoQ (bill of quantities): helps put together a quick plan of all the works and necessary construction supplies and share it all with a client in a simple way;
    • friendly interface with no distractions.

    Build.BRO managed to quickly test their business hypothesis for relevance and decide on how to take the project further.

    Solutions

    Competitor analysis

    To analyze the competitive landscape, we looked into seven solutions offering features somewhat similar to Build.BRO and examined their capabilities. We saw that some apps are designed for professionals with narrow expertise and enormous practical skills, while others are too cluttered. They are no good for a contractor who has just entered the field because they contain a lot of technical language, calculations are largely left without comments or instructions, and the pro subscription is mostly paid.

    We took that into account and made the first scope of work include key features necessary to manage a construction site. In addition, we designed the app in such a way that it would be friendly for both new and experienced workers.

    CJM

    To do a decent job of planning a project and prioritizing features, we suggest that clients start the journey with predesign. That was the path we took with Build.BRO.

    Following competitor analysis, our product team put together the customer journey map (CJM). That entailed determining the most relevant pains and needs of our future users.

    Table
    A sample CJM for a supervisor in Build.BRO

    Build.BRO new, supervisor

    The hardest thing about the target audience in Build.BRO was that supervisors and heads of construction crews found the web version inconvenient; for the most part, they work on sites with no access to a computer. After a visit to a specific site, they would get to their computers and combine everything they wrote in a notebook into an Excel spreadsheet. That took plenty of time and energy, and filling out a spreadsheet on a smartphone is far from easy; it means switching between screens, which significantly slows down data processing. Meanwhile, a mobile app makes it easy to enter the data with a smartphone “on the go”.

    As we were drawing up the CJM, we realized that the app will handle large volumes of data, while cramming over a hundred table rows into one screen of a mobile app is almost impossible. To address that, we followed an object-oriented approach, i.e., built a hierarchical system of all the entities in the app. Based on the properties of each entity, we defined its role: bill of quantities, site, contractor, addresses, and documents—all of these are the central figures in the app. Thanks to that, we could visualize all the sites a specific contractor is currently working at. The list of cards shows brief information: project name, address, contact person (client), and price. A site can be edited, archived, and deleted.

    App
    Managing sites in Build.BRO
    • It’s a perfect choice to test hypotheses. Together with Build.BRO team, we built an MVP and tested a hypothesis for relevance among its target audience—all in half a year.
    • It cuts down on the time to market. We managed to release the project about 1.5 times faster than releasing two native apps for Android and iOS.

    Flutter was a perfect choice for our project.

    Igor, Head of marketing projects group “Build.BRO”

    Building an MVP and testing its features in a focus group

    It was crucial for team Build.BRO to understand how relevant their service was for their potential audience and whether it addressed their pains. It was also important to check whether it was user-friendly. To find that out, we built an MVP and submitted it to potential users for testing. 

    Over its 27 years on the market, the company has gained a loyal pool of currently active contractors and supervisors. And it was those people that we asked to test the app. We implemented a scope of features and then sent them over to the focus group, i.e., contractors regularly buying supplies at Build.BRO and representing the relevant audience. According to their feedback, we then adjusted our prototype. 

    Thanks to choosing Flutter, we only needed to adjust a single code base and then deploy that for Android and iOS. Had we chosen native development, every adjustment would have been introduced into two code bases, which would have extended the deadline.

    Design

    The rule we followed when designing this app was “features define the looks”. For Build.BRO, a simple and clear design was a necessity: there is a lot of data involved in construction: figures, addresses, and names. Adding complex design and extra visual elements would leave us with an app that is impossible to use—it would feel extremely overwhelming. Team Build.BRO appreciated our choice.

    I’d like to highlight the design. These guys did an outstanding job of changing the way the elements are presented, which made working with the mobile app at least as easy as using its web version. Secondly, linking sites and bills of quantities was an excellent idea. Even before the app was released, we implemented it on the web.

    Anne, product manager, Build.BRO

    Implementing “Reference”, a tool to estimate the cost of works

    To automate some of the tedious routines in the life of a supervisor, we created “Reference”, a set of standard types of work that could be combined like building blocks to quickly calculate the cost of a project. 

    Reference
    “Reference” in Build.BRO

    Various works can be picked from the “Reference” and combined to get a vision of the amount and type of work planned on site. The absolute advantage of this service for both users and the business is that the application is integrated with the online store, where a person could purchase all the supplies needed. Prices in the bill of quantities are constantly updated, saving supervisors time to monitor goods. As a result, supervisors don’t waste time updating their bills, and clients can always see that prices have not been tampered with. 

    Integrating “BoQ” to make the process more transparent

    The main feature in both the MVP and the final app is the bill of quantities. It is the language that supervisors use to speak with their crews and clients. Anyone who’s ever made it through a renovation knows that bills of quantities are often a mind-bender. Many opportunistic crews turn that to their advantage, leaving their clients in the dark. Why did they pay so much? And what for?  

    Together with team Build.BRO, we made bills of quantities transparent—the app breaks down every sum into the cost of works and the cost of supplies. That said, the cost of the former can be checked in the Reference, while the cost of supplies is updated automatically. To compare them with prices in other stores, users can add and update these manually.

    BoQ
    Creating a new BoQ in Build.BRO app

    The BoQ allows users to calculate the amount of supplies needed and choose the best option online right away. As soon as the bill is ready, a user can share it with their client or a potential employer who is not yet sure which crew to pick and wants to know the provisional sum for their renovation.

    the supplies
    With the app Build.BRO, users can pick the supplies they need and share the BoQ with their client

    Final words

    Together with Build.BRO team, we have created an application that brings order to the jobs of construction supervisors and workers. This project keeps expanding and getting better. Our teams are striving to improve interactions with the online store to make the process of buying all the necessary supplies quick and simple.

    Contact us
    Let’s discuss your project together
    CEO photo white

    Vladi Makeew

    CEO of Surf
    Drop a file here or click to upload
      Hidden span