Overview: This project is a public health tab interaction about malaria directed towards travelers who are going to high-risk areas. This helps travelers learn about malaria, an infectious disease, and ways to prevent a spread of the illness. 

Audience: Travelers who are seeking information on malaria before going overseas.

Responsibilities: Instructional Designer, Storyboarding, Mockups, Visual Designer, eLearning Development.

Tools used: Figma, Articulate Storyline 360

Travelers might be overwhelmed by the amount of information presented about malaria, making it difficult to find specific information quickly. To address this problem, this tab interaction allows users to easily click on information that is relevant to them at their own leisure.

 I applied core principles from ADDIE, SAM, and Backward Design in clarifying what success looked like for the learner. Using the Successive Approximation Model (SAM), I used a rapid design method to test ideas visually. Lastly, I used a backwards design method to determine content, then designing the learning path.

I applied my biomedical sciences background as a SME. Using the ‘Foundation for the Support of International Medical Training’ webpage about malaria, I created a storyboard that chunked each section into two paragraphs. I also included a link to the source for further information.

After the storyboarding, Figma was used for the style guide and mockup. The tab is transparent when not clicked and a deep red when clicked for contrast. An infographic of a virus inspired the color palette, with deep red and white text for the tab color, clarifying the content. A mockup of the base layer was created by altering the transparency of the background. The tab interaction placed in front of the background enhanced contrast and readability, particularly for users with visual impairments.

I used layers to add content and images in Articulate Storyline 360. Clicking a tab displays the corresponding content layer. Consistent alignment of content and images ensures a balanced layout and improves readability for users scanning the information.

Through iterations and feedback, I created a low-risk 'Activity' tab with immediate feedback. This tab included short travel scenarios with questions for learners to test their knowledge about malaria. It was programmed with variables and triggers to ensure learners answered 3 out of 7 randomized questions before returning to the base layer. If the user did not answer 3 questions correctly, it was randomized to other questions until they were answered. The user had the option to return to other tabs at any time, maintaining the low-risk accessibility. 

Lastly, adding the text-to-speech accessibility feature was crucial for supporting various reading levels and enabling quick access on-the-go. Since the text is science-heavy, this feature helps ensure that everyone can benefit from the information.

The key takeaway was managing cognitive load with tab interaction to avoid overwhelming the learner. A simple, user-friendly, and accessible layout helped users navigate the information easily. This tab interaction benefited an avid traveler who expressed, “After using this interactive tool to prepare for my trip to Africa, I’ve become more informed about Malaria and the essential preventative measures I should take to protect my health some of which I had no idea about! The information is made simple for an average traveler like me and now I feel more confident about being safe abroad!”