DISCOVERY

Fiwerx approached us with a goal of revamping the existing product to design a simplified, and intuitive user experience for loan officers and admins from different banking institutions to let them manage loan applications and process them seamlessly. In order to transform the existing SaaS product, we started off with an interview meeting with the stakeholders to understand their goals and objectives of the product as well as the business, frame the problems to be solved, gather enough information and evidence to initiate on the design process.

RESEARCH

• UX Audit
• Competitor Analysis
• User Personas

With the input and understanding from the discovery phase, we started to investigate the problems faced by the users by conducting important research strategies like auditing the user experience in the current product, benchmarking the competitors and creating user personas to get to the root cause of the problem.

DESIGN

• User Journey Maps
• Wireframe
• Visual Design
• Clickable Prototypes

To make sure the brand’s presence reflects its capability of serving globally, we ensured that we created a design language that reflects scale, trust, capability and success. We also ensured our interaction design and visual design stages went through repeat reviews and validations from first-person users, as well as internal and external stakeholders. The end validated outcome demonstrates Marvelloux capabilities of scaling brands globally, a legacy the studio is known for.

A: UX Audit

We deployed our team of researchers to perform heuristic evaluation, overall findings and enterprise design validation for the UX audit. Once the research was completed, we started to see the problems clearly and with accurate explanation. Three of the main issues found in the product were:

1. There were too many steps to reach an user’s goal such as adding a new deal.
2. The overall navigation was elongated with unnecessary steps.
3. There was no tool for communication between the loan administrators and loan officers.

B: Competitor Analysis

We then started to analyze some of the client’s competitors to examine their user flows and possible actions that users may need to take when interacting with their products. We identified the most effective and common features across the products and analyzed them further to compare their user experience and functionality.

C: User Personas

With the features in-hand, we built user personas of a loan admin and a loan officer to identify their problems and devise product strategies for better understanding of their goals, behaviors and pain points.

A: User Flows

After getting an insight of the loan admins and loan officers, we created two separate user flows (one for each loan admin and loan officer) for decision makers and stakeholders a better understanding of the user experience architecture behind the revised product. This helps to minimize misunderstandings and speeds up the overall process. The only key difference in the product is for loan admins. Their interface is created in such a way that they can assign tasks to the loan officers and view the overall operations in a bird’s eye view.

B: Wireframe

We focused on simpler and scalable wireframes with precise keywords in the flow of the user’s journey in the product. This, in turn, would help users to find the necessary goals quickly. We laid down the wireframe from Login to Messaging, meeting all the business requirements in the SaaS. Features like messages and notifications were introduced to make it interactive between the loan admin and the loan officers.

C: Visual Design

We adopted a minimalistic approach while designing the interface of the product. The reason behind was to keep the product extremely seamless to use, so that the users don’t feel frustrated when dealing with lots of documents. The core idea was to help the users to finish an action in just a few taps. Adding subtle color tones worked well to keep the interface light and intuitive. The typography style has been chosen keeping legibility in mind.

D: Clickable Prototypes

We presented a final sample of the product, showcasing how the product works and how each page is interconnected.