Juliana Iacono



Juliana Iacono

March 19, 2012

Dr. Pinkard

IM220 Final Paper

Project Overview

For this project, I will be re-designing/designing some aspects of the website, raz-. The website is lacking some crucial interaction and excitement on the website that can keep a five year old interesting in using the website tools and understanding the goal of the website, which is to encourage reading and rewarding them with a raz rocket experience. The website is lacking explanation and details that I believe would be crucial to let a five-year old use the website. I will try to address the issue of the website giving off a generic feel and give it a more personal account for each of the students.

Current System Review and Critique

General look and feel

The general feel of the website seems like they are trying to attract the young kids to use the website because there are a lot of bright and vibrant colors used on the home page as well as throughout. The first thing that I see on the homepage is a lot of information that is more geared towards the adult visitors of the website instead of the children, who are the main users of the site and need more visual clues to use the site seeing that they are only five. I like the use of the different colors and shapes to signify where each of the children is at in their reading status and I think it’s nice that the five year old can see their “competition.”

However, once I click into the student’s account it starts to get confusing for me to understand, and I can only imagine the difficulty a five year old could encounter. The menu bar at the top is a bit weird because in order to pull out your rank information, you must click the arrows at the top left corner, but it’s not apparent that there is information there. I like the concept of using the raz rocket to let the students purchase stuff with there stars, but I think it needs to be a little more hands on to keep the child interested. I don’t like the way the symbols are used under the book assignments, because they are hard to understand what each selection means, and I think they need to be a bit bigger and more obvious to what they each do. The use of levels is nice, but when I’m on the assignment page, I’m not quite sure what level D means and what the difference is between the bookstore and the books on the assignment page.

The quiz section is interesting because in order to have the question or answer read allowed it needs to be clicked. However, there are no signs or instructions on the page or beginning of the quiz to show how to navigate the quiz page. The only sign of the text being clickable is the changing of the pointer arrow to the hand, but a five year old might not be able to figure that out. I also think that at the end of a quiz, the student should be taken to the raz rocket’s page, given their stars, and then given the option of buying the items they want. I think having it on a separate tab and no link between the rocket and the reading/quizzes makes the student less engaged in the reading.

Assumptions about what a five-year old can do

My assumptions about a five year old are that they have a basic understanding of very simple navigation through websites and apps because there are so many geared towards the younger population now, many parents are using them. There are toy laptops and smart phones for children now, so I assume most have a pretty good handle how laptops and websites work. I assume a lot of them know that many words and pictures could be clickable, so they could probably be able to figure out how to click something to take them to another page. I could also assume that a five year old knows when a page is loading, but I think the loading symbol needs to be clearly defined.

Critiquing website interaction from five year old perspective

The website works for a five year old because it seems kind of simple to be able to find their name on the list once they are logged into the teacher’s name. What doesn’t work is the student having to navigate to the login page and then having to spell the teacher’s name to get into their class because some teacher’s have hard names to spell and for a five year old remembering how to spell it could cause a problem. However, the website might be intended for the parent to log in for their child and then direct them towards the correct links and readings. We don’t know for sure, so I would assume it’s meant for students to figure it out themselves.

I think the options work for the student to be able to pick which book they feel like reading, and deciding if they want to read it themselves or they want the system to read it for them. I feel the options need to be a little clearer, and there needs to be some more interaction on the website’s part to help engage the student into reading on the site by using the raz rocket prizes. What doesn’t work on the assignment page is the right side, with the books on the green background. There is no label or indication as to why these books are off to the side and in this green box, which needs something so the student is able to understand those books versus the other ones.

Like I stated earlier in my critique, I think the student needs more help in understanding how the quizzes work. There is no indication that if the student was to click the words, it would be read aloud to them, so many might struggle through the quiz because of the lack of information or visual clues. Also, in the quiz section it’s very hard to figure out how to click out of the quiz once it’s started. If a student was to click the quiz accidently, they would more than likely be confused as to how to get back home because there is no guidance to understand that clicking the assignments tab at the top will take you back home. However, I do think there is a good amount of feedback given to the students because once they select an answer, they are told if it’s right or wrong along with a red x or green checkmark as a visual indicator. I think this is a good aspect of the site, but I think they need more feedback in letting the student understand what to do next and how to take advantage of the raz rocket.

