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:
- Topics ‒ types of content (or tasks), which typically have different dialogue acts (subtopics or steps)
- Related Topics ‒ provides transition from current topic to semantically associated topics
- Group of Topics ‒ provides introduction to access or explore topics within a group
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:
- Conceptual Design ‒ designing what the dialogue should be about
- Logical Design ‒ designing how the dialogue will work
- 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 Role | User Profile |
|---|---|
| Content Seeker |
|
| Content Provider |
|
Functional Requirements
I determined that the core functional requirements for this application would include:
- Search OER content by standard, grade level, subject, and other criteria (e.g., keyword tags, highest rated, etc.)
- Add new OER content (with appropriate metadata)
- Revise OER content (updating metadata if necessary)
- Remix OER content to form customized content (with appropriate metadata)
- Identify revised and remixed versions of OER content (i.e., identify parent-child relationships between content)
- Rate OER content using standardized set of evaluation criteria
- Identify permissions and restrictions of Creative Commons licenses associated with specific OER content
- Download or export OER content (e.g., to import into school’s learning management system)
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:
- Instructional content consists of: Lessons, Units (sequence of lessons), and Courses (sequence of units).
- Assessment content consists of: Items/Tasks and Assessments (sequence of items/tasks).
- Content Resources (readings, images, videos, etc.) can be used in different instructional or assessment content.
- Lessons and items/tasks are aligned with state and national Learning Standards.
- Lessons, units, and courses have associated assessments.
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:
- Topics ‒ For each topic, I described its dialogue acts (subtopics) and identified the navigational pattern among the acts (i.e., all-to-all, index, guided tour, or guided tour with index).
- Related Topics ‒ For each topic, I identified its semantically related topics and described transition acts to present the related topics.
- Group of Topics ‒ For each group of topics, I described introductory acts to present the available groups (or the available parameters to select a group).
Excerpt of Written Description of IDM Logical Design
Example Description of Single Topic (single instance)
- Topic: Add Content
- Navigation Pattern: Guided tour navigation leads user sequentially through acts.
- Dialogue Acts:
- Create Content Template ‒ User selects type of content to be added (content resource, lesson, unit, course, item/task, or assessment) and enters basic metadata (title, etc.).
- Author Content ‒ User authors and/or uploads content using editor. User can also insert other applicable existing content (i.e., content resource, item/task, lesson).
- Preview Content ‒ User can preview content.
- Approve Content ‒ User finalizes/verifies all metadata associated with content, selects CC License, and submits.
Example Description of Multiple Topic (multiple instances)
- Topic: Lesson
- Navigation Pattern: All-to-all navigation allows user to switch among dialogue acts freely.
- Dialogue Acts:
- Summary ‒ Provides unique ID, title, and description of lesson, including relevant metadata such as learning standard(s), grade level(s), estimated time to complete, materials required, CC license type, author/contributor, etc.
- Lesson Plan ‒ Provides detailed lesson plan for instruction and student activities.
- Lesson Assessment ‒ Lists assessment(s) for the lesson.
- Reviews ‒ Provides summary of ratings and feedback from all users, as well as the ability to submit a new review.
Example Description of Transition Act to Related Topics
- Topic: Lesson
- Related Topic: Unit
- Transition Act: Included in (Lesson → Unit)
- Content: Unique IDs and titles of Units
- Organization: List of units ordered by title
- Transition Strategy: Index navigation pattern
Example Description of Introductory Act to Group of Topics
- Introductory Act: Highest Rated Lessons
- Content: Unique IDs and titles of Lessons
- Organization: List in descending order by rating
- Transition Strategy: Index navigation pattern
Example Description of Parametric Introductory Act to Multiple Group of Topics
- 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
- 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:
- each topic (single and multiple) with its dialogue acts and navigational pattern
- semantic relationships that allow users to transition from one topic to another
- each group of topics (single and multiple) that allow users to select a topic from a group
- landmark content - i.e., the main navigation menu that will appear on every page
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
Close-up of Guided Tours (for Tasks and Tutorials)
Close-up of Semantic Relationships and Navigation Among Topics
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 ‒ Highest Rated Lessons
Page Design ‒ 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.