Thesis 2021 | Visual Communication Design M.F.A. | Rochester Institute of Technology
A Digital Educational Experience for Visual Learners.
A Digital Educational Experience for Visual Learners.
A Digital Educational Experience for Visual Learners.
A Digital Educational Experience for Visual Learners.
Complex Topics Need Visuals.
Prompt: It is hard to convey complex topics like ethics to visual learners
Complex Topics Need Visuals.
Prompt: It is hard to convey complex topics like ethics to visual learners
Complex Topics Need Visuals.
Prompt: It is hard to convey complex topics like ethics to visual learners
Complex Topics Need Visuals.
Prompt: It is hard to convey complex topics like ethics to visual learners
Considering 65% of people are visual learners (Bradford, 2004), meaning they respond better to information presented with imagery or graphics, we can utilize motion graphics and information design along with succinct narratives and engaging webpage browsing to increase comprehension and motivation for learning complex topics.
William C. Bradford, “Reaching the Visual Learner: Teaching Property Through Art,” The Law Teacher Vol. 11, 2004, last modified December 7, 2012, https://papers.ssrn.com/sol3/papers.cfm?abstract_id=587201
The problem
Frustration and Lack of Motivation
The problem
Fustration and Lack of Motivation
The problem
Fustration and Lack of Motivation
The problem
Fustration and Lack of Motivation
There is a gap in communication between online education and visual learning for several reasons. The methods in which information is being presented doesn’t consider the different styles in learning a person could have. Such as visual, auditory, verbal, and physical, and that a student could have a combination of these. As well, it is difficult to convey complex concepts in an effective way with only text based information. Reading long articles of text with no imagery can be very tedious and frustrating for visual learners to understand especially when focusing on abstract topics like ethics.
On the other hand educational videos are often fast paced and linear not giving the viewer a chance to comprehend the information. They have the ability to move forward and backwards within the video by not in an interactive way. The videos are contained within a media player and there are no direct relationship between the video and the user.
The Solution
Motivate, Stimulate, Engage
The Solution
Motivate, Stimulate, Engage
The Solution
Motivate, Stimulate, Engage
The Solution
Motivate, Stimulate, Engage
Athena is a design system that will leverage several theories such as Pictorial Superiority Effect, which suggests vision is the most powerful pathway to the brain. As well as Dual Coding Theory explaining that two senses stimulated at once will increase comprehension. Conveying content like "Marketing Ethics" in an effective way can be difficult, but visual education can bridge the pathway to these topics in an interactive way that incorporates animation, audio, and engagement.
Athena is a design system that will leverage several theories such as Pictorial Superiority Effect, which suggests vision is the most powerful pathway to the brain. As well as Dual Coding Theory explaining that two senses stimulated at once will increase comprehension. Conveying content like "Marketing Ethics" in an effective way can be difficult, but visual education can bridge the pathway to these topics in an interactive way that incorporates animation, audio, engagement.
Objectives
Objectives
Motion
Motion
By presenting complex material in more succinct amounts it will help the student to better grasp the information, because of a process called decomposition in which the brain needs more time to break down the patterns of animation in order for them to adsorb the information being presented.
The information will be animated on to the screen, the individual infographics are revealed to the viewer in line with their logical structure.
ie. Business = fiduciary duty + integrity + autonomy = happy customer
Narratives
Narratives
Follow the story of two characters, one representing the business and one representing the consumer, making the content relatable to our everyday situations like buying a cup of coffee or seeing an advertisement for bottled water.
When hover over a character the user can select them and character will be front and center, they introduce them selves and how they contribute to the subject matter.
Information
Information
The webpage structure is set in a quadrant grid as opposed to linear. If the user were to zoom out they would be able to see page that is a larger infographic.
In each quadrant the information is also represented in an infographic manner where text, icons, and illustrations are used to define the content.
Experience
Hover over the scene and the cursor changes to a 3D tool, which allows the user to rotate around the scene and zoom into and out of it.
The text on the screen can be read to the user by clicking the speaker icon. The text will be highlighted when the narrator says the word. One of the components of Dual Coding Theory. Audio and visuals simultaneously triggered. User is seeing the word and hearing it at the same time.
Overview
Overview
Moving through the webpage in multiple directions, the cursor has directional cues, the arrows changes orientation when it approaches a different quadrant.
Components
Navigation/Buttons
Navigation/Buttons
Navigation/Buttons
Illustrations
Illustrations
Illustrations
3D Visuals
3D Visuals
3D Visuals
Backgrounds/Textures
Backgrounds/Textures
Backgrounds/Textures
Screens
Mission
Like Athena the Greek goddess of wisdom and skill, this design system is a platform to learn and grow through insight and development. The goal is to provide an alternative learning experience that embraces multiple senses giving the users more power in the way they consume content. Athena will provide multiple avenues of interaction, such as moving content on the screen, listening to a voice over as the written content is highlight on the screen, progressive narratives as you scroll around the page. Thinking outside of the box making a web browser a multi-dimensional experience other than just linear.
Like Athena the Greek goddess of wisdom and skill, this design system is a platform to learn and grow through insight and development. The goal is to provide an alternative learning experience that embraces multiple senses giving the users more power in the way they consume content. Athena will provide multiple avenues of interaction, such as moving content on the screen, listening to a voice over as the written content is highlight on the screen, progressive narratives as you scroll around the page. Thinking outside of the box making a web browser a multi-dimensional experience other than just linear.
Logo Meaning
The owl is a common symbol for Athena, which also represents wisdom and knowledge. They have a special trait of being able to turn their head almost 360 degrees, this is also symbolic of the way website gives the user multiple views of a scene.
Audience
Young professionals in the design and marketing field who respond well to a visual learning style and are interested in an interactive educational experience.
Tone
Approachable, Anecdotal, Instructional, Dynamic
Approachable, Anecdotal, Instructional, Dynamic
Principles
Principles
1. Motivate and Excite
1. Motivate and Excite
1. Motivate and Excite
We want the student to be interested and ready to learn, we can do this by making the content resonate with their learning style for example infographics, narratives, and audio. As well, animation increases motivation and enjoyment in learning.
Kim, S. et al. (2007). The effect of animation on comprehension and interest. Journal of Computer Assisted Learning, 23, 260 - 270.
Pictorial Superiority Effect: Suggests vision is the most impactful channel to information.
Janet Zadina,Multiple Pathways to the Student Brain : Energizing and Enhancing Instruction, John Wiley & Sons, Incorporated, 432014, ProQuest Ebook Central, https://ebookcentral.proquest.com/lib/rit/detail.action?docID=1687057.
2. Stimulate and Relate
2. Stimulate and Relate
2. Stimulate and Relate
Present the information in a way that will provoke the student to continue learning by presenting the information in anecdotal way.
Colors: Comprehension can be increased by 73% when using color as indicators for categorized information.
Xerox Corporation (2017). 20 Ways to Share Color Knowledge. Xerox Office Products and Solutions. https://www.office.xerox.com/latest/COLFS-02UA.PDF
Friendly illustrations - Illustrations can help visualize the information and progress the narrative and boost understanding.
Don Zimmerman, Gregory Thayer (1994-2021). Designing Documents: Using Illustrations. The WAC Clearinghouse. Colorado State University. https://wac.colostate.edu/resources/writing/guides/illustrations/
Present the information in a way that will provoke the student to continue learning by presenting the information in anecdotal way.
Colors: Comprehension can be increased by 73% when using color as indicators for categorized information.
Xerox Corporation (2017). 20 Ways to Share Color Knowledge. Xerox Office Products and Solutions. https://www.office.xerox.com/latest/COLFS-02UA.PDF
Friendly illustrations - Illustrations can help visualize the information and progress the narrative and boost understanding.
Don Zimmerman, Gregory Thayer (1994-2021). Designing Documents: Using Illustrations. The WAC Clearinghouse. Colorado State University. https://wac.colostate.edu/resources/writing/guides/illustrations/
3. Flexibility and Ease
3. Flexibility and Ease
3. Flexibility and Ease
The student will have control over the way information is consumed they have the option to skim the site ready the text, listen the the text, explore my in depth by interacting with the illustrations. This will trigger Dual Coding Theory (DCT), which suggests retention is increase when two senses are stimulated together.
Mark Sadoski, and Paivio, Allan.”Imagery and Text : A Dual Coding Theory of Reading and Writing,” London: Routledge, 2012, accessed March 28, 2020, ProQuest Ebook Central.
Concise wording and organization: Staging is important to direct viewer’s attention to the appropriate information rather than distraction them with exterior elements.
Connie Malamed (2016). How to use Animation for learning. Association for Talent Development. www.td.org/insights/how-to-use-animations-for-learning
The student will have control over the way information is consumed they have the option to skim the site ready the text, listen the the text, explore my in depth by interacting with the illustrations. This will trigger Dual Coding Theory (DCT), which suggests retention is increase when two senses are stimulated together.
Mark Sadoski, and Paivio, Allan.”Imagery and Text : A Dual Coding Theory of Reading and Writing,” London: Routledge, 2012, accessed March 28, 2020, ProQuest Ebook Central.
Concise wording and organization: Staging is important to direct viewer’s attention to the appropriate information rather than distraction them with exterior elements.
Connie Malamed (2016). How to use Animation for learning. Association for Talent Development. www.td.org/insights/how-to-use-animations-for-learning
Color
Blue - relaxed, cool, dependable, committed
Orange - clever, entertaining, electrifying
Yellow - ignited, alert, optimistic, complimentary
Black - solid, smart, polished
Linda Foulkes, "PowerPoint Best Practices: Using Color Psychology," Video 4:00 minutes, Skillsoft Ireland Limited © 2016, https://rit.skillport.com/skillportfe/main.action?path=summary/VIDEOS/107779
Color
Blue - relaxed, cool, dependable, committed
Orange - clever, entertaining, electrifying
Yellow - ignited, alert, optimistic, complimentary
Black - solid, smart, polished
Major Logo Iterations
Style Iterations
Screens
Characters
Background/Textures
Video Story Board
Surveys
Please help me improve this project by taking two quick surveys, your answers are greatly appreciated.
Please help me improve this project by talking two quick surverys, you're answers are greatly appreciated.
Survey 1 - Online Learning Experience
Survey 2 - Discussion in Ethics for Designers
Current Results
Current Results
Participants said they have a visual learning style
Participants said they have a visual learning style
Participants said they have a visual learning style
Participants said they have a visual learning style
Participants said they have a visual learning style
People said they like a combination of metaphors and data
with text and images
People said they like a combination of metaphors and data
with text and images
People said they like a combination of metaphors and data with text and images
People said they like a combination of metaphors and data with text and images
People said they like a combination of metaphors and data with text and images
Athena is a design system for an online learning experience that uses motion graphics and information design along with succinct narratives and engaging webpage browsing to help visual learners comprehend complex information. Conveying content like "Marketing Ethics" in an effective way can be difficult. Visual education can bridge the pathway to these topics by incorporating relatable narratives, imagery, audio, and interactions.
Source: Barbato, Robert. “Marketing Ethics.” MGMT 775: Business Ethics and Corporate Social Responsibility. Class lecture at Saunders College at Rochester Institute of Technology, Rochester, NY, USA, October 27, 2020.
Source: Barbato, Robert. “Marketing Ethics.” MGMT 775: Business Ethics and Corporate Social Responsibility. Class lecture at Saunders College at Rochester Institute of Technology, Rochester, NY, USA, October 27, 2020.
Source: Barbato, Robert. “Marketing Ethics.” MGMT 775: Business Ethics and Corporate Social Responsibility. Class lecture at Saunders College at Rochester Institute of Technology, Rochester, NY, USA, October 27, 2020.
Source: Barbato, Robert. “Marketing Ethics.” MGMT 775: Business Ethics and Corporate Social Responsibility. Class lecture at Saunders College at Rochester Institute of Technology, Rochester, NY, USA, October 27, 2020.
Adrianna Petrus
Thesis 2021 | Master in Fine Arts | Visual Communication Design
Graduate Director, Adam Smith; Co-Graduate Director, Mike Strobert
College of Art & Design | Rochester Institute of Technology | Rochester, NY
Thank You!
Please Check Out My Porfolio
© Adrianna Petrus, 2021
Thesis 2021 | Visual Communication Design M.F.A. | Rochester Institute of Technology
© Adrianna Petrus, 2021