In the fall of 2019, our team of 4 UX designers designed an educational mobile app for Health4TheWorld - a non-profit organization based in CA working to spread health education worldwide.
The problem was, Health4TheWorld had their healthcare lectures only on a website platform, which limits the number of people who can access the information.
A healthcare educational mobile app for under-resourced areas around the world
OVERVIEW & THE PROBLEM
Sep 2019 - Now
Team of 4 designers
The app is being designed to enable people to watch Health4TheWorld academic video on their phones.
View & Ask Questions
We tried to create a good learning experience just like the website platform. The question section enables students to view and answer other questions and add their questions.
Learning on a smartphone does not mean you can not practice the quiz. We added the online quiz function and make getting certificates easier on the phone.
Due to some students may not have reliable internet service, viewing the transcripts will be an essential way for them to also get access to learning.
I created a user survey and conducted user research to understand user needs and discussed with clients about the requirements.
However, With limited research available to our international users, our team relies on secondary research methods to look at existing educational or video applications.
We looked for globally familiar UI patterns in popular apps like Youtube and Facebook, and our team collaborated on what the main features should be and how to prioritize them.
After we conduct user research and discussed and gathered information from the client, we created a persona of our target user. The app will be used by people from countries like Thailand, Tanzania, Ecuador, Nepal, Cameroon, and Bhutan.
The user from these countries will most likely be using an android phone. They may not have reliable internet service. Besides, English may not be the primary language they use or are familiar with.
The main goal is to design a simple and easy to navigate mobile version of the website that mainly focuses on the educational section. It has to be easy to use and understand for people who may not be familiar with mobile apps.
Before creating wireframes, we created a flowchart to see what the information architecture of the app will look like, and how the user will navigate throughout the app. The app will have three main pages: home, saved, and profile.
Some main things we considered for the user flow were-
Users should be able to access all lectures without logging in
Login is required only if users are getting a certificate
The help section should be prominently displayed and easy to access from any screen
Although our target user mainly uses android, our client decided to design the iOS version of the app first. The Android version will be made after iOS.
Here are some wireframes generated by me. The client for this project wanted 5 main features on the home screen:
To have a search bar on the home page
To have the help button easily accessible instead of having to go through the settings
To have recommended videos at the top
To add upcoming lectures on the homepage
To have all the subjects listed on the homepage
We used Maze for usability testing. Maze is a web-based usability testing software, which can let us see the usability score, the user's path to complete the task, the bounce rate, and other useful information.
I created seven tasks and four survey questions. All tasks have all the instructions required to complete the task. When the user tests the prototype according to the click, the software will generate the task completion status and generate the usability score. Below are some of the results from the missions that had to be completed with the testing.
My learnings from the remote usability testing -
Write all detailed steps for people to follow and complete the tasks - this was just a prototype, but some people treated as a real app and tried to input names in it, which were not possible. And this had led to people leaving the task.
Always take a rating survey to get quantitative feedback.
Always ask if they have suggestions in the survey which helps us gather some useful insights.
After sketching screen layouts and working up wireframes, we developed two wireframe-prototypes to deploy for remote testing. We planned to use the existing Health4TheWorld student network, both by distributing links to online tests and video-conferencing with classrooms to get immediate feedback. Here are some of the current screens.
We are currently processing and presenting our findings to stakeholders, advocating the necessary changes, and conducting further research. After that, we will try to finish the design so that we can work with the developers to get the app into the development phase. We will do further usability testing to improve the application.
I'm very excited about the coming visual design and work with developers to get this product into the hands of real users.
We created the style guide that reflects the colors used on the website to make them look cohesive. We also took colors from the logo of H4TW.