BEA, Breast Cancer Prevention App
Inspiration 📲
Navigating a breast cancer diagnosis and treatment is hard! It is even harder if you have to deal with it in a language that you are not comfortable in. Bea is a translator app to help non-English speaking breast cancer patients in the US access quality information about the disease. The app is meant for women who have gone through breast cancer screening and need help to understand the pathology report and other information provided by their health care provider
What it does 📲
Bea has 4 main parts:
It translates documents from English into the patient’s language
It provides a glossary of medical terms related to breast cancer searchable in English and the patient’s language;
It translates the patient's questions into English;
And it provides a section with more information about breast cancer in general. This section also has links to further information about the disease in each language.
The prototype has 3 major foreign languages: Spanish, French, and Hindi. The application works on Android, iOS and can also be used as a desktop application.
How we built it 📲
We took one week to design and another to build. We used the additional week to fine-tune the application. We used Figma to create wireframes, low fidelity user flows, and high fidelity screens, as well as all the UI elements. Creating the first round of low fidelity user flows helped us understand the information architecture structure needed to build the app around our main objective, helping non-English speakers communicate better with healthcare practitioners. Reviewing this first round we decided to erase one category that was geared towards helping the users find a specialist who could communicate in their own language since it meant almost building a different app. From our research we know that the high-risk population is women between their 40’s to theirs 60s, this information served as the guide to design a UI that was had contrasting colors to indicate the selection, font sizes a bit over the average to ensure readability, and tags con each icon to clarify the route they would take them.
For the app itself, we used Flutter to make a cross-platform app. For the cloud, we use Firebase as a database and Firebase ML package for the translations. We used the English version as the base to build the user base and wireframes and then we built 3 languages into the prototype: Spanish, French, and Hindi.
We used a French website as the source for our glossary (http://institutdusein-desavoie.fr/index.php/glossaire) and wrote the section with additional information ourselves based on information from multiple sites. We used google translate and improved on the translations manually (we have 1 Spanish, 1 French, and 2 Hindi speakers on our team).
Challenges we ran into 📲
Technical challenges The main challenge from the technical side was finding the appropriate packages/libraries to add to our application for specific tasks.
We found a way around not being able to upload SVG files loaded.
We had a challenge exporting the package and API integration.
Linguistic challenges We wanted to make sure that our translations are of good quality. Hindi proved to be a challenge when importing pdfs. since we are depending on-demand translation services from Google cloud.
Accomplishments that we're proud of 📲
Having a working app with 3 major foreign languages in a short span of time is a big accomplishment. For three team members, it was the first hackathon. For the two most experienced team members, it was the second. We were very clear about the goals to be achieved individually and as a team. We are happy about how well we coordinated and worked together across different time zones by dividing responsibilities and tasks clearly defined to finish the app on time.
What we learned 📲
Maya: I came up with the initial idea and seeing it transform it into reality has been an amazing experience. I learned about tools for development (Flutter, Firebase) and design (Figma) from the other team members so that I could manage the timeline and collaboration among the team.
Daniela: This was my first time working directly with developers, that on its own it is an incredibly valuable learning experience. It gave me exposure to understand better how the text information, icons, and vectors used in the UI need to be delivered in order to be coded. It also helped me understand that the specifications change according to the package used for development. Thanks to this, my curiosity is being driven to read more about the difference between developing for IOs, Android, both and what it means to hard code information vs soft coding.
Prabitha: This is my first hackathon in developing a complete mobile application in Flutter. I had a chance to work with a Global team across different geographies/time zones only based on interest. I also had an opportunity to learn different machine learning packages like OCR and Translation from Google Firebase along with a few other good libraries and design tools like Figma. I was able to understand how a prototype comes out after all the brainstorming, requirement analysis, Designing, Testing and Delivery from scratch in a short span of time.
Danwand: I got inspired by cool teammates. Being a Full Stack Developer I build the website and hosted it. I learned about GitHub pages. I got a very good exposure to DevOps and being a Team player I learned about continuous Integration. It was also a good experience working with Teammates in a different timeline. Above all, I got new friends :)
Sagun: Being an aspiring developer, this really helped me learn how to systematically think about different aspects of a project. I gained knowledge about different technologies and tools, especially app development and machine learning. I learned a lot from how organized we were while taking the project from the initial idea to the evolved product.
What's next for Bea - Breast Cancer Translator
The next steps are:
Adding more major languages, like Arabic, Mandarin, Korean, Portuguese, Russian.
Adding readout feature for the translated documents and so that the translated questions can be read to the doctor in English.
Partner with health care providers to promote the app among their non-English speaking patients.
Adding self-breast examination support videos
Add a search for specialists nearby
On a longer-term:
We plan to provide a version of the app to doctors with functionalities like seeing the questions from the patient in English before the meeting in order to prepare; translating their answers into the patient’s language, etc.
Built With 📲
Figma
Firebase
Flutter