Radiante

• 

  Radiante login page

• 

  Radiante welcome page

• 

  Radiante home page

• 

  Example of accessible symptom-logging

Inspiration

ASSADE, a grassroots organization based in Guatemala, is a pillar of support for the rural indigenous Mayan community there, providing life-saving medical and dental care through their clinic. As a development team, we wanted to create a tangible solution using technology that could help further ASSADE’s mission and further their impact and reach. As technology has proliferated on a global scale, reaching even remote areas around the world and becoming accessible to people in those regions, a mobile app for users to keep track of their health and receive medical care from ASSADE seemed like an excellent solution. Our team collaborated with ASSADE, and we learned of the requirements and functionalities they wanted in the app.

What it does

Radiante is a reproductive healthcare application for women to track their pregnancy and/or periods. The functionalities for the pregnancy tracker allow the user to check in weekly about their physical and mental health, receive reminders for appointments, track symptoms, provide information that the user should know based on where they are in their pregnancy, communicate with ASSADE and the clinic directly for questions or emergencies, and offer additional educational resources.

How we built it

Our processes began with researching the user and gathering user requirements to narrow down the features we wanted to incorporate into our project. We downloaded several competitor apps to assess what services apps with similar purposes added. We noticed that those apps had confusing layouts with a lot of information thrown at the user so we decided on a simpler, user-centric design. We kept user needs in mind as we constructed an Information Architecture in FigJam, and drew out the wireframes in a digital note-taking app. We iterated these designs collaboratively as we built our prototype in Figma. We used JavaScript and ReactNative to start our implementation of the app, creating multiple pages and a navigation bar.

Challenges we ran into

As this was our first time working in mobile app development and using React Native, there was a big learning curve in figuring out how to translate the functionalities we envisioned in the wireframes to the actual app. We also had to learn for the first time about Figma’s more advanced functionalities for our prototypes, such as using variants and creating overlays.

Accomplishments that we're proud of

One of our team members figured out how to take user input in Figma as a variable and change the text output on another page based on the user input. We are also proud of the product design we have created and the functionalities we have envisioned. Together, we also did an excellent job of collaborating and relying on the strengths of each other to work on this project.

What we learned

Each of our hackers had different levels of experience with Javascript, React Native, Figma, and User Experience Design. We embraced these differences to foster a collaborative and learning-driven team environment. Some of our team members used Figma for the first time, discovering the basics of designing elements, nesting them in frames, creating components, and prototyping a flow. Others delved into a well-organized User Experience planning stage, where we created documents detailing the Information Architecture, Style Guide, and Wireframes. Finally, some team members further developed their understanding of JavaScript and learned how to use React Native and git.

What's next for Radiante

Moving forward, we plan to shift Radiante into a completely functional app from our prototype with some added functionality. We plan to add period tracking, communication directly to the clinic and links to direct educational resources. For the period tracking specifically, we want to increase accessibility and understanding by providing more visuals in symptom and ovulation tracking as well as a graphical analysis page with the data collected. Furthermore, we would like to add a translation feature for the whole app. Because our target audience is primarily in Central America, we would like the app to be able to show everything in Spanish or possibly other indigenous languages. Ultimately, our goal as we continue forward with this project is to increase accessibility to important healthcare by fully implementing in real life

Built With

• figma
• javascript
• react-native