Immersion Fall 2008 Final Presentation Presented By Heather Hampton-Barclay Monu Harnal Carl Hayes Rachel Hudson Jennifer Loach Cammise McInnis John Oluyomi Eric Rose

The Process Analysis Design Tools Training Webshop Development This semester our instructional design efforts can be categorized into four main areas: Analysis Design Webshop development Tools training

Today’s Agenda Review data as determined by the needs and performance analysis Explain design decisions and discuss rationale Introduce prototype, wire frames, and visual designs Present first draft webshop tutorials on Audacity and Camtasia Discuss goals for next semester

Performance Analysis

Performance Analysis Problem: T/TAC Online is in need of modern and robust online training materials. Proposed solution: Introduce new tools, create model webshops, make site more appealing. Data Gathered through interviews with Dr. Mike Behrmann, Mrs. Clare Talbert, and Mrs. Mary Wilds

Needs Analysis

Current Technology Levels (Tools)

In Terms of Support Preferences Assistance from an experienced user A formal training workshop Things to Consider How to Guide Online Help Menu Video Tutorial

In Terms of Delivery Preferences: Simulations and demonstrations Video/ Self-running PowerPoint Presentations Audio Assessments

Needs Analysis Findings

Recommended Design Direction Recommend tools and provide support that meets the staff's needs effectively and efficiently Make the process of creating Webshops more efficient by updating the template interface Design an “ideal Webshop” that demonstrates what good interactive training looks like and how to develop it using our recommendations and designs Research and develop a system of interaction between T/TAC staff collaborating on projects

First Persona-Previous Author Name: Carol Hesse Age: 49 Job Title: Autism/Alternate Assessment Coordinator Length of time in position: 21 yrs Education: Masters Degree in Special Education

Carol Hesse Familiar with MS Word and PowerPoint Like the current template system but feel limited Would like to see auto save Would like automatic HTML formatting options Would like collaboration Video Narration

Second Persona-Potential Author Name: Nellie Newman Age: 37 Job Title: Instructional Consultation Team Specialist Length of time in position: 3 months Education: Masters Degree in Special Education

Nellie Newman Not Tech Savvy Want support Would like feedback Would like to be able to collaborate Want the goals and objectives clearly displayed Based on the information we collected in the Needs Analysis, we created persona number two. Nellie Newman, our second persona, was created by combining surveyed data we collected from T/TAC Staff who have never completed or created a Webshop, educators, and the parent of a special needs child. Through our research, we learned that these potential users are not very tech-savvy. The people we surveyed are interested in receiving support through “cheat sheets”, online help, and/or hints. Most of those surveyed were interested in some sort of feedback and collaboration: chats, email access, etc., especially amongst the learner and the facilitator. They also indicated the importance of displaying the goals and objectives of the training for the benefit of the learner.

Strategy Documentation Concept Map Competitive Analysis Content Inventory

We began with the Concept Map to illustrate what features we wish to see on T/TAC online based on the collective information that became our two personas. The map indicates how the user navigates the T/TAC site and interacts with each feature.

Competitive Analysis T/TAC Online Training competitive analysis Various competitive advantages Tools and Support Website Interface Ideal Webshops and E-learning Social Networking Design solution and direction based on Needs Analysis Our Usability Team assessed the competitive landscape of websites design with a view to bridging the gaps enunciated in both our Performance Analysis and Needs Analysis. TTAC Online Competitor analysis identifies the strengths and weaknesses of competing websites before starting work on our prototype. Our tour of four to ten competing websites shows how typical tasks are achieved. We presented and discussed the different competitive advantages inherent in the websites we assessed. Among which are Tools/Support, Interface, Ideal webshops/e-learning, social networking. These competitive advantages are in consonance with our overall goal and design direction, which then parleyed into what fits well with the culture of TTAC organization. Ultimately the 2008-2009 Immersion Team will pursue the following design solutions/direction as indicated in our Needs Analysis.

Content Inventory “How to use” software to create Webshops Template Enhancements Support/Help in Online Training Tab Online Training Page E-Learning (best practices to create Webshops) Social Networking (Internal for T/TAC Staff) Headings content content details example URL

Content Inventory A content inventory is a structured database of content resources containing information that will be analyzed to inform decisions made about the management of content within an organizational website. The 2008/2009 Immersion Team in our efforts at achieving the over-arching goal of having a clear understanding of the major chunks of TTAC Online, surveyed other similar websites with a view to identifying the missing elements on TTAC Online. This content inventory helped us in our design direction as it relates to TTAC Online website and provided specific information required to satisfy the clearly stated analytical objectives of our project. This well executed content inventory, and analysis based on the information it contains, gave us a good pointer to our ultimate design direction.

