World Bank
World Bank
World Bank
ROLE / SERVICES
ROLE / SERVICES
UX Designer / UX-UI design
UX Designer / UX-UI design
UX Designer / UX-UI design
Project type
Project type
Mobile application
Mobile application
Mobile application
COMPANY & location
COMPANY & location
Private / USA
Private / USA
Private / USA
INTRODUCTION
INTRODUCTION
INTRODUCTION
INTRODUCTION
World Bank is a financial institution dedicated to making banking, investing, and asset management more accessible through simple, easy-to-use tools. Its mission is to empower people around the world with smarter ways to manage their money.
World Bank is a financial institution dedicated to making banking, investing, and asset management more accessible through simple, easy-to-use tools. Its mission is to empower people around the world with smarter ways to manage their money.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
World Bank set out to improve the experience of international travelers by introducing a new currency exchange feature in their mobile app. The goal is to make checking live rates and exchanging money effortless, transparent, and easy to use. So travelers can focus more on their journey and less on currency exchange.
World Bank set out to improve the experience of international travelers by introducing a new currency exchange feature in their mobile app. The goal is to make checking live rates and exchanging money effortless, transparent, and easy to use. So travelers can focus more on their journey and less on currency exchange.
World Bank set out to improve the experience of international travelers by introducing a new currency exchange feature in their mobile app. The goal is to make checking live rates and exchanging money effortless, transparent, and easy to use. So travelers can focus more on their journey and less on currency exchange.
World Bank set out to improve the experience of international travelers by introducing a new currency exchange feature in their mobile app. The goal is to make checking live rates and exchanging money effortless, transparent, and easy to use. So travelers can focus more on their journey and less on currency exchange.
Discovery: Stakeholder interviews, user research, settings the goals.
Define: Created user personas, user stories and journey maps.
Ideate: Create goal statements, competitive audit, define core requirements.
Design: User flows, wireframes, style guide, high-fidelity UI in Figma.
Validation: Prototyping, stakeholder testing, iteration on feedback.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
01
01
01
01
/
/
/
/
Research
Research
Research
Research
Before the Interviews (Prep)
Before the Interviews (Prep)
Before the Interviews (Prep)
Before the Interviews (Prep)
What challenges do travelers face while exchanging their money?
How do the travelers look for current exchange rates?
Where and how do travelers exchange their money?
What challenges do travelers face while exchanging their money?
How do the travelers look for current exchange rates?
Where and how do travelers exchange their money?
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
The ideal user is a tech-savvy international traveler or online shopper who frequently deals with multiple currencies and wants a fast, reliable, and convenient way to view and exchange currencies within their existing banking app — without switching platforms or dealing with hidden fees.
The ideal user is a tech-savvy international traveler or online shopper who frequently deals with multiple currencies and wants a fast, reliable, and convenient way to view and exchange currencies within their existing banking app — without switching platforms or dealing with hidden fees.
The ideal user is a tech-savvy international traveler or online shopper who frequently deals with multiple currencies and wants a fast, reliable, and convenient way to view and exchange currencies within their existing banking app — without switching platforms or dealing with hidden fees.
The ideal user is a tech-savvy international traveler or online shopper who frequently deals with multiple currencies and wants a fast, reliable, and convenient way to view and exchange currencies within their existing banking app — without switching platforms or dealing with hidden fees.
screener survey
screener survey
How often do you travel or buy internationally?
Never
Once a year or less
2–5 times a year
More than 5 times a year
✅ Ideal: "2–5 times a year" or "More than 5 times a year"
See all the questions
See all the questions
See all the questions
See all the questions
Interview Questions
Interview Questions
Tell me about the last time you needed to exchange currency or check exchange rates. What did you do?
Follow-up Questions
What tools or apps did you use?
What was easy or frustrating about the experience?
See all the questions
See all the questions
See all the questions
See all the questions
Understand how users currently handle currency exchange
Identify pain points, motivations, and goals
Learn how users interact with financial apps while traveling or shopping internationally
Discover what features would be most useful in a currency exchange experience
Understand how users currently handle currency exchange
Identify pain points, motivations, and goals
Learn how users interact with financial apps while traveling or shopping internationally
Discover what features would be most useful in a currency exchange experience
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
Turning Stories into Insights
Turning Stories into Insights
Turning Stories into Insights
Turning Stories into Insights
After completing the interviews, I review all my notes and recordings to make sure nothing slips through. Once I’ve captured every detail, it’s time to turn all that raw information into clear insights and actionable direction.
After completing the interviews, I review all my notes and recordings to make sure nothing slips through. Once I’ve captured every detail, it’s time to turn all that raw information into clear insights and actionable direction.
After completing the interviews, I review all my notes and recordings to make sure nothing slips through. Once I’ve captured every detail, it’s time to turn all that raw information into clear insights and actionable direction.
After completing the interviews, I review all my notes and recordings to make sure nothing slips through. Once I’ve captured every detail, it’s time to turn all that raw information into clear insights and actionable direction.
To organize the information, I use an affinity map to group insights from user research. By clustering similar ideas, pain points, or behaviors, it helps reveal patterns and themes that might not be obvious at first. This makes it easier to spot opportunities, prioritize needs, and define a clear direction for the design.
To organize the information, I use an affinity map to group insights from user research. By clustering similar ideas, pain points, or behaviors, it helps reveal patterns and themes that might not be obvious at first. This makes it easier to spot opportunities, prioritize needs, and define a clear direction for the design.
To organize the information, I use an affinity map to group insights from user research. By clustering similar ideas, pain points, or behaviors, it helps reveal patterns and themes that might not be obvious at first. This makes it easier to spot opportunities, prioritize needs, and define a clear direction for the design.
To organize the information, I use an affinity map to group insights from user research. By clustering similar ideas, pain points, or behaviors, it helps reveal patterns and themes that might not be obvious at first. This makes it easier to spot opportunities, prioritize needs, and define a clear direction for the design.
The next part for me is to create a user persona based on the findings in the affinity map. The persona represents a typical user’s goals, frustrations, and behaviors, which helped keep the design process focused on real needs and ensure the solution stays user-centered.
The next part for me is to create a user persona based on the findings in the affinity map. The persona represents a typical user’s goals, frustrations, and behaviors, which helped keep the design process focused on real needs and ensure the solution stays user-centered.
The next part for me is to create a user persona based on the findings in the affinity map. The persona represents a typical user’s goals, frustrations, and behaviors, which helped keep the design process focused on real needs and ensure the solution stays user-centered.
The next part for me is to create a user persona based on the findings in the affinity map. The persona represents a typical user’s goals, frustrations, and behaviors, which helped keep the design process focused on real needs and ensure the solution stays user-centered.
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For David Gomez, the story describes his goal, the action he takes, and the benefit he expects.
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For David Gomez, the story describes his goal, the action he takes, and the benefit he expects.
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For David Gomez, the story describes his goal, the action he takes, and the benefit he expects.
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For David Gomez, the story describes his goal, the action he takes, and the benefit he expects.
"As an international traveler, I want a dedicated section in my banking app to consult, manage, and exchange multiple currencies at real-time exchange rates, so that I can manage all my travel finances in one place and avoid the hassle of juggling different apps or tools."
"As an international traveler, I want a dedicated section in my banking app to consult, manage, and exchange multiple currencies at real-time exchange rates, so that I can manage all my travel finances in one place and avoid the hassle of juggling different apps or tools."
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the product. By mapping out David’s actions, thoughts, and emotions at each stage of the currency exchange process, I was able to see where frustrations and opportunities arise.
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the product. By mapping out David’s actions, thoughts, and emotions at each stage of the currency exchange process, I was able to see where frustrations and opportunities arise.
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the product. By mapping out David’s actions, thoughts, and emotions at each stage of the currency exchange process, I was able to see where frustrations and opportunities arise.
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the product. By mapping out David’s actions, thoughts, and emotions at each stage of the currency exchange process, I was able to see where frustrations and opportunities arise.
02
02
02
02
/
/
/
/
Define
Define
Define
Define
Framing the Challenge
Framing the Challenge
Framing the Challenge
Framing the Challenge
I worked on answering key questions:
What’s the core pain point the user experiences?
Why is this a problem worth solving?
What value would a good solution bring?
I use the following artifacts to help me answer these questions
I worked on answering key questions:
What’s the core pain point the user experiences?
Why is this a problem worth solving?
What value would a good solution bring?
I use the following artifacts to help me answer these questions
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
David is a frequent traveler and remote developer who needs a centralized tool to manage and exchange multiple currencies, because he wants to avoid juggling different apps or tools, ensure reliable access to his funds while abroad, and minimize fees.
David is a frequent traveler and remote developer who needs a centralized tool to manage and exchange multiple currencies, because he wants to avoid juggling different apps or tools, ensure reliable access to his funds while abroad, and minimize fees.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
If David can access a dedicated currency exchange section within his banking app that allows him to manage balances, convert currencies at real-time rates, and find fee-free ATMs abroad, then he will avoid juggling different apps, feel more in control of his finances while traveling, and use the app as his primary financial tool on the go.
If David can access a dedicated currency exchange section within his banking app that allows him to manage balances, convert currencies at real-time rates, and find fee-free ATMs abroad, then he will avoid juggling different apps, feel more in control of his finances while traveling, and use the app as his primary financial tool on the go.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
“The new international feature in your banking app lets travelers easily manage, exchange, and track multiple currencies in real time, helping them from having to use different apps and tools, save money, and access their money effortlessly while abroad.”
What does the product do?
Manages multiple currencies from one place
Converts at real-time exchange rates
Helps avoid fees
Allows users to send/receive money, track balances, and find fee-free ATMs
Why should the user care?
It simplifies financial tasks while traveling
Saves money by avoiding poor exchange rates or unexpected fees
Reduces the stress of juggling multiple tools or services
Supports smart decisions with features like auto-exchange when a currency hits a target rate
“The new international feature in your banking app lets travelers easily manage, exchange, and track multiple currencies in real time, helping them from having to use different apps and tools, save money, and access their money effortlessly while abroad.”
What does the product do?
Manages multiple currencies from one place
Converts at real-time exchange rates
Helps avoid fees
Allows users to send/receive money, track balances, and find fee-free ATMs
Why should the user care?
It simplifies financial tasks while traveling
Saves money by avoiding poor exchange rates or unexpected fees
Reduces the stress of juggling multiple tools or services
Supports smart decisions with features like auto-exchange when a currency hits a target rate
03
03
03
03
/
/
/
/
Ideation
Ideation
Ideation
Ideation
From Insights to Ideas
From Insights to Ideas
From Insights to Ideas
From Insights to Ideas
Now with an understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
Now with an understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
Now with an understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
Now with an understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
I kick off with a goal statement that sets a clear direction for the design. It describes what the product should achieve for both users and the business.
I kick off with a goal statement that sets a clear direction for the design. It describes what the product should achieve for both users and the business.
I kick off with a goal statement that sets a clear direction for the design. It describes what the product should achieve for both users and the business.
I kick off with a goal statement that sets a clear direction for the design. It describes what the product should achieve for both users and the business.
Our currency exchange feature will let users view live exchange rates and convert money instantly, which will affect international travelers by giving them control, transparency and convenience over their finances while abroad. We will measure effectiveness by tracking the number of successful exchanges and user satisfaction scores after transactions.
Our currency exchange feature will let users view live exchange rates and convert money instantly, which will affect international travelers by giving them control, transparency and convenience over their finances while abroad. We will measure effectiveness by tracking the number of successful exchanges and user satisfaction scores after transactions.
Next comes a competitive audit, which is an analysis of existing solutions on the market. It helps identify what competitors are doing well, where they fall short, and what opportunities exist to create a better experience.
Next comes a competitive audit, which is an analysis of existing solutions on the market. It helps identify what competitors are doing well, where they fall short, and what opportunities exist to create a better experience.
Next comes a competitive audit, which is an analysis of existing solutions on the market. It helps identify what competitors are doing well, where they fall short, and what opportunities exist to create a better experience.
Next comes a competitive audit, which is an analysis of existing solutions on the market. It helps identify what competitors are doing well, where they fall short, and what opportunities exist to create a better experience.
Last but not least, I like to list the requirements that are the must-have features and conditions the solution needs to meet. They ensure the design is feasible and aligned with user needs.
Last but not least, I like to list the requirements that are the must-have features and conditions the solution needs to meet. They ensure the design is feasible and aligned with user needs.
Last but not least, I like to list the requirements that are the must-have features and conditions the solution needs to meet. They ensure the design is feasible and aligned with user needs.
Last but not least, I like to list the requirements that are the must-have features and conditions the solution needs to meet. They ensure the design is feasible and aligned with user needs.
04
04
04
04
/
/
/
/
Design
Design
Design
Design
Bringing ideas to life
Bringing ideas to life
Bringing ideas to life
Bringing ideas to life
To map out the paths users will take, I personally like to start with written sequences. Writing them first made it easier to change steps quickly.
After I'm happy with the flows, I translated these sequences into diagram-based user flows, making it easier to visualize the full journey and interactions.
To map out the paths users will take, I personally like to start with written sequences. Writing them first made it easier to change steps quickly.
After I'm happy with the flows, I translated these sequences into diagram-based user flows, making it easier to visualize the full journey and interactions.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
I then moved into mid-fidelity wireframes to bring more structure and consistency. These can also be used for early prototyping and usability testing, helping me validate navigation, interactions, and overall usability.
I then moved into mid-fidelity wireframes to bring more structure and consistency. These can also be used for early prototyping and usability testing, helping me validate navigation, interactions, and overall usability.
I then moved into mid-fidelity wireframes to bring more structure and consistency. These can also be used for early prototyping and usability testing, helping me validate navigation, interactions, and overall usability.
I then moved into mid-fidelity wireframes to bring more structure and consistency. These can also be used for early prototyping and usability testing, helping me validate navigation, interactions, and overall usability.
Design in Action
Design in Action
Design in Action
Design in Action
Before jumping into layouts and mockups, I set the foundation with design tokens. These act as the building blocks of the system, keeping everything consistent and scalable. I defined primitives for colors, typography, spacing, border radius, and sizes.
From there, I created semantic tokens (mainly for colors and typography) to give each style a clear purpose in the interface. All of this was managed with variables in Figma.
Before jumping into layouts and mockups, I set the foundation with design tokens. These act as the building blocks of the system, keeping everything consistent and scalable. I defined primitives for colors, typography, spacing, border radius, and sizes.
From there, I created semantic tokens (mainly for colors and typography) to give each style a clear purpose in the interface. All of this was managed with variables in Figma.
To keep patterns consistent and prepare for scalability, I built a component library. I like to structure it in two ways, either
By complexity: basic, semi-complex, and complex components.
By atomic design: atoms, molecules, organisms, and templates.
Together, these components ensure the design system stays flexible, easy to scale, and efficient to use.
To keep patterns consistent and prepare for scalability, I built a component library. I like to structure it in two ways, either
By complexity: basic, semi-complex, and complex components.
By atomic design: atoms, molecules, organisms, and templates.
Together, these components ensure the design system stays flexible, easy to scale, and efficient to use.
With tokens and components in place, it was time to bring everything to life. The wireframes evolved into high-fidelity mockups, designed to make currency exchange feel clear, fast, and frustration-free, while staying true to World Bank’s clean and modern style.
With tokens and components in place, it was time to bring everything to life. The wireframes evolved into high-fidelity mockups, designed to make currency exchange feel clear, fast, and frustration-free, while staying true to World Bank’s clean and modern style.
Currently, quantitative data is still being collected to measure the results and acceptance of the new feature.
For now, I can share some comments that users made during usability tests showing their satisfaction after trying out the prototypes.
Currently, quantitative data is still being collected to measure the results and acceptance of the new feature.
For now, I can share some comments that users made during usability tests showing their satisfaction after trying out the prototypes.
“I loved how straightforward it was. I didn't have any surprises, no guessing, no hidden fees. Converting my money was very quick and simple.”
“I loved how straightforward it was. I didn't have any surprises, no guessing, no hidden fees. Converting my money was very quick and simple.”
— Alex Mora
— Alex Mora
“It only took a few taps to exchange my money. Honestly, Everything is was in the same app, I really appreciate that.”
“It only took a few taps to exchange my money. Honestly, Everything is was in the same app, I really appreciate that.”
— Brayden McCullagh
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
