Saas Product UX/UI Redesign
The Client: MyCardStatement.com is a web app that many banks use to check credit card statements and make payments.
The Problem: As with many banking web services, this site looks dated and can be confusing to use, both for new and returning users. The layout feels dry and can be hard to navigate.
The Solution: Use a pre-built design system to create a fresh, intuitive UI and user experience.
One of the main reasons people use this product is to check their credit card balance and then pay it. On the original site, the credit balance number lacks visual hierarchy and blends in with other data, and the button to pay the card is small, which leads to users struggling to find it quickly. To improve the site's user experience, the Current Balance number was given greater hierarchy, and the Pay Card button was made much more prominent than other options.
The Design System
A design system called Rayna UI was used in Figma to redesign this site. I used Rayna components, icons, and typography presets to build out the interface. Almost every element on each page comes from the Rayna system, from the headings and navigation section to the icons and shape dividers. After using Rayna to build the layout, existing MyCardStatement brand colors were used to style the design.