Design Documentation

Design Documentation Visual Design Site Map Use Cases Flow Charting Wire Framing Some key features about T/TAC Online that we (heard our client express) identified during the earlier phases were: make Webshops more dynamic and incorporate the best practices of e-learning Create templates that are more intuitive so that staff are enticed to create online training We also identified that “new” staff: Would embrace a collaborative, social environment. With these ideas (and the data we collected during the performance analysis, needs analysis, and strategy documentation) in mind, we began to “develop” and “design”. The design documentation includes: the site map, use cases, flowcharting, Wire Framing, Visual Design.

Site Map KEY The Site Map expands on the features illustrated earlier in the concept map (during the strategy documentation). As you can see here the “NEW” features are illustrated by the blue circles, and the “existing” features are in orange. As we thought of ways to entice staff to create webshops, we realized a new “STAFF PAGE” linking to collaboration, support for software & resources, and creating webshops/workshops might help to increase motivation. Now Monu is going to speak about Use-Cases and the Flowcharting Process.

Site Map New Pages – Staff Login View Staff Page My Online Training Webshops Workshops Support Software Resources Collaboration Adobe Connect Discussion Forum Staff Library Online Database File Sharing While developing the site, the immersion team identified these new pages to be added to T/TAC Online. As you can see here, we are suggesting that when staff login their view should include a new tab titled “Staff Page.” As we thought of ways to entice staff to create webshops, we realized this new “STAFF PAGE” should include: A link to “My Online Training” – the personal avenue for staff to view and add webshops A link to Support for software and resources A link to Collaboration – to incorporate a discussion forum and link to Adobe Connect A link to a Staff Library – an online database to house files that staff would like to share We believe that by adding these pages to the staff view will fulfill the needs of our client. These features include an intuitive design for creating online training and embrace a collaborative, social environment within T/TAC staff. Now Monu is going to speak further about Use-Cases and the Flowcharting Process.

Usage Driven Design Define successful websites? User interface/experience Ease of use Ease of navigation What drives design User/target audience Create standards for Development While in the Design Phase we were introduced to Usage Centered Design modeling – a technique developed by Larry Constantine and Lucy Lockwood. This Process focuses on the users experience. So while designing the Staff Page we had to examine a few aspects about the purpose of the page especially examine what makes a successful website?: 1. How will the user experience the site to accomplish their task? 2. What is the level of ease to use the site? 3. How can the process be more efficient? 4. And if we do make changes to the existing site, how will this effect the user? 5… and what behaviors might the user need to change or incorporate? Websites have evolved and so has designing/developing them. Designers and developers are realizing that a successful website takes the user and the usage of the site into consideration.

User vs. Usage Driven Design User Driven: Limited to what user wants and not to needs Usage Driven: Roles users play in relation to the system Structure of the work users need to accomplish within the system Organization of the content and how it supports the user interface Usage Driven Design is: - flexible approach to designing effective websites It considerations: roles, structure and organization Emphasis is with the actual process and navigation within the site So our process involved ABSTRACT MODELING using colored post it notes, a lot of wall space and keen organizational skills. Allowed us to walk in the users shoes to accomplish tasks that were identified to us during the Needs Analysis The Usage Driven Design modeling is further refined into the next process of FLOW CHARTING. Please remember this is an iterative process

Collaboration

Gather Information

Support

The proposed Staff Page includes: Flow Charting The proposed Staff Page includes: Create a New Webshop My Online Training View My Online Training Support Collaboration Staff Library Personal Profile What is Flow Charting? Visual process usually Centered around a specific task or function. Different shaped boxes Arrows and signs show the many steps in a process. These shapes represent actions needed to accomplish a tasks In the design phase we: Created a site map Incorporated an abstract modeling technique Refined the model by flowcharting each process The next phase of design is wire framing that Eric will explain further

Wireframes

What are Wireframes? +

Visual Design

Tutorial Prototype Audacity Camtasia

Goals for Next Semester

Goals for Next Semester Flesh out other pages such as Collaboration, View My Online Training, Personal Profile, and Staff Library Develop in-depth support tutorials for Camtasia, Audacity, and Captivate Conduct user testing and formally evaluate our prototype