During November and December 2024 i was completely focused on OutThink’s webpage. OutThink is a cutting edge Cyber Security Human Risk Management platform researched and built by industry professionals and leaders.
The webpage was to be redesigned mainly for it to provide a better channel through which to get new customers and partners, and the project had a tight schedule with a big backlog, so it requiered massive discipline and efficiency. I joined OutThink’s team halfway through this process.
Optimizing Design Workflow for Scalable UX/UI Efficiency: Cross-Team Collaboration and Skill Alignment
Initiating the project, I prioritized engaging with the other designers and engineers to understand their expertise, workflows, and requirements. This collaborative foundation ensured alignment across teams and optimized efficiency. My main concern was to reduce “noise” in between teams to ensure good design, handoff and development.
I worked along some of the most professional Illustrators, Designers and Engineers I’ve met. Anda Saracut (Illustrator – Figma) Antonia del Villar (Designer – Figma) Marc Lupanciuc (Engineer – React) and Cosmin Artene (Engineer – React). Our Manager was Kanav Bhama (CFO – Marketing Lead) whose vision and understanding of what a good product should be left me literally astonished more than once. I strongly recommend to check their job and experience, it’s inspiring.
Establishing a Robust Component Library
Initially, the design process lacked a structured component library, this made design difficult to scale up and handoff. Recognizing this inefficiency for our project’s scale and timeline, I prioritized building a comprehensive component library before producing screens. Despite a backlog of 22 pages due in the second week, I dedicated the first week entirely to this foundational task. Management, particularly Kanav, supported the decision, and Antonia wireframed both her pages and mine to ensure a seamless transition once the components were ready.
Once the core component library was in place—acknowledging that it would evolve based on project demands—it significantly accelerated the design process. With a structured and reusable system, we efficiently tackled the 70+ page backlog, dramatically improving workflow speed and consistency.
Transitioning to Motion Design and Development Integration
With the design system in place, I transitioned to another team to focus on implementing animations for the site. The challenge was balancing aesthetic quality and development feasibility, as our reference materials were created by dedicated animation teams. Given the constraints, I opted for SVG-based animations due to their lightweight nature and seamless integration into HTML and React.
To streamline this process, I collaborated with Marc, who was managing a heavy development workload alongside Cosmin. To minimize their overhead, I took ownership of the animation implementation, rapidly upskilling in SVG within React. This approach allowed us to achieve high-quality, performance-optimized animations that enhanced user engagement without compromising load times.
Integrating SVG animations in React is a recognized method for creating engaging user experiences.
Scaling Up: Responsive Design and Asset Management
After successfully integrating animations, I rejoined Antonia to finalize page designs, ensuring comprehensive responsiveness across multiple devices. The project scope had expanded by approximately 30% beyond the initial backlog, requiring meticulous attention to detail and adaptability.
Upon completing the design phase, we established an Asset Library, consolidating all images, animations, and their respective page associations. This initiative streamlined backend integration, significantly simplifying asset retrieval for Marc and Cosmin during development.
Delivering Final Video Animations
By the fifth week, the core UX/UI design and implementation were completed. In the sixth week, I transitioned to creating animations for complex concepts explained in video format throughout the webpage. Leveraging existing assets from the website, I efficiently produced nine video animations ranging from 25 to 70 seconds each, ensuring consistency in visual language and branding.
You can check all of this stuff at OutThink’s web page here
Conclusion
This project reinforced the value of strategic design thinking, cross-functional collaboration, and technical adaptability in delivering scalable and high-quality UX/UI solutions. By establishing foundational efficiencies, embracing agile transitions between teams, and integrating motion design directly into development, we delivered a robust digital experience on time and at scale.
The use of component libraries and SVG animations are well-documented practices in the UX/UI field, contributing to efficient and consistent design workflows.
“Launch or die” Kanav Bhama (Having heard it maybe a thousand times)
Ricardo Vidal Lynch 