Moneris Design System (MDS)
Project Background
The Moneris Design System (MDS) is the first design system created at Moneris, by myself and my team. The initiative was born out of the need to support a modern design solution for our upcoming POS launches. After the successful implementation of the MDS for that product, Moneris Go Retail, we scaled up the design system to be able to support a transition for all of our legacy products and platforms.
Why?
It’s probably safe to say that anyone reading this understands the typical benefits that come with having an established design system, so I won’t cover those. But, there are a couple of unique benefits that Moneris was able to unlock through investing in a design system. They include:
Substantial dev efficiencies due to the wide range of existing teams
Ability to modernize all of our legacy products and platforms more easily
Opportunities to cross-sell products through increased brand trust, and streamlined onboarding through learned heuristics
Main Challenges & How We Addressed Them
Limited design and development resources
When the MDS project was initiated, we simply weren’t able to afford having any dedicated resources on this project - either from a design or development POV. Getting the base elements off the ground was the hardest part, and I did most of the heavy lifting on my own. Once I had a couple of components done, I was able to template the process and delegate to the rest of my team.
I went with what I call a “Bulk Barn” approach. Since we had no dedicated resources, it was important that my designers were able to pick up tickets whenever they had bandwidth. Epics were created in JIRA for each component, and I set up a weekly Design System sync to review.
The process was something like this:
I create set of tickets for upcoming priority components
Designer picks up a ticket (e.g. date picker)
Designer reviews (with stakeholders across the org), researches, and presents findings at Design System sync
Design team votes for approval, 100% or fail, like a jury
Myself and my MDS lead have final review, and merge branch to main
MDS design lead works with MDS tech lead to implement in Storybook
Unclear business case from non-tech senior leadership
As is probably the situation for every tech company right now, business case viability has been more important than ever. I knew that if we weren’t able to get dedicated resources on this project, it would take years to get off the ground. So, I made multiple presentations to our Product and Tech VPs & C-Suites, in order to effectively demonstrate the value that having an established design system would bring.
It was quite easy to get tech leadership on board, but with the non-tech leaders it was more of an uphill battle. What really helped was a live demonstration of how different teams were currently working, and how much better it would be with a single source of truth. I broke down the cost savings for designers and engineers, QA efficiencies, and of course the time savings by component to build this business case. Once some rough numbers were allocated, it was immediately clear to the leaders that this is something they wanted to invest in.
Next, the leaders wanted to see a plan. So I visualized what our different adoption levels could look like in a phased approach towards full design system adoption. I created and shared the below multi-year plan with them, which got my team the final go ahead to start this journey.
I broke out the plan into five adoption levels, ranging from Level 0 (non-adopter), to Level 4 (full integration with our components maintained in the Storybook codebase). The plan for our first year of the project, Phase 1, was to get all of our existing products and platforms to Level 2 (basic adoption). The reason for this was that it’s a lot easier to align from a design perspective first, and then build it out. Once we had that solid base, we could more forward into the further stages. This phase proved to be quite complex, as we have such a wide range of existing products and platforms, most of which have never had a designer on them in the past. To make the plan simpler, I broke down each phase further into steps. Below is an example of my plan to achieve Phase 1 completion.
Each step had an overall summary / goal, and key points or questions that needed to be answered in order to move forward. This step-by-step plan proved to be extremely successful, as each team was able to digest how to move forward more easily than before. We’ve all been there; when you see a huge task ahead it can seem daunting… but once it’s broken up into digestible pieces, the wheels can finally start turning.
We were able to achieve our target goals for Phase 1.
A plethora of legacy products and platforms
Moneris is a company that’s been around for 20+ years, and only brought in designers in the last 10% of that time. This was a big adjustment for a lot of teams, and a great opportunity for my team and I to practice the core of design, empathy. We put all preconceived notions aside, invested time in educating, held workshops, and made sure that we always had an open-door policy to questions. Through this were able to build real relationships with our stakeholders and streamline a transition which could otherwise become grueling very quickly.
So how did it all play out? Below is a visualization of where our products were at year-end 2022, year-end 2023, and year-to-date 2024. We were able to make significant progress through having this North-star plan in place, and being comfortable with slow and steady progress. The dedication of all teams involved is something I’m very proud to have facilitated, and the company will only see more and more benefits from investing in this project as we move forward.
