GR2 - Designs

Scenario

Maria is senior in high school from Laredo, Texas. Her parents don’t want her to leave Texas but she wants to come to the East Cost. She really wants to be a lawyer but she isn’t sure yet what major she should be. Also, her culture is very important to her and she wants to go to a school where she can find people that remind her of home.

Maria has already gotten into four schools in the Northeast but she doesn’t have enough money to go visit the different campuses. She has already looked at all the information in the school catalogues and on their official websites, but she really wants to know what the students have to say since she’s going to make a decision without visiting the colleges.

She goes to the Campus Connect website and searches for her top choice, Yale. She looks through the main page and immediately goes to see the pictures. Then she looks through the reviews, looking for any reference to whether there is a strong Hispanic community on campus. She doesn’t see anything specifically related to this topic but she notices there is a forum so she posts a question about the clubs, events and organizations for Hispanic students on campus.

Aaron is junior at Yale, he’s an Economics major and he just registered for an account on Campus Connect because he wants to find potential new students that might join his fraternity. He gets to the review page for Yale and he writes a review about the Greek system. Then he posts some pictures of him and his brothers from Greek Week and a video from a recent event on campus. Finally, he goes to the forum where he sees Maria’s question and replies telling her about LULAC and some other clubs she might be interested in.

Designs

Design #1

Maria searches for Yale on Campus Connect and gets to Yale’s main page.

She goes to the Photos page and browses through the posted pictures.

She goes to the Reviews page to look for a review about the Hispanic community on campus.

She goes to the Forum page to post a question about the Hispanic clubs, associations and events on campus.

Aaron logs on to Campus Connect and goes to Yale’s main page.

He goes to the Forum page and posts a reply to Maria’s question.

Learnability:

- Each page has the same consistent sidebar so it is easier for a new user to learn how to navigate the website

Visibility:

- The links to each section about the current university are always visible

- The name, image, location and ratings of the university you are currently viewing is always visible on the left.

- The rating section can get lost on the screen.  

- The text boxes to post a question or a reply in the forum are directly in the page, so that the user can see the questions and replies while posting his/her own

Efficiency:

- You can get to any of the sub-pages for the current university in one click, by using the sidebar

- You don’t have to do to a different page to post a review, question or reply.

Error Prevention:

- The front page doesn’t have any questions from the forum.  Isn’t redundant enough.

Design #2

Maria searches for Yale on Campus Connect and gets to Yale’s main page.

She goes to the Photos page, which displays a map of Yale's campus. As she hovers over the campus, a status bar at the top of the map displays the name of the location and how many pictures are available for that location. When she clicks on a building that displays an icon, a callout bubble appears with the name of the building, a description if available, and a link to the photos for that location.

She clicks on the link to the photos in the callout bubble, the map slightly fades and an overlay with the photos appears on top.

She goes to the Reviews page to look for a review about the Hispanic community on campus. The Reviews page has a map, with pushpin icons showing the location of people who wrote the reviews, so that Maria can get the different perspectives based on different dorms and living groups on campus. Above the map there are also hash tags showing the categories of the reviews. She clicks on the "#culture_groups" tag, and the left panel shows the reviews while the map updates dynamically showing the location of the original posters of the reviews in this specific category.

She goes to the Forum page to post a question about the Hispanic clubs, associations and events on campus. The Forum page also has hash tags at the top showing the topics of the questions. Maria clicks on the #cultural_groups tag to see if anyone has asked a question similar to her. The questions are displayed in the panel on the left and when she clicks on one of them, the replies appear in the right panel. These replies are sorted based on how many people have found them useful. Maria doesn't see any relevant questions, so she posts a new question herself.

Aaron logs on to Campus Connect and goes to Yale’s main page. He then goes to the Forum page and posts a reply to Maria’s question.

Learnability:

- This design uses hash tags, which users would be familiar with from existing applications, especially Twitter

- The map in different sections of this design is easy to understand for a new user due to familiarity with many existing applications that use Google Maps.

Visibility:

- As the user hovers over different buildings on the map in the photos page, the status bar displays how many pictures are available for that location. When the user clicks on the building, they can see more detailed information about the location and how many photos are available.

- Hash tags at the top of the Forum and Reviews pages allow the user to quickly understand what topics are currently being discussed

- The push pins on the Reviews and Photos pages allow the user to easily visualize 

- The icons used to represent the ratings make them easier for the user to understand

Efficiency:

-  The hash tags allow the user to quickly access reviews and questions specific to what they are looking for

-  The tabs allow the user to change between sections quickly

Error Prevention:

- The side bar is not present in each section

- Since many of the sections in this design have a map, it might not always be clear to the user which section they are in

Design #3

Maria searches for Yale on Campus Connect and gets to Yale’s main page. This design is based on the metafor of a desk with lots of different information about the college on top of it. All of the icons on this main page, link to the different pages with the content. The quick facts and the ratings are displayed directly on this main page.

She goes to the Photos page, which displays different categories of photos. The relative sizes of the different categories is shown through the size of the pile of photos below each category name.

She clicks on the "Campus" pile, which leads her to a page displaying all of the pictures in that category.

She then goes to the Reviews page to look for a review about the Hispanic community on campus. This page displays a word cloud showing the relative frequency of the different categories of reviews.

Maria clicks on the "Culture" link in the world cloud to see if she can find information about the Hispanic community on campus.

She goes to the Forum page to post a question about the Hispanic clubs, associations and events on campus. The main Forum page has stacks of notecards, labeled with their respective topics. The heights of the stacks display the relative sizes of the categories.

Maria clicks on the Student Groups categories to ask her question about Hispanic groups on campus.

Aaron logs on to Campus Connect and goes to Yale’s main page. He then goes to the Forum page and posts a reply to Maria’s question.

Learnability:

- This design uses the metaphor of the a student’s desk to display the different sections of the website.

- Photos in a student’s dorm room might be on a bulletin board while notes about a school would probably be a notebook.  The forum questions are on a note cards to signify the way student prepare for test with questions on one side and answers on the other.  

Visibility:

-  The reviews are organized by tags in a word cloud model.  The size of the word in the word cloud is directly proportional to the number of reviews that have that tag.

-  The photos are organized on the bulletin board by the number of pictures.  Under each category name, there is a pile of photos that is proportional to the number of pictures that have that tag.

- The questions are displayed as stacks of note cards.  Each stack is a category and the height of the stack indicates the amount of questions in that category.

Efficiency:

-  You have to go two levels until you actually reach content because of the word clouds at the the beginning of each category.

-  The Main page isn’t as easily accessible.

Error Prevention:

-  The user might have a hard time navigating through the website even though there are back buttons along with the menu bars.  

-  This design can be very easy to get  over crowed.

-  The different elements on the Main page are scattered around the desk and the user might have trouble finding what they are looking for.  (Like the I Spy game!)