top of page
Screenshot 2024-08-08 at 10.37.07 AM.png

Educating Sage

Project Overview:
This website serves as a comprehensive resource guide for professionals in adult education. Developed as part of the IDET 6345 Course, it showcases the application of visual literacy and data visualization techniques to enhance the user experience. Educators can utilize this platform to access:
          Current research in adult learning
          Relevant news and trends
          Practical tools for designing effective adult learning experiences
The goal is to empower adult educators with valuable resources, presented in an engaging and visually appealing format.

Project Rationale

Introduction

Throughout the course of this project within IDET 6345 Visual Literacy and Data Visualization, I applied principles from visual literacy, data visualization, and user experience design to create an effective website for adult education professionals. The process involved extensive research, practical application of design tools, and thoughtful consideration of user needs.
 

Application of Weekly Readings
In the early stages, I explored key theories in visual literacy, focusing on how visual elements can enhance learning and communication. The work of scholars like Kress and Van Leeuwen (2020) informed my understanding of visual grammar and how it applies to web design. I also delved into the Common European Framework of Reference for Visual Literacy (CEFR-VL, 2016), which provided a structured approach to developing visual competencies.

 

The research by Liu and Wu (2023) on the effects of working memory and relevant knowledge on reading texts and infographics was especially influential. Their findings on how different types of content are processed informed my decisions on balancing text and visual elements throughout the site. I aimed to create a design that would accommodate various learning styles and cognitive processes.In terms of iconography, I applied insights from Wolfe's guide (Wolfe, 2022) to create a consistent and meaningful set of icons for the website. This involved considering cultural contexts and universal symbols to ensure that the icons would be easily understood by a diverse audience of adult education professionals.

UI/UX Design Elements and Strategies


In developing the UI/UX design elements and strategies for the Educating Sage website, I focused on creating an intuitive, engaging, and accessible platform for adult education professionals. The design choices were guided by research-based principles and tailored to meet the specific needs of the target audience.

Visual Hierarchy and Information Architecture:
To address the cognitive load considerations highlighted by Liu and Wu (2023), I implemented a clear visual hierarchy. This involved organizing content into distinct sections, using consistent headings, and employing whitespace effectively. The goal was to guide users' attention naturally through the site, reducing cognitive strain and improving information retention. For instance, the home page features a recognizable hero section highlighting key resources, followed by clearly delineated sections for recent research, news, and tools spaces.

Navigation and User Flow:
Drawing from Hailey et al.'s (2015) emphasis on intuitive navigation, I designed a streamlined navigation system. The main menu is consistently placed and includes descriptive labels for each section. I also implemented a "breadcrumb" navigation feature for deeper pages, allowing users to easily track their location within the site's structure. This approach supports adult learners who may have varying levels of digital literacy, ensuring they can confidently explore the site's resources.

Responsive Design:
Considering the diverse ways adult education professionals might access the site, I employed responsive design principles. Using Framer's capabilities, I created flexible layouts that adapt seamlessly to different screen sizes and devices with specific breakpoints. This ensures that whether a user is accessing the site on a desktop computer in an office or a tablet during a commute, the experience remains consistent and user-friendly.

Interactive Elements:
To enhance engagement and support different learning preferences, I incorporated interactive elements throughout the site. This includes links to provide data sources, as well as interactive infographics planned in the research section. These features, inspired by Knaflic's (2019) approach to data storytelling, allow users to explore complex information at their own pace, supporting self-directed learning.

Accessibility Considerations:
Given the potential diversity of the user base, accessibility was a key concern. I implemented high color contrast ratios for text and background to ensure readability, with a purposeful minimalist style applied to the website. Interactive elements planned, are designed to be keyboard-accessible, supporting users who rely on assistive technologies. These choices align with the inclusive approach suggested by Smith and Robertson (2021) in their framework for infographic learning.

