SaaS Field Service Website Redesign

The first challenge was to unify current design and set up basic design rules for the future. I started with the basic style guide to unify design into the same typography, colors, and buttons into one design solution. It was the first but important step to creating a professional-looking website.

My first step was to do research on competition in field service and then define what design patterns they are using and why. I analyzed old data on analytics and heatmaps and found online experts on B2B web design and marketing. As a team, we started learning how to compose the structure of the website to get more clients and also how to think and sell our product in the online environment in the B2B segment and to be like our top competition.

The next big challenge was to redesign forms thought that we received potential clients. I learned what is best practice in online forms and how to achieve that more users fill up our forms. Also, we had a goal to help our sales team, they needed more information about the client and his needs on the first call. So we made a compromise and created a form, that contains more inputs but is still above the fold of the screen.

Based on the research on the competition I created hypotheses of new components that we could use to increase conversion. To confirm these hypotheses we used Google Optimize for A/B testing of components. Below is an example of how we used this tool and what results we got from it.

To better understand user behavior on Resco’s website, we used Hotjar heatmaps and GA4 user flows. Heatmaps showed where users clicked or got stuck, helping us spot missed CTAs and confusing elements. Session recordings revealed pain points like rage clicks and dead ends. With GA4, we tracked how users moved through key pages and identified where they dropped off. By connecting both tools, we uncovered not just what users did, but why—leading to targeted UX improvements, fewer friction points, and higher conversions.

In my first research, 76% of users came from desktops and only 23% from mobile devices. So our design approach was to design for the desktop first and then create a responsive version of the website. After by step by step released pages with new responsive design, users from mobile devices increased to 42%.

Later on in this project, we thought about we needed a system to create easily landing pages. We had some components created, I unified icons, colors, typography, and set 8px vertical grid. So I created a design system with all of these components in Figma a connected it to our project. It worked as a UI library for our website and thanks to this, we can build a website like lego in tens of minutes. It saved us a lot of time in workflow in creating landing pages.