Fintech

Trading Platform

A Seamless Dashboard Interface for KYC and Fund Trading

Trading Platform

quick overview

Scenario Background

Azalea Investment Management aimed to modernize its digital platform for accredited investors, replacing an outdated system with a new, user-friendly trading platform that integrates seamlessly with existing financial services.

The project faced several key challenges

Regulatory Compliance: Navigating complex financial regulations while ensuring robust data security.
Limited References: Lack of existing platforms for benchmarking.
Resource Constraints: Tight budget and accelerated timeline requiring focused feature prioritization.
User Experience: Balancing a streamlined UX with the need for comprehensive functionality.

Business Objective

To launch a compliant and secure trading platform that enhances Azalea's brand, drives user adoption, and supports future growth.

About the client

Azalea Investment Management was the client for this project, with Ms. Margaret Lui, the Chief Executive Officer and Executive Director, serving as the key stakeholder. The primary goal was to develop a trading platform using Xen Technologies' white-label solution that aligned with Azalea's brand identity while ensuring a seamless UX for investors. The project faced several initial challenges, including the absence of any existing reference (FOK - First of a Kind), making the mapping of user flows and the establishment of key personas crucial. Additionally, scope containment was a significant challenge due to a limited budget and developer team, and custom features were restricted by the constraints of the white-label solution.

Stage 1 : Mapping the stakeholders

"Finding the voice that turns nods into agreements, because mapping stakeholders is the art of getting to a resounding 'Yes!'"

Finding Key Stakeholders

Identifying key stakeholders was a critical first step in the project, ensuring that we engaged the right decision-makers and influencers early on. We established a clear communication strategy to streamline collaboration, setting up regular touchpoints and feedback loops. This approach fostered transparency, alignment, and efficient decision-making throughout the project's lifecycle, ensuring that all voices were heard and that our work was guided by a unified vision.

Stage 2 : Discovery Workshop

No need for a UX audit as this was a first of a kind solution for the company. We went straight into a workshop where the goal was to get up to speed and better understand the business logic and as-is scenarios.

Discovery Workshop

The primary goal was to understand the business logic and capture insights from subject matter experts. Through collaborative sessions and interactive discussions, we liaised with stakeholders to gain a comprehensive understanding of Azalea's current state service blueprint. This enabled us to identify pain points, challenges, and opportunities, laying the groundwork for developing a robust information architecture.

Discovery Continued

As we conclude the discovery phase, we've gathered valuable insights that shed light on key user challenges and business needs. Now, we transition into solutioning—where these insights will guide the development of actionable features and improvements. This phase is about transforming findings into targeted solutions that address pain points, enhance user experience, and drive business success.

Stage 3 : Mapping

We gathered a wealth of insights during the discovery phase, laying a strong foundation for the next steps. Now, we shift our focus to validation. To start, we visualize our current understanding by drafting an 'as-is' scenario task flow of the business. This is complemented by a detailed service blueprint, helping us map out the existing processes and identify areas for improvement as we move forward."

AS-IS scenario

In the 'as-is' scenario, we mapped out the current task flows to capture how the business operates today. This was then translated into a comprehensive service blueprint, providing a clear visualization of the existing processes and interactions, and laying the groundwork for identifying key areas of improvement.

Service Blue-print

We service blue print 2 key areas:

Onboarding + Subscription
Investing and Monitoring

Stage 4 : Task flow mapping and gathering requirements

Once we have a clear understanding of the problem statement, business logic and requirements we move on to task flow mapping. This is a critical step where we visualize and outline the entire user journey, mapping out each task that users will perform within the app. The task flow map allows us to foresee how users will interact with the system and helps us identify the most efficient paths for achieving their goals.

Establishing Key Personas: Drafting Current State Journey Maps

Following the discovery workshop, our focus shifted towards establishing the key personas that would drive the design and development process. Two primary personas emerged: the Investor and the Fund Manager. To ensure alignment with user needs, we meticulously drafted out their journey maps, depicting their interactions with Azalea's platform in its current state. These maps provided invaluable insights into user behaviors, pain points, and preferences, serving as a reference point for shaping the information architecture to cater to the diverse needs of both personas.

Investor task flow map

