Traffitix is a traffic-monitoring system consisting of hardware (radar) and software. The goal of this project was to design and develop a website that showcases the hardware product (radar pole) as well as the software AI-powered system combined with it.
UI Design | Webflow development | Design direction
Traffic monitoring
20 weeks
Project scope
✅ Designed and built a website for 3 different products ensuring the website is fully responsive and optimized for performance and SEO.
✅ Saved 25% of project budget by offering an end-to-end, comprehensive service.
✅ Defined the art direction of the project, including look&feel decisions, colors and visual style.
✅ Hired and lead other freelancers needed for the project (3D designers, animators, etc…)
Design process
Design and art direction
Client Consultation: Conducted discussions with the client to understand their vision, target audience, and specific requirements.
3D design & animation: Hired a 3D designer and briefed him about the product and the art direction to come up with a 3D-model of the hardware product to showcase on the website and throughout product branding.
UI Design: Based on the UX wireframes (provided by Eman Abulmagd - a UX Designer & Service Designer). I designed most relevant components in Figma and presented the vision for the visual direction of the website.
Webflow development
UI implemmetaion: Based on Figma design, I created a clean and visually engaging interface with easy navigation, making it simple for users to understand different products and get informed about the technical specifications for each one.
Responsiveness & Animations: Beside making sure the website is fully responsive, I employed animations & micro-interactions to introduce gradual complexity and in-depth information only when the user needs it.
Performance Optimization: Ensured the website loads quickly, performs smoothly, and works properly across different devices and locations.
Impact
WOW factor:
The final product aligned perfectly with stakeholder expectations, delivering an intuitive experience that exceeded initial requirements. The visual impression of the website clearly sets the product apart from all other competition in the market.User testing:
Strategic use of 3D elements, animations, and gradual complexity, allowed visitors to grasp product functionality more efficiently, resulting in more clarity in product understanding and reduction in learning curve.
Takeaways
This is one of the first project that I rely on 3D animation as the main visual anchor for my design direction. Throughout the process, I learned a lot about the best ways to embed and animate 3D graphics in websites without affecting loading speed or site performance.