The Rogers Design System is a set of living guidelines that communicates their brand promise through digital experiences. It’s a platform that integrates code, documentation, and process. It serves as a single source of truth for digital design guidelines and UI elements.
I collaborated with product and technology to build the core component and pattern library of the Rogers Design System.
Rogers worked with an agency to launch its design system. However, there were many gaps, and its adoption was low. One key issue was that it had limited components and was based solely on redesigning the home page. It focused on solutions for the Wireless line of business and failed to scale across other digital products.
Rogers had a vast portfolio of products that the system needed to serve. Not to mention, that enormous number of products could be quadrupled when adding the Fido, Chatr, and Rogers for Business brands. We weren’t just building a design system; we were building a system of systems.
These were the style guides that defined each brand's visual identity and included primary elements such as logos, typography, and iconography.
This was a diverse set of components and patterns built upon the Design Foundations. It enabled teams to maintain a shared design language across brands and products.
These were components designed to solve specific use cases within a single product and were built and maintained by the various product teams with guidance from the Design System.
Finding a governance model that suited our team was a messy process that required extensive research and time. There were so many product teams, business units, and ways of working that made it challenging to deliver work promptly. Eventually, we found a process that made us the fastest delivery team within the digital organization.
Most digital delivery processes at Rogers were a string of mini-waterfalls disguised as Agile, with design, development and QA working in subsequent sprints like a waterfall. This process was plagued by unplanned feedback loops that spread across sprints, creating rework and eroding trust between teams.
Shaping is an advanced form of story refinement led by designers with the support of product, technology, content, and accessibility experts. The result is a concept focused on interaction design that defines what the feature does, how it works, and where it fits into existing flows. The solution is documented in a pitch, along with the problem, the scope of work, possible issues that may arise, and anything excluded due to scope.
Only stories that underwent the shape up process were eligible candidates for sprint planning. The pitch became a working agreement, enabling the designer and developer to co-build the solution during a single sprint. Daily demos were incorporated to allow for continuous feedback and iteration within the sprint. By the end of the sprint, another component was added to our library.
Managing the UI library is where I excelled; it required keen attention to detail and advanced technical skills. I ensured that every layer was named to make editing overrides easier, every layer had constraints to make each component responsive, and all text had smart layout to make the layout reflow.
Most components could be used across brands, so they were designed to be built once and customized via styles.
Every component we released was accompanied by thorough UX guidelines that documented best practices, considerations for accessibility, example use cases, and areas for improvement.
With designers as the target consumers, I wanted to ensure a high build quality that enabled them to modify components within minutes. As the library continued to grow, it helped the team design solutions in 30% less time.
Understanding the fundamentals of HTML and CSS was crucial to better collaboration with developers. Concepts like the Bootstrap Grid and CSS Box Model were essential to building components that better reflected code.
With additional designers onboarded onto the team, my role shifted from managing the UI kit to designing a centralized home for the design system. The goal was to have our very own website, like Polaris or Carbon, to socialize and further push the adoption of the Rogers Design System.