london, uk
Mobile App
National Bank
National Bank
![](https://framerusercontent.com/images/AdAGZDY6q6YFD0hAswMjjZBHdQ.png)
![](https://framerusercontent.com/images/FkjK03qGBOBc20OtU7ImAAicBo.png)
![](https://framerusercontent.com/images/LJBAZdR1NQhWyOuCokTd23wTIw.png?scale-down-to=1024)
Mobile App
National Bank
National Bank
Mobile App
![](https://framerusercontent.com/images/AdAGZDY6q6YFD0hAswMjjZBHdQ.png)
![](https://framerusercontent.com/images/FkjK03qGBOBc20OtU7ImAAicBo.png)
![](https://framerusercontent.com/images/LJBAZdR1NQhWyOuCokTd23wTIw.png?scale-down-to=1024)
Mobile App
National Bank
National Bank Mobile App
![](https://framerusercontent.com/images/AdAGZDY6q6YFD0hAswMjjZBHdQ.png)
![](https://framerusercontent.com/images/FkjK03qGBOBc20OtU7ImAAicBo.png)
![](https://framerusercontent.com/images/LJBAZdR1NQhWyOuCokTd23wTIw.png?scale-down-to=1024)
Mobile App
National Bank
National Bank
![](https://framerusercontent.com/images/AdAGZDY6q6YFD0hAswMjjZBHdQ.png)
![](https://framerusercontent.com/images/FkjK03qGBOBc20OtU7ImAAicBo.png)
![](https://framerusercontent.com/images/LJBAZdR1NQhWyOuCokTd23wTIw.png?scale-down-to=1024)
Client
National and largest bank of a 10M+ population country.
My role
UI Lead
Branding
UI
Scope
PM
Workshops
Competitor Analysis
Stakeholder Interviews
Design Systems
QA
Challenge
Transforming a traditional bank into a modern challenger required compromises. Crafting the new branding involved integrating cultural sensitivities and legacy elements into the UI.
I played a unique role as the author of the branding and UI, while taking the client’s team on the journey with me.
Outcome
Happy stakeholders and CEO wanting to extend collaboration for years to come.
Client
National and largest bank of a 10M+ population country.
My role
UI Lead
Branding
UI
Scope
PM
Workshops
Competitor Analysis
Stakeholder Interviews
Design Systems
QA
Challenge
Transforming a traditional bank into a modern challenger required compromises. Crafting the new branding involved integrating cultural sensitivities and legacy elements into the UI.
I played a unique role as the author of the branding and UI, while taking the client’s team on the journey with me.
Outcome
Happy stakeholders and CEO wanting to extend collaboration for years to come.
Client
National and largest bank of a 10M+ population country.
My role
UI Lead
Branding
UI
Scope
PM
Workshops
Competitor Analysis
Stakeholder Interviews
Design Systems
QA
Challenge
Transforming a traditional bank into a modern challenger required compromises. Crafting the new branding involved integrating cultural sensitivities and legacy elements into the UI.
I played a unique role as the author of the branding and UI, while taking the client’s team on the journey with me.
Outcome
Happy stakeholders and CEO wanting to extend collaboration for years to come.
Client
National and largest bank of a 10M+ population country.
My role
UI Lead
Branding
UI
Scope
PM
Workshops
Competitor Analysis
Stakeholder Interviews
Design Systems
QA
Challenge
Transforming a traditional bank into a modern challenger required compromises. Crafting the new branding involved integrating cultural sensitivities and legacy elements into the UI.
I played a unique role as the author of the branding and UI, while taking the client’s team on the journey with me.
Outcome
Happy stakeholders and CEO wanting to extend collaboration for years to come.
Research
Research
Research
Research
![Mobile Mockup with dummie content](https://framerusercontent.com/images/jVsNSi5xlzvNngM0lWFmZRfFg.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/jVsNSi5xlzvNngM0lWFmZRfFg.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/jVsNSi5xlzvNngM0lWFmZRfFg.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/jVsNSi5xlzvNngM0lWFmZRfFg.png)
Art Direction
Art Direction
Art Direction
Art Direction
We were tasked to redesign the whole brand to be used beyond the digital channels. I did a few workshops with their design team to learn as much about their culture as possible.
Based on what I learned a put together an art direction that uses subtle details with cultural references to often used bold cultural statements that are often very cringy.
I also put a lot of emphases to highlight in the brand tone of voice that common everyday references should be used rather than the cliches the country is known for from the tourist perspective.
We were tasked to redesign the whole brand to be used beyond the digital channels. I did a few workshops with their design team to learn as much about their culture as possible.
Based on what I learned a put together an art direction that uses subtle details with cultural references to often used bold cultural statements that are often very cringy.
I also put a lot of emphases to highlight in the brand tone of voice that common everyday references should be used rather than the cliches the country is known for from the tourist perspective.
Moodboards
Moodboards
Moodboards
Moodboards
The outcome of the previous session wasn’t just tons of moodboards but mainly a tone of voice which we all agreed on and used as guidelines for our next sessions.
I always selected a few visual directions to present to the others. Then we continued with the direction that most stakeholders voted for.
The outcome of the previous session wasn’t just tons of moodboards but mainly a tone of voice which we all agreed on and used as guidelines for our next sessions.
I always selected a few visual directions to present to the others. Then we continued with the direction that most stakeholders voted for.
The outcome of the previous session wasn’t just tons of moodboards but mainly a tone of voice which we all agreed on and used as guidelines for our next sessions.
I always selected a few visual directions to present to the others. Then we continued with the direction that most stakeholders voted for.
I lead an internal team that helped come up with solutions. However, at the same time, we were hired as an outside agency for a reason.
Without dismissing the teams’ ideas, I slowly got everyone on board with a direction to where I thought we should be. In this way, I was able to manage the delicate balance of lending my expertise as a designer without disrupting the system.
I lead an internal team that helped come up with solutions. However, at the same time, we were hired as an outside agency for a reason.
Without dismissing the teams’ ideas, I slowly got everyone on board with a direction to where I thought we should be. In this way, I was able to manage the delicate balance of lending my expertise as a designer without disrupting the system.
I lead an internal team that helped come up with solutions. However, at the same time, we were hired as an outside agency for a reason.
Without dismissing the teams’ ideas, I slowly got everyone on board with a direction to where I thought we should be. In this way, I was able to manage the delicate balance of lending my expertise as a designer without disrupting the system.
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dvsulPvYfaKttvtvgN6OBZJ9Y6k.png)
quick mockups of different visual directions
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dvsulPvYfaKttvtvgN6OBZJ9Y6k.png)
quick mockups of different visual directions
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dvsulPvYfaKttvtvgN6OBZJ9Y6k.png)
quick mockups of different visual directions
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dvsulPvYfaKttvtvgN6OBZJ9Y6k.png)
quick mockups of different visual directions
![Mobile Mockup with dummie content](https://framerusercontent.com/images/4MalzPps7jY0MRgYbCTFqojVY.png)
Each font combination was shown on an UI example
![Mobile Mockup with dummie content](https://framerusercontent.com/images/4MalzPps7jY0MRgYbCTFqojVY.png)
Each font combination was shown on an UI example
![Mobile Mockup with dummie content](https://framerusercontent.com/images/4MalzPps7jY0MRgYbCTFqojVY.png)
Each font combination was shown on an UI example
![Mobile Mockup with dummie content](https://framerusercontent.com/images/4MalzPps7jY0MRgYbCTFqojVY.png)
Each font combination was shown on an UI example
Iterate, Iterate, Iterate
Iterate, Iterate, Iterate
Iterate, Iterate, Iterate
Iterate, Iterate, Iterate
We went through every aspect of the brand’s visual design. From patterns to illustrations and UI shapes.
Combing fonts was especially fun and as always, stakeholders voted on their favourite one in two different rounds.
We went through every aspect of the brand’s visual design. From patterns to illustrations and UI shapes.
Combing fonts was especially fun and as always, stakeholders voted on their favourite one in two different rounds.
We went through every aspect of the brand’s visual design. From patterns to illustrations and UI shapes.
Combing fonts was especially fun and as always, stakeholders voted on their favourite one in two different rounds.
![Mobile Mockup with dummie content](https://framerusercontent.com/images/xmSASbtsPQ4nnZwtX8Z2VmXjOY.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/xmSASbtsPQ4nnZwtX8Z2VmXjOY.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/xmSASbtsPQ4nnZwtX8Z2VmXjOY.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/xmSASbtsPQ4nnZwtX8Z2VmXjOY.png)
Everyone knows those standard moodboards each one showing a different visual direction.
Every time I make moodboards I make sure to include very simple UI examples to give my client a better idea of how would each style look in their case.
Everyone knows those standard moodboards each one showing a different visual direction.
Every time I make moodboards I make sure to include very simple UI examples to give my client a better idea of how would each style look in their case.
Everyone knows those standard moodboards each one showing a different visual direction.
Every time I make moodboards I make sure to include very simple UI examples to give my client a better idea of how would each style look in their case.
UX
UX
UX
UX
Before my colleague - Lead UX Designer joined, I started as the only Designer. Besides conducting all the research and speaking to various stakeholders, I began putting together a large feature list. Using a massive AirTable spreadsheet, I organised each feature by multiple different metrics and priorities.
Back then, we had no Project Managers, so it was my responsibility to come up with a budget estimate and project timelines as well.
UI
UI
UI
UI
After getting everyone on board with the new branding, I started working on the UI, which involved creating over 100 screens. I taught client designers and one designer on our side how to iterate on new screens and how to use and maintain the design system.
Additionally, I worked with an Illustrator on the client’s side to produce illustrations based on the very detailed art direction we had all previously agreed upon.
After getting everyone on board with the new branding, I started working on the UI, which involved creating over 100 screens. I taught client designers and one designer on our side how to iterate on new screens and how to use and maintain the design system.
Additionally, I worked with an Illustrator on the client’s side to produce illustrations based on the very detailed art direction we had all previously agreed upon.
![Mobile Mockup with dummie content](https://framerusercontent.com/images/u0zyRuY7ZFAAojuhYsccrpLpWH4.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/u0zyRuY7ZFAAojuhYsccrpLpWH4.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/u0zyRuY7ZFAAojuhYsccrpLpWH4.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/u0zyRuY7ZFAAojuhYsccrpLpWH4.png)
bank Onboarding
bank Onboarding
bank Onboarding
bank Onboarding
![Mobile Mockup with dummie content](https://framerusercontent.com/images/1ppLpek0jqeLUgrR3YbKtHNinQ.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/1ppLpek0jqeLUgrR3YbKtHNinQ.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/1ppLpek0jqeLUgrR3YbKtHNinQ.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/1ppLpek0jqeLUgrR3YbKtHNinQ.png)
account Onboarding
account Onboarding
account Onboarding
account Onboarding
![Mobile Mockup with dummie content](https://framerusercontent.com/images/PqggqMeS46nojjPqjljkl2ytQaw.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/PqggqMeS46nojjPqjljkl2ytQaw.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/PqggqMeS46nojjPqjljkl2ytQaw.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/PqggqMeS46nojjPqjljkl2ytQaw.png)
Homepage
Homepage
Homepage
Homepage
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dafo0BQvVa8V6P3MCjrM8khDpA.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dafo0BQvVa8V6P3MCjrM8khDpA.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dafo0BQvVa8V6P3MCjrM8khDpA.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/dafo0BQvVa8V6P3MCjrM8khDpA.png)
Accounts
Accounts
Accounts
Accounts
![Mobile Mockup with dummie content](https://framerusercontent.com/images/Wq7q7Qg5T2kIyw313W2R0PPeHk.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/Wq7q7Qg5T2kIyw313W2R0PPeHk.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/Wq7q7Qg5T2kIyw313W2R0PPeHk.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/Wq7q7Qg5T2kIyw313W2R0PPeHk.png)
Cards
Cards
Cards
Cards
![Mobile Mockup with dummie content](https://framerusercontent.com/images/6SPshpBLHq3TpUk8RzHdqQ3XWSU.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/6SPshpBLHq3TpUk8RzHdqQ3XWSU.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/6SPshpBLHq3TpUk8RzHdqQ3XWSU.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/6SPshpBLHq3TpUk8RzHdqQ3XWSU.png)
Spending
Spending
Spending
Spending
![Mobile Mockup with dummie content](https://framerusercontent.com/images/zh4C4jXCwrEZLiLeovcE7QdqM.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/zh4C4jXCwrEZLiLeovcE7QdqM.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/zh4C4jXCwrEZLiLeovcE7QdqM.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/zh4C4jXCwrEZLiLeovcE7QdqM.png)
Transfer
Transfer
Transfer
Transfer
![Mobile Mockup with dummie content](https://framerusercontent.com/images/41hGkwXeWNXGpodXThCjdo7v7eo.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/41hGkwXeWNXGpodXThCjdo7v7eo.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/41hGkwXeWNXGpodXThCjdo7v7eo.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/41hGkwXeWNXGpodXThCjdo7v7eo.png)
international Transfer
international Transfer
![Mobile Mockup with dummie content](https://framerusercontent.com/images/JW3kndzot1nJuMQ84zwMTwfWjc.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/JW3kndzot1nJuMQ84zwMTwfWjc.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/JW3kndzot1nJuMQ84zwMTwfWjc.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/JW3kndzot1nJuMQ84zwMTwfWjc.png)
visual style exploration
visual style exploration
![Mobile Mockup with dummie content](https://framerusercontent.com/images/vKKUjCrYl6OJnVZ9Gjzqm4kog.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/vKKUjCrYl6OJnVZ9Gjzqm4kog.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/vKKUjCrYl6OJnVZ9Gjzqm4kog.png)
![Mobile Mockup with dummie content](https://framerusercontent.com/images/vKKUjCrYl6OJnVZ9Gjzqm4kog.png)
some cultures value privacy more
than others
some cultures value privacy more
than others
Design Systems
Design Systems
Design Systems
Design Systems
A proper design system documentation is more important than delivering pretty UI screens. It's the only way to ensure the quality and consistency of the product for years to come. Educating the design team on how to work with it well is just as important.
A proper design system documentation is more important than delivering pretty UI screens. It's the only way to ensure the quality and consistency of the product for years to come. Educating the design team on how to work with it well is just as important.
![](https://framerusercontent.com/images/2OE9bjT0rzUajun8Jq8Kbo5MPao.png)
![](https://framerusercontent.com/images/2OE9bjT0rzUajun8Jq8Kbo5MPao.png)
![](https://framerusercontent.com/images/2OE9bjT0rzUajun8Jq8Kbo5MPao.png)
![](https://framerusercontent.com/images/2OE9bjT0rzUajun8Jq8Kbo5MPao.png)
Font & Colour Styles
Font & Colour Styles
Font & Colour Styles
Font & Colour Styles
![](https://framerusercontent.com/images/MgQJeIWelTLEY5ICaPJSrQ1BHLM.png)
![](https://framerusercontent.com/images/MgQJeIWelTLEY5ICaPJSrQ1BHLM.png)
![](https://framerusercontent.com/images/MgQJeIWelTLEY5ICaPJSrQ1BHLM.png)
![](https://framerusercontent.com/images/MgQJeIWelTLEY5ICaPJSrQ1BHLM.png)
Custom-made icons
Custom-made icons
Custom-made icons
Custom-made icons
![](https://framerusercontent.com/images/cB99h0KXhvffJ4yK14uMrGhCE.png)
![](https://framerusercontent.com/images/cB99h0KXhvffJ4yK14uMrGhCE.png)
![](https://framerusercontent.com/images/cB99h0KXhvffJ4yK14uMrGhCE.png)
![](https://framerusercontent.com/images/cB99h0KXhvffJ4yK14uMrGhCE.png)
Components
Components
Components
Components