Mutual fund page and Function in e-channel
This is a Revamp Mutual Fund e-channel platform for one of the largest China banks. We have adopted the double-diamond framework for the design process. During this project, our team collaborates with clients. Together, we have completed the discovery stage, problem statement defining stage, and ideation stage (develop ideas) through a series of interactive activities which established a strong foundation for the rationale for all the deliverables for the new experience for mutual fund investing at digital channels, with our customers always at the centre of the whole process. Specifically, I am responsible for designing parts from researching and UX Design to UI design and prototyping. As well as, presenting the resulting outcomes to the client.
Research
Conducting competitor research and brainstorming workshops can aid in integrating a new feature into this project
UX Design
Expert review and ideation workshop to create effective and user-friendly designs.
UI Design
The goal of UI design is to create interfaces that are visually appealing, easy to use, and intuitive for users.
Developer
Once the design was ready, we prepared a prototype for the outcome. And communicate with internal developer for developing.
💎 Progress Diamond Method
The project followed a structured progress water-flow model within the Double Diamond design framework. This approach guides the team through four focused stages: Discover, Define, Develop, and Deliver, ensuring a thorough understanding of the problem space before ideation and execution. It promotes clarity, iteration, and validation at key milestones, reducing risks and aligning both design and business goals throughout the project lifecycle.
🧩 Competitor analysis
Before engaging with the client directly, all stakeholders—including designers and business teams—collaborated on extensive market research and competitor analysis. This foundational step was crucial since the client’s eChannel platform had not been revamped for over a decade. Understanding current market trends and competitor offerings ensured that the redesign would be contemporary, competitive, and strategically aligned with industry standards.
👩🏼🎨 Expert review
During the expert review phase, we identify and categorize usability issues into three stages of severity to prioritize which changes and improvements require immediate attention. This focused approach ensures the most critical problems impacting user experience are addressed first, delivering maximum value efficiently.
💬 Stakeholder 1:1 Interviews for Deep Insights
The project followed a structured progress water-flow model within the Double Diamond design framework. This approach guides the team through four focused stages: Discover, Define, Develop, and Deliver, ensuring a thorough understanding of the problem space before ideation and execution. It promotes clarity, iteration, and validation at key milestones, reducing risks and aligning both design and business goals throughout the project lifecycle.
🃏 Card Sorting
Following the interviews, card sorting exercises helped organize content and features effectively from the users’ and stakeholders’ perspectives. This method aids in structuring the information architecture intuitively, supporting easier navigation and discoverability by aligning the system’s structure with mental models of real users.
💬 How Might We
Following card sorting, we formulated “How Might We” (HMW) questions derived from the research insights and sorting results. These questions reframe challenges into opportunity statements, sparking creative thinking and guiding ideation efforts toward innovative and practical solutions.
🖥️ Ideation workshop
👥 Persona
As a result, we have identified over 100+ potential ideas and prioritized them.
Based on the insights and output from the workshop, detailed personas were developed to represent key user groups, capturing their goals, behaviors, and pain points for empathy-driven design focus.
🖼️ Customer Journey Mapping
🎨 Design Guideline
To apply accessibility in the design guideline, we used Aa to indicate color contrast compliance. Following WCAG 2.1 AAA standards. Dark text on the color swatch uses #333333 as the text color, while white text on the swatch uses #FFFFFF as the text color. And requires a contrast ratio of at least 3:1 for graphics and user interface components.
✨ Design screen
The design process began with a mobile-first approach, prioritizing smaller screen constraints to ensure clarity and simplicity. Designing for mobile devices first helped reduce visual complexity and avoid perceptual confusion. Given the larger screen space available on desktop, the user journey and interface can incorporate more information and different interaction patterns without overwhelming users. This allows the desktop design to offer richer detail and functionality while maintaining consistency with the mobile experience.
Following best practices, the mobile-first strategy ensures essential features and content receive priority. The desktop version builds upon this solid foundation, leveraging additional space to improve user productivity and engagement.
This method provides a balanced, responsive experience that adapts to device limitations and user needs efficiently.
