Revamping Finance Calculators: Applying Design Systems

UX Designer

UI Designer

Figma

Central 1

Project Overview

Redesign the finance calculators by changing minor UI elements and implementing Design Tokens to improve the overall User Experience.

Role and Responsibilities

As the sole Designer on this project, my primary objective was to work with a Front-End developer to scope out the possibilities of the UI change. Implement the new Design System on top of the old designs of calculators.

Challenge

As one of my first projects for Central1, this project set me up to learn and apply the design guidelines for the first time. There was a lot of back and forth about what was possible with the designer who created the design guidelines to make sure I was implementing everything properly. I also had to keep in mind the edge cases of the current calculators like more configuration options for data input.

Competitive Research:

Embarking on an exploratory journey, I delved into how leading banks, government platforms, and insurance companies designed their calculators, pinpointing strengths and areas for improvement.

This investigation informed a comprehensive presentation to my developer colleague, setting the stage to define the realm of feasible UI enhancements. This collaborative effort was crucial in understanding our project's boundaries and potential, guiding the scope of our redesign efforts within realistic technical constraints.

Breaking Down Input Types and Ranges:

To further refine the calculators' functionality, I embarked on dissecting the various input types—integers, floats, strings, and more—alongside their respective range limitations. This analytical approach was pivotal in aligning the front-end design with backend data processing requirements.

Understanding the expected value types for each input box was instrumental not only in guiding users through the data entry process—clarifying the kind of values needed (such as years or percentages)—but also in streamlining the data translation to the server for enhanced accuracy in results. This meticulous attention to detail ensured a seamless user experience while bolstering the calculators' computational precision.

First Mockup Creation:

Leveraging insights from comprehensive competitive research and a deep understanding of input value types, I crafted the first mockup for the redesigned finance calculators. This initial prototype aimed to encapsulate the full spectrum of identified features and input requirements, marrying functionality with an intuitive user interface. This step marked a pivotal moment in the project, translating abstract concepts and research findings into a tangible, visual representation that would serve as the foundation for further development and refinement.

Implementing Existing UI Design System and Adding New Components

Navigating the challenges posed by the existing design system—originally tailored for the web application—I ventured into customizing and expanding its components to suit the calculators positioned within the marketing website, a domain with distinct design requirements.

The calculators, inherently form-like in structure, provided a unique opportunity to adapt and extend the form components from the design system, ensuring a cohesive user experience. This strategic approach allowed me to not only maintain alignment with the broader design language but also introduce necessary enhancements to accommodate the specific functionalities and aesthetic needs of the calculator tools.

Some of the components I added

Branding Guidelines of the company

Design Finalization and Implementation:

With the designs refined and a clear vision for their application across the various types of finance calculators, we embarked on the implementation phase. This stage was characterized by meticulous attention to the unique edge case requirements of each calculator, ensuring that the implementation was not only faithful to the finalized designs but also adaptable to the specific functionalities and constraints of each calculator type. This tailored approach was crucial in achieving a seamless integration of the new designs, enhancing both the aesthetic appeal and the practical utility of the calculators for users. The following are the original calculators and the final designs.