Case Study: Architecture Map of Education App

Problem

This individual project was completed for a graduate course in Human-Computer Interaction at the Indiana University School of Informatics and Computing at IUPUI.

I was challenged to design the information architecture and navigation for a novel, content-intensive interactive system by applying a design approach known as the Interactive Dialogue Model.

I decided to design a web application to allow K-12 educators to find and share Open Education Resources (OER) — such as curriculum units, lesson plans, quizzes, etc. — that are free to adopt or adapt under Creative Commons licenses. Educators are increasingly seeking quality OER content to improve student learning, while also saving time and cost for teachers and schools.

Approach

Interactive Dialogue Model

The Interactive Dialogue Model (IDM) is an approach that uses the metaphor of conversation to conceptualize and design the interaction of users with a system. IDM is well-suited for designing complex, content-intensive interactive applications.

IDM views the user experience as a dialogue with the system. This dialogue can be conceptualized in terms of:

Each topic (or group of topics) can be “single” or “multiple” depending on whether it has one unique instance or multiple instances. For a multiple topic (or multiple group of topics), the application must provide a way for the user to select a specific instance. For example, in a music application, Artists would be a multiple topic (each specific artist is an instance), and Artists by Genre would be a multiple group of topics (that includes groups such as Hip-Hop Artists, Rock Artists, etc.).

Once preliminary user and functional requirements have been established, IDM design proceeds in three stages:

  1. Conceptual Design ‒ designing what the dialogue should be about
  2. Logical Design ‒ designing how the dialogue will work
  3. Page Design ‒ designing a page structure to support the dialogue

By focusing on user dialogues with the system, IDM allows the information architecture and navigation to emerge naturally from the intended user experiences.

The IDM conceptual and logical designs can be combined into a single visualization: an isometric map that represents the architecture allowing a user to interact with the application. The “mock 3-D” isometric map offers a “birds-eye” view of the entire application, as well as the ability to zoom in to examine the “ground-level” details of specific content and interactions.

The IDM page design identifies the types of elements and links that should be present on a particular type of page within the application. While this page design is often presented as a visual mockup, it simply represents a starting point for a user interface design to be finalized later.

Solution

I used IDM to design the architecture for a web application to allow educators to easily find, contribute, revise, remix, rate, and use OER content (such as lesson plans, quizzes, etc.). I tentatively named the application as “OpenED Commons.”

The OER content in the application would have associated metadata (including but not limited to: content area, grade level, learning standard, etc.) to allow searching and categorizing of content — but also to ensure compliance with the Learning Resource Metadata Initiative (LRMI) specification and other educational metadata specifications, which help ensure content is compatible with learning management systems and is accessible to the broadest range of students.

User Profiles

I determined there were two user roles for this application: content seekers and content providers. Most users will be seeking content, while a smaller number of users will be providing content. Of course, some users will alternate roles at different times. I conducted background research on K-12 educators and created a user profile for each role.

User Profiles Based on Role
User Role User Profile
Content Seeker
  • Primary goal is to easily find educational resources that meet their criteria (subject, grade level, aligned to state learning standards, etc.)
  • K-12 educator (classroom teacher, curriculum coordinator, etc.)
  • 22-65 years old (almost half will be under 40 years old)
  • About 75% of K-12 teachers are female
  • Has at least Bachelor’s degree (about half will have graduate degree)
  • Years of teaching experience will vary (average 10-15 years, about 10% less than 3 years)
  • School demographics will vary (urban vs. suburban vs. rural, public vs. private, etc.)
Content Provider
  • Goal is to contribute educational resources related to specific subject
  • Likely to be current or former K-12 educator (but not necessarily)
  • Could be pre-service teacher, researcher, informal educator (museum docent, etc.), industry practitioner, or other expert interested in contributing specific content
  • Some might provide content that is not accurate, not aligned, or not appropriate in some way (may need content review or moderation process)

Functional Requirements

I determined that the core functional requirements for this application would include:

User Scenarios

