Banji Health
Drug aid App & Responsive Website
Save Lives
The Product
Banji- Health is a Cross-Platform tool operating across The Gambia, focused on building a healthier nation by helping people in need to get the essential prescriptions for free from pharmacies. Banji-Health’s primary target users include any Gambians living under the poverty line, who are in need and can't afford their prescriptions pills.
The Problem
Due to the current economic financial crisis and greed, drug prices in pharmacies are five times higher than they were just a year ago, there has been a shortage of drugs especially for chronic pains and aid organizations have been unable to cope with the high demand for medicine aid.
Project Duration
June 2022- July 2022
The Goal
Design a cross-platform app & responsive website where every capable person in the Gambian society, can collaborate and immediately donate and help others in person or remotely, or can ask for medicine aid and get it instantly and respectfully
My Role
Ux Design Lead
Understanding the user
-
User Research
-
Personas
-
Problem Statement
-
Competetive Audit
-
Ideation
.png)
User Research Summary
I collected data and pain points via video calls to family members who have either lived through, witnessed this experience or are in the medical field in Banjul, Gambia. I used their challenges as insights for how I plan to structure the app and website. I discovered that many target users are either too shy to ask for drug help or don’t know how or where to go to seek drug aid. Most of interview participants were excited for the prospect of using such a platform and found the idea as an efficient solution for the lack existing drug aid.
Personas
Competitive Audit
An audit of a few competitors products provided direction on gaps in opportunities to address with the medicine aid app.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on the transaction process of the money donation and how to make it easy to differentiate between the needs, donations, and volunteering.
 |  |
|---|---|
 |  |
 |  |
|---|---|
 |  |
Starting
the design
-
Paper Wireframes
-
Digital Wireframes
-
Low-fi Prototype
-
Usability Studies
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my app keeping the user paint points in mind. The medicine app screen wireframe variation on the right focuses on simplifying the filling in data process for users.
Digital Wireframes
When moving from paper to digital wireframes I tried presenting all the main options for the user while still maintaining a clear and minimalistic representation of the screen. The purpose of using the large clickable surfaces on the main page arose from taking into consideration the next billion users and a good portion of the elderly people who might have some kind of visual or cognitive impairment.
The homepage is divided into three category buttons supported in Arabic and English at the same time with more features on the navigation bar on the bottom of the screen.
A scale of a solution is raised to simplify the process of filling in the users data. Each section enlarges when the cursor hovers over it with step guidance above it.
Low fi Prototype
To prepare for usability testing, I created a low prototype that connects the user flows of Need, Donate and Volunteer tasks. In addition the accessibility to the need list and community support and other features.
Usability Studies: Parameters
Study Type:
Moderated usability study
Participants:
6 participants
Location:
Baku, Serrekunda, & Banjul- video calls
Length:
40 minutes
Usability Studies: Findings
These were the main findings uncovered by the usability study.
1
Users needed an intuitive and clear way to be able to move forward and finish task one.
2
Users were clicking intuitively on the unclickable step circles to move forward making it a must to turn the steps circles clickable options.
3
Users wished for a different approach to display information on the welcome page.
4
Users preferred a simplified language choice and words all over the app without mixing two languages together.
Refining
the design
-
Mockups
-
High-fi Prototype
-
Accessibility
Mockups
Based on the insights from the usability study I made the navigation and user flow simpler and more intuitive. The step circles became clickable which take the user back-and-forth. I added two clickable arrow buttons to allow the user to go up and down easily on the screen in addition to scrolling up and down. I made the next button sticky. I mentioned in red that all fields are mandatory.
.png)
Mockups
Based on the insights from the usability study I found a different approach to display information on the welcome page by turning its functions into choosing a preferred language by the user solving by this the language problems as well.
Mockups
Based on the insights from the usability study, I moved the introduction from the welcome page to the landing page where the user is not rushed to read. I also took out the Arabic text, after learning that Gambians learn to read in English before anything else.
High- Fidelity Prototype
My high-fidelity prototype followed the same user flow as the low-fidelity prototype and included the design changes made after the usability study.
Accessibility Considerations
1
I used headings with different size text for clear visual hierarchy with less images and animations as possible to enable the app will open and operate easily on weak internet connections which happens frequently across the Gambia.
2
I used landmarks to help users navigate the site, including users who rely on Assistive Technologies.
3
I used clear labels and large buttons for action buttons that can be read by screen readers and successfully tested color choices using WCAG guidelines
Responsive
Designs
-
Information Architecture
-
Responsive Designs
Sitemap
My goal with the information architecture was to make things simpler and improve the overall website navigation ensuring an easy, cohesive and consistent experience across devices. The website structure is mainly hierarchal but when exploring deeper, it contains the matrix, subsequential and database structure in some of its sections.
Responsive Designs
Tablet
Mobile
Desktop
 |  |  |  |
|---|
I optimized the designs to fit specific user needs of each device and screen size.
Going
Foward
-
Takeaways
-
Next Steps
Retrospective
I love how much I learned about another country's health system. Designing for Banji- Health taught me that the more I know about the subject I’m designing for and their user pain points, the easier it is to proceed step-by-step and succeed no matter how complex and hard the goal is. In addition, designing a product for social good arouse is different and deeper emotions all along the journey for serving a higher purpose and knowing that my work can make a little difference in people's lives.
Impact
Users shared their excitement about the app and it’s goals which could really provide aid to a lot of people in need, in a fast and respectful way.
One quote from peer feedback-
This is a great start. The prompt you’ve picked is really engaging. It has a clear problem to solve and the user for the product.
Next Steps
1
Give a further reflection on all the modifications and the work already designed.
2
Reach out to people who can help make this app a functional product to begin operating in real dimensions
3
Conduct follow-up usability testing on the new website to make sure we have met the needs of users.
