Designing a web resource & learning tool to meet user/learner needs
•
1 j'aime•5,002 vues
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à Designing a web resource & learning tool to meet user/learner needs
Similaire à Designing a web resource & learning tool to meet user/learner needs (20)
Plus de Natalie Laderas-Kilkenny
Dernier
Dernier (20)
Designing a web resource & learning tool to meet user/learner needs
- 1. Design Story - Education Award Designing a web resource & learning tool to meet user/learner needs Natalie Laderas & Richard Melo
- 2. Who are we? In SlideShare access the presentation notes by clicking on the tab below labeled “Speaker Notes on slide…” Natalie Laderas Project Lead & Instructional Designer Richard Melo Content Expert & Writer
- 3. How it happened Need & Vision Tools at hand Design Make & Do
- 5. What is the Education Award? Need & Vision
- 6. What is the Education Award? Need & Vision
- 7. Rules change all the time… Need & Vision
- 9. Too much information Need & Vision Frightened & Overwhelmed Users
- 10. Read all of this? Need & Vision Irritated users.
- 11. Need & Vision
- 12. Design
- 13. Audience Learner Goals User Needs Design Approach Aesthetics Design
- 14. Design
- 15. Design
- 17. Expert knowledge + Design based on User Needs = Powerful information-based tool Design
- 20. Paper Prototype Testing? What does this look like? Design
- 21. Wireframes Tools at hand Design
- 22. Wireframes Tools at hand Design
- 23. Tools at hand Authoring Content Housing the Content Telling the Stories
- 24. Make & Do
- 25. Growing a Character/Story Make & Do 1 2 4 3
- 27. Building the House Make & Do
- 28. Building the House Make & Do
- 29. Building the House Make & Do
- 30. Building the House Make & Do
- 31. Building the House Make & Do
- 38. What We Learned?
- 39. Recap - How it Happened Need & Vision Tools at hand Design Make & Do
- 40. Q & A
Notes de l'éditeur
- Richard: Since 1966, Education Northwest has provided educators with top-quality professional development, technical assistance, evaluation, and research services. We continue to offer services that address relevant needs of the region and that are informed by more than 40 years of community-based work in Northwest schools. Our group is a division within Education Northwest called the Volunteer Leadership Center. We specialize in developing training and learning experiences and materials for Volunteer Leadership efforts such as VISTA/AmeriCorps and National Mentoring. The Volunteer Leadership Center (VLC) helps strengthen programs that engage volunteers to meet critical community needs. Through both national and regional partnerships, we provide training and technical assistance, including distance learning, to VISTA, AmeriCorps, Senior Corps, and Learn and Serve America programs.
- Natalie: We broke down the story of how our product was developed into four parts.
- Natalie: Let’s start with how our project began…
- Richard: It’s not this kind of award.
- Richard: Our project was to develop a resource around the Education Award, but let’s first explain what this is…. AmeriCorps was founded in 1994. Its essence: Volunteers serve for a year to meet critical community needs, while earning a meager living allowance, and at the end of their service they receive a nearly $5,000 education award, which they can use as a scholarship or to pay back student loans. It was like the Peace Corps, but it’s here, and I was an eager beaver who signed up and stayed two years. Afterward, I took a temp job with a nonprofit specializing in providing training to schools and volunteer programs, and in time, I worked my way into a position writing curriculum and doing stand-up trainings for AmeriCorps programs.
- Richard: One of the issues with this content was that there were complex rules that governed how the award could be distributed and used by recipients. These rules were adjusting all the time.
- Richard: While AmeriCorps members understood the nuts and bolts of how to process their education awards, there were strategies that could save AmeriCorps members thousands of dollars when going to school or paying back loans. The problem was that AmeriCorps members had nowhere to go to learn these strategies. There was a lot of policy information to wade through.
- Richard: Let’s take our starting problem into consideration: Imagine that you have a large body of text and information that includes rules and details that don't apply to all users or learners. Imagine that this information was originally shared in a linear format on a website. People weren't getting what they needed from this site and the information often had to be supplemented with live Q & A sessions from an expert.
- Richard: You ask yourself... is it fair to make everyone sit through the same amount of information every single time? Is it right to expect them to be able to sort through all of the information just to find the pieces of information that they per their specific role or needs?
- Natalie: Wouldn't it be easier to tailor which information is shared with which individual user? We thought it would be important before we did anything else to meet our users...
- Natalie: But we’re getting a bit into the design here…
- Natalie: Here at Education Northwest we’re of the mindset that thinking out or design thoroughly is key to the success of a product. Development is easy... Design is hard.
- Natalie: While the audience for our resource is specific -- current and recent AmeriCorps members -- there is quite a bit of variation within it. Our audience mostly includes young people with college backgrounds. We also have quite a few people right out of high school or in their 30s, 40s or beyond and at different stages of their lives than the right-out-of-college crowd. The challenge was to make sure that members from all of these audience can see something of themselves on the site, and find content that pertains to their specific needs.
- Natalie: We did this through the creation of seven personas, and each is represented by an AmeriCorps member on a different life path and with different ideas on how to use their education awards. While five of the seven have recent college backgrounds, one of them -- Marvin has never been to college -- and another -- Dolores -- is old enough to take advantage of policies around the award that relate only to AmeriCorps members 55 and older. Not only did the creation of these seven personas help us create ways to for people to see themselves in the site, it also helped us organize some of our most difficult content.
- Natalie: So there are a few reasons why we decided to incorporate the persona approach into the design. In e-learning design, personas can be useful in analyzing learners needs and habits and the needs lead to the design of effective instruction; habits lead to the design of effective contexts. E asier for student/user to identify information they need Provide a better model/structure for navigation Applies "Personalization Principle" to learning (Clark & Mayer, 2008) – User can relate to content based on the fact that it’s tailored to their needs.
- Natalie: We went to work to create something new for our very specific audience, but this time with a bigger team than we had previously. We now had two writers, an instructional designer, a web designer, flash designer, an illustrator, and voice talent at our disposal.
- Natalie: We also went into the process knowing ahead of time what type of user experience we wanted to create. These weren’t exactly learning objectives, but were goals we had for the way learners would use the course. We identified our design goals: 1. A powerful search box feature, to direct people who don’t want to spend much time on the site to the info they need in a hurry. Underneath first screens is an encyclopedic guide book that answers provides most of the content our visitors might seek. 2. Learning pathways for people who’d like to follow a train of information through the site, from general to specific. 3. Content tailored to user motivations. We framed this through the framework of “What do you want to do?” and leading learners to the answers. 4. Enticing features that help get learners interested in items they might not already be aware of and that can help them save money when going to school. We did this through comics and flash animations. There is one additional goal we set, and this one was for ourselves as much as it was for users. We wanted to make sure that it would be easy for a non-techie content writer to be able to make small text edits on the fly. We were able to do this by building the site in Drupal. Began with wireframe design Paper tested the organization and concept of the site Worked with developer (Drupal) to determine what was feasible and as an instructional designer I reviewed capabilities in Drupal with the available Drupal modules and verified what could be used to build our environment with our Drupal developer.
- Natalie: Using information architecture principles in combination with our user learning objectives and design goals, I developed what I call a Paper Prototype also known as a Wireframe for our design. As you can see the prototype was created in PowerPoint (because we needed a design and needed it fast).
- Richard: But before we got knee deep into design & development we wanted to test our ideas out? How do you do this?... Paper Prototype Testing. This is a method of user testing that we’ve since put into practice. Essentially what you’re doing is developing out the web interface or GUI in wireframes to be printed out and then put before user testers. We developed test questions or a test instrument that reflected the user goals we shared earlier.
- Natalie: Wireframes became a huge part of our design process. We used these wireframes as both a design and functionality plan. Some initial work planning out functionality possible using Drupal.
- Natalie: I worked with developer (Drupal) to determine what was feasible and as an instructional designer I reviewed capabilities in Drupal with the available Drupal modules and verified what could be used to build our environment with our Drupal developer. Found that as an instructional designer I could easily go into the Drupal community on line and learn about all the tools and modules.
- Richard: There were a lot of things going on…. Content was being developed and reviewed in Google sites while both the LMS and Stories in Flash were being prototyped and developed. In talking about the development process let’s start with the stories.
- Natalie: We spent some time writing our stories. But then we mapped them out in storyboards to test. The process: SME/ID develop whiteboard concepts & storyboards for “Common Craft” type & Videos Validated the concepts and got feedback from developer (Flash) Sent storyboard to artist and work with him to identify what was needed for the products Developers (Graphic Artist & Flash Developer) created the products (without audio). Product went through Internal review for feedback. Audio Recorded with Voice Talent Audio added to content and then reviewed again. Changes made as needed Sound Effects added.
- Natalie: Voila ! The story is born. This is a shot of the Lee Story which after fully conceptualized and developed tells the story of a former who is interested in using Public Service Loan Forgiveness and Income-Based Repayment to help him deal with overwhelming student loans.
- Richard: When we speak of “The House” we’re really referring to the web environment that would house this resource. There were a few steps and considerations: Began by finding out basic concepts of what was Why Drupal? Control over architecture via Taxonomy tools was desirable. Able to present content to uses in multiple ways. Looked at external uses of the platform. Built prototype (Stand Alone & in RC) Completed User Testing on both builds Tried working with RC build of Drupal but it didn’t meet our needs. Established concrete rationale for why creating a separate build was necessary. Decided to work on stand-alone Continued to build it out. But recognized the need to reevaluate/redesign concept. Developer/Designers worked together collaboratively to come up with a mock up for improved design.
- Richard: Began by finding out basic concepts of what was Why Drupal? Control over architecture via Taxonomy tools was desirable. Able to present content to uses in multiple ways. Looked at external uses of the platform. Built prototype (Stand Alone & in RC) Completed User Testing on both builds Tried working with RC build of Drupal but it didn’t meet our needs. Established concrete rationale for why creating a separate build was necessary. Decided to work on stand-alone Continued to build it out. But recognized the need to reevaluate/redesign concept. Developer/Designers worked together collaboratively to come up with a mock up for improved design.
- Richard: Began by finding out basic concepts of what was Why Drupal? Control over architecture via Taxonomy tools was desirable. Able to present content to uses in multiple ways. Looked at external uses of the platform. Built prototype (Stand Alone & in RC) Completed User Testing on both builds Tried working with RC build of Drupal but it didn’t meet our needs. Established concrete rationale for why creating a separate build was necessary. Decided to work on stand-alone Continued to build it out. But recognized the need to reevaluate/redesign concept. Developer/Designers worked together collaboratively to come up with a mock up for improved design.
- Richard: Began by finding out basic concepts of what was Why Drupal? Control over architecture via Taxonomy tools was desirable. Able to present content to uses in multiple ways. Looked at external uses of the platform. Built prototype (Stand Alone & in RC) Completed User Testing on both builds Tried working with RC build of Drupal but it didn’t meet our needs. Established concrete rationale for why creating a separate build was necessary.
- Richard: Decided to work on stand-alone Continued to build it out. But recognized the need to reevaluate/redesign concept. Developer/Designers worked together collaboratively to come up with a mock up for improved design.
- Richard: Going back to our toolset, let’s revisit why we chose Drupal. We really wanted a robust CMS that could be accessed and edited for content by the Content Experts & Writers w/o developer help. Hence dealing with frequently changing rules.
- Richard: Let’s get back to our design goals… and take a look at the final product or the Ed Award site. How did we do? How did our design attempt to address these goals? Drupal was really helpful in allowing us to sort and repackage content in several ways to meet the users needs.
- Richard:
- Richard:
- Richard:
- Natalie: http://edaward.org/ It’s important to have a good handle over the tools being used to develop the course before design occurs. Use your technical people’s knowledge and expertise as much as possible in the design process. Having our web, graphic arts, and Flash developer involved with the design so they could tell us what was possible and add to the creative mix was key to the success of this project. Be creative with the tools you use for design… we used everything from white boards & cutouts to word documents & ppt. slides to create the storyboards.
- Natalie: Need --> Large amount of content with different users and personas. Needed an efficient and appealing solution to get right content to the user. Tools --> Original - Moveable Type / New - Drupal & Flash Design --> Involved the creativity of all staff and developers & artist Based on User Persona needs Design and Development revolved around a plan to avoid costly re-work Development --> Drupal Content --> House for all content & Guidebook Flash Stories --> Artwork first then development