Finally, I think one of the worst things on the site is the raz rocket tab. Once a student clicks on the tab, a short intro of the rocket comes up and once they get to their actual character, there is no guidance about what the student is suppose to do. The little indication that the student is supposed to click the TV in the corner is the arrow pointing up to it, but that is a little ambiguous because it looks like a design. So a student is left trying to figure out exactly what they are suppose to do on the page and the rocket has little interaction to engage the student, except for the little alien reacting when clicked. Also, in the bookstore there is some guidance for the student to understand what to do through the talking parrot, but it seems hard to understand because it’s muffled; meaning a five year old might not even figure out that the parrot is instructing them to pick a letter.

Personas

Iyanna

The Independent Learner

Primary persona

Demographics:

Age: 6

Gender: Female

Occupation: Elementary School Student

Location: Chicago, Illinois

Lives with: Aunt, household of 4 adults

Siblings: twin sister, Paris

Personality Notes:

• Independent

• Likes hard things

o figures out how to do something on her own

• Confident

• Quick learner

• Bright

• Curious

• Outgoing

Likes to:

• Sing

• Dance

• Karate

• Read

• Read to her sister

Additional Information: Likes to read cookbooks, because she uses the images to “read” (figure out) the recipes

Technology:

• 2 computers in home

• Knows how to use an iPad by herself

o Favorite apps:

▪ Angry Birds

▪ Word games

▪ Netflix (Movies)

Paris

The Quiet Personality

Primary persona

Demographics:

Age: 6

Gender: Female

Occupation: Elementary School Student

Location: Chicago, Illinois

Lives with: Aunt, household of 4 adults

Siblings: twin sister, Iyanna

Personality Notes:

• Shy

• Needs reassurance at times

• Quiet observer

• Looks for an explanation of or questions a question most of the time

• Thinks before giving an answer to a question

• Doesn’t like hard things

Likes to:

• read

• play with

o dolls, puzzles, and tea parties

• karate

• basketball

Additional Information: interested in gymnastics because she’d be able to perform on the stage

Technology:

• 2 computers in home

• Knows how to use and navigate an iPad by herself

o Favorite apps:

▪ Angry Birds

▪ Princesses

▪ Likes to make words

Interaction Scenarios

It’s the beginning of the school year for Jessica, a 5 year old student in Chicago, Illinois. In class, her teacher Mrs. Smith explains that they will be using a website called Raz-, which is a website that provides an interactive way to help teachers, parents, and children in the teaching of reading. She hands out letters for the students to take home to their parents explaining the website and letting them know their child must have access to a computer for about 30 minutes a night to allow them to practice their reading. Jessica is excited to have access to hundreds of books and can’t wait to start reading. Jessica has a basic understanding of how to navigate a smart phone because her parents let her use theirs to play games, but has not used a computer before.

The following day, Mrs. Smith goes through an introduction to the website in class, and reminds the students that they must read at least 30 minutes that night. When Jessica gets home, her mom shows Jessica how to log into her account. On the homepage is a welcome page with a login screen where Jessica needs to put her teachers name and then enter her name. From there she is taken to a page where she select the book she wants to read from a list around 12, which are separated by topic and chosen by the teacher. Beneath each of the books is a button that allows Jessica to decide if she wants to read it alone, or have it read to her. When she rolls over each of the buttons, they read her what they allow her to do. Jessica decides to have her first book read aloud to her.

Once she opens the book she is brought to an introductory video on how the reading is going to happen. The video explains all the necessary information she needs to understand how the book works. She then successfully finishes the book and then moves on to take a quiz on the book to test comprehension. Here, she is visited by another video that helps explains the instructions on how to proceed with the quiz. She is given 15 stars out 15 because she answered all the questions correctly. She is then taken to the interactive game section of the program where she can decide if she wants to use her stars to buy items for her rocket, travel through space, or save them. She decides to save her stars and wait until she reaches 100 stars so she can play 15 minutes of battle through space. When she finishes for the night, her mom guides her to the Logout button above the character person Jessica selected and designed when she logged into her account.

Several months later, Jessica is successfully navigating through Raz- by herself, with no need for her mom’s help. She is continuing to move through the levels, and Mrs. Smith is praising her on how well she is doing on her quizzes. She has already gathered enough stars so that she can play an hour on the game, with several aliens she has already bought. Her reading has now moved from having the reading done aloud for her, to her being able to read it on her own. Jessica tracks her progress through the progress bar of “fuel” she is gaining from reading the books and completing quizzes.

