ROE Calculator

A web-based return on equity calculator


Client: RBC Wealth Management

Timeframe: July 2017 (2.5 weeks)

Role: Research, UX design, UI design

PROBLEM

Credit specialists at RBC use an excel spreadsheet to calculate return on equity. This archaic system is not intuitive at all — there’s even a how-to guide. The experience is confusing, painful and inefficient.

SOLUTION

Repackage the calculator as a web application and improve usability. The new calculator resolves the pain points of the spreadsheet, and adds helpful information in the form of error messages and toast messages.

BACKGROUND

A front-end developer co-op student at RBC, Jonathan, was originally tasked with redesigning the ROE calculator. He held meetings with the users and stakeholders, and then made an HTML page with his redesign ideas. He got to the point where he wanted input from a UX designer, so the project came to me. The scope of the project was to evaluate his design and deliver my own mockups.

To do this, I dug into the current calculator, made a user flow and wireframes, lead a user feedback session, and designed a high-fidelity mockup in Sketch. I worked together with a full-time designer up to the user feedback session, and then completed the project on my own.

‣ Discover

RESEARCH

I met with Jonathan to get a walk-through of the excel calculator and his own design. I also took this meeting as an opportunity to ask some key questions about the project:

  • Who are the users?
  • What are their goals when using the ROE Calculator
  • How do they use the ROE Calculator spreadsheet today? Is it used in combination with any other tools or programs?
  • How often do they use it?
  • What screen size should I design for?
  • Are there any technical limitations I should keep in mind when designing?

Exploring these questions helped me to understand the business and technical requirements, and how the product fits into users’ everyday workflow.

EVALUATION OF DEVELOPER'S DESIGN

I evaluated Jonathan’s design. He made a lot of great design decisions that I agreed with. I identified some areas of improvement from a UX or branding perspective:

  • The button styles and font do not follow RBC branding
  • Positioning the ‘Calculate ROE’ button at the bottom would better follow the user’s movement as they input information (from top to bottom)
  • Right-aligned labels are not optimal for scanning the page
  • Need to increase padding around all text for readability
  • Need to increase white space between Step 1 and Step 2 to group the elements better and separate the sections
EVALUATION OF ORIGINAL TOOL

Next, I decided to examine the excel calculator to identify potential usability issues.

  • Unclear which cells are drop downs
  • No indication of required fields
  • Horizontal scrolling is painful on desktop
  • Relevant information is contained in separate tabs, forcing users to flip back and forth to see the information they need in order to fill certain field

‣ Define

USERS

RBC credit specialists

USER GOALS

Calculate return on equity to determine if a potential loan will be profitable

BUSINESS GOALS

Increase the efficiency of credit specialists and the credit review team

USER FLOW

I created a user flow to visualize the user actions and decision points involved in using the new ROE Calculator. This helped me to plan the design and make sure I included all of the alternate states.

‣ Design

WIREFRAMES

I sketched out some designs on paper, collaborating with the full-time designer. One idea used a tab design to show the multiple facilities (loans), and the other idea displayed them in a row.

I decided on the row design because I assumed that the credit specialists might want to compare facilities (assumptions should be avoided, as I’ll discuss later). The tab design would make comparisons difficult because only one facility would be in view at a time. I created a low-fidelity wireframe using Sketch.

USER FEEDBACK SESSION

I presented my user flow and wireframes to a group of 8 credit specialists, who would be the end users. After opening up the floor for questions and general feedback, I asked them questions about their pain points, how they use the calculator, and what they would like to see in a redesigned calculator.

Speaking to users helped to confirm the usability issues I had identified in my own evaluation. It also uncovered new issues:

  • No error messages
  • Not enough space between lines makes it difficult to read
  • The static header takes up to much vertical space, leaving less room to fill out information
  • The field names take up too much horizontal space
  • Need to manually convert currencies

One key finding from this session was that users most commonly entered one facility into a calculation, but it could be up to six. Another discovery was that users never compare facilities, which went against my assumption. I had some design changes to make.

HIGH-FIDELITY MOCKUP

Piecing everything together, I designed a high fidelity mockup in Sketch, and then prototyped in InVision.

Iterating from my wireframes, I shifted to a design that included one facility card by default, which would support the majority of cases. If needed, users can click the Add Facility button to add another facility below.

ROE Calculator Add Facility

ROE Calculator Add Facility

To solve the problem of having to flip back and forth between tabs, I took the table from the other tab and made it into a popover. The table appears when the user hovers over the information icon.

More ways that I addressed the usability issues I had identified:

  • Drop downs are indicated clearly by the downward arrows
  • Required fields are labelled with a red star
  • Scanning and reading are made easier with a grid system and sufficient white space

I designed informative and accessible error messages.

When the user makes an input error, the border of the affected input field thickens and turns red. In addition, text appears at the top of the card to inform the user where the error is and how to fix it.

I made sure that colour was not the only indicator of an error, so that the error messages were accessible to users with red-green colour blindness. The text also makes the message accessible for users using a screen reader.

One more video, just to show how the calculator would be used.

ROE Calculator Demo

This is "ROE Calculator Demo" by Kaylin Lee on Vimeo, the home for high quality videos and the people who love them.

OUTCOME

I handed-off my designs to Jonathan and he implemented them. At the end of my internship, there were discussions around allocating a proper team to fully build out the calculator and make it a reality.

REFLECTION (2017)

This was a short-term project, but I was able to go through the major steps of the design process. I really saw the importance of validating designs with users early, in order to test assumptions and guide design decisions. It wasn’t in scope, but I would have liked to have done some user testing on the new design.

REFLECTION (2019)

Looking back at this project two years later, I see some things that I would have done differently. For example, the popover with the hover interaction doesn’t seem like the best design anymore. The information in the popover is important, and having it disappear when the user moves their mouse off of the icon presents a usability issue. If I were to design it today, I might have the table slide out from the left side. Or, keep the popover design but make the interaction a click, move the popover so it doesn’t cover the “Spread” field, and keep it on screen until the user fills out the field.