Overview
Health4TheWorld is a non profit organization which has an educational platform for online education to help health care professionals in under-resourced settings. The teaching modules are made by leading experts.
Role and Duration
UX Designer | Health4TheWorld
Research, User Flow, Interaction Design, Visual Design, Prototyping
Team of 3 designers
June 2019 – February 2020
The Problem
Health4TheWorld currently has their videos and healthcare lectures only on a website platform. This limits the number of users who can access the information.
The Goal
Goal is to provide the same information that is on the Health4TheWorld website on a mobile platform. This will increase the number of users and provide more healthcare information to help people around the world.
PROCESS
User Research
User Surveys
Flow Chart
Wireframes
Prototype
Style Guide
Visual Design
Usability Testing
User research approach did not go as planned. Had to rely on stakeholder interviews.
Our initial approach for understanding the users before designing this app was to set up a google survey for people in the countries where the app would most likely be used.
Under unforeseen circumstances we were unable to get the information from the surveys. Thus we had to rely on the information given to us by the clients and do research on the mobile usage in certain areas of the world where the app would most likely be used.
The design constraints and designing for users that may not be familiar with mobile apps.
After discussing with the clients about the project goals and design constraints, we learned important factors we would have to take into consideration when designing the app.
- Some users may not be familiar with mobile apps.
- Users will most likely be using an android phone.
- English may not be the primary language for most users.
- Users may not have reliable internet service.
Health4TheWorld has users from all around the world. The mobile app will be used by people in countries such as Thailand, Tanzania, Ecuador, Nepal, Cameroon, and Bhutan just to name a few.
We have to take into consideration that users from these countries may not have common knowledge of mobile apps like we see here in the western countries. For that reason we have to make sure the app is not overly complicated and easy to use.
One of the main feature for the app is to be able to search and explore different courses.
The mobile app will need features not only to resemble the online educational platform Health4TheWolrd has on their website but also to be easy to use and user friendly.
The following are the main features the clients wanted to have for the mobile app:
- Being able to search and explore different courses.
- Watch videos on different subjects and save them to watch later.
- To take a quiz on different subjects.
- To earn a certificate and be able to share with others.
- A help button that can be easily accessed if the user needs guidance on how to use the app.
User flow chart. Outling the main navigation for the mobile app.
Before creating wireframes for the project I created a flowchart to see what the information architecture of the app will look like. Also to understand how the user will navigate throughout the app. Users will be able to navigate between three main screens, which will be the home, saved and profile.
Wireflow of a user selecting a video and completing a quiz.
Starting from the home screen the user has the option to select a course which will take them to a list of videos. After selecting a video and going through and completing a quiz, the user has the option to view their certification for completing the quiz and be able to share their accomplishments with others.
A style guide outlining the main colors and elements for the app design.
Users will be able to switch between three main screens of the app. Which include the home, saved and profile.
Design details of the home screen.
The home screen for the app should reflect the information that is on the academy page from Health4TheWorld website. The page includes three main sections which are:
- The list of subjects
- Featured lectures
- Upcoming lectures
I made sure to incorporate these three sections into the design of the home screen. Below you can see the top and scrolled down view of the home screen.
Users have the option to take a quiz after viewing the lectures and have the option to share their progress with others.
Onboarding screens to help direct the user through the app and to highlight the five main features of the app.
There are five main features the client wanted to highlight for the onboarding process for this app.
- Being able to watch free medical lectures on your phone.
- To be able to search and explore courses either through the search bar or through the course catalogue.
- Take quizzes and earn a certificate for completing courses. And being able to share your accomplishments with others.
- To have the option to save videos and courses to add to your curriculum.
- And lastly to be able to share your progress and accomplishment with others.
Usability test results from the first version of the prototype showed an average of 56% success rate of completion.
After creating the prototype the team set up a usability test with maze. With maze we were able to link up the prototype and instruct users to complete certain tasks/missions with the prototype.
Tasks for the usability testing included:
- Selecting a subject
- Searching for a subject or course
- Bookmarking a course
- Selecting a course from bookmark list
- Earn a certificate
Below is a screenshot of the usability testing results from maze.
The success rate for the tasks were not as high as we were hoping them to be. However with the results we were able to make further improvements/adjustments to the design of the app.
Reflection
This was one of my first projects where I worked collaboratively with a UX team. It was both fun and challenging to work on. I learned a lot when it comes to designing for a specific audience and was able to empathize by putting myself in the users shoes when it came to designing the app.
Thanks for reading!