Data Visualization:
For the research section, I applied principles from Majooni et al. (2018) regarding infographic structures and cognitive load. This involved creating clear, concise visualizations that present complex data  and topics in easily digestible formats. I used a consistent color scheme and design style across all data presentations to maintain visual coherence and reduce the cognitive effort required to interpret different visualizations.

Feedback and Iteration:
Recognizing that effective UX design is an iterative process, I plan to build in mechanisms for user feedback. This includes a prominently placed feedback form and analytics tools to track user behavior. This approach allows for continuous improvement of the site based on real user experiences and needs.

By integrating these UI/UX design elements and strategies, the Educating Sage website aims to provide a user-centric platform that not only delivers valuable content but also enhances the overall learning experience for adult education professionals. The design choices reflect a careful balance between aesthetic appeal, functional efficiency, and cognitive considerations, creating an environment that supports exploration, learning, and professional development in the field of adult education.

​

Visual Data Communication
The visual data communication choices for the Educating Sage website were carefully considered to effectively convey complex information to adult education professionals from lengthy reports from statewide, national, and international relevant organizations. The rationale behind these choices was rooted in research-based principles and tailored to the specific needs of the target audience.

Context-Driven Design:
Following Knaflic's (2019) emphasis on understanding context, I began by analyzing the types of data most relevant to adult education professionals. This included demographic trends as seen in the WHO report summation, learning outcomes (seen in Texas Workforce Commision's Adult Education Learning Standard's Report), funding allocations (soon to be featured in the Adult Education and Literacy Act Summation, and program effectiveness metrics (planned for feature outside of this course's time constraints). For each dataset, I considered the audience's prior knowledge, potential use cases, and the key insights to be communicated. This context-driven approach ensured that each visualization was purposeful and aligned with the users' needs. The choice of visualization type for each dataset was guided by the nature of the data and the intended message. This careful selection process, informed by Knaflic's (2019) guidance, ensures that each visualization type enhances understanding rather than complicating it.

Clutter Reduction and Cognitive Load Management:
To address the cognitive load considerations highlighted by Liu and Wu (2023), I applied a minimalist approach to data visualization. These choices help users focus on the most important information without being overwhelmed by extraneous details. This involved:
1. Removing non-essential gridlines, labels, and decorative elements.
2. Using a consistent, muted color palette with strategic use of accent colors to highlight key data points.
3. Incorporating white space to create visual separation and reduce cognitive strain.
4. Providing clear, concise titles and annotations to guide interpretation.

Interactive and Exploratory Elements:
Recognizing the diverse needs and interests of adult education professionals, I plan to incorporate interactive elements into many of the visualizations. This approach, inspired by the findings of Majooni et al. (2018) on infographic structures and viewer comprehension, allows users to:


1. Filter data based on specific criteria (e.g., geographic region, time period, or program type).
2. Hover over data points to reveal more detailed information.
3. Zoom in on specific sections of complex visualizations for closer examination.

These interactive features support self-directed exploration, catering to users with varying levels of data literacy and specific information needs.

Progressive Disclosure:
To manage the complexity of some datasets without overwhelming users, I plan to employ a progressive disclosure approach. This involves presenting a high-level overview of the data initially which is currently live on the website, with options to "drill down" into more detailed information (future iteration). This strategy aligns with Smith and Robertson's (2021) framework for infographic learning, which emphasizes the importance of scaffolding information for effective comprehension.

Narrative Integration:
Following Knaflic's (2019) storytelling approach, I integrated narrative elements into the report presentations. Each major visualization or set of related visualizations is accompanied by a brief narrative that:
1. Provides context for the key visual.
2. Highlights key findings, trends, standards, or topics.
3. Suggests potential implications for adult education practice.

Accessibility and Alternative Formats:
To ensure inclusivity, all visualizations are accompanied by alternative text descriptions and, where appropriate, tabular data representations will be available as an interactive alternative element to visualizations. This approach ensures that the information is accessible to users with visual impairments or those who prefer to analyze raw data.

