We’ve made major changes to how we build the web UI at Credit Karma – and we’re still going. Over the past year, we’ve rebuilt the site in ReactJS and Redux and launched new experiences on both desktop and mobile web, using single page architecture. Our revised frontend technology stack includes ReactJS, Redux, webpack and GraphQL.
Revamping the tech stack was an exciting challenge for me as it was my first experience re-architecting the frontend of a website, especially at this scale.
These were a few of the projects we launched with our new frontend tech stack. As you can see, we ran projects across multiple verticals and even kicked off our international expansion into Canada.
Here, I’ll share what we learned about launching the latest projects with a new tech stack.
Moving slowly with monolithic architecture
I joined Credit Karma as an Engineering Director in early 2015. At that time, the Credit Karma website was a monolithic application built using the PHP Zend framework. All frontend code was very tightly coupled with the PHP and we used libraries like jQuery. We wanted to dramatically improve the user experience on mobile and desktop platforms, however, our existing frontend stack did not easily support that. As you can imagine, we had problems, like:
- Development speed was very slow. As the frontend code was too tightly coupled with the PHP Zend framework, it was costly and painful to fix a bug or develop a new feature. This also meant a lot of code duplication.
- We couldn’t build rich site interactions because our existing architecture didn’t support rendering on the client side.
- It was not easy to build reusable UI components.
Our mission was clear: how could we leverage newer frontend technologies and architecture in order to increase development speed and enhance the experience of our 60 million members?
We chose ReactJS for its Virtual DOM, reusable components, and because it allows progressive adoption of the new frontend stack. Plus, developers love coding in ReactJS.
Adoption as a journey
If you have ever migrated to a new tech stack in a company with hundreds of engineers, you know it’s no small feat. We had to be thoughtful about how to get buy-in, build skills and expertise, and increase adoption in the engineering organization as a whole. It’s been a journey with twists and turns of progress, and I’m proud of how the whole org came together to make it happen.
- Conception and prototype (Q2 2015). We piloted new frontend architecture on one feature of our website and rewrote the “reset your password” flow. We defined metrics and A/B tested against the old experience. There was a lot of learning and iterating quickly.
- Solving foundational problems (Q3 2015). Supporting Isomorphic Javascript, and rendering on Client and Server-side took more time than we planned to build it and get it into production.
- Adoption and training ( Q4 2015 ). We conducted several trainings on ReactJS and Redux and ran “Lunch & Learns” within the team to help existing developers learn. We were able to increase adoption by embedding three frontend and ReactJS experts in a team rolling out a new auto insurance experience. We also supported any team building new experiences.
- Full adoption and hiring (ongoing). Now, every new feature is being built with ReactJS and Redux. We’re actively hiring frontend developers with advanced JS knowledge and experience in building new client-side frameworks like ReactJS, NodeJS or Angular.
What’s next
We are currently working on rewriting our dashboard and credit details page using ReactJS, Redux and GraphQL. This is all part of the mission to improve our member’s experience with clearer presentation of data, more context on the recommendations we make, and better discoverability. If you’re interested, take a look at our openings on the frontend team.
Take aways
Don’t try to rewrite the entire website from scratch at once. Propose and create a more organic adoption. Take time to learn and iterate.
Look for a post soon on how we leveraged our tech stack to build the frontend for our expansion into Canada.
