Creating a new BMI Roofing Tool

CASE STUDIES

My Role

Lead Designer

Team composition

Team leader | Stakeholder management | Lead design process | Quality Assurance and Design Implementation

Access PlanMaster UK

Context

BMI, a roofing and waterproofing company, wanted to develop a tool to improve the life of roofers across Europe.

Inspired by the success of a similar tool used by their sister company, GAF, in the US, BMI wanted to create a measurement tool to make the process safer and more accurate.

Roof measurements are often dangerous and prone to errors, so this tool was designed to address these challenges and make the job easier for roofers.

PlanMaster would be built on InTouch, BMI's private platform where roofers can record and follow their projects and guarantees.

Challenges

🚩 Limited customer access

🚩 Pressure to fast-track UX

🚩 Difficulties to believe in the tool from internal team

🚩 InTouch, that will host PlanMaster, does not follow BMI Style guide.

Business Needs

Charge for reports?

We’re exploring the option to make reports paid based on user type. This could support different user needs while opening a path for monetisation.

Third party report delivery

Reports will be sent by a third-party provider via email, we need to keep the flow simple and avoid adding extra steps for users.

MVP Solution

MVP version to launch by March 15, in time for the German roofing trade fair. Our System Partners will use this first version to order their reports for free.

Problem

Roof measurements are often dangerous and inaccurate.

BMI needed a digital tool that would make this process safer and more reliable for roofers which would also be available in a report easy to download and print. It had to be simple, easy to use, and accessible behind a login — designed for professionals across Europe, regardless of their digital skills.

How might we deliver a simple, easy to use tool to support roofers in measuring roofs safely and accurately, without adding complexity to their workflow?

User Goals

➡️ Simplicity of use

➡️ Usable and accessible on mobile and tablet

➡️ Report fast and accurate

Business Goals

➡️ Double the InTouch usage by the end of 2024

➡️ Reach 2,000 report orders by year-end

➡️ Launch in 3 countries by the end of 2024

➡️ Improve InTouch overall UX

Design Thinking Process

Based on the business needs and goals, I delegated the research phase to our mid-weight designer, Olha, as a growth opportunity for her.

While Olha led the day-to-day work, I provided ongoing guidance — supporting her in recruiting users, reviewing her process and design solutions, and offering mentorship throughout. I also participated in all strategic calls with the stakeholders and Product Owner, as well as evaluated her recommendations and made the final decisions on next steps to align with our UX strategy and business objectives.

Competitor analysis

As requested by our Digital Director, Olha focused on reviewing GAF user journeys and Wienerberger. She also identified additional companies offering similar measurement tools to broaden the competitive analysis.

Recommendations

➡ Simple user flow with clear & visible steps.

➡ Consistency across all BMI Products which will save development time.

➡ Showing price from the beginning.

➡ Large map for better usability on desktop and tablet.

➡ Potential multiple reports available.

Decisions

We were asked to create a one-page, visual-first version to explore Wienerberger’s idea, as preferred by our stakeholder.

➡ I pushed Olha to work on the user flow for the different phases that were mentioned during meetings:

Phase 1: no payment required

Phase 2: payment required and Paypal integration

UI Experiment

While Olha worked on the low-fidelity design, I supported her by sourcing users to test the flow.

Key considerations

✅ Most of the components must be already implemented by the developer's team.

✅ 90% of InTouch users are on Desktop, but all screen sizes should be worked on.

✅ Aligned with the development team and third-party provider on technical feasibility.

Experiments #1

In this version, Olha designed what the Stakeholder's pushed forward, following Weinerbeger's visuals.

She kept the report page as a future improvement.

Open questions / improvements:

Why only providing a small map space?
What if the users need to move the pin in an other space?
Are we not losing BMI look and feel.
Would a form be user friendly enough?

Try the Experiment #1

Experiments #2

Olha proposed a user journey with:

Map selection
Address confirmation
Details information
Order confirmation

Open questions / improvements:

How does the user return to the landing page?
What happens if the pin isn’t placed on a building?

Try the Experiment #2

Experiments #3

In this version, Olha designed a section flow where components appear progressively based on user actions, following GAF’s journey.

Open questions / improvements:

How would this work for blind or neurodivergent users?
Is this option easier to implement or easier to use?
Least favourite option by the development team.

Try the Experiment #3

Recommendations

➡ Version 2 is the strongest solution from the UX Team.

➡ Review the technical limitations with our third-party agency.

➡ We need a full width map for better accessibility and usability.

➡ Report page not part of the MVP solution but should be kept for future improvement.

➡ Version 2 offers a better flexibility for future improvements.

Next Steps

➡ I asked Olha to refine her visual by adding clear visual cues, like a stepper—while staying within our Style Guide and using components from our library. She’s also aligning the look and feel with what we are using in the calculator tool.

➡ She closed her ticket and present the solution to our Product Owner.

➡ I created a user testing tickets and found Olha 5 internal users that are ready to test the prototype when she has updated the visual.

User Flow

Following the competitor analysis, Olha moved towards creating different user flows to cover the potential 2 phases:

Phase 1: no payment required

Phase 2: payment required and Paypal integration

Working on the both phases would help to provide recommendations on the best option from a UX and technical perspectives as Olha will be paired with a developer to make sure we provide simple, MVP solution to implement.

Outcomes

While working with the developers, we decided to move forward on the Phase 1 as we have most of the component already available in our library, and the free report won't involve a lot of time for implementation.

➡ Olha can move forward on the Wienerberger’s idea experimentation, as preferred by our stakeholder.

➡ I have also organised a corridor test with some of our colleagues, therefore Olha can test her propositions.

➡ We are still having conversation regarding integrating PayPal and other payment methods during Olha's experiment stage.

New Recommendations

While Olha was working on the visuals, several business and strategy discussions took place and they decided to provide free reports to some Roofer members, while offering a paid version to new users—potentially with the first report free to encourage adoption and generate revenue.

Updated Requirements

✅ Integrate a payment option using PayPal.

✅ Add an address validation step before the user can continue.

🔔 Reports generated manually: 48h report availability

Given these changes in business direction, I proposed to the PO that we reassign Olha’s User Testing ticket to a new UX/UI ticket focussing on payment options and report types.

Also, the exact pricing is still under discussion, and an upcoming customer research—based on updated UX designs—will help inform this decision.

➡ After Olha created two versions of the flow, I suggested we proceed with testing both options with our colleagues, as originally planned, before the new requirements were introduced.

User Testing

Moderated UX Testing

Once Olha updated the different flow, she prepared for moderated UX testing by creating a detailed test plan and a script, designed to support data transcription and insights capture.

At the same time, the German marketing team decided to run a user test to assess user readiness and determine suitable price ranges for single and multiple reports.

Testing Results

Olha analysed the results and shared with her that Flow 1 was the preferred solution as more logical for all users.

Successes

➡ Olha provided extensive support to the German team and agency. Her professionalism was highly appreciated, and her quick turnaround on the prototype enabled us to kick off the interviews sooner than planned.

➡ The German and global marketing teams gained greater confidence in the tool and decided to invest in additional functionalities and further improvements directly after the soft launch in March.

Final UI, Specification & Metrics

We deliver mock-ups for desktop, large tablet, medium tablet, and mobile resolutions, along with behaviour specs, UI anatomy for pages and new components, and a detailed interactive prototype covering all flows and interactions.

Try PlanMaster

Key Achievement #1

All text and interaction elements are following WCAG guidelines, UX best practices and BMI Style guide and library.

Key Achievement #2

Reusable components design for all product pages to ensure consistency and reduce development time.

Key Achievement #3

Great team work between Design & Development team which made the implementation a lot simpler.

Metrics

Before Olha left, I asked her to spend time, during her sprint to focus on the Metrics for the Analytics team. I will be using those metrics to provide an Analysis 6 months after release to our stakeholders with insights and recommendations.

Type of Metrics

🥇 Completion rate

🥈 Frequency of return visits

🥉 Error rates

🏅 Bounce rate

🎖 NPS - Net promoter Score

🧰 Google Analytics & Mouseflow

Why is it important for BMI?

✅ Great stage to understand what we want to measure before the tool goes live.

✅ Part of the UX process that I want the team to focus on for 2024.

✅ Loop the analytics team before the final UI to give them time to plan scripts and create the dashboard.

✅ Metrics will help us understand user behaviour before investing in larger research.

Launch announcement on LinkedIn

Successes, Challenges & Outcomes

Successful launch at the DACH+ HOLZ International roofing 3 days event in Germany.

200 free reports requested.

75 accounts created during the event.

BMI stand at the DACH+HOLZ International roofing Event - PlanMaster launch

Olha's growth as a UX Designer

Olha planned, organised and ran the user testing with minimal input from me. She delivered clear insights and actionable recommendations, which led to mid-weight responsibilities.

UX Team recognition

This project strengthened the visibility of the UX team across markets and reinforced the value of research-let design.

Personal growth

I stepped into a strategist and UX Lead role, making sure we followed both the company's & user's need.

Project Challenges

Challenge #1

Meetings took place without UX involvement, leading to decisions and commitments being made.

Challenge #2

The UI and behaviour of the tool changed due to Product Owner decision.

Challenge #3

Olha left BMI and a I needed to find a replacement while the tool was being developed.

Outcomes

6 Months post launch results

🌍 Rolled out in 5 countries within 1 year. 

🚀 Massive user growth in Germany → 113 to 1,317 InTouch visitors. 

💰 New revenue stream for BMI, leveraging aerial roof measurement technology.
📈 71% of returning customers in the first 6 months
📊 1400 reports order in the first 6 month

2135 report in the 6 months after.

Next steps & improvements

While the developers were implementing the tool, the UX team kept on working on improvement, following business requirements and based data from Mouseflow and the metrics in place.

Main improvements

✅ Provide a new payment method: Invoice

✅ Create a drawing area on the map

✅ Provide a promotion code space.

Going further

🎯 Improving the overall communication on the type of reports.

🏆 Starting some A/B tests on key requirements and improvements