By applying these visual data communication strategies, the Educating Sage website aims to present complex adult education research and statistics in a clear, engaging, and actionable format. These choices reflect a commitment to enhancing data literacy among adult education professionals while providing them with valuable insights to inform their practice and decision-making.

Conclusion
The final product reflects a synthesis of theoretical knowledge and practical skills. The website aims to serve as a comprehensive resource for adult education professionals, presenting research, news, and tools in a visually engaging and easily navigable format. By applying visual literacy principles, data visualization techniques, and user-centered design (Holmes, 2022), I've created a platform that not only informs but also enhances the learning experience for its users (Beiard et al. 2020).

Moving forward, I plan to continue refining the website based on user feedback and emerging research in the fields of visual literacy and adult education. This project has laid a strong foundation for creating effective digital resources that bridge the gap between academic research and practical application in adult education through an iterative process of research collection and synthesis (Saldana, 2021).

References

Tools

Beaird, J., Walker, A., & George, J. (2020). The principles of beautiful web design. SitePoint Pty Ltd. ​ Börner, K., Bueckle, A., & Ginda, M. (2019). Data visualization literacy: Definitions, conceptual frameworks, exercises, and assessments. Proceedings of the National Academy of Sciences - PNAS, 116(6), 1857-1864. https://doi.org/10.1073/pnas.1807180116 Fragou, O., & Papadopoulou, M. (2020). Exploring infographic design in higher education context: towards a modular evaluation framework. Journal of Visual Literacy, 39(1), 1–22. https://doi.org/10.1080/1051144x.2020.1737904 Hailey, D., Miller, A., & Yenawine, P. (2015). Visual Literacy and Visualization in Instructional Design and Technology for Learning Environments. In D. M. Baylen & A. D’Alba (Eds.), Essentials of Teaching and Integrating Visual and Media Literacy: Visualizing Learning (pp. 23-45). Springer. ​ Holmes, N. (2022). Joyful infographics: a friendly, human approach to data. AK Peters/CRC Press. ​ Knaflic, C. N. (2019). Storytelling with data: let's practice!. John Wiley & Sons. ​ Kress, G., & Van Leeuwen, T. (2020). Reading images: The grammar of visual design. Routledge. ​ Liu, C.-Y., & Wu, C.-J. (2023). Effects of working memory and relevant knowledge on reading texts and infographics. Reading and Writing, 36, 2319–2343. https://doi.org/10.1007/s11145-022-10368-1 Majooni, A., Masood, M., & Akhavan, A. (2018). An eye-tracking study on the effect of infographic structures on viewer’s comprehension and cognitive load. Information Visualization, 17(3), 257–266. https://doi.org/10.1177/1473871617701971. ​ Saldaña, J. (2021). The coding manual for qualitative researchers (4th ed.). SAGE Publications. ​ Samara, T. (2023). Making and breaking the grid: A graphic design layout workshop. Rockport Publishers. Schonau, D., Karpati, A., Kirchner, C., Letsiou, M. (n.d.) A new structural model of visual competencies in visual literacy: The revised common European framework of reference for visual competency. European Network for Visual Literacy (ENViL) available from pages.pedf.cuni.cz/gramotnost. Schrock, K. (2012). Infographic Rubric. Retrieved from http://www.schrockguide.net/uploads/3/9/ 2/2/392267/schrock_infographic_rubric.pdf Smith, J. M., & Robertson, M. K. (2021). (Info)Graphically inclined: A framework of infographic learning. The Reading Teacher, 74(4), 439–449. https://doi.org/10.1002/trtr.1966. Visual literacy and visualization in instructional design and technology for learning environments. (2019). European Journal of Contemporary Education, 8(1). https://doi.org/10.13187/ejced.2019.1.103

Adobe Illustrator, https://www.adobe.com/in/products/illustrator.html Adobe Animate, https://www.adobe.com/products/animate.html Canva, https://www.canva.com/ Framer, https://www.framer.com Youtube, https://www.youtube.com/

Project Website

bottom of page