Project Summary
As part of OCBC’s initiative to overhaul its business banking platform, the business engaged the agency’s UX/UI design services to supplement its customer experience (CX) design team. Together with the team, I designed more than 10 features for its mobile and desktop platforms. The redesign was launched progressively over the course of 2022 and 2023.
My Role
Interaction Design
Visual Design
Prototyping
The team
Designers
Software Engineers
Product Managers
Timeframe
2021 - 2023
My Role
I collaborated with the client's business, Customer Experience, and engineering teams to collect additional requirements and refine the proposed wireflows. My role encompassed overseeing interaction and visual design for various features and platforms. In addition to this, I crafted high-fidelity prototypes to facilitate user testing and stakeholder presentations. Furthermore, I played a part in shaping the Business Banking design language system for web and mobile, working in tandem with the in-house CX team to enhance design workflows and reduce design debt.
The Process
In short, the agency’s partnership with OCBC involved agency designers receiving wireframes from the customer experience designers, which we then provided interaction and visual design services for. Our process can be summarised by these steps:
Wireflow Iteration
UI Design
Design Support
Wireflow Iteration
Upon receiving wireframes from the client, I first sought to understand more about the user needs and user journey of the feature. The CX designers would give a walkthrough of the user journey while highlighting the user goals along the way. I also had discussions with the product owners to note down the business logic of the features.
To provide as much value add, I frequently consulted product owners and CX designers to understand who the users were, their user journeys and user goals. Through this, I gained a clearer picture to suggest improvements for the wireflows and any exception handling or errors that could occur. I used this constant loop of discussions, iterations and feedback to provide accurate and improved wireflows.
Wireframes provided by the client.
Wireframes provided by the client.
UI Design
After reviewing the improved wireflows with the OCBC team, including with engineers to check for technical feasibility, I converted the wireflows into high-fidelity designs for handoff to software engineers. When I first joined the project, I took time to conduct an audit of the completed revamp screens to understand the general design direction and identify design patterns. For any new wireflows that had to be designed, I used this knowledge to ensure that the designs were consistent and the components used adhered to the product’s design guidelines. This process became progressively easier and quicker as I clocked more time in the project. Despite that, I made sure to frequently refer to past designs and coordinated with the other designers to ensure my designs were in the right direction.
UI design for desktop screens.
UI design for mobile screens.
Design Support
I worked closely with the software engineers to provide design support. I ran through desk checks to ensure that the implementation closely followed the UI designs. I also answered any questions they had on interactions and the business logic for the features. For designs that could not be implemented due to technical limitations, I recommended other designs and discussed them with the PO and CX designers to reach an agreement on feasible alternatives.
Design System
I also worked on the product’s design system throughout the project which was used by the mobile and desktop platforms. I contributed to the design system by designing components and patterns and documenting guidelines for their usage.
For features that I felt required new components or new variants of those components, I first tabled this in a parking lot. Each week, the design team allocated time to discuss these items. In these discussions, we would first determine if we can utilise existing components instead of creating new ones. For scenarios where this was not possible, we would track these items and note them down if its usage spanned across multiple features. I would then design and add new components, or improve existing components in the design system.
I learned that an effective strategy for maintaining the design system involved balancing the usage of existing components with the creation of new components and/or improving existing components. This ensured that we could maintain a unified design across the product while still providing sufficient flexibility to designers.
Interactive Prototype
Using Principal, I created an interactive prototype for use in major stakeholder presentations. The team used this to visualize the different features and their user flows and how the features fit within the entire product. I used Principal instead of Figma as it supported keyframing for designing animations. This was eventually ported over to Figma for easier sharing across the team.
Challenges & Learnings
Constant communication across design — As this was my first experience designing for a large product and for both mobile and web, I learned that constant collaboration between members of the design team was key to producing a well designed and cohesive product. Multiple concurrent work streams meant that keeping track of new developments in designs alone were impossible. Through frequent engagement with the other designers, we ensured that new design practices and patterns could be shared across the team and translated into our own designs.
Effective Remote Working — We were engaged with OCBC as UI designers, but also stepped into partial UX roles by providing feedback on the user flows and exception handling. It was at times tough to make UX recommendations as we had limited knowledge of the business banking space, and it was challenging to approach CX & POs to find out more as we were not working within the same office. I learned to communicate online effectively by keeping messages succinct and hopped on calls for more complex discussions.
High-fidelity interactive prototypes — I had to learn Principle from scratch as Figma did not support keyframe animations, which were needed for interactions in the mobile app. It was challenging as I had to find workarounds to export each Figma screen as an image due to compatibility and performance issues. Principle also used layer names to anchor animations between screens, which meant that layer name organisation was vital. However, I wasn’t disciplined in naming the layers, which caused slowdowns in my workflow. Given an opportunity to create the prototype again, I would export all screens first and name them before starting on prototype linkages.
