We Care Solar — a project recap
Providing rural midwives the necessary tools and resources to safely deliver children with the We Care Solar app
We Care Solar is a nonprofit that equips public health facilities with clean, reliable energy so that every mother can safely give birth. They supply health facilities with portable solar suitcases, which provide medical lighting and power for medical devices assisting in childbirth. The organization works closely with partners such as the Ministries of Health, UN agencies, and international non-government organizations to promote clean energy for safe motherhood.
This year, Blueprint partnered with We Care Solar to make the use of these Solar Suitcases more accessible for technicians and health care workers.
The Problem
We Care Solar midwives perform medical work in many rural, low-connectivity regions. As a result, they often go without a reliable means of communicating with suitcase technicians or reference to We Care Solar’s medical equipment guides. This can pose a significant challenge to midwives if they encounter issues with the solar suitcase while operating on patients.
The Solution
Blueprint designed and developed an offline-friendly mobile application for midwives and technicians to more easily access medical training and troubleshoot issues with the solar suitcase. By integrating basic training and troubleshooting resources into guides and workflows, the app aims to optimize the use and maintenance of the solar suitcase.
User Research and Design
The We Care Solar app was built with two main users in mind:
- Midwives are the primary users of the app which they will use to read instructions, watch videos, and troubleshoot issues.
- Technicians service the solar suitcase and are responsible for teaching midwives how to use the suitcase. They also troubleshoot issues to help navigate midwives through any issues they are facing.
User research found it was imperative that the app had offline functionality, since most midwives are assigned to work in regions with limited connectivity. We found certain parts of the solar suitcase were common pain points for midwives when navigating the device. We also learned that since many midwives were not native English speakers, we should prioritize implementing clear, visual communication to guide users through the app.
Training Resources
The We Care Solar app offers educational resources to guide midwives through using the solar suitcase. Using the Resources tab, users can browse various cards, each containing instructions or videos on certain topics. Each card is expandable and scrollable for easier viewing access.
For more complex concepts, users can watch playlists of consolidated videos and instructions on operating different parts of the suitcase. Users can also favorite or unfavorite any resource for future reference.
Interactive Suitcase
Users can locate and navigate individual parts of the solar suitcase through an interactive virtual diagram. The virtual suitcase consists of both a static and interactive view that the user can toggle between. Midwives can also zoom in on any part of the suitcase to learn more about its specific parts and any relevant resources. Through this visual tool, all midwives, both English and non-English speaking, can easily understand the different functionalities of the suitcase.
Troubleshooting
The troubleshooting page allows users to report any issues they experience with the solar suitcase and navigate common problems. The page first prompts users with a series of questions to identify the issue they are experiencing and attempts to guide the user through solving the issue. If the user is still experiencing difficulties using the solar suitcase, they are directed to contact the We Care Solar staff so a technician can provide personalized support.
Technical Overview and Challenges
PWA and Offline Functionality
Given our app needed to work in low-connectivity environments, we decided to build our project as a Progressive Web App (PWA), which combines the benefits of an ordinary website and a mobile app.
To implement offline functionality on PWA, we used Firebase and Redux to cache requests and data whenever the app was working in an offline environment. Firebase is able to save and fetch information in an offline cache. Redux Persist can also cache any of these states in a global state tree that Redux can handle once the app establishes Internet connection again.
By visiting wecaresolar.app, users can bookmark the app to their home screen and access the app’s feature in any environment. Making our app browser accessible also allowed us to create a consistent user experience regardless of what kind of mobile device users owned!
For an offline-first app like ours, it’s important to be intentional about technical design from the very beginning. What frameworks/libraries will we use for the backend; how should offline requests be handled; and how will we decide what data to store on the user’s device? These are all extremely important decisions that are difficult to change once we’ve already started working on the app. It’s tempting to get started on the frontend as soon as possible so we can have basic features to demo and user test with, but incorporating offline functionality later on in the development process usually isn’t as simple as replacing our old placeholder data with whatever offline-friendly code we added in.
For example, we decided from the very beginning to use Firebase and Redux for caching requests and data, which made integrating these frameworks into our offline implementation relatively straightforward. Comparatively, however, we didn’t spend as much time researching PWA, service workers (programmable network proxies that let us control how network requests from a page are handled), or how PWA would interact with Firebase/Redux. This led to many unexpected bugs that required fixing in the last week of development. Looking back, some of the more challenging backend features could have been developed more easily or avoided entirely if we had made better use of PWA service workers!
Using Airtable to Maximize App Longevity and Flexibility
To ensure that the interactive suitcase was a long-lasting feature, we made it possible for We Care Solar to edit through Airtable in case of future modifications to the solar suitcase. Using the Airtable database, We Care Solar technicians can add new topics, upload images, and modify coordinate values of clickable suitcase elements. We also used Airtable to create a similarly flexible flow of operations during troubleshooting so that technicians could modify the troubleshooting process on the app any time.
Final Reflections
It was a great experience building this app for We Care Solar, and we appreciate how much we’ve learned the past year! We also want to thank We Care Solar for giving us the opportunity to work with such an amazing, supportive team of people! We hope our app can help the organization achieve their goal to make healthcare more accessible to mothers everywhere.
Here are some of our key takeaways and learnings from our development process.
Learn and Research
Recognize our end goal and finalize the best way to reach that point early on! Although Blueprint has built offline mobile apps in the past, this was the first year we used PWA which prompted much discussion on how we can build an offline app as effectively and efficiently as possible. This led to several discussions researching and planning how to best implement features and integrate them together.
“I used to think coding was an innate ability (if you knew React, you’d know how to do everything). But the most effective solutions emerge from noticing patterns in implementations and researching the best possible tools to get there. I’d always run into moments where I didn’t know how to move forward and realized I have to be willing to spend 2–3 hours scrounging the internet to recognize (1) what is possible and (2) what are our limitations.” — Shannon (developer)
User Test Early
Develop and user test the app in realistic conditions as early as possible.
“Starting user testing earlier would have been useful, especially since some of our users might not be very tech-savvy or have good mobile devices/internet connections! This does require frontloading our development work a bit more though. Similarly, if we had to do this again, I’d recommend developing and testing our features on actual mobile devices (or Android emulators) earlier on since the appearance of our app on a computer can be misleading.” — Kevin (developer)
Communicate and Learn from Each Other
Working with members of differing experience levels and skill sets can be fun! Through many discussions and exchange of ideas, we learned from one another and supported each other’s growth throughout the process.
“With this being my second semester developing in Blueprint, I was able to see my personal and technical growth since joining helped motivate me to continue working. The biggest learning experience for me this semester was learning to feel comfortable asking questions. During my first semester, I would sit in work sessions confused and unable to get work done. This semester, I realized sitting confused and reimplementing the same dysfunctional code wouldn’t change the outcome. I learned to speak up and ask my team for help whenever I was stuck. Instead of remaining confused during work sessions, I’m able to work through problems I may encounter to get the sprint task done.” — Jared (developer)
Meet the Team!
- Joelene Latief (she/her): Project Leader (fa 20)
- Susan Lin (she/her): Project Leader (sp 21)
- Fang Shuo Deng (he/him): Designer
- Jared Keating (he/him): Developer
- Kevin Li (he/him): Developer
- Shannon Bonet (she/her): Developer
- Kenneth Lien (he/him): Developer (fa 20)
- Joyce Guo (she/her): Developer (sp 21)
- Karina Nguyen (she/her): Developer (sp 21)
To learn more about Blueprint and our projects, visit our website and follow us on our Facebook page!
All of Blueprint’s work is open-source because we believe in building technology that makes us more open and connected. You can view the We Care Solar app and the rest of our projects on our Github.
Special thanks to Susan Lin, Shannon Bonet, and Frederick Kim.
