Subsciption Scenarios

Scenario One

User Goal: Suzy Socialite wants to chat with classmates from her English 101 course.


Suzy browses to the university website and navigates to the MyUniversity portal.

Suzy logs in, landing on the MyUniversity portal Home page.

Suzy browses through her portal content and does not find a chat.

Suzy locates the global Add Content link and clicks it.

The Home page of MyUniversity portal is pushed content and not editable. Since Suzy will not be able to add content to this page, the system displays a warning message:

This page is not editable, and you will not be able to add content to this page. Please pick from the following pages where you may add content before continuing: (lists editable pages)

Suzy clicks her MyStuff page.

The portal view changes to Suzy's MyStuff page and the Add Content menu slides in from the bottom of the page.

This mockup is a concept only and does not represent a final design of the subscription interface.

A default (personalized?) set of content is displayed, but Suzy does not find chat displayed in the immediate list of content.

Suzy starts typing "chat" in the search box.

The Add Content menu dynamically filters the displayed content with each keystroke.

After typing "ch" the content has been filtered down to four content items, and Suzy spots what she thinks might be the chat she is looking for in the four items.

Suzy mouses over the icon she suspects is the chat.

Her mouse cursor changes to the "hand", indicating that the content may be dragged. A balloon area appears from the content item showing the full content title, the content category, content description, and a visual preview of the content.

Based on the information, Suzy determines that this content is not the chat she was looking for.

Suzy mouses off the content item and the balloon fades. As she mouses over the next content item, the same balloon appears with content information specific to this content item.

Based on the information, Suzy determines that this is the chat she wants. The hand cursor indicates to her that she may be able to drag the content, and Suzy also notices a small text instruction that she missed earlier that states: Click and drag content into your layout.

Suddenly, Suzy's cell phone rings. As she moves to answer the phone, her mouse nudges outside the Add Content menu. After a brief pause, the Add Content menu slides down and disappears from view, but leaves an Add Content tab link at the bottom of the page.

Suzy spends several minutes on the phone chatting with her friend. When she returns to the portal, she discovers that her Add Content menu has disappeared, but she notes the Add Content tab link in the same area.

Suzy clicks on the link.

The Add Content menu slides up from the bottom of the page, and still has her search criteria and filtered content results.

Suzy relocates the chat, puts her mouse cursor on it, and verifies again that it is indeed the chat via the information provided in the balloon.

Suzy clicks and begins dragging the chat icon into her layout.

As she drags, existing content in her layout slides up or down to reveal visual indicators of valid drop zones where the new content may be placed.

As she drags, there is a "green-light" icon near the cursor as long as the chat icon she is dragging remains in a valid drop zone.

Suzy drags the chat into an invalid drop zone and the "green-light" turns into a "red-light", signaling the invalid drop zone.

Suzy already knew where she wanted to put her chat content, and so was doing the drag quickly; she does not notice the change of icon and drops it into an invalid drop zone.

The chat icon slides back to the Add Content menu to the position it was dragged from and displays an error message of why the location Suzy picked was an invalid drop zone. Additional instructions tell Suzy to drag the content into a valid drop zone which is indicated by a "green-light" (visual shown in the instruction message for reference) and that an invalid drop zone is indicated by a "red-light" (visual shown in the error message for reference).

Suzy again drags the chat icon, this time watching the indicator.

Suzy sees a spot that is a valid drop zone for the chat and drops the chat into place.

The other channels slide out of the way and the chat interface appears.

Suzy sees that the Add Content menu is still open, but she is done adding content.

Seeing a Close link in the top right corner of the Add Content menu, she clicks it and the Add Content menu slides out of view (with no Add Content tab link).

Suzy uses the chat interface to begin chatting with classmates from her English 101 course.

Scenario Two

User Goal: Nate Netgen wants to see his favorite RSS feeds when he comes to the univeristy portal.


Nate is already in the university portal to check his grades and do some course planning for next semester. He sees the portal as valuable and a place that he will visit regularly. Nate decides that if he is going to be visiting the portal regularly, then it would be beneficial to him to be able to scan his favorite RSS feeds at the same time.

Being relatively familiar with other portals, Nate locates the add content link and clicks it.

The Add Content menu slides in from the bottom of the page.

This mockup is a concept only and does not represent a final design of the subscription interface.

A default (personalized?) set of content is displayed, but Nate wants to browse through RSS content only.

Nate quickly types "rss" in the search box.

The Add Content menu dynamically filters the displayed content with each keystroke.

After typing "rss" the content has been filtered down to 44 content items. The add content interface is able to display 5 items at a time and the items are listed alphabetically. The interface displays a message to Nate that there are 44 items that match the "rss" filter criteria and activates the paging (next and back) links.

Nate begins browsing through the 44 items with the back and next links to see what content is already in the portal. The content titles and icons give Nate enough information to get a sense of what that rss content is, but when Nate wants more information, he puts his mouse over the item and scans the additional information in the balloon.

Nate finds several rss feeds that he wants to see, and decides that he wants all of his rss feeds on their own RSS tab.

This scenario is yet to be finished...