Project Description

My goal for the redesign of this site is to make the website more inviting for the students to want to use the website tools. I think it needs to have better instructions to understand what the website includes and help to encourage the students in their progress. I also would like to make the Raz Rocket reward a bit more captivating and display to the student how their progress in their reading/quizzes helps them receive the better playing options. I want the students to feel like they are doing something on the website and have a personalized page instead of a generic feel. I’d also like some social interaction, but not where the students are in competition with one another based on reading. The students can share if they liked or didn’t like a book, and others will be able to see this in a leader board.

Use Cases

User Story 1: In order to enable the student to have a better understanding of the website navigation, layout, and the different sections of the of the website, I will design the site to include introductory videos to explain the overview of the website, how the quizzes, reading and Raz Rocket works, as well as other options they have (including saving their stars, and fuel status bar.)

1. Relevant Design Patterns: Probably Center stage design because I would want to make sure the video is displayed early for the introductory video for the website. I think after though, it should be in a collapsible panel, or identified by a button enabling the video to display.

User Story 2: In order to enable the student to have a personalized companion on the website, I will design an option for the students to create a character, to praise, read, help, and play with the student.

1. Relevant Design Patterns: Here, I would use a sequence map, to indicate to the student how many steps before they finish creating their character, as well as including a sign-in tool.

User Story 3: In order to enable student to decide what they want to do with their stars, I will redesign the end of successfully completing the comprehension quizzes to display three options for the student to decide from: buy more items for their rocket, explore space, or save their stars in a star bank to save up for the option to play.

1. Relevant Design Patterns: I don’t think there is necessarily a design pattern here, but it would just be a pop up at the end of successfully finishing a quiz that has three images: save, explore, or buy. Indicating to the student these are three options they have to do with their stars.

User Story 4: In order to enable the student to play with their rocket, I will redesign the Raz Rocket tab to have the option for the students to battle in space with classmates or the computer once they accumulated 100 stars in their star bank.

1. Relevant Design Patterns: Here I’m debating if I want to use module tabs, or just display image and buttons for the students to select what they want to do with the rocket. If I do module tabs, things could be simply labeled, but 5 year olds might find this hard to figure out. So having the options menu of: checking their star bank, exploring space, buying items for their rocket, or playing with their classmates or computer, each with an identification image might be more helpful, instead of tab navigation. I will decide this once I see how it feels/looks when I wireframe.

User Story 5: In order to enable the student (perhaps even the parent) to track how the student is progressing on the website, I will redesign the current progress bar at the top of the student page to be on the side of the page and referred to as a “fuel bar” which the student sees their progress as power for their rocket.

1. Relevant Design Patterns: I would say that progress indicator would be used here, but it would be changed to be always being there, not just displayed when waiting for something to download, or load.

User Story 6: In order to enable the students to share their opinion on a book once they have completed it, I will design an option for the students to rate the book to allow other students to see the favorites of other students. There will also a leader board of the best rated books by their classmates.

2. Relevant Design Patterns: I would input a reputation pattern with the rating system, and I would use a content leader board for the highly rated to the low-rated books from the students.

General Design:

1. General Navigation: I will probably keep the tab selection, adding the sign in tool options/ companion the student created to the top right corner with the logo on the left. I will probably have the books on the assignment page broken into titled sections based on topic (i.e. animals, jobs, living etc.) For most of the website I will probably keep the same visual framework.

2. Social Interaction: I’m adding a social interaction in the Raz Rocket tab, by creating the option for students to save up their stars to have battle with their classmates. This way each of the students must have at least 100 stars to play; suggesting they each successfully passes their comprehension quizzes. Another social aspect I’m adding is the option of rating books the students read so they can show the rest of the students what they thought of the book they just completed. This can help the students see the most popular books and read them when they have the opportunity. I didn’t think adding a leader board for the student progress was a good idea, because I felt this could cause students to feel bad if they are struggling and are at the bottom of a leader board. However, I will add a leader board for best rated books.

Wireframes

Login Screen

[pic]

Create a Companion Page

[pic]

Explanation Videos Page

[pic]

Reading Assignment Page

[pic]

Finished Reading Book Page

[pic]

Book Leaderboard Page

[pic]

Finished Book Quiz Page

[pic]

Raz-Rocket Page

[pic]

