CocoBot is an AI chatbot platform that strives to improve the mental and physical well-being of caregivers of children with chronic health conditions through the use of the Problem Solving Therapy (PST). My team focused on creating the mobile application interface for the platform where we aim to help bridge the gap for families with limited access to healthcare.

We found that resources tailored to underserved caregivers are lacking. The few existing resources, in forms of health self-management interventions, focus on caregivers of adult populations with higher socioeconomic status. While the idea of a chatbot and its technology had been developed by the sponsors we were working with, the interface was yet to be designed.

We kick started the project by diving into research publications authored by our sponsors and synthesizing these findings so that we could develop a better understanding of the design space we were going to be working in. More importantly, we wanted to truly understand who we were designing for and familiarize ourselves with the problem we were trying to solve for.

We also took the opportunity to consult with the engineering team to figure out technical limitations and possibilities of the artificial intelligence model they had developed. This led us to establishing these design requirements for the solution my team planned to design:

The chatbot needs to provide emotional support to its users

The application needs to track its user’s goals and achievements to illustrate the user’s progress

The chatbot needs to appropriately use Problem Solving Therapy to aid users.

The application needs to provide its users with additional access to credible resources that could help users better understand their well-being.

Having a clear understanding of what was required and drawing from the research materials we had analyzed, my team came up with key user flows which allowed us to break down the most important tasks. Forming the user flows also helped us create the underlying structure of the application from the perspective of our targeted users. 

Having formulated the key user flows, we explored different design directions by sketching out our ideas of how we envisioned the application could look like. Ideation through sketching not only provided us with an avenue to communicate and share our ideas with our sponsors visually but also helped us iterate through ideas quickly.

Next, the sketches were converted into mid-fidelity wireframes. Developing these wireframes gave us a foundational layout for the application’s interface. Additionally, the wireframes were also used as an interactive platform for us to test out the usability of the application.

Due to the pandemic, our team had to recruit and conduct our usability tests completely remotely. During this phase, we successfully conducted 6 virtual usability test sessions where we gained valuable insights on the current interactions we had implemented.

Through user feedbacks’, we were able to come up with actionable design recommendations that helped us further refine our solutions.

Finally, to ensure that the design of our solution was consistent throughout the platform, we created a visual system.