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 was a partnership between Save the Children, Standard Chartered, and Barclays. Its aim was to support vulnerable communities by building L20, an ecosystem for delivering essential goods globally.
F4ID was a partnership between Save the Children, Standard Chartered, and Barclays. Its aim was to support vulnerable communities by building L20, an ecosystem for delivering essential goods globally.
🎯 Goals
🎯 Goals
Design F4ID’s website with a focus on increasing brand visibility and awareness
Design F4ID’s website with a focus on increasing brand visibility and awareness
Develop the web and mobile applications of the L20 digital ecosystem
Develop the web and mobile applications of the L20 digital ecosystem
Further help with brand awareness through SEO analytics and brand design
Further help with brand awareness through SEO analytics and brand design
👩🏻💻 Role
👩🏻💻 Role
Collaborated with the senior designer, PO, and dev teams as Product/UI designer
Collaborated with the senior designer, PO, and dev teams as Product/UI designer
Designed the visual experience of the L20 apps and built the F4ID website
Designed the visual experience of the L20 apps and built the F4ID website
Played an important role in developing and maintaining L20’s design system
Played an important role in developing and maintaining L20’s design system
challenge
challenge
Find a way to simplify aid delivery to isolated, underprivileged communities despite increasing complexities caused by financial and security risks.
Find a way to simplify aid delivery to isolated, underprivileged communities despite increasing complexities caused by financial and security risks.
the l20 solution
the l20 solution
Receiving aid without giving up privacy
Receiving aid without giving up privacy
L20’s value proposition was its unique feature of encrypted biometric keys that ensured full anonymity without collecting or storing personal data.
Beneficiaries received QR key certificates linked to their facial biometrics. Scanning both verified certificate ownership and granted access to goods or services linked to that certificate’s budget.
L20’s value proposition was its unique feature of encrypted biometric keys that ensured full anonymity without collecting or storing personal data.
Beneficiaries received QR key certificates linked to their facial biometrics. Scanning both verified certificate ownership and granted access to goods or services linked to that 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
The platform was designed for four types of users:
The platform was designed for four types of users:
merchant app
Merchants
Merchants
Local suppliers who used the Merchant App to distribute goods to people in need (beneficiaries) by scanning their QR keys.
Local suppliers who used the Merchant App to distribute goods to people in need (beneficiaries) by scanning their QR keys.
Fieldworker app
Fieldworkers
Fieldworkers
NGO staff working on the ground to register households, link beneficiaries’ biometrics to their QR keys, and support them using the Fieldworker App.
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
Programme Managers
The coordinators overseeing fieldworkers, merchants, and day-to-day operations through the web app.
The coordinators overseeing fieldworkers, merchants, and day-to-day operations through the web app.
Admins
Admins
The backbone of the system, responsible for setting up programmes, creating user accounts, assigning roles, and tracking overall activity and impact.
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
Each flow was created based on L20 use cases and mapped the steps users would take to complete their tasks, adjusted to their specific role and needs.
Each flow was created based on L20 use cases and mapped the steps users would 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?
As we progressed toward the MVP release, the lead designer and I actively advocated to the team and stakeholders for creating and implementing a design system.
From the start, the client's aim was to build a durable technological ecosystem, so we both considered the development of a design system to be a natural part of that process.
As we progressed toward the MVP release, the lead designer and I actively advocated to the team and stakeholders for creating and implementing a design system.
From the start, the client's aim was to build a durable technological ecosystem, so we both considered the development of a design system to be a natural part of that process.
How I gained the clients' support
How I gained the clients' support
I proposed the design system to the clients and convinced them of its importance through hosting workshops, presentations and open-ended discussions. I addressed their concerns about cost and time by demonstrating how the system would streamline workflows and ensure design and brand consistency.
I proposed the design system to the clients and convinced them of its importance through hosting workshops, presentations and open-ended discussions. I addressed their concerns about cost and time by demonstrating how the system would streamline workflows and ensure design and brand consistency.
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
Alongside design system work, I co-designed the mobile and desktop apps with a focus on visuals, collaborating closely through workshops and daily sprints.
Alongside design system work, I co-designed the mobile and desktop apps with a focus on visuals, collaborating closely 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 independently designed visual assets for L20: certificates, splash art, and the initial dashboard. The original onboarding experience was also created by me.
I independently designed visual assets for L20: certificates, splash art, and the initial dashboard. The original onboarding experience was also created by me.
Certificates of entitlement
Certificates of entitlement
I designed L20’s nutrition certificates for easy scanning by both beneficiaries and admins.
I designed L20’s nutrition certificates for easy scanning by both beneficiaries and admins.
The initial L20 web app dashboard
The initial L20 web app dashboard
To support quick scanning I used clear formatting, readable typography, and visual cues.
To support quick scanning I used clear formatting, readable typography, and visual cues.
Mobile app early splash art
Mobile app early splash art
I designed this splash art early in the project, combining pre-existing assets with original elements I created.
I designed this splash art early in the project, combining pre-existing assets with original elements I created.
Onboarding screens & system maintenance notification for the mobile apps
Onboarding screens & system maintenance notification for the mobile apps
To maintain the brand’s tone and avoid information overload, I applied a one-idea-per-screen principle to keep users engaged.
To maintain the brand’s tone and avoid information overload, I applied a one-idea-per-screen principle to keep users engaged.
web design
web design
Website creation and maintenance
Website creation and maintenance
Ahead of MVP release, I designed F4ID’s website in Wix, created visual assets, launched a Mailchimp campaign with custom CSS, and tracked engagement via SEO analytics.
Ahead of MVP release, I designed F4ID’s website in Wix, created visual assets, launched a Mailchimp campaign with custom CSS, and tracked engagement via SEO analytics.
F4ID sitemap
F4ID sitemap
An introduction to F4ID
An introduction to F4ID
I designed the landing page to naturally guide visitors toward F4ID’s mission and impact.
I designed the landing page to naturally guide visitors toward F4ID’s mission and impact.
The landing page on MVP release
The landing page on MVP release
Map of ongoing & planned F4ID projects
Map of ongoing & planned F4ID projects
A section that introduces F4ID’s flagship product, L20
A section that introduces F4ID’s flagship product, L20
Products page
Products page
It showcased how L20 worked, the problems it solved, and the value it added.
It showcased how L20 worked, the problems it solved, and the value it added.
Arriving on the L20 page
Arriving on the L20 page
Links to the web & mobile apps
Links to the web & mobile apps
How L20 and F4ID made a difference
How L20 and F4ID made a difference
This page featured case studies showing L20’s impact in the countries where it had launched.
This page featured case studies showing L20’s impact in the countries where it had launched.
Snapshot of the case study gallery after MVP launch
Snapshot of the case study gallery after MVP launch
impact
impact
MVP launch and empowering marginalized communities
MVP launch and empowering marginalized communities
F4ID and the L20 initiative successfully improved nutrition and food distribution for a variety of underprivileged communities across the globe.
F4ID and the L20 initiative successfully improved nutrition and food distribution for a variety of underprivileged communities across the globe.
UN SDG
UN SDG
7 out of 17
7 out of 17
At pilot launch, L20 was assessed to have achieved several United Nations Sustainable Development Goals (SDGs).
At pilot launch, L20 was assessed to have achieved several United Nations Sustainable Development Goals (SDGs).
assisted countries
assisted countries
4+
4+
Among these countries were Kenya, Afghanistan, and Nigeria, with future plans of expansion to Haiti.
Among these countries were Kenya, Afghanistan, and Nigeria, with 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 Sustainable Development Goals which L20 achieved
UN Sustainable Development Goals which L20 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 demanded creativity and adaptability.
Bringing F4ID’s vision to life was a complex challenge that demanded creativity and adaptability.
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
CSS skills from my frontend developer days proved key to quickly launching F4ID’s site.
Cross-disciplinary skills matter
CSS skills from my frontend developer days proved key to quickly launching F4ID’s site.
👥
Collaboration is crucial
Workshops and an agile approach kept design and development teams on the same page.
Collaboration is crucial
Workshops and an agile approach kept design and development teams on the same page.
💁🏻♀️
Own your responsibilities
Taking accountability created value for the client and strengthened my design skills.
Own your responsibilities
Taking accountability created value for the client and strengthened my design skills.
🫰🏻
Simplicity over complexity
My UI-heavy role in this project taught me that simplicity is key to usability and quality.
Simplicity over complexity
My UI-heavy role in this project taught me that simplicity is key to usability and quality.
❣️
Design can save lives
I felt proud at MVP launch knowing that my work helped improve food access for so many.
Design can save lives
I felt proud at MVP launch knowing that my work helped improve food access for so many.
Future of L20 and F4ID
Future of L20 and F4ID
During my time with F4ID, we successfully met the project's initial goals. Since then, priorities have shifted to new projects focused on advancing sustainable development and providing essential nutrition to underdeveloped communities.
During my time with F4ID, we successfully met the project's initial goals. Since then, priorities have shifted to new projects focused on advancing sustainable development and providing essential nutrition to underdeveloped communities.