Haze Kwok Design

Work

About me

Haze Kwok Design

Work

About me

Haze Kwok Design

Calculator components

Calculator components

Calculator components

Redesigned a calculator that delivered 54% increase in completion rate and used that as a blueprint to scale future calculator designs, resulting in 5 new calculators built in 3 months using reusable design system components.

The challenge

The challenge

The challenge

Ratehub's calculator tools are educational tools that receive high SEO traffic.


However, the design of these calculators was outdated and non-responsive. With all the calculators being hard-coded, it had been a challenge to redesign and update them at scale.


As our competitors get more sophisticated with similar tools to compete for leads, the team saw a pressing need to scale the development of these tools.

The approach

The approach

The approach

I conducted discovery workshops with the PMs, CEO, CTO and developers to fully understand the requirements of the components design.


The mandates were:

  • We cannot change the formula of existing calculations.

  • We need to improve lead gen metrics from these calculators.

  • We need a successful proof-of-concept for testing in order to get approved for more resources.

Using the refinance calculator as a blue print

Using the refinance calculator as a blue print

Using the refinance calculator as a blue print

With the above constraints, we decided that we will use the refinance calculator as a blueprint because:

  • 12K visits a month will help us get to sample size quickly for A/B testing.


  • It has the most complex combination of components, which should withstand our stress test for most calculation use cases.

The research

The research

The research

Discovering user pain points

Discovering user pain points

Discovering user pain points

Recruited 5 participants to conduct user interviews by observing how they interact with the calculator while voicing their thoughts.

  • Lack of guidance: no indication of required fields, system feedbacks and relationship between inputs and outputs.


  • Too many jargons: Users did not fully understand some of the questions containing more complex mortgage terms.


  • Can’t convert: Users skipped the “pick a rate” button for fear of accidentally navigating elsewhere despite wanting to see rate options.

Recruited 5 participants to conduct user interviews by observing how they interact with the calculator while voicing their thoughts.

  • Lack of guidance: no indication of required fields, system feedbacks and relationship between inputs and outputs.


  • Too many jargons: Users did not fully understand some of the questions containing more complex mortgage terms.


  • Can’t convert: Users skipped the “pick a rate” button for fear of accidentally navigating elsewhere despite wanting to see rate options.

Setting the baseline

Setting the baseline

Setting the baseline

Working with our analytics team, we discovered that the calculator only has a 10% task completion rate!

The majority of users did not get what they came for.

Working with our analytics team, we discovered that the calculator only has a 10% task completion rate!

The majority of users did not get what they came for.

2.5%

Lead conversion rate

10%

Completion rate

Ideation

Ideation

Ideation

Finding a way to balance business and user metrics

Finding a way to balance business and user metrics

Finding a way to balance business and user metrics

Based on the constraints and research results, I discovered that in order to improve the baseline metrics, we needed to solve for these 2 needs:


User need: How might we guide users through all the required questions?

Business need: How might we integrate our brokerage's mortgage offer in the flow?


The idea:

Create a linear calculation flow with clear step by step guidance and incorporate mortgage rate selection as a required step.

Using a low-fi prototype test to validate my concept

Using a low-fi prototype test to validate my concept

Using a low-fi prototype test to validate my concept

In order to validate the above hypothesis, I recruited 5 users who were in the market for mortgage refinance and renewal from UserTesting.com and conducted moderated interviews with a low-fi prototype.

In order to validate the above hypothesis, I recruited 5 users who were in the market for mortgage refinance and renewal from UserTesting.com and conducted moderated interviews with a low-fi prototype.

Test results

8/10

Users finished the calculation

4/10

Users explicitly said they wanted to see more rates.

7/10

Users wanted to contact a broker but unsure how to.

8/10

Users said they would recommend this calculator

Test results

Test results

8/10

Users finished the calculation

4/10

Users explicitly said they wanted to see more rates.

7/10

Users wanted to contact a broker but unsure how to.

8/10

Users said they would recommend this calculator

The final design

The final design

The final design

Multi-rates

Key features:

  • Rate selector is a separate step and users won't be able to skip it.

  • More rates are offered based on users feedback.

  • Users can enter their own rate if they want to compare their bank's offer.

With the test results, I felt confident that a linear approach could improve completion rate and generate more leads. I proposed an MVP design with that in mind and a more prominent rate selector so users can easily connect with a broker.

Linear flow

Linear flow

Linear flow

Key features:

  • Using step indicators and state changes to guide users along.

  • Calculation panel shows how the inputs result in a total, explaining why the questions were asked.

  • Using simpler language to explain renewal and refinance options.

Multi-rates

Multi-rates

Key features:

  • Rate selector is a separate step and users won't be able to skip it.

  • More rates are offered based on users feedback.

  • Users can enter their own rate if they want to compare their bank's offer.

The result

The result

The result

Hitting the KPIs

Hitting the KPIs

Hitting the KPIs

The MVP was A/B tested with 50% of users who visited the page. The test results were positive and the redesigned calculator went live to 100% of users.

You can check it out here:
https://www.ratehub.ca/mortgage-refinance-calculator

The MVP was A/B tested with 50% of users who visited the page. The test results were positive and the redesigned calculator went live to 100% of users.

You can check it out here:
https://www.ratehub.ca/mortgage-refinance-calculator

+6%

Lead conversion rate

+54%

Completion rate

Scaling calculation components

Scaling calculation components

Scaling calculation components

  • Worked with FE dev team to develop reusable CSS class components to speed up future calculators development.

  • Added new components in design system library on Figma for future designs.

Worked with FE dev team to develop reusable CSS class components to speed up future calculators development.

  • Added new components in design system library on Figma for future designs.

5

calculator updated in 3 months

Learnings & takeaways

Learnings & takeaways

Learnings & takeaways

Balancing financial KPIs and user needs is challenging

The hardest part of this design process was the Rate Selector design. There were some tensions between business stakeholders and our research findings. It took many rounds of iteration and over-communication to gain trust in order to get the MVP pass the finish line. It was a lesson in negotiation.


Simplicity is key

The numerical calculation part of the design took countless iterations to arrive at a version that communicate well to users and resizes well on mobile devices. I've learned a lot during this process and it laid the foundation for a data visualization project that I later took on.

Balancing financial KPIs and user needs is challenging

The hardest part of this design process was the Rate Selector design. There were some tensions between business stakeholders and our research findings. It took many rounds of iteration and over-communication to gain trust in order to get the MVP pass the finish line. It was a lesson in negotiation.


Simplicity is key

The numerical calculation part of the design took countless iterations to arrive at a version that communicate well to users and resizes well on mobile devices. I've learned a lot during this process and it laid the foundation for a data visualization project that I later took on.

Fulfilling financial KPIs and user needs is a balancing act

The hardest part of this design process was the Rate Selector. There were some tensions between business stakeholders and our research findings. It took many rounds of iteration and over-communication to gain trust in order to get the MVP pass the finish line. It was a lesson in negotiation and some compromises were made on both sides.


Simplicity is key

The numerical calculation took countless iterations and forehead banging to arrive at the design at the end that appears clear to users, resize well on mobile devices and does not look like an excel sheet. I've learned a lot from this experience and it laid the foundation of a data visualization project that I took on later.

Haze Kwok | hazehei@gmail.com | 647.739.3834

Haze Kwok | hazehei@gmail.com | 647.739.3834

Haze Kwok | hazehei@gmail.com | 647.739.3834