RBC
Design System and Re-Designing the Public Website
Initiation
In a massive organization such as RBC, where more than 20 designers work on different projects simultaneously, there is a need for communication to ensure consistency in the design of each element. The most effective method to assure communication involves the creation of a Design System—which contains both small and large scale facets such as typography, buttons, links, tables, templates of potential page layouts, and more.
The goal of this particular project was to redesign and re-skin the RBC Design System and apply newly formed ideas to the RBC Public Website—the first place that RBC users typically engage with the brand and RBC's premiere chance to leave an impression on their prospective customers. More than 8 designers collaborated on this project.
RBC Credit Card Camparison
- First StepUser feedback was gathered using different means—including call centres, web analytics, and surveys. After careful study—conducted by the research team—user's pain points were identified, categorized, and prioritized. Each set of problems was assigned a corresponding project to be handled by one or two designers—alongside PO, BA, Devs, and QAs—in order to further study the issues in greater detail and find workable solutions.
- My WorkI worked on this project in different capacities. One of my responsibilities was to create UI elements such as banners, cards, accordions, overlays, tables, etc. for the design system. I also contributed to more fundamental elements such as typography alongside another designer.
As a UX designer, I collaborated on re-designing the Hamburger Menu, Credit Card Selector Tool, and Credit Card Comparison Tool. The tools—at the time of inception—were confusing and, more importantly, lacked mobile and tablet optimization.
Credit Card Tools
Read more about the UX process here!
The team consisted of two designers, the product owner, BA, Dev, and QA. The team structure made it easy to connect and communicate across all disciplines.
User Flow and Personas
After reviewing and documenting available data from call centres, web analytics, and surveys about our users, we worked closely with our PO and BA to identify and categorize the user's pain points. As UX designers, we made it easier for rest of the team to understand, prioritize, and communicate the problems through the utilization of user flows and parsons.
Research
Our next step involved further research to create and demonstrate potential solutions. Our methods involved competitive research through the study of comparison tools in various platforms—e-Commerce and other banks—and user interviews. We also took advantage of existing user research concerning comparison tools. This research noted how users interact with the information presented in tables, both on mobile and desktop formats.
What We Learned
We discovered that to create a great comparison tool the key is to demonstrate at least two products side-by-side. Based on our research, we concluded that there is no benefit in showing more than 3 or 4 products at one time—since if one needs to focus on more than 4 items, the task of retaining all pertinent information can become challenging. Therefore, there is higher risk of making the wrong selection.
UX Challenge
Another interesting discovery involved our user types. We learned that we can divide our users into two groups—represented by 'A' and 'B.'
Users from group A are detailed-oriented—their decision making process involves researching their options fully before making a decision. They don't mind consuming lots of information in order to find their answer. This group also enjoys employing help of technology during their research.
Users from group B are more likely to be overwhelmed by a plethora of options. They have an idea of what they want and seek options that are related to their preconception. They don't like to spend time on details; aiming to pick an option as fast as possible.
UX Solution
After getting to know our users, we came up with two solutions for each group in order to help them in their decision-making process. We used Credit Card Comparison Tool for group A–so they can see all the possible options and compare them. Credit Card Selector was employed for group B—wherein we narrow down their options by asking them few questions to understand what are they looking for, and presenting only the relevant options to them.
After reviewing and documenting available data from call centres, web analytics, and surveys about our users, we worked closely with our PO and BA to identify and categorize the user's pain points. As UX designers, we made it easier for rest of the team to understand, prioritize, and communicate the problems through the utilization of user flows and parsons.
Research
Our next step involved further research to create and demonstrate potential solutions. Our methods involved competitive research through the study of comparison tools in various platforms—e-Commerce and other banks—and user interviews. We also took advantage of existing user research concerning comparison tools. This research noted how users interact with the information presented in tables, both on mobile and desktop formats.
What We Learned
We discovered that to create a great comparison tool the key is to demonstrate at least two products side-by-side. Based on our research, we concluded that there is no benefit in showing more than 3 or 4 products at one time—since if one needs to focus on more than 4 items, the task of retaining all pertinent information can become challenging. Therefore, there is higher risk of making the wrong selection.
UX Challenge
Another interesting discovery involved our user types. We learned that we can divide our users into two groups—represented by 'A' and 'B.'
Users from group A are detailed-oriented—their decision making process involves researching their options fully before making a decision. They don't mind consuming lots of information in order to find their answer. This group also enjoys employing help of technology during their research.
Users from group B are more likely to be overwhelmed by a plethora of options. They have an idea of what they want and seek options that are related to their preconception. They don't like to spend time on details; aiming to pick an option as fast as possible.
UX Solution
After getting to know our users, we came up with two solutions for each group in order to help them in their decision-making process. We used Credit Card Comparison Tool for group A–so they can see all the possible options and compare them. Credit Card Selector was employed for group B—wherein we narrow down their options by asking them few questions to understand what are they looking for, and presenting only the relevant options to them.
Wireframe and Prototype
Once we came up with a higher level solution—in this case two answers—we started to work on the details of these application to bring them into fruition.
To create an effective comparison tool, the key is to demonstrate at least two products side-by-side. Based on our research, we concluded that there is no benefit in showing more than 3 or 4 products simultaneously.
Mobile first!
Sketching ideas on paper
Credit Card Comparison - Wireframe
Credit Card Selector - Wireframe
- Visual DesignLast but not least, Visual Design!
Launch All Credit Card
Launch Credit Card Comparison
Launch Credit Card Selector - ToolsSketch, Photoshop, Invision, Zeplin, and Illustrator.