Website Redesign & UI Kit for CMS Migration
Enabling Consistency and Performance at Scale
F5 undertook a full website redesign as part of a major CMS migration to Adobe AEM, aiming to improve scalability, security, and long-term maintainability. I led the creation of a comprehensive UI kit covering all page components across breakpoints to support consistent design implementation. The result was a more reliable and flexible website that enabled richer content delivery and a stronger user experience, aligned with F5’s mission to support digital transformation across any environment.
Client:
F5
Year:
2018
Role:
UX/UI Design Lead, Web Design, Art Direction, UI Kit Development
Tool:
Adobe XD, Adobe AEM, Adobe Creative Suite, Microsoft 365, Wrike, Jira
F5
Design system
Challenge
The project faced a tight timeline and a complex migration from an outdated system. Maintaining strict brand consistency across diverse digital platforms while streamlining design and development processes was critical. Balancing these demands without sacrificing usability or delaying launch was the key challenge.
Role & Process
As Lead Web Designer and UX/UI Designer, I took over the project after initial agency concepts and guided it through full execution and launch, balancing design quality with schedule demands. Key responsibilities included:
-
Collaborating closely with Product and Solutions Marketing teams, developers, content strategists, project managers, and brand stakeholders to align on design and technical requirements
-
Creating a comprehensive UI kit in Adobe XD, covering all components and breakpoints for scalable, consistent design
-
Developing wireframes and high-fidelity mockups, iterating through frequent design reviews
-
Coordinating tasks and progress tracking using Wrike and Jira with cross-functional teams
-
Ensuring the final site enhanced usability, performance, and brand integrity
Design Solution
To support the CMS migration and ensure design consistency, I developed a comprehensive set of web design assets and guidelines that enabled the development team to build a scalable, maintainable site.
Impact & Outcomes
This was a high-stakes project involving close collaboration with a newly formed marketing team to build everything from the ground up, including tools, platform, guidelines, and content strategy. With a tight timeline, developing a comprehensive UI kit became a critical solution. It accelerated progress, streamlined design and development, and enabled a consistent, scalable experience across pages. The reusable components and style definitions not only saved time but also ensured visual cohesion, seamlessly integrating with Adobe AEM.
Desktop and Mobile Views
A mobile-optimized corporate site brings essential advantages: stronger user experience, improved SEO, increased engagement, and a polished brand presence. These benefits were especially important as F5 transitioned to a more customer-centric digital presence.
The redesign and CMS migration enabled a more reliable, user-friendly site experience across devices, supporting a wider range of users in a mobile-first landscape.
Experience The Prototypes
The final site successfully met the project’s objectives, providing Oratile Kids with a responsive eCommerce platform that caters to busy parents. The new website not only reflects the brand’s handcrafted quality, but also offers a seamless and trusted shopping experience.
All Projects
