Designing the experience of a fintech digital ecosystem for delivery of aid
Designing the experience of a fintech digital ecosystem for delivery of aid
📁 Project Overview
📁 Project Overview
F4ID (Fintech for International Development) was a partnership between Save the Children, Standard Chartered, and Barclays. Its aim was to support vulnerable communities and build micro-economies by developing L20, a platform for delivering nutrition and essential goods globally.
F4ID (Fintech for International Development) was a partnership between Save the Children, Standard Chartered, and Barclays. Its aim was to support vulnerable communities and build micro-economies by developing L20, a platform for delivering nutrition and essential goods globally.
🎯 Goals
🎯 Goals
Designed F4ID’s website with a focus on increasing brand visibility and awareness
Designed F4ID’s website with a focus on increasing brand visibility and awareness
Developed the web and mobile applications of the F4ID digital ecosystem
Developed the web and mobile applications of the F4ID digital ecosystem
Further helped with brand awareness through SEO analytics and brand design
Further helped with brand awareness through SEO analytics and brand design
👩🏻💻 Role
👩🏻💻 Role
Collaborated closely with my senior product designer, PO and development teams as Product / UI designer in a cross-functional, Agile format
Collaborated closely with my senior product designer, PO and development teams as Product / UI designer in a cross-functional, Agile format
Assisted considerably with establishing the design and user experience of the L20 web and mobile apps, and also the F4ID website
Assisted considerably with establishing the design and user experience of the L20 web and mobile apps, and also the F4ID website
Contributed significantly to the creation and maintenance of L20’s design system
Contributed significantly to the creation and maintenance of L20’s design system
challenge
challenge
Finding a way to simplify aid delivery to hard-to-reach and underprivileged communities, despite increasing complexities caused by financial risks and security issues.
Finding a way to simplify aid delivery to hard-to-reach and underprivileged communities, despite increasing complexities caused by financial risks and security issues.
the l20 solution
the l20 solution
Receiving aid without giving up privacy
Receiving aid without giving up privacy
L20’s most unique feature is encrypted biometric keys that ensure full anonymity without collecting or storing personal data.
Beneficiaries received QR key certificates linked to their facial biometrics. By scanning both, ownership of the certificate would be verified, granting them access to goods or services tied to each certificate’s budget.
L20’s most unique feature is encrypted biometric keys that ensure full anonymity without collecting or storing personal data.
Beneficiaries received QR key certificates linked to their facial biometrics. By scanning both, ownership of the certificate would be verified, granting them access to goods or services tied to each certificate’s budget.
Understanding the ecosystem
Understanding the ecosystem
Given the complexity of the approach, the solution involved a web app for administrative purposes and two mobile apps (Android OS), each tailored for a distinct use case.
Given the complexity of the approach, the solution involved a web app for administrative purposes and two mobile apps (Android OS), each tailored for a distinct use case.
Defining use cases
Defining use cases
We designed the platform so that it supports four types of users:
We designed the platform so that it supports four types of users:
merchant app
Merchants
Local suppliers who used the Merchant App to distribute goods to people in need (beneficiaries) by scanning their QR keys.
Fieldworker app
Fieldworkers
NGO staff working on the ground to register households, link beneficiaries’ biometrics to their QR keys, and support them using the Fieldworker App.
l20 web app
Programme Managers
The coordinators overseeing fieldworkers, merchants, and day-to-day operations through the web app.
Admins
The backbone of the system, responsible for setting up programmes, creating user accounts, assigning roles, and tracking overall activity and impact.
Showcasing the user flows
Showcasing the user flows
The following user flows were created based on L20’s use cases. Each flow maps out the steps users take to complete their tasks, adjusted to their specific role and needs.
The following user flows were created based on L20’s use cases. Each flow maps out the steps users take to complete their tasks, adjusted to their specific role and needs.
Creating a design system
Creating a design system
Why a design system?
Why a design system?
We wanted to improve collaboration between design and development teams, and ensure more consistent and scalable deliverables.
Our solution was to create a design system, allowing us to speed up design implementation and reduce back-and-forth. It also helped us anticipate future project challenges.
We wanted to improve collaboration between design and development teams, and ensure more consistent and scalable deliverables.
Our solution was to create a design system, allowing us to speed up design implementation and reduce back-and-forth. It also helped us anticipate future project challenges.
How I gained the client’s support
How I gained the client’s support
I was given the task of proposing the design system to the clients. I successfully convinced them through well-crafted presentations and several detailed discussions. This earned praise from my project lead, leading to more client handling opportunities throughout the project.
I was given the task of proposing the design system to the clients. I successfully convinced them through well-crafted presentations and several detailed discussions. This earned praise from my project lead, leading to more client handling opportunities throughout the project.
L20 design system bits
L20 design system bits
We chose an atomic design approach to build scalable, consistent components that helped our team move faster and avoid repetitive work.
We chose an atomic design approach to build scalable, consistent components that helped our team move faster and avoid repetitive work.
Web
Web
Mobile
Mobile
Web and mobile apps
Web and mobile apps
These L20 screens show how admins track fieldworkers (desktop) and how fieldworkers scan certificates and confirm photos (mobile). I co-designed both apps together with the lead designer, collaborating iteratively and refining them through workshops and daily sprints.
These L20 screens show how admins track fieldworkers (desktop) and how fieldworkers scan certificates and confirm photos (mobile). I co-designed both apps together with the lead designer, collaborating iteratively and refining them through workshops and daily sprints.
Admin view in the web app
Admin view in the web app
Programme manager view in the web app with notification example
Programme manager view in the web app with notification example
Merchant App
Merchant App
Fieldworker App
Fieldworker App
additional contribution
additional contribution
Visual design highlights
Visual design highlights
I started designing for L20 during its MVP phase, when it was known as Lotus20. The project went through several redesigns until we settled on a definitive visual framework.
I started designing for L20 during its MVP phase, when it was known as Lotus20. The project went through several redesigns until we settled on a definitive visual framework.
Certificates of entitlement
Certificates of entitlement
I designed the print of L20’s nutrition certificates to make information easy to scan for both recipients and organizers. They were used to distribute food in over four countries.
I designed the print of L20’s nutrition certificates to make information easy to scan for both recipients and organizers. They were used to distribute food in over four countries.
The initial L20 web app dashboard
The initial L20 web app dashboard
With the L20 dashboard, I wanted to allow users to grasp key information at a glance. I achieved my goals by using clear formatting, readable typography, and clear visual cues.
With the L20 dashboard, I wanted to allow users to grasp key information at a glance. I achieved my goals by using clear formatting, readable typography, and clear visual cues.
Mobile apps early splash art
Mobile apps early splash art
These splash screens used preexisting assets along with ones that I created myself.
These splash screens used preexisting assets along with ones that I created myself.
Onboarding screens & system maintenance notification for the mobile apps
Onboarding screens & system maintenance notification for the mobile apps
I wanted to maintain the brand’s tone while also preventing information overload. I applied the one-idea-per-screen principle in order to keep users engaged.
I wanted to maintain the brand’s tone while also preventing information overload. I applied the one-idea-per-screen principle in order to keep users engaged.
web design
web design
Website creation and maintenance
Website creation and maintenance
I was given the opportunity to both design and build F4ID’s website using Wix. I also created most of the visual assets, set up a Mailchimp newsletter campaign using custom CSS, and monitored SEO analytics to track audience engagement.
I was given the opportunity to both design and build F4ID’s website using Wix. I also created most of the visual assets, set up a Mailchimp newsletter campaign using custom CSS, and monitored SEO analytics to track audience engagement.
F4ID sitemap
F4ID sitemap
An introduction to F4ID
An introduction to F4ID
I designed the landing page to naturally guide visitors towards understanding F4ID’s mission and impact. A snapshot of the L20 dashboard introduces the product.
I designed the landing page to naturally guide visitors towards understanding F4ID’s mission and impact. A snapshot of the L20 dashboard introduces the product.
Viewport of the landing page
Viewport of the landing page
Map of ongoing & planned F4ID projects
Map of ongoing & planned F4ID projects
A section that introduces F4ID’s flagship product
A section that introduces F4ID’s flagship product
Products page
Products page
I highlighted not just how L20 worked, but also how it can solve problems and add value. Icons played a key part in drawing the visitor’s attention to important details.
I highlighted not just how L20 worked, but also how it can solve problems and add value. Icons played a key part in drawing the visitor’s attention to important details.
Arriving on the L20 page
Arriving on the L20 page
Links to the web app & mobile apps
Links to the web app & mobile apps
How L20 and F4ID make a difference
How L20 and F4ID make a difference
I proposed to the client the creation of a framework that would include all four case studies, not just the one that was ready at the time. This saved extra work from having to be done down the line, preventing the need for a future redesign.
I proposed to the client the creation of a framework that would include all four case studies, not just the one that was ready at the time. This saved extra work from having to be done down the line, preventing the need for a future redesign.
Showcasing the case studies as a gallery, with each case study being country specific
Showcasing the case studies as a gallery, with each case study being country specific
impact
impact
Empowering marginalized communities
Empowering marginalized communities
F4ID and the L20 initiative successfully improved nutrition and food distribution for a variety of underprivileged socioeconomic groups across the globe.
F4ID and the L20 initiative successfully improved nutrition and food distribution for a variety of underprivileged socioeconomic groups across the globe.
UN SDG
UN SDG
7 out of 17
At pilot launch, L20 was assessed to have achieved several United Nations Sustainable Developmental Goals (SDGs).
At pilot launch, L20 was assessed to have achieved several United Nations Sustainable Developmental Goals (SDGs).
assisted countries
assisted countries
4+
Among these countries were Kenya, Afghanistan and Nigeria, with then-future plans of expansion to Haiti.
Among these countries were Kenya, Afghanistan and Nigeria, with then-future plans of expansion to Haiti.
people reached
people reached
10,000+
The results showed that over 10k people were reached during the pilot roll-out.
The results showed that over 10k people were reached during the pilot roll-out.
choosing l20
choosing l20
75%
Post-launch metrics had shown that households preferred L20 certificates instead of cash options.
Post-launch metrics had shown that households preferred L20 certificates instead of cash options.
UN SDGs achieved
UN SDGs achieved
reflections
reflections
What I learned and what the next steps were
What I learned and what the next steps were
Bringing F4ID’s vision to life was a complex challenge that required creative thinking and adaptability on my part. I took ownership of the product and dedicated a lot of time and effort to ensure everything came together as it should.
Bringing F4ID’s vision to life was a complex challenge that required creative thinking and adaptability on my part. I took ownership of the product and dedicated a lot of time and effort to ensure everything came together as it should.
Key takeaways
Key takeaways
Working on this project taught me valuable lessons that have deeply influenced the way I now approach design and carry out my work.
Working on this project taught me valuable lessons that have deeply influenced the way I now approach design and carry out my work.
🖇️
Cross-disciplinary skills matter
I didn’t expect my front-end development background to be so useful, but it helped me launch F4ID’s site quickly and made a real difference.
Cross-disciplinary skills matter
I didn’t expect my front-end development background to be so useful, but it helped me launch F4ID’s site quickly and made a real difference.
👥
Collaboration is crucial
If as a team we hadn’t regularly verified each other’s work and provided feedback, we might not have had a design system to speak of.
Collaboration is crucial
If as a team we hadn’t regularly verified each other’s work and provided feedback, we might not have had a design system to speak of.
💁🏻♀️
You must take ownership
Being responsible with your work isn’t just about making the client happy, but also about helping yourself become an amazing designer.
You must take ownership
Being responsible with your work isn’t just about making the client happy, but also about helping yourself become an amazing designer.
🫰🏻
Simplicity over complexity
I did a lot of UI work on this project, and realized how important simplicity is for creating great and usable designs.
Simplicity over complexity
I did a lot of UI work on this project, and realized how important simplicity is for creating great and usable designs.
❣️
Design can save lives
I felt a deep sense of pride and accomplishment when the project launched, knowing that my work helped improve food access for so many people.
Design can save lives
I felt a deep sense of pride and accomplishment when the project launched, knowing that my work helped improve food access for so many people.
Future of L20 and F4ID
Future of L20 and F4ID
The initial goals of the F4ID team were successfully achieved during my time working with them. As of now, the team has shifted priorities to other projects. These new initiatives aim to further F4ID’s goals of sustainable development. They also focus on providing essential nutrition to underdeveloped communities.
The initial goals of the F4ID team were successfully achieved during my time working with them. As of now, the team has shifted priorities to other projects. These new initiatives aim to further F4ID’s goals of sustainable development. They also focus on providing essential nutrition to underdeveloped communities.