michael eleder
product designer
london, uk

Mobile App

National Bank

National Bank

Mobile App

National Bank

National Bank

Mobile App

Mobile App

National Bank

National Bank  Mobile App

Mobile App

National Bank

National Bank

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
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

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

quick mockups of different visual directions

Mobile Mockup with dummie content

quick mockups of different visual directions

Mobile Mockup with dummie content

quick mockups of different visual directions

Mobile Mockup with dummie content

quick mockups of different visual directions

Mobile Mockup with dummie content

Each font combination was shown on an UI example

Mobile Mockup with dummie content

Each font combination was shown on an UI example

Mobile Mockup with dummie content

Each font combination was shown on an UI example

Mobile Mockup with dummie content

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
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

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
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

bank Onboarding

bank Onboarding

bank Onboarding

bank Onboarding

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

account Onboarding

account Onboarding

account Onboarding

account Onboarding

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Homepage

Homepage

Homepage

Homepage

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Accounts

Accounts

Accounts

Accounts

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Cards

Cards

Cards

Cards

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Spending

Spending

Spending

Spending

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

Transfer

Transfer

Transfer

Transfer

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

international Transfer

international Transfer

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

visual style exploration

visual style exploration

Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content
Mobile Mockup with dummie content

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.

Font & Colour Styles

Font & Colour Styles

Font & Colour Styles

Font & Colour Styles

Custom-made icons

Custom-made icons

Custom-made icons

Custom-made icons

Components

Components

Components

Components