Seppo

Royal Bank of Canada: Design System


Opportunity

RBC is competing to keep current and relevant with other banking applications on the market. As a result they are looking to design a better and more consistent interface for all the banking applications across their platform. The bank formed a dedicated team to design and develop a design system for the 20 different design teams at RBC. Over the summer of 2018 I was on this team and we the began this project just as I joined in May.

Research

My time with the Frameworks team began with collaborative sketching, sharing and voting on ideas of what could work to house all the UI components of the system. We began by using sharpies and post-it notes to design the information architecture, looking at the global navigation and how to group like components and elements together. We were also trying to solve for the problem of how different design teams call different elements and components different things. For example some teams where calling drop down menus accordions, and there were discrepancies between designers and developers calling an element a button versus a CTA. These were just a few of the language barriers we were facing. How would we solve for this so everyone could find what they where looking for when everyone called things different names? Together in our team of one developer, one graphic designer, one interaction designer, one project manager, one project design lead and two interns, we made 4 prototypes that we tested to solve for information architecture.

After sketching and usability testing we to solved the problem of naming conventions by putting an image of the element / component at the top of the page paired with a note of all all the possible names that has gone by in the past. We also tagged the element / component with all its past names so that when someone searches for an item by the wrong name the correct item would come up with the element / component image and a text caption saying that it used to be called many names including “x” but now we are only calling it “y”. This was a solution to share knowledge and get everyone calling everything by the same name.

My mentor (interaction design lead on the team) and I did precedent research into other content management systems. It was important to the team that Frameworks not be the only voice to giving design specifications. We wanted there to be the tone of camradery and approachablness to the team and the new content. I was responsible for researching how Drupal, a coding content management system, submits new code to the system and how they accept and review coding fixes submitted. Below you can see a systems map I made for code submissions, with all the appropriate sign-offs from different categories of people.

Solution

After sketching and usability testing we to solved the problem of naming conventions by putting an image of the element / component at the top of the page paired with a note of all all the possible names that has gone by in the past. We also tagged the element / component with all its past names so that when someone searches for an item by the wrong name the correct item would come up with the element / component image and a text caption saying that it used to be called many names including “x” but now we are only calling it “y”. This was a solution to share knowledge and get everyone calling everything by the same name.

I worked on the template of the component / element page and how the design system would display all the different information of all the different states on different backgrounds. The team assigned me to look at CTA’s, as it was the most compelex, and how to show the 5 states; active, hover, onclick, disabled, and focus (for accessibility). As well as these values, I have the added task with CTA’s to show all this information 3 times; for primary, secondary and tertiary class buttons on light and dark backgrounds. I was giving the content for general anatomy and specs, usage states and colours, and placements and interactions from the Frameworks libraries they had created over the past year. I found the solution to display the vast amounts of different states, types and background was to make grinding systems that housed visuals with design specs inside (see below images).

rbc1 rbc2 rbc3-1 rbc3-2 rbc4