Webflow website optimization: Boosting conversions by 23% with enhanced UX
.svg)
Project overview
For any business, a website is the ultimate storefront. It draws in potential customers, puts your products and services in front of them, and drives them further down the sales funnel.
That said, launching a business website is one thing. Ensuring it meets your engagement and conversion targets is an entirely different beast – one that may require professional help.
Our client, a startup offering tools for AI model development, was happy with its Webflow website at first. Over time, however, the website’s bounce and conversion rates left much to be desired. Visitors were leaving the website too soon, without converting into product users.
Bounce rates on mobile devices were even higher, and poor responsiveness was deemed the main culprit. Component behavior was inconsistent across pages, which goes against one of the 10 usability heuristics. Content management lacked the flexibility our client needed to implement its inbound marketing strategy.
Resolving all these issues – and turning a business website into a powerful driver for engagement and conversions – required a holistic approach. It would require the know-how in UI/UX design, marketing content, motion design, Webflow, and its content management system (CMS), and code refactoring.
Darly Solutions fit the bill. We took on the challenge.
Services
Challenges
Existing user feedback revealed several critical UI/UX and technical issues, but our client wanted a comprehensive view of the potential issues and improvements. That required us to conduct a full website audit. During it, we also focused on the changes in page layout, interactions, and content that would boost engagement and conversions, in line with our client’s priorities.
On top of that, we were tasked with rebuilding the Articles page using a separate CMS structure. The existing arrangement was too inflexible: our client had to use the same CMS structure for the Articles page as for the blog. That effectively made using separate tags and dynamically managing articles impossible.
Our client also wanted to refresh the website design with animations. These animations would power dynamic behavior for elements like homepage cards, section transitions, and progress bars. However, the animations had to be implemented using existing Webflow tools, ensuring they did not bring down performance or unnecessarily distract users.
Finally, as we could see firsthand in website analytics, the engagement and conversion metrics were substantially lower for mobile users. That indicated the need for revising the website’s mobile responsiveness, which in practice involved refactoring layout and styling for components.
Our discovery phase allowed us to zero in on the key business needs and technical requirements that defined the project scope:
Strategic business needs
01 Improve conversions and engagement by at least 20% with a website refresh
02 Enable a separate content management structure for the Articles page to facilitate inbound marketing and SEO
03 Respond to customer tickets to remove friction and sources of frustration
04 Improve performance and UX on mobile devices to close the gap in engagement and conversions
05 Reduce bounce rates by at least 5% across the website
06 Increase the average time on page by at least 10%
07 Enhance the case study presentation to drive conversions
Technical requirements
01 Conduct a website audit to pinpoint technical and UX issues and their root causes
02 Enhance UI/UX with changes to headers, pricing visibility, and content alignment
03 Implement animations for the website using Webflow tools
04 Rebuild the Articles page to enable independent content management
05 Improve the website performance by at least 15%, as measured by the Apdex score
06 Reduce loading time and latency by at least 10% with layout and component styling refactoring, including on mobile devices
07 Integrate video case studies with interactive play buttons
08 Optimize case study page layout
09 Ensure UI/UX design consistency by standardizing component behavior
We’ll audit it to pinpoint key UI/UX issues and their root causes, identify the best approach to fixing each, and implement all fixes to improve engagement and conversions.
Talk to an expert.webp)
Solutions
First, we had to conduct a thorough review of the existing website design and pinpoint all technical and UX issues. To that end, we reviewed analytics, heatmaps, session recordings, user testing results, and customer tickets to audit the website.
Based on our findings, we listed the identified problems and prioritized them to address high-priority customer tickets first. We also addressed bugs and made a few optimizations to improve the loading time, latency, and performance.
Throughout the process, we regularly updated the client’s team on our progress, ensuring everyone was aligned on the priorities for upcoming tasks. Our collaboration was especially tight during motion design for the website’s new UI animations
As a result of our work, our client’s Webflow website received several improvements:
- Revised layout, enhanced pricing visibility, and better content alignment
- Subtle UI animations for a more dynamic user experience
- New Articles page with a separate CMS structure
- Video case studies and optimized case study layout
- Refactored components for better performance on mobile devices
- Standardized component behavior across pages
UI/UX tweaks for enhanced experience
While reviewing session recordings and heatmaps, we noticed that users spent too much time looking for pricing information. The header, in turn, caused repeat clicks and user frustration as it hindered the website’s navigability.
To fix these issues, we first redesigned the header to facilitate navigation, all while adding several microinteractions to make its UX more dynamic. We also revised the pricing section to draw attention to it, making it easier to locate. Finally, we tweaked content alignment using Gestalt principles to establish a clear visual hierarchy.
All of these tweaks enabled a more seamless, intuitive, and pleasant user experience, resulting in a 17% improvement in user satisfaction.
Dynamic UI animations
To liven up the website and make pages more lively, we implemented several subtle UI animations using Webflow’s CMS and animation tools. These animations included smooth transitions, microinteractions, and interactive button designs across the website, from progress bars to homepage cards.
To ensure the animations aligned perfectly with our client’s vision, we worked closely with the startup’s team during motion design. At the same time, we used lazy loading and optimized file formats to ensure animations wouldn’t compromise the website’s performance or load time.
Revamped content management
Before our intervention, the Articles section of the website had to be managed using the same CMS structure as the blog. That often led to confusion, mistakes, and loss of productivity among the client’s content team.
We rebuilt the Articles page using a separate CMS structure within Webflow. As a result, the team can manage the tags and articles independently of the blog. Plus, the gains in content management flexibility helped achieve a 14% increase in organic traffic to the website.
Conversion-driving case studies
The case studies already present on the website didn’t quite succeed at driving conversions and engagement. For one, the bounce rate for those pages was too high. The average time on page was substantially lower than for other pages.
To boost conversion and engagement potential, we suggested two changes: introducing video case studies and optimizing the layout and content of the pages.
With our client’s approval, we restructured case study pages to put the product’s value front and center and highlight customers’ firsthand experience. The video case studies added to the homepage, in turn, improved the click-through rate for the social proof section by 13%.
Improved mobile responsiveness
During the audit, we caught several technical issues that brought down the quality of UX on mobile devices. For example, images were misaligned on some screen sizes, while header interactions weren’t adapted to touchscreens.
We fixed these issues while ensuring our earlier tweaks to the pricing section and UI animations remained mobile-friendly. We also optimized images for mobile browsing, reducing the website loading time by 16% as a result.
Standardized component behavior
During the audit, some of the website’s components showed inconsistent behavior on different pages. For example, quote transitions weren’t animated the same way. Footer interactions varied across pages, too.
We took note of all these inconsistencies during the audit and fixed them. To that end, we defined the appropriate behavior and then refactored components to align their behavior with the standard one. This helped ensure uniform UI/UX across the website, while deduplication contributed to a 24% increase in the Apdex score.
Tech stack
Impact
As a result, our client received a fine-tuned Webflow website optimized for engagement and conversions. Within six months after our changes went live, the updated website demonstrated:
We’ll analyze customer tickets, identify root causes for issues, and eliminate them to enhance user experience, prevent churn, and drive engagement.
Contact usTestimonials
The responsiveness, attention to detail and high-level communication from Darly Solutions was outstanding. Communication with the team was all online and was absolutely seamless. They were highly responsive, worked to tight deadlines and provided great feedback and communication throughout the entire project to ensure it remained on schedule and all quality requirements were being met. They exceeded all of our expectations, from design through to delivery.
LLC Darly Solutions's team performs well since the collaboration started. They are fluent in specific programming languages, they are also fluent in English, and they have a great response time. What is most unique and impressive about Darly Solutions is that everyone in the team is inherently communicative and understands the expertise of their respective fields. The team is very agile and can predict stress situations in which we work together to fix and maintain.
Darly Solutions' work so far inspires confidence, as they're skilled and trustworthy. The health platform is incredibly happy with their work. The team at Darly is communicative, responsive, and responsible. I’d recommend them to people looking to do more than build a simple little software.
By collaborating with Darly Solutions, there is a significant improvement in the project's quality of codes compared to their original codebase. They lead efficient project management and keep the client updated with their reports. They're a flexible team that delivers promising results. They don't just do as they're told, they actively participate in the design process, which is going to yield us a much better platform in the end.
Darly Solutions was able to develop the site with all functions running. The team was responsive throughout the engagement. They excelled at scheduling and delivered projects on the specified timeline. The whole team was a pleasure to work with. I am very glad that I entrusted them with my project, this is the best company for me!
The quality of their work is very high, and we get very good customer feedback on what our site looks like. They're very reliable and have a great overview of the technologies they're using. They meet our deadlines and are very accurate with their time estimations on a project. In addition, they're responsive and great with communication with a great command of English — it's very easy to talk to them. Moreover, we've integrated them into our development and scrum process, where we have daily stand-ups with their project manager and developers through Slack.
LLC Darly Solutions are highly skilled at UI/UX and follow very good engineering standards, and have been very professional in its approach to all the work to date (including the initial consultancy, which was the deciding factor). They have taken ownership of the work in way that demonstrates how much they value the work they are doing and consequently the work we are doing. I am gaining confidence that the decisions they make are good decisions and that this will result in a product that will exceed our initial expectations.
Darly Solutions developed the app in a quick manner, and the code quality was excellent. The professional team was committed to building a successful product. The code quality was good, and the app has been built in a little more than 1 month, which is a result I'm very happy with. They were laid back but professional at the same time.
Darly Solutions’ work helped my business tremendously. They were able to identify key areas for growth and improvement. The team was communicative and professional throughout the entire engagement. LLC Darly Solutions is a solutions-oriented vendor that drives results. They’re really professional and they know what they’re doing. The team knows how to identify my problems and solve them.
Related case study
Connect with us
.webp)
We are a tech partner that delivers ingenious digital solutions, engineering and vertical services for industry leaders powered by vetted talents.
