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