Client
Livi Bank
My Role
Product Designer
Dev Lead
John Sito
A leading virtual bank took the step of digitizing a traditional financial service. I pushed to get designers a seat at the table for strategic product decisions, and it paid off with more efficient UI design.
Even with strict banking compliance regulations, our team pulled off two major wins:
Transformed a 24-page-long Endowment application form into a smooth, intuitive in-app experience for IOS users.
Represented the design team in product planning, ensuring UI design focused on the most prioritized features first, saving us valuable time.
Task Completion Time
Digital Transformation
Localized Components
How to transform a long, old-school financial product's paper application into a seamless mobile experience? At first, we got it completely wrong.
In the beginning, our financial compliance team led the entire product. Naturally, as finance and legal experts, they wanted every single detail from the paper application form transferred into our mobile virtual bank app.
⛔ Designers and developers had no say in the decision-making process. We were simply executing, spending endless days and nights bringing everything into the app one to one without prioritization or exploring creative solutions to navigate the rigid regulations.
The result? Designers were completely burned out, buried under a mountain of tedious UI work.
Plan was to copy paper form to mobile app exactly as it was, one-to-one.
⛔ It creates a top-down workflow instead of a collaborative, level-playing field where all teams contribute equally.
I challenged the top-down workflow by pushing my way into strategic decision-making. I basically invited myself.
To bring designers and engineers into product discussions, I made it a point to engage senior stakeholders, advocating for a design perspective in shaping the product.
After some initial uncomfortable communications and a period of adjustment, designers were finally part of the conversation—helping decide what content to digitize and how much design effort was needed. It was a refreshing shift. Instead of just executing, we had a real say in the process.
Design team felt way more motivated once we moved beyond just being executors.
Shifting from a top-down workflow to a more balanced and collaborative way of working.
Prioritizing from a Design Perspective, turning to the Impact-Effort Matrix.
With a tight timeline for the product launch, smart prioritization was key. To make sure our efforts were focused where they mattered most, I used the Impact-Effort Matrix (aka the Prioritization Matrix). This tool helped me evaluate each feature by weighing its potential impact against the effort needed to implement it.
By plotting everything on the matrix, I could make clear, informed decisions about what to prioritize—ensuring we focused on high-impact, low-effort wins first.
The Impact-Effort Matrix is a visual tool that helps prioritize design ideas and features based on their impact and implementation effort, making decision-making more strategic and efficient.
A visual tool that helps prioritize design ideas and features based on their impact and implementation effort.
After sketching wireframes to gain buy-in from stakeholders and running feasibility checks with the engineering team, I finally got to focus on bringing the interface to life. This was the part where everything started to take shape, where ideas turned into tangible, polished screens.
To be honest, the app we were building wasn’t about reinventing the wheel. It was about translating an existing offline application process into a smooth in-app experience. Since we weren’t introducing many groundbreaking new features, the wireframing process was relatively straightforward.
Low-fidelity wireframes to get the necessary financial regulatory approval.
The next phase felt like heaven—pure visual UI design, utilizing my background in iconography, illustration, or branding.
With the wireframing process behind me, I could zero in on the finer details—ensuring that every interaction, layout, and design element worked seamlessly together to create a frictionless user experience. I explored every little card component, fine-tuned the spacing to achieve perfect balance, selected hero images that resonated with our brand identity, and crafted smooth animations to add some delight.
It wasn’t just about aesthetics, precision matters too. Using the right auto-layout structures ensured scalability and consistency across screens, while carefully considered micro-interactions brought the interface to life, making transitions feel natural and guiding users effortlessly through the app.
As we worked on the UI design, I also took on the challenge of localizing the company’s design system, leveraging my bilingual skills to bridge language gaps.
🎨 This meant refining reusable components, adjusting spacing for better readability, and ensuring text truncation worked smoothly across languages. Since English and Traditional Chinese have different lengths and semantic structures, I had to fine-tune layouts to maintain a balanced, visually cohesive experience.
It was a meticulous process, but optimizing the design system for multiple languages made the product more accessible and seamless for a diverse user base.
Working around English and Traditional Chinese with different semantic structures in UI components.
This project reinforced two key lessons for me as a designer: the power of strategic involvement and the joy of crafting beautiful UI.
1️⃣ Pushing to have designers included in product decision-making was a game-changer.
By getting a seat at the table, we shifted from being mere executors to active contributors—helping shape the product early on rather than just polishing it at the end. This not only improved the final outcome but also made the entire process more collaborative and efficient. Seeing how design influenced business decisions reaffirmed my belief that great products come from cross-functional teamwork, not siloed efforts.