WebDesign / Interactive Design

WebMD / Interactive Web Special

The Brief:

WebMD is one of the leading healthcare websites known for its content creation and publishing of health news, latest information and wellbeing from reliable sources. This project entailed a new educational campaign centered around heart health and venture into a new class of content to engage users in more multimedia/multisensory storytelling. WebMD sought to create an engaging and educational web special focused on heart health to inform users about risks associated with heart attacks, enhancing public awareness and understanding. They wanted a unique approach that would captivate audiences and make complex medical information accessible and interesting.

Agency

Client - Web MD
Agency - The Supergroup
Country - USA

Role

Creative Direction: UX/UI, Layout/design, Storyboarding, Copywriting, Wireframes

WebDesign / Interactive Design

WebMD / Interactive Web Special

The Brief:

WebMD is one of the leading healthcare websites known for its content creation and publishing of health news, latest information and wellbeing from reliable sources. This project entailed a new educational campaign centered around heart health and venture into a new class of content to engage users in more multimedia/multisensory storytelling. WebMD sought to create an engaging and educational web special focused on heart health to inform users about risks associated with heart attacks, enhancing public awareness and understanding. They wanted a unique approach that would captivate audiences and make complex medical information accessible and interesting.

Agency

Client - Web MD
Agency - The Supergroup
Country - USA

Role

Creative Direction: UX/UI, Layout/design, Storyboarding, Copywriting, Wireframes

WebDesign / Interactive Design

WebMD / Interactive Web Special

The Brief:

WebMD is one of the leading healthcare websites known for its content creation and publishing of health news, latest information and wellbeing from reliable sources. This project entailed a new educational campaign centered around heart health and venture into a new class of content to engage users in more multimedia/multisensory storytelling. WebMD sought to create an engaging and educational web special focused on heart health to inform users about risks associated with heart attacks, enhancing public awareness and understanding. They wanted a unique approach that would captivate audiences and make complex medical information accessible and interesting.

Agency

Client - Web MD
Agency - The Supergroup
Country - USA

Role

Creative Direction: UX/UI, Layout/design, Storyboarding, Copywriting, Wireframes

Process

In addition to the many interactive and UI issues to solve, we had the added task of creating all visual assets as well. So every red blood cell, platelet, cholesterol, heart and blood vessel had to be designed and rendered out for the WebGL engine to generate. Of course a lot of extra art direction and design goes into such an undertaking. But in the process we discovered being able to control things like dramatic lighting, speed, and camera angles, made it possible to tell a more dramatic and richer story + experience.

Process

In addition to the many interactive and UI issues to solve, we had the added task of creating all visual assets as well. So every red blood cell, platelet, cholesterol, heart and blood vessel had to be designed and rendered out for the WebGL engine to generate. Of course a lot of extra art direction and design goes into such an undertaking. But in the process we discovered being able to control things like dramatic lighting, speed, and camera angles, made it possible to tell a more dramatic and richer story + experience.

Process

In addition to the many interactive and UI issues to solve, we had the added task of creating all visual assets as well. So every red blood cell, platelet, cholesterol, heart and blood vessel had to be designed and rendered out for the WebGL engine to generate. Of course a lot of extra art direction and design goes into such an undertaking. But in the process we discovered being able to control things like dramatic lighting, speed, and camera angles, made it possible to tell a more dramatic and richer story + experience.

Wireframes

We meticulously designed detailed wireframes that laid the foundation for a highly interactive and engaging experience. These wireframes prioritized user experience practices while incorporating intricate storytelling elements, animations, and event triggers. Each screen and 3D stage was carefully mapped out to include audio cues and precise camera directions, ensuring technically feasibility and a seamless and dynamic narrative flow.

Wireframes

We meticulously designed detailed wireframes that laid the foundation for a highly interactive and engaging experience. These wireframes prioritized user experience practices while incorporating intricate storytelling elements, animations, and event triggers. Each screen and 3D stage was carefully mapped out to include audio cues and precise camera directions, ensuring technically feasibility and a seamless and dynamic narrative flow.

Wireframes

We meticulously designed detailed wireframes that laid the foundation for a highly interactive and engaging experience. These wireframes prioritized user experience practices while incorporating intricate storytelling elements, animations, and event triggers. Each screen and 3D stage was carefully mapped out to include audio cues and precise camera directions, ensuring technically feasibility and a seamless and dynamic narrative flow.

The Outcome:

We proposed an immersive, more cinematic experience that guides users quite literally through the human circulatory system, detailing the events leading up to, during, and after a heart attack. Through utilizing WebGL, we could build an actual interactive 3D journey that was both more dramatic and informative. Functionality was key to the project that it worked euqally as well across both mobile and desktop platforms with a thoughtful user experience. Collaboration with medical experts was crucial in developing accurate content and realistic 3D models of blood chemistry and physiology. This interdisciplinary effort resulted in an educational tool that not only explains heart health in an engaging manner but also provides a memorable and impactful user experience. The experience needed to be fluid and effortless to navigate in both camera tracking/movements, educational information and a thoughtful usability as well. Between devices, we aimed to make the navigation as intuitive and simple as possible. On the desktop users can glide easily through veins and camera angles by scrolling casually with trackpad (or mouse), and of course with the swipe of a finger on mobile devices. It was a lot of boxes to tick, but resulting in an informative, engaging and dramatic live rendering of a 3D journey to the human heart.

The Outcome:

We proposed an immersive, more cinematic experience that guides users quite literally through the human circulatory system, detailing the events leading up to, during, and after a heart attack. Through utilizing WebGL, we could build an actual interactive 3D journey that was both more dramatic and informative. Functionality was key to the project that it worked euqally as well across both mobile and desktop platforms with a thoughtful user experience. Collaboration with medical experts was crucial in developing accurate content and realistic 3D models of blood chemistry and physiology. This interdisciplinary effort resulted in an educational tool that not only explains heart health in an engaging manner but also provides a memorable and impactful user experience. The experience needed to be fluid and effortless to navigate in both camera tracking/movements, educational information and a thoughtful usability as well. Between devices, we aimed to make the navigation as intuitive and simple as possible. On the desktop users can glide easily through veins and camera angles by scrolling casually with trackpad (or mouse), and of course with the swipe of a finger on mobile devices. It was a lot of boxes to tick, but resulting in an informative, engaging and dramatic live rendering of a 3D journey to the human heart.

The Outcome:

We proposed an immersive, more cinematic experience that guides users quite literally through the human circulatory system, detailing the events leading up to, during, and after a heart attack. Through utilizing WebGL, we could build an actual interactive 3D journey that was both more dramatic and informative. Functionality was key to the project that it worked euqally as well across both mobile and desktop platforms with a thoughtful user experience. Collaboration with medical experts was crucial in developing accurate content and realistic 3D models of blood chemistry and physiology. This interdisciplinary effort resulted in an educational tool that not only explains heart health in an engaging manner but also provides a memorable and impactful user experience. The experience needed to be fluid and effortless to navigate in both camera tracking/movements, educational information and a thoughtful usability as well. Between devices, we aimed to make the navigation as intuitive and simple as possible. On the desktop users can glide easily through veins and camera angles by scrolling casually with trackpad (or mouse), and of course with the swipe of a finger on mobile devices. It was a lot of boxes to tick, but resulting in an informative, engaging and dramatic live rendering of a 3D journey to the human heart.

hello@pyko.net   |   US: +1.678.666.0099 |   DE: +49.1634693379

©2024

hello@pyko.net   |   US: +1.678.666.0099 |   DE: +49.1634693379

©2024

hello@pyko.net
US: +1.678.666.0099
DE: +49.1634693379

©2024