Navigating Finances Made Easy: Effective UI/UX Design for Consumer Finance Web Portal

Client

The client is a consumer finance company that has been providing loans and leases within the Canadian office improvement sector for over 30 years. Leveraging their large-scale customer service platform, they provide consumer financing solutions through a network of office improvement dealers.

Challenge

The company maintains a customer-facing platform that offers a comprehensive financial technology solution for businesses. The platform enables businesses to provide their customers with flexible financing options for various products and services. The solution aimed to simplify the financing process by offering an interface for businesses to manage loan applications, credit assessments, and payment plans.

One of the company’s main challenges was the non-intuitive UX and poorly designed user interface (UI) of its platform. These issues led to inefficiencies and errors throughout the workflow. The lack of a user-friendly interface made it difficult for businesses to navigate and utilize the platform effectively, negatively impacting the user experience and overall efficiency of the financing process.

Solution Highlights

The redesign focused on reducing clutter and optimizing navigation to maximize operational efficiency for platform users.

Here are the main highlights of our process:

We performed a comprehensive gap analysis to identify the main usability issues present in the existing portal. This analysis served as a foundation for targeted improvements.
We streamlined multi-step workflows that involved repetitive manual tasks, simplifying the process and improving overall efficiency.
To ensure consistency across all pages, we optimized UX patterns and developed a UI style guide. This cohesive visual framework enhanced user familiarity and navigation throughout the portal.
We made a strategic shift in the color scheme, transitioning from red to blue chill shades. This change facilitated error-spotting and improved visual communication, resulting in a more balanced and visually pleasing interface.
To deliver up-to-date news and information in a more interactive and comprehensive way, we implemented explanatory animations and eye-catching banners.
We conducted user testing with the prototype to validate the functionality and effectiveness of the redesigned portal. This allowed us to gather valuable feedback and make iterative improvements based on user insights.

Location

Canada

Industry

Finance

Services

UI & UX Design Services

UI/UX Design for Mobile Banking Application Redesigning Educational Platform for a Non-Profit Organization

What We Did

UX researchConcept ideationUser flow designPrototyping

User testingMicro animations

Results

Upgraded Interface

Designed a new customer journey that connects multiple legacy systems into one intuitive portal. Our modern and responsive website design has vastly improved upon the previous platform, incorporating the client's brand identity with a black-and-white overlay and blue chill accent. We created custom icons and integrated third-party tools to enhance the working environment, making it more pleasant and comfortable.

Creative Touch

To enhance user-friendliness, we implemented strong transitions and interactive animations. Our designers developed animated videos and banners, delivering quick and accessible information about changes or news on the website. By incorporating various animation elements, we made the typically time-consuming financial process more enjoyable and immersive.

Exemplary Screenshot from the Client’s Application

Comprehensive Structure

Provided a unified view of diverse information and applications using common navigation and content architecture.

Project Details

We completely refreshed the overall look and feel of the portal, incorporating specific features initially missing. Our solution significantly improved users' work experience by providing a more pleasant and comprehensive flow. The initial design process went through the following phases:

Understanding the Users

At Design Studio, we take our products’ quality seriously and put in great effort to ensure they are top-notch. To this end, we conducted an extensive UX audit to identify usability issues. Our design team held numerous workshops and brainstorming sessions to clearly define the essential requirements of the portal.

By employing empathy mapping, we were able to gain a deeper understanding of our users' needs, enabling us to visualize their attitudes and behavior when accomplishing tasks on the portal. We then created detailed user personas and used a UX gap analysis to develop an optimized customer journey.

Finally, our designers worked with developers to discuss the technical aspects of the portal, including processes, data flows, and use cases, allowing us to deliver the product that best fits our client’s needs.

Improving Customer Journey

Working alongside stakeholders, we created a user-centric information architecture to improve content findability. To further humanize the user experience, we implemented an integrated virtual agent feature which allows quick access to the support team directly from a browser, with just a click on the chat bubble in the bottom right corner of the page.

To make the working environment more comfortable, we ensured the portal's effective functionality, beauty, and informativeness across all devices.

Implementing the New Design

To bring the website to life, our design team analyzed modern trends in illustration and created smooth motion and geometric elements, echoing the branding and supporting the user experience integrity.

Moreover, we introduced a refreshed color palette to the client's portal, featuring blue and white tones that are sleek, modern and reduce eye fatigue due to the improved contrast. Further, the new design puts more important work-related features at users' fingertips, creating an optimized workflow. With this upgrade, users will be able to focus better on essential informative and creative elements without distraction.

We did not just stop there - every aspect of the new portal was carefully prototyped and tested with users to ensure the best possible outcome. With our updates, the portal now underlines the brand and stimulates a positive perception.

Conclusion

Our team developed a responsive, mobile-optimized UI and UX for a web application that connects with the loan and lease management system. This cutting-edge solution provides end-users with an interface to backend business logic, enabling them to craft and modify rental and finance contracts.

The mobile-optimized interface and functionality of this web application make it easy for users to access and manage their loan and lease contracts on the go, providing them with the flexibility and convenience they need.

Outcomes

The new system enabled the customer to streamline the lease and loans management process, significantly cutting operational costs and reducing delay risks caused by drawbacks.The optimized color scheme substantially reduced users’ errors while making the working environment more inviting.

Anastasia leads the dynamic DataArt Design Studio team of UI/UX specialists, 3/2D artists and webmasters and coordinating the resources, establishing the processes and working on both internal and external PR of UX services. Anastasia has a vast hand-on experience in design, which helps to be on the same page with designers and clients.