Conversion of an existing interactive patient education module on child lung physiology from Flash to HTML5

Media:
Adobe Illustrator CS6, Adobe Photoshop CS6, Adobe After Effects, Adobe Flash CS6
Target Audience:
Public
Format:
Web
Supervisors:
Dr. Gordon Tait, PhD, Toronto General Hospital, Department of Anesthesia
Jean Lin, Toronto General Hospital, Department of Anesthesia Perioperative Interactive Education
Content advisors:
Dr. Kazuhiro Yasufuku, Director, Interventional Thoracic Surgery Program Associate Professor of Surgery University of Toronto, Division of Thoracic Surgery, Toronto General Hospital, University Health Network
Collaborators:
AboutKidsHealth Team:
Shelley Li Wen Chen, MScBMC, Medical Illustrator
Hide Miyagawa, MScBMC, Senior Medical Illustrator
Monika Musial, MScBMC, Medical Media & Design Coordinator
Flash Developer:
Marisa Bonofiglio, MScBMC
HTML5 Developer:
Jean Lin , MScBMC, Biomedical Communications Specialist
Personal Contribution:
Wireframes, UI and UX Design, visual asset conversion from Adobe Flash to Adobe Photoshop and Adobe After Effects
Responsive Design image of the website visible in desktop, tablet and mobile versions

PROJECT INFORMATION

This project with the Perioperative Interactive Education (PIE) group was completed through the Office of Integrated Medical Education’s Education IT (EIT) Summer Student Program. working
The Hospital for Sick Children has an extensive collection of interactive patient education modules on how the body works. The issue with many of the module however is that they were developed in Adobe Flash and therefore are not accessible by tablet or mobile devices. The navigation was often complex and most of the interactivity relied on 'hover' states or rollovers (the user can learn about anatomical parts by moving the mouse cursor over certain parts of an image).
screen capture of a section of the SickKids's How The Body Works website showing a selection of lung anatomy and its relevant labels accessible only via hover button states

PREPRODUCTION: Wireframes, UI & UX Design Documentation

Several wireframes and high(er) fidelity wireframes were developed. For this I experimented with Axure, Balsamiq and InDesign to create interactive PDFs. These were extremeley helpful when communicating with the team at SickKids Hospital.
wireframes of mobile design
high fidelity wireframe of mobile design
high fidelity wireframe of mobile design
Design documents and style sheets were created in Adobe Illustrator. Emphasis was placed on maintaining a consistent style across all modules within the current and future physiology modules for 'How The Body Works'.
wireframes of mobile design wireframes of mobile design

ASSETS: Images and Interactive Animations

Since the child physiology assets were already created for this project, the focus was more on converting them for use in a responsive web-based format. A major constraint was that our 'client' was the hospital and most of their computers were still running on Internet Explorer 8 or earlier. For the interactive animations this was tricky as animated GIFs were too large, the HTML5 canvas export from Adobe Flash was not supported by IE8 and didn't support gradients and the HTML5 video tag would automatically play fullscreen on mobile. Jean Lin had already experimented with these techniques before I joined the project and found the use of Sprite Sheet Animations exported from Adobe After Effects to be effective. My main responsibilities were to extracts assets from Adobe Flash and edit them in Adobe Photoshop and Adobe After Effects. In the end I also created an adult version from the assets.