Website for telematics provider and fleet safety innovator
MANTIS Live, where experienced team and cutting-edge technology drive fleet safety forward.
About MANTIS
Connected systems, partner networks & end-to-end support
MANTIS Live specializes in providing connected CCTV systems tailored for the logistics and transport industries. They operate in conjunction with Telematics Service Providers and re-sellers to offer comprehensive support, covering everything from onboarding and system setup to ongoing maintenance and assistance.
Their solutions support fleet owners by monitoring key events such as harsh braking and sudden cornering, automatically uploading critical data to the platform. This enhances overall safety on the road while also serving as a valuable training tool to help drivers refine their skills and reduce risky driving behaviour.
Goals
We were hired to redesign the website for MANTIS to make it look simple, modern and increase lead generation. Before this project, we had already collaborated with MANTIS under the Conceptzilla project, where we working on platform concept designs. That experience gave us valuable insights into their product ecosystem, target audience, and business objectives, allowing to align the website redesign with their broader vision.
The challenge
One of the primary challenges was maintaining a minimalistic design while adhering to the style direction established in the Conceptzilla project, ensuring consistency in branding, typography, and UI elements.
Another significant challenge was managing the content-heavy nature of the website. The content included technical information, product details, and industry insights. We wanted to show it in a clear, engaging, and easy to digest way. Striking the right balance between content density and clean design involved careful attention to hierarchy and structure to avoid overwhelming users while still providing access to all critical information.
Process
Our journey began with a deep dive into research, understanding the needs of both MANTIS Live and their users. From there, we moved into wireframing, laying the foundation for a structure. Finally, we brought the vision to life through the UI design, balancing functionality with a modern aesthetic.
Research
Before wireframing, we gathered insights into the client’s preferences, pain points, and goals.
This information was compiled into a detailed Creative Brief, which served as the foundation for the entire design process, ensuring every decision aligned with MANTIS Live’s vision and user needs.
Wireframing
Wireframing was a crucial step in shaping the structure and functionality of the website. Our focus was to create a well-organized layout that prioritizes essential content. We tested and refined information hierarchy, navigation, and user flow. By polishing wireframes through iterations and feedback, we established a balanced, intuitive framework that served as the foundation for the final UI design.
UI design
While the overall style remains minimalistic, we enhanced the experience with dynamic animations and smooth transitions.
To further reinforce the design language, we also created custom icons and small illustrations that are used throughout the website. These elements help visually structure content, improve recognition of key features, and add personality to the interface.
Dashboard concept
Our collaboration with MANTIS began with designing concepts for three key dashboards within their stand-alone platform.
Landing page
For the homepage, we proposed a layout that embraces a rhythmic content arrangement to reveal the core products and highlight the key value propositions that make MANTIS different. This dynamic structure guides visitors through sections in a simple but still interactive format.
Supportive pages
For the supportive pages, we maintained a consistent design language that aligns with the homepage. This cohesive design ensures that every page not only supports the core messaging but also makes it both functional and engaging.
Responsive
Key elements like custom icons, illustrations, and animations were optimized for performance, ensuring they remain crisp and smooth on any device.
Development process
Overall, Webflow’s standard functionality covered most of the layout needs, allowing for an efficient and flexible implementation. However, to enhance the visual experience and interactivity, we incorporated custom JavaScript solutions where necessary. By blending these technologies, we created an experience that feels smooth and captivating.
Optimizing performance with custom solutions
To bring dynamic motion and smooth transitions to the website, we integrated several JavaScript libraries, including GSAP for animations, Swiper JS for interactive carousels, and Typer JS for dynamic text effects. A custom scrolling experience was also implemented using Lenis Scroll, providing a smooth and refined user interaction. The result is a highly responsive website that balances performance, functionality, and design precision, staying true to the sleek and modern identity of MANTIS.
Customer comment
Working with Shakuro has been an absolute pleasure—they’ve been our trusted partner on two major projects and several smaller ones, delivering exceptional work on everything from full website redesigns to UI design for our solution platform.Matthew VassChannel & Marketing Director, MANTIS