Annotated Final Design

For my final prototype and design changes to the raz- website I decided to add some social interaction and personalization the current website. I also decided to add a bit more instruction for the users to better understand and find information they might need to understand the complete use of the website and tools. The first thing I decided to do was change the login aspect of the website to just a simple page with a few simple options. I would say this is the center stage design pattern because I made sure that the login was the complete and central part of the page so that the confusing aspect of all the writing and information on the original site was gone.

For the website I decided to keep the main look of the current website with similar colors and the tabs menu. For most of the buttons I added a green color so the students would identify this with “Go.” For explanation videos I decided to go with a purple color so it’s easy to pull out and identify in contrast to the yellowish-orange and blue colors. I used red colored buttons to indicate “Back.”

So once the student enters her username/Name and the teacher name they are directed to their reading assignments page. Initially, when they first log in for the first time they should be greeted by an introduction video, and the explanation video tab but because I wanted to show the full extent of a current student’s page I decided this was best to not include in the mockup. However, this would use a center stage design, then I put the explanation videos on other pages invisible and only able to be displayed if the current user would need them displayed they could click a button to display the videos. They could also click on the explanation videos tab at the top to find all the videos they would want. This is my first implementation of my first user story.

In addition to the introductory video initially loading on the very first login, the create a character page will also display after the video. This is implementing my second user story about allowing the user to create a companion for the website. On this page, the user will have a five step process, which is indicated by the sequence map implementing at the top (however this does not change based on steps because it is only a picture signifying the idea of the map). The user then goes through the process of picking a character they would want to be, selecting the color the want, the size they want to be, naming their character and selecting if it’s a boy or girl, and finally they see a preview of the design before their design is completed. After their character has been created it is then put up in the right hand corner just under the sign-in tool so that it will always be for the user to feel they have a helper/friend on the site. This helper will also be with them in their raz-rocket and through their quizzes. Again, this initialization process wasn’t implemented to show the experience for a current user. Once the first login is over users can find and edit their current characters by clicking on the link in the sign-in tool in the right hand corner. This obviously follows the sign-in tool design and allows the user to click the “Welcome Student” option to return to the initial page and then they can click the logout button to log out and return to the login screen.

What I did include and change for most of the entire website is I changed the progress bar at the top of the website into a “fuel status bar” and placed this on the right hand side of the website. This is implementing my user story 5 which allows for a more exciting and interesting way to show the students their progress through their reading and quizzes. This progress bar is used to show how much power the student has for their rocket, but also helps them understand how much more they have to go from Level D to E. The design pattern used in this design is probably the progress indicator. This is somewhat changed, because it will always be there instead of just appearing when waiting for something to load or download. There are a couple occasions that the side status bar does not appear and that’s during reading, listening, and quizzes because I feel the emphasize and importance of the page is the main reading and quiz not the progress they have made so far.

On the reading assignments page the design pattern is similar to that of a grid of equals because each of the books are all similar in size and have the same options and their rating underneath. The design also includes a similar design to that of the pattern titled sections because I want the books to be broken into separated sections based on topic of the book so students are able to choose which type of book they would like to read. Under each of the books is a menu of options, which I slightly changed from the original design on the website to make them a bit bigger and easier to distinguish which option does what. I felt like the original website was a bit confusing to understand. The student is then able to select if they want to hear the book read to them, read the book themselves, or take the quiz on the book. For the most part the pages are the same as before except the addition of viewing an explanation video and the ending display screen. When they finish reading they are congratulated and offered more “fuel” to their progress bar and then they are asked to give a rating for the book. This rating will then be shared and used for the current book leaderboard to help other students see some of the highest rated books on the site. They are to rate the book from one thumbs up to 5 thumbs up and then they have the options to read the book again, listen to it, or take the quiz on the book. This element of the website is using the ratings system from the reputation patterns.

If the user decides to go to the quiz page they are greeted with the option to view the explanation video and then are taken through the quiz until they complete the quiz. Once the quiz is completed they are greeted by a screen that congratulates them and gives them stars and progress in their fuel bar if they successfully complete the quiz. Then they are offered three options of what they want to do with their stars: they can either save stars to their bank to play later, explore space with their rocket, or they can buy more items for their rocket. There isn’t necessarily a design pattern here except three equal images offering the user a choice between each. This is implementing my user story three.

