What is Credit Karma?
Credit Karma makes financial progress possible for everyone. 100 million members have free access to
credit scores, reports, tools and education to make real, meaningful progress.
credit scores, reports, tools and education to make real, meaningful progress.
The key goal was to create a durable component and variations aligned to the Credit Karma design system with comprehensive guidelines that would be a template for all future documentation.
Problem
At the beginning of 2020, Credit Karma did a brand refresh and began the goal of fully implementing the Karma Product Language (KPL) design system across the product focusing on the native and mobile experience. The design system team had the opportunity to design system components and variation, expand the documentation, including comprehensive usage and behavior guidelines, research insights, in product examples, to create the go-to source of truth and consistent adoption across the product.
Credit Karma slider instances
Research
The process began by gathering Credit Karma in-product and proposed slider examples. Based on these examples, I was able to detail slider options that would address the different use cases needed and start to define when to use and when not use a slider, and when to use a different component.
Next, I did a competitive analysis of analogous sliders across different apps to discover how other companies solve for different types of sliders, specific slider element behaviors and general usage guidelines. I also reviewed Material Design and Apple iOS Human Interface Guidelines to guide similarities and differences across platforms and instill confidence for Engineering when building the component.
Competitive analysis: Sliders
Design explorations
Explorations focused on each of the slider elements using the research principles and the KPL design system as guidelines.
Slider component instances
After explorations, reviews and iterations, I found a style that worked for all the variations and aligned with the design system. The next task was creating slider instances, accounting for all states and scenarios, and detailing guidance for each instance. Below are a few examples of the component instances and states.
Documenting the slider component
Below is an example of the completed Slider component documentation.