Style Adaptation
The Art and Science of Transformative UI Development
In 2018, Mediaweb started a collaborative journey with FlexWork Dynamics, tackling a pivotal challenge: creating a UI kit tailored for OutSystems and another for multi-platform use, with a focus on cross-platform consistency and enhanced user experiences.
This endeavor was not just about design; it was about fostering teamwork, leveraging the Scrum methodology to collaboratively build the foundations of a robust design system intended for diverse teams operating across multiple countries.
1. Collaborative Development
We partnered closely with FlexWork Dynamics, adopting a team-oriented, Scrum-based approach for iterative development and feedback.
Our role transcended mere design; we fostered a collaborative environment that empowered global teams to contribute to and benefit from a unified design system, elevating the digital experience across the board.
2. Cross-Platform UI Kit
- Created a technology-neutral UI kit using a Git project with Bootstrap guidelines and SCSS, ensuring style consistency across platforms.
- Integrated familiar web patterns from Bootstrap and OutSystems to facilitate easy adoption and consistency in development.
3. OutSystems UI Kit
Customized OutSystems UI Web Patterns and developed bespoke patterns and screen templates.
Created four themes that integrate seamlessly with all custom patterns and screen templates, enhancing design flexibility and user experience.
Focused on intuitive and user-centric design, tailored specifically for OutSystems.
Implemented a versioning system and a backoffice for detailed documentation and lifecycle management of components.
1. Rocket UI as an Accelerator
Leveraging our extensive experience in developing live style guides and design systems, we created Rocket UI. This tool is a distillation of our expertise, designed to simplify the migration from traditional to reactive web interfaces.
When FlexWork Dynamics saw Rocket UI's potential, they partnered with us to tailor it further, incorporating their unique requirements to benefit their multiple teams and factories. This collaboration not only enhanced Rocket UI but also reinforced our commitment to providing solutions that are both innovative and deeply attuned to our clients' needs.
2. The Migration Process
With Rocket UI's foundation, we streamlined FlexDesign's migration to the reactive OutSystems platform, focusing on key steps:
Component Recreation
Efficiency in Transition
3. Outcome
Grooming & Defining Sprint Goals
Development
Sprint Review & Comprehensive Testing
Release & Deployment