I created multiple user scenarios to better conceptualize why and how different people might use the application.

Example User Scenario

User Scenario 1: Maren is 28-year old teacher with a Bachelor’s in Mathematics Education. She has been teaching Mathematics to middle school students for 6 years at a small rural school. Her state recently implemented the Common Core State Standards for Mathematics, which are more rigorous than the previous state standards. Her school has a limited budget for updating textbooks and other instructional materials, so she is interested in finding open educational resources to support the teaching of the new standards. A fellow teacher suggests trying OpenED Commons to find OER materials developed and shared by other educators. Maren browses the site, searching by Math standards. She finds several highly rated lesson plans targeting some of the new standards. Browsing through the lessons leads her to discover related assessments and unit plans. She creates an account and downloads a Math unit and assessments to use with her students. She plans to add some of her own content to share with other teachers. Maren is excited to join a virtual community where teachers can help each other improve student learning experiences.

Dialogue Topics, Relationships, and Groups

I created the IDM conceptual design for the application by identifying its specific topics, the semantic relationships among the topics, and relevant groups for organizing and accessing topics.

The types of educational content (and their relationships) can be summarized as follows:

The application would also need topics for: adding content, revising/remixing content, tutorials, OER Licenses, etc.

I decided that relevant groups of topics would include: highest rated content, newest content, content by learning standard, content by grade level, content by topic, etc.

Next, I created a written description of the IDM logical design for the application:

Excerpt of Written Description of IDM Logical Design

Example Description of Single Topic (single instance)

Example Description of Multiple Topic (multiple instances)

Example Description of Transition Act to Related Topics

Example Description of Introductory Act to Group of Topics

Example Description of Parametric Introductory Act to Multiple Group of Topics

  1. Choose Parameter Value
    • Introductory Act: Lessons by Standard
    • Content: Alphanumeric codes and text of Learning Standards
    • Organization: List of standards ordered by framework hierarchy
    • Transition Strategy: Index navigation pattern
  2. Parametric Introductory Act
    • Introductory Act: Lessons by {Standard X}
    • Content: Unique IDs and titles of Lessons
    • Organization: List of lessons ordered alphabetically by title
    • Transition Strategy: Index navigation pattern

Architecture Map

I used the IDM logical design to create an isometric map of the user experience architecture for the application.

The isometric map was created in Microsoft PowerPoint using an open-source library of IDM map elements that can be copied, pasted, and modified to generate large architecture maps for websites and applications.

The isometric map shows:

The map is intended to be viewed on a large screen (or printed on a large sheet). Zooming out provides a “birds-eye” view of the application’s organization and navigation, while zooming in shows “ground-level” details of specific content and interactions. The map can be shared with a range of internal and external stakeholders to examine the user experience flows enabled by the information architecture.

Isometric IDM Architecture Map for OpenED Commons

View Larger Map

Architecture Map Zoomed Out

Close-up of Guided Tours (for Tasks and Tutorials)

Zoomed In Map Showing Guide Tours

Close-up of Semantic Relationships and Navigation Among Topics

Zoomed In Map Showing Navigation

Page Design

Finally, I created several sample page designs based on the information architecture and navigation represented in the isometric map. These page designs identify the types of elements and links that should be present on a particular type of page, but the page designs represent only a possible starting point for the user interface design. The ultimate goal is to generate finalized page templates to ensure consistency across the application and enable the experiences envisioned in the architecture map.

Page Design ‒ Lessons Introduction

Page Design for Lessons Introduction

Page Design ‒ Highest Rated Lessons

Page Design for Highest Rated Lessons

Page Design ‒ Specific Lesson

Page Design for Specific Lesson

Reflection

IDM provides a useful approach for designing large information-intensive websites and applications. The IDM isometric architecture map provides the dual benefit of being able to zoom out to view the high-level organization and navigation of an application, while also being able to zoom in to examine low-level details and interactions. These maps are also useful for sharing with non-designer stakeholders, who can quickly understand them after a basic explanation of the map legend.

Next Case Study