Wealth Management US Portals

An intranet redesign for RBC Wealth Management US


Client: RBC Wealth Management US

Timeframe: May-July 2017 (3 months)

Role: UI design, visual design

PROBLEM

The intranet sites for RBC Wealth Management US were dated and in need of a modern refresh. Information seeking was difficult — pages were cluttered, and the navigation design no longer worked for the growing number of pages. In addition, the sites had not been updated to the current RBC branding.

SOLUTION

I redesigned the sites to follow brand standards, and designed a new navigation while preserving the information architecture. I also improved usability and accessibility throughout the sites.

BACKGROUND

My first project as an intern at RBC was to redesign a suite of intranet sites for RBC Wealth Management US. I became the sole designer, taking over from the design lead who had recently left. The project had already been worked on for 6 months, so most of the remaining work was UI design. I worked with a team of developers, business analysts, a product owner, and a project manager. I created a high-fidelity mockup in Sketch, and supported the developers during and after design handoff.

‣ Design

NAVIGATION DESIGN

PROBLEM

The vertical menu housed 5 levels of information, and only showed one level at a time. Usability issues with this:

  1. If the user had gone to the 5th level in the menu and wanted to go back to the 1st level, they would need to click 4 times.
  2. It’s easy to get disoriented in this menu. You lose a sense of the hierarchy at deeper levels.

SOLUTION

I created a multilevel menu that expands one level at a time upon clicking. Advantages of this design:

  1. It’s much faster to navigate up a level or two. You can go directly from level 5 to level 1.
  2. You can see up to 5 levels at once, which helps you trace your path and maintain a sense of place.
  3. Menu items are in alphabetical order to make targeted search quick.
MORE MOCKUPS (Before and After)

InfoNET HOMEPAGE

Design improvements:

  1. Carding helps to distinguish the different sections from each other
  2. Search is easier to find in the top right corner
  3. Addition of icons helps users scan and find sections on the page
  4. Branding

NEWS

Design improvements:

  1. Improved text hierarchy by making the differences in font sizes greater
  2. Related links (links on right side)
    – Hierarchy of links is clearer, through indentation and bolded fonts
    – More padding for clickability and readability
  3. Branding

QUICK LINKS CUSTOMIZATION

Design improvements:

  1. Differentiation between primary and secondary actions
    – “Save” button has more visual weight than the “cancel” button
  2. Moved save and cancel buttons to the bottom right, to follow the user’s movement
  3. Branding
OUTCOME

My designs were implemented, and the redesign was launched March 2018 to a user base of 20K users. The team was very happy with the work I had produced. With me on the team, they made far more progress than they had in the previous 6 months, and told me that I “basically saved the project.”

REFLECTION

This project was one of my biggest accomplishments because of the hurdles that came with it. I went into it with no prior experience using Sketch, and no knowledge of the banking industry. Despite that, I quickly learned the software and familiarized myself with the industry. Another challenge was taking over the project from someone who was no longer with the company. If I had a question about why they made a certain design decision, I couldn’t simply ask them.

Above all, my confidence as a designer grew. I grew comfortable giving my opinions on designs, and when needed, pushing back to advocate for good UX. I shifted away from the mindset of “oh I’m just the intern” to “I’m the UX designer and the team is counting on me and my expertise.”