Habit Better
An online platform for life empowerment courses
Web
Mobile
Frontend- React Native Video Player Integration
Push notifications- Firebase
Video Player integration- Vimeo, Wistia
Project management- Jira
Connectd for School is a digital wellbeing assistance application for school students in Los Angeles. We gave a new face to the app along with optimizing it through dedicated software development and assistance.
The mental wellness of school students is a prime concern that mostly goes unnoticed. Connectd for School targets this issue with its wellbeing assistance application that can be used by teachers, parents, and students of around 15 schools in Los Angeles. This application would also serve as a companion to the outreach program carried out by schools on mental health for students and related topics.
This project started in April 2022 as we were approached by the client for the Frontend Development and API Integration of the mobile app. The backend was already developed and our team had to majorly work on frontend development and API integration.
The project had the following major requirements and we met them effectively with dedicated technology usage and appropriate management.
We developed a role-based cross-platform mobile application using React Native. This app can be used by students, teachers, and parents whereby the functionalities would be different for each role. The essence of this application has been its simplicity, as the client required, companioned by high user-friendliness. We used gamification along with creative animations that uplifted the user experience of the app manifolds.
We created the signup/login functionality for the app (a separate section for this due to the complicated nature of the task).
The check-ins feature of this app contains several questions that users can answer to check their wellness status. We integrated APIs to create a set of standard check-ins.
The app includes a separate section of "saved items" that users can view later.
We integrated Google Maps in the resources section that would help the users to locate help centers easily.
The users can view informative videos in the app. We embedded the video functionality using Vimeo software and Wistia software.
In the resources and saved items sections, we implemented the search functionality. This will help users in finding relevant information faster.
While navigating inside the resources section, the users can find various links to check out more information about them. We integrated the API for an in-app browser through which the users can open those web links.
We integrated the feature of music in the app which users can access for listening to different kinds of healing and calming sounds.
We implemented gamification in the performance section of the app. As the users undertake the check-ins, they gain experience points and win several badges that collectively contribute to their performance and well-being index. The rising scores stir creative animations in the app, making it more appealing to young students.
To make the app more interactive and user-friendly, we developed and implemented two exclusive widgets or static functionalities.
The first widget is a ‘Feeling Thermometer’ that includes blocks of different colors representing various feelings and moods. Students can scroll on this thermometer to analyze their moods and get relevant help as required. This mood check activity also affects the experience points and badges.
The second widget is 'Map my network' which includes a set of cards containing several questions about the well-being of students. The answers entered by the students allow the app to collect relative data. It then presents information about the helpful personals and points of contact in the students' social networks that they have connected with previously.
This was the prime and most comprehensive API integration task in this project. The signup and login process for this app had many authentications and identity verification complexities. Thereby, our engineers had to brainstorm on integrating the complex signup/login APIs. We created separate signup functionalities for the three users, i.e., students, teachers, and parents as per the requirements laid out by the client. This included passcode functionality for student signup and email/password functionality for teacher and parent signup.
We implemented the authentication factor of the school code that must be entered by all the users to use the app. After entering the school code, the app will run as per the role chosen by the user. Student login needed further verification factors. The students permitted by their respective schools can use the app with school codes and other students will have to sign up each time for using the app. The app will never log out users unless they are attempting to log in from a new or second device.
We implemented a language conversion functionality for this app for the requirement of app localization. The app operates in the Los Angeles area where Spanish is the native language. To make the app more inclusive, the client required a dual-language version for parents that can only understand the native language. Thereby, we integrated an API that would convert the app data into Spanish after detecting a parent login.
Connectd for school app includes the feature of Push notifications. These notifications aim to increase app usage by displaying relevant content to the users and encouraging them to explore more about the app. We integrated APIs for three types of push notifications - check-ins, new content, or announcement. We implemented the functionality for push notifications using Firebase.
We received the Connectd for School app without a frontend. The client provided the UI/UX design and the challenge for the developers was to analyze the XD flow independently. This would call for discussions with the client many times as the flow would get complicated. However, our developers were able to overcome the communication issues and put things in place for a great front end.
The backend for the app was already developed and it was challenging to integrate it with the frontend our developers were developing. This issue primarily happened because our frontend team had to constantly communicate with the client’s backend team to implement the API calls.
As mentioned above already, the signup/login functionalities posed the biggest challenge of this project. The flows for some of the features and screens were missing which led to further hitches.