Design Process Model

This week, we read about the ACE model (Analyze, Create, Evaluate) and how it can be used to guide the design process. Lohr (2008) recommends that the designer begin by considering the instructional context for the visual, and end by critically editing the visual. Of course, this is an iterative process, and can go through many revisions and stages of development.

My task this week was to create a "map" of my tutorial website, using the ACE model of design. I plan to use the visual I created on the home page of my website, so that students (and teachers) may orient themselves and preview what they are about to do throughout the three lessons. Additionally, I plan to carry the theme (colors and icons) throughout the website.

I struggled a bit getting started, I think because I was trying to make my visual very graphics-heavy. I really wanted to come up with icons that would "say it all", but in the end, text is needed to convey the finer points of each lesson. The students that will be using my website are high school age, so they should respond to the bold and repeated icons, but will also appreciate having the chance to read the details of each lesson. Students of this age appreciate knowing what they are about to learn, and how. I tried to answer those questions very succinctly, using the format of "new information", "practice", and "extension activities" for each lesson.

I also made the decision to write this menu/map in English, keeping in mind that, although this is a tutorial for Spanish students, they are beginning learners, and wouldn't find the text as useful if it were presented in Spanish. There will be places for that elsewhere on the website.

I think my visual will work because its instructional function is to provide organization for users of the website. Lohr recommends that this type of visual "make information easier to understand" (2008, p. 75). In clarifying ideas for the viewer, I put the principles of CARP to work (Lohr, 2008, pp. 80-85):

• Contrast is used to clearly separate the three lessons from the background and from each other. Bold headlines and icons are meant to grab the viewer's attention.
• Alignment shows ordinate and subordinate ideas, as well as the order in which a user would progress through the tutorial activities.
• Repetition of content, organization, and icons "increases the simplicity of the design and increases the sense of relationship between the elements" (Lohr, 2008, p. 84).
• Proximity shows how elements are grouped.

For the user-test, I showed this image to my husband. He provided the following comments and feedback:

• He thought the layout was very organized, obvious, and consistent. It reminded him of an outline (with I, II, III and A, B, C).
• He could see the pedagogy within each lesson.
• He liked the "soft, pleasing colors".
• He thought the icon guide provided at the bottom was a good idea. The "information" icon is obvious, but the other two icons are less obvious, so it was good to clarify their meaning.

Based on this initial user-test, I don't plan on any further revisions.

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

"Brain" icon created by Vlad Marin, and used with permission.  
"Information" and "Star" icons created by Yankoa, and used with permission under Creative Commons License.