top of page

Money by QuickBooks Experience

Work Project

2021.3 - 2021.5

Context

QuickBooks Money helps customers manage your payments and banking. Potential get real-time information about new updates from QuickBook Money from its marketing website.


Intuit's QuickBooks Money team came up with a new design and planned to refresh its marketing page to address more users. The team wanted to test the new interactions live and ensure that the website interaction works smoothly before launching the landing page to customers.

ROLE

Interaction Designer, Design Technologist

PROCESS

Interaction audit, High-fidelity prototypes in code, Feature launch

TEAM

Quickbooks Money Team

Challenges

How can I refresh the marketing page so that it is consistent in interaction and technology?

Challenges


As I chatted with the lead visual designer, we agreed that the most challenging part of implementing the new marketing page redesign is applying a dynamic digit changing interaction once users scroll to a certain position. As the prototyper, I coded a high-fidelity web prototype to prove that this interaction is technical feasible.


Digit Change Visual

Final Product


I built the interactive experience using code. The dollar value will increase when users scroll up. This motion will only appear once. Furthermore, I worked with an engineer to successfully launch the new marketing website with the expected scroll interaction.


Here is a video of the final interaction which was implemented into the Money by Quickbooks marketing website. 


Tech stacks: Figma, FigJam, HTML, CSS/SCSS, JavaScript.


Final Market Website Interaction in Code

bottom of page