Experience Design

Experience Design

Unified Financial Oversight Portal

Transforming complex financial workflows into a unified digital platform.

Transforming complex financial workflows into a unified digital platform.

Client

Pioneer in Financial Services

Service

Experience Design

Date

March 2024

Duration

20 Weeks

About

This project replaces outdated legacy systems with a modern, streamlined web experience for managing high-stakes international transactions. I designed a single, role-based application that allows teams to monitor, track, and flag global payments in real-time. To support this, I developed a centralized admin gateway to oversee worldwide transactions and a customized user management portal that ensures different staff members have the specific tools and security access they need based on their roles.

Goal & Status

The goal is to replace outdated software with a single, modern application that simplifies global financial operations. By consolidating multiple tools into one, we are improving speed and usability across the organization. All designs are complete, and the project is now in active development.

Process

UX & Wireframing

The process began with a deep dive into understanding the problem space — analyzing user behaviors, mapping pain points, and uncovering real needs. I then translated these insights into user journeys and wireframes, shaping intuitive flows that prioritized clarity, usability, and engagement. This stage laid the foundation for a product experience that felt effortless and purposeful.

UX & Wireframing

Identifying key user needs, pain points, and goals

Flip to learn more

UX & Wireframing

The process began with a deep dive into understanding the problem space — analyzing user behaviors, mapping pain points, and uncovering real needs. I then translated these insights into user journeys and wireframes, shaping intuitive flows that prioritized clarity, usability, and engagement. This stage laid the foundation for a product experience that felt effortless and purposeful.

UX & Wireframing

Identifying key user needs, pain points, and goals

Flip to learn more

Design System

I successfully integrated the client's existing design system into our product designs. I dedicated time to thoroughly understand its visual language, component structure, and interaction patterns. While this system ensured consistency, I also identified areas where we needed to apply custom modifications or create entirely new components to satisfy unique client functionality, outlining these necessary extensions for the development team to implement.

Design System

Defining the visual language

Flip to learn more

Design System

I successfully integrated the client's existing design system into our product designs. I dedicated time to thoroughly understand its visual language, component structure, and interaction patterns. While this system ensured consistency, I also identified areas where we needed to apply custom modifications or create entirely new components to satisfy unique client functionality, outlining these necessary extensions for the development team to implement.

Design System

Defining the visual language

Flip to learn more

Visual Design

With the system in place, I moved into visual exploration — refining layouts, hierarchy, and motion to craft a cohesive aesthetic. Each screen was thoughtfully designed to balance functionality with visual delight, ensuring that every element supported the overall storytelling of the product.

Visual Design

Refining layouts, hierarchy, and motion

Flip to learn more

Visual Design

With the system in place, I moved into visual exploration — refining layouts, hierarchy, and motion to craft a cohesive aesthetic. Each screen was thoughtfully designed to balance functionality with visual delight, ensuring that every element supported the overall storytelling of the product.

Visual Design

Refining layouts, hierarchy, and motion

Flip to learn more

Design Handoff

Finally, the designs were prepared for development with detailed documentation and component specifications. I collaborated closely with developers to maintain design integrity, streamline the build process, and ensure a smooth transition from concept to code. This stage brought the vision to life exactly as intended.

Design Handoff

Smooth transition from concept to code

Flip to learn more

Design Handoff

Finally, the designs were prepared for development with detailed documentation and component specifications. I collaborated closely with developers to maintain design integrity, streamline the build process, and ensure a smooth transition from concept to code. This stage brought the vision to life exactly as intended.

Design Handoff

Smooth transition from concept to code

Flip to learn more

UX & Wireframing

The process began with a deep dive into understanding the problem space — analyzing user behaviors, mapping pain points, and uncovering real needs. I then translated these insights into user journeys and wireframes, shaping intuitive flows that prioritized clarity, usability, and engagement. This stage laid the foundation for a product experience that felt effortless and purposeful.

UX & Wireframing

Identifying key user needs, pain points, and goals

Flip to learn more

Design System

I successfully integrated the client's existing design system into our product designs. I dedicated time to thoroughly understand its visual language, component structure, and interaction patterns. While this system ensured consistency, I also identified areas where we needed to apply custom modifications or create entirely new components to satisfy unique client functionality, outlining these necessary extensions for the development team to implement.

Design System

Defining the visual language

Flip to learn more

Visual Design

With the system in place, I moved into visual exploration — refining layouts, hierarchy, and motion to craft a cohesive aesthetic. Each screen was thoughtfully designed to balance functionality with visual delight, ensuring that every element supported the overall storytelling of the product.

Visual Design

Refining layouts, hierarchy, and motion

Flip to learn more

Design Handoff

Finally, the designs were prepared for development with detailed documentation and component specifications. I collaborated closely with developers to maintain design integrity, streamline the build process, and ensure a smooth transition from concept to code. This stage brought the vision to life exactly as intended.

Design Handoff

Smooth transition from concept to code

Flip to learn more

Technology Today

As I transitioned into a Finance Industry project, I was exposed to a lot of new nomenclature and processes. The client's entire workflow depended on a mainframe software that has been in use for over 30 years. Converting this into a web application with a proper user interface was a challenge in itself. I am proud to say that I played a key role in this transition for the client!

Visual Designs

Referrals

Imagine thousands of high-value, multi-currency transactions processed through a system designed to flag those that appear suspicious and require further review. These flagged transactions are referred to as "referred transactions." Users can view these transactions and perform necessary actions on them.

Branch Wide Stats

Each module is managed by a different team, but this dashboard brings everything together in one place. Users can view statistics tailored to their region as well as personalized insights relevant to them. While it may look like just another dashboard, this one is dedicated to tracking and managing high-value transactions.

Contingency

Now that we understand referred transactions, the next question is — where do they originate? The Contingency module manages transaction tracking for specific regions while maintaining key metadata, such as cut-off times, due times, and approval systems. Through this module, users carry out Start of Day and End of Day activities, gaining a complete view of all pending referred transactions along with their due times and amounts.

User Managment

This section is the gatekeeper for all sensitive information. By centralizing user permissions and data maintenance, we ensure security, uphold compliance standards, and provide every user with exactly the right level of access they need to perform their duties—nothing more, nothing less.

In case of curiosity: Email me.
For daily chaos: Instagram.

In case of curiosity: Email me.
For daily chaos: Instagram.

In case of curiosity: Email me.
For daily chaos: Instagram.

Create a free website with Framer, the website builder loved by startups, designers and agencies.