About the Company
TrySpeed is a digital brand that offers a clear, engaging, and conversion-focused experience with their website design. Their website required a clear visual structure, responsive design, and a flexible foundation that could be updated with more content and grow along with them.
TrySpeed hired us to build a Webflow website with usability and scalability. This meant we had to design responsive layouts, build reusable components, manage the CMS, and optimize the speed and performance of the website.
Business Challenges
There were a lot of different things we had to think about when we were building a Webflow website that would grow and adapt. We focused on how we would create a consistent experience across different devices, use a CMS to manage website components efficiently, and improve how quickly pages load across the website.
- Responsive Layout Challenges: There were consistent issues across the different pages of the website we were working on. These inconsistencies included things like spacing and behaviour of components, which led to an unmanageable and frustrating design process, especially when new parts of the website were added.
- Scalable Design System: We needed a flexible design system for Webflow that supported the use of responsive components and layouts to simplify the addition of new pages, thus reducing the time needed to build common components and increasing the ease of performing updates.
- CMS Content Management: We had main challenges with the website’s content structure, especially with repetitive content that required cascading updates. This created an inconvenient publishing workflow with collections and pages linked to the Webflow CMS and reusable dynamic content.
- Page Speed Optimization: There were a lot of heavy animations and images on the website that made pages very slow to load. We focused on improving how quickly pages loaded and the responsiveness of the website, especially on the main pages of the website.
- CMS Scalability Limitations: We ran into limitations when trying to set up Webflow CMS content in a way that would allow us to grow our collections and keep our relationships while keeping our content management efficient as our requirements changed.
Solutions
To address these challenges, instead of focusing on page-by-page fixes, we took a structuring approach to the Webflow CMS to ensure the foundation supported scalability. This approach incorporated reusable components, scalable CMS architecture, responsive design, and performance improvement.
- Reusable Webflow Components: We developed a Webflow component system that is reusable and standardized, with class and spacing rules, typography, and responsive behaviours. This system accelerated the creation of new website sections and enhanced visual consistency.
- Structured Design System: We standardized Webflow components and design styles to facilitate website growth and reduce duplicate work, all while simplifying design updates throughout the website at various responsive breakpoints.
- Centralized CMS Structure: We simplified and repeated content across pages and reduced the manual content maintenance and published page editing for our team by restructuring CMS collections, fields, and dynamic templates.
- Webflow Performance Optimization: We improved the speed and reduced the load weight of pages within Webflow through optimizations of animation and interaction assets, and improvements to page structure and creative layout.
- Scalable CMS Architecture: We created flexible models for our site content and simplified collection & relationships to allow for future growth, all while giving the team control over site content and simplifying the process for the team to edit or add content.
Build a Webflow experience that’s easier to scale, manage, and perform.
Project in Figures
Applied Technologies
Webflow
More Screens