Investor Task Flow: For Investors, the task flow emphasizes simplicity and ease of use, catering to users who may not be highly tech-savvy. The interface is designed to be super easy to read and navigate, with a focus on clear, understandable information. The scope is deliberately kept streamlined to reduce complexity, making the platform accessible and user-friendly for older investors who need straightforward, reliable access to key financial information without unnecessary distractions.

Fund manager task flow

Fund Manager Task Flow: The task flow for Fund Managers focuses on efficiently managing listings and accessing product company data rooms with ease. The design prioritizes quick navigation and streamlined operations, allowing fund managers to swiftly perform key tasks like editing listings, managing contacts, and updating documents. The interface is designed for professionals who need to quickly access and manage detailed financial data, ensuring that every action is intuitive and readily accessible.

Stage 5 : Ideation

From this mapping, we quickly move into ideation, starting with moodboards to set the visual tone and create a quick branding guideline. This serves as the reference for building low-fidelity wireframes. The goal is speed—using clickable prototypes to transition from concept to buy-in, allowing us to freeze requirements early with rapid feedback and iteration.

Mood board

Using a moodboard in the ideation phase helps cast broad strokes at the desired look and feel, serving as a visual foundation for your project. It brings together images, colors, typography, and textures that resonate with the brand's essence, allowing you to explore different aesthetics and styles quickly. Establishing a quick branding guideline from this moodboard ensures consistency across all design elements, providing a cohesive direction as you refine your ideas. This approach keeps the creative process aligned with the brand's identity, making it easier to communicate and iterate on the design vision.

Low fidelity sketches

The ideation begins with assumptions and a focus on responsiveness, ensuring a seamless experience across desktop and other devices. As we ideate, we layer different ideas and solutions, maintaining a balance between creativity and practicality. The approach is to stay playful and innovative, allowing ideas to flow freely without imposing constraints on the creative process, while keeping the end solution grounded in practicality.

Stage 6 : Validation + Stake holder buy in

We use clickable prototypes and heat map analysis to validate design and functionality. Clickable prototypes provide an interactive model, while heat maps visually confirm user focus and interaction. Together, these tools ensure a shared understanding of the features and user experience. This validation helps align on project objectives and outcomes, enabling us to confidently freeze requirements with stakeholder buy-in.

Prototype example

Heat maps user testing

After creating clickable prototypes, we conduct eye tests with users. These tests generate quick heat maps that help validate our design choices and information layout, ensuring that the most important elements capture user attention as intended.

Stage 7 : Freeze requirements and the scope

With heatmaps and low-fidelity wireframes in hand, we move to finalize the project scope. This stage focuses on getting final confirmation, refining low-fidelity wireframes into high-fidelity designs, and locking down all features. Once approved, we begin sprint planning and hand over the finalized documentation to the development team, ensuring a smooth transition into the build phase.

Feedback and final refinement

We conduct a quick reflection with clients to gather feedback and create a list of refinements for the designs. Our goal is to refine the designs to near high-fidelity, giving them a thorough polish to ensure everything is aligned and ready for finalization.

Sprint Planning

With the designs frozen, we immediately jump into sprint planning, organizing tasks and timelines to efficiently move the project into development.

Final Stage : Documentation and handover | Design systems

For documentation handover, we used Zeplin, Overflow, and Figma/Sketch. We also introduced a basic design system, meant as a guideline rather than a rule, to guide usage. I gave a brief talk on design systems, focusing on their adoption and practical application within the project.

Design Systems

My approach to design systems is to build as you go, avoiding over-engineering. We adopt the atomic methodology, starting with atomic blocks and gradually refining common elements into molecules, then templates for organisms. I believe that one design system doesn't fit all, so during handover, if time permits, we provide a final evolution and refinement tailored to the client, distinct from the iterative process used during sprints with developers.

Final Reflections

As I reflect on the projects showcased in this portfolio, I’m reminded of the crucial balance between design excellence and strategic business alignment. Each project not only highlights my ability to execute effective UX methodologies but also demonstrates how these design decisions were deeply rooted in achieving broader business objectives. My approach is always to ensure that design solutions not only meet user needs but also drive tangible business outcomes, from enhancing user engagement to boosting conversion rates.

This portfolio is evidence of my commitment to blending creativity with strategy, positioning design as a key driver of business success. My role as a UX lead goes beyond crafting interfaces—it's about being a strategic partner who understands and aligns with business goals, ensuring that every design decision supports the company’s objectives.