If a student wants to use their raz rocket without having to complete a quiz, they can easily click on the “Your Raz Rocket” tab. The original website has a very uninviting, sort of static type page for their rocket which doesn’t capture the student’s attention and motivation. What I did was after the introduction video, a menu page displays with a grid of equal images and options (similar to the options of the successful completion of the quiz page). Here the student has the same options to save/check their star bank, explore space, and buy items for their rocket. The only addition to the page is the option to battle through space with either a classmate or the computer. This is an interesting option for the students to strive for because they must achieve 100 stars in order to open and allow them to battle. This allows for successful comprehension quizzes and reading taking priority. This isn’t really a design pattern, but it is a variation on a grid of equals and implements my user story four.

Lastly, the last change I did to make the website a bit more social, is to add a current book leaderboard. This is a tab on the top tab menu that the students can select and be able to see the best rated books on the website that are rated by their classmates. The leaderboard is using a reputation design pattern, content leaderboard and is implementing my sixth user story. On this page the student will be able to see the number each book is at on the leaderboard, the actual cover/title of the book, the topic the book is under, the book reading level, the amount of thumbs up rating the book has (from 1-5 -5 being the best), and then they are able to see who was the last person to read the book. I think this allows the students to see what each of their classmates is interest in and could help them decide if want to read the book. It also allows the students to talk with other classmates or friends about books they might have both read, after seeing their name next to the book on the leaderboard. Displaying the highest rated books allows for conversation and curiousness to happen in the students because if their classmates think a book is really good, chances are they want to read the same book as well.

Concluding, I didn’t change much of the current website design, but I did try to add more interaction to the website as well as some exciting ways to try and capture the student’s attention and motivation to keep using the website. I added some social interaction with the ratings system and book leaderboard, as well as the option to battle a friend/classmate in their raz rocket after saving 100 stars. I also added some personalization to the website with the option to create their own character to follow them through the website as well as having a fuel progress bar to allow the student to see their progress and power for their rocket. Finally, I tried to add a little bit more instruction and guidance when needed so the user will be able to understand fully what each element of the website does.

Reflection

This class will benefit me immensely because I have now learned the entire process for interaction design. I learned a little bit about the process when I took IM 210 Intro to Human-Computer Interaction, but for that class we didn’t go completely in depth with the process involved with interaction design. We did a lo-fidelity prototype and that was it. With this class, I was introduced in much more detail and elements on how to seriously and critically look at a website and the layout and find better ways that could improve the overall interaction of a website, or other digital media design. I learned how to write and express the ways in which I did or didn’t like the current system of a website before deciding which changes were necessary to improve the interaction.

An important aspect of the class that I will take with me is the idea of design patterns. I had never heard of this before, and none of my other classes have ever discussed this idea before, but these will help me tremendously when I design at for a job. I actually will be purchasing the book after this class because I originally just rented it, but I find it incredibly resourceful and will help me further my career. It is actually nice to now know and understand the technical names for patterns and tools that are constantly used in interactive designs and will make for a much better way of explaining and pointing out the necessary changes needed and adding them.

The most important thing I took away from this class will be the overall learning and working experience of interaction design. I hadn’t given much thought to this idea and this part of the degree was something I wasn’t sure I could potentially do as a career choice. However, after completing each homework and lab, I felt more and more confident in the work I was doing and how to pull a creative side out when needed. I now know that I should look for jobs and internships that have some kind of interaction design aspect to them because I know I understand this part a lot more than I originally thought.

I also took away from this class how to wireframe and create mockups. Again, I had never heard of this before and after practicing and completing assignments I learned that I found this part interesting and helpful in providing visuals on how upgrades, updates, changes, or completely overhauls of websites will look once the programmers and designers complete their jobs. I really enjoyed using MyBalsmique, and Hotgloo was nice as well, but took a while to get use to the features and design of the website. I’m sure that I can now do prototypes with a pretty complete understanding.

Lastly, my favorite aspect of this entire class was to create the personas. I thought this was a fun and informative way to understand your users. It was also nice to be creative and use a little bit of my imagination. The interaction critiques also an interesting aspect that I will take away from this class learning how to critique a website fully and completely by looking at all aspects and tools currently used on a website. Overall, this class completely helped jump my information and qualifications in interaction design and will definitely help me find a job, hopefully, that I enjoy doing.

-----------------------

“Don’t give up…just figure it out”

“I use big computers and little computers.”

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download