Scenario

Ben Bitdiddle is a junior in college, studying mechanical engineering.  He lives a fast paced life serving as editor of his school newspaper, The Herald in addition to taking six classes and searching for summer internships.  He’s an active user of multiple social networking sites and is very tech-savvy. He travels a lot, between visiting friends at other colleges, going to job interviews, and visiting home.

Ben Bitdiddle is working on an article about dining at his school for this week’s edition of the school newspaper with three other students: Alice Packer, Cy D. Fect, and Louis Reasoner. 

The article has several tasks associated with it, among them:

  • Interview UA President
  • Interview Provost
  • Take Photographs
  • Write article
  • Edit article

They break up the tasks as follows:

  • Interview UA President: Alice and Cy
  • Interview Provost: Alice, Ben, and Louis
  • Take Photographs: Cy
  • Write article: Alice, Cy, and Louis
  • Edit article: Ben 

Ben (username bdiddle) decides to use BucketList to organize this article. 

He begins by creating a new bucket called “Herald Dining Article,” and adding Alice (username apack), Cy (username cdf), and Louis (username reason) to the bucket upon creation, simply by typing their usernames into the appropriate place. 

He then creates the task “Interview UA President” in the bucket “Herald Dining Article.”  He navigates to the task creation screen from the “Herald Dining Article” bucket, so that is the default bucket for the task.  He then enters the task name, and adds Alice and Cy to the task by entering their usernames in the appropriate place again.  He finishes the task creation and is returned to the bucket view.  He goes on to do the same for the other tasks.

Unfortunately for Ben and his team, Louis is kind of a flake.  The day after the interview with the Provost, Louis emails Ben and says he’s too busy to work on writing the final article with Alice and Cy.  So, Ben then has to remove Louis from the “Write Article” task.  To do this he navigates from the home screen to the “Herald Dining Article” bucket view, and then to the editing screen that allows him to add or delete users from a task.  He select’s Louis’s username (reason), and completes the operation by clicking on the “Delete” button.  Louis is no longer assigned to that task.

Landing Page:

This design has a very simple landing page. Users who are new to BucketList can watch a short demo video, showing them the key features of BucketList and how the site works. This video is mainly to convince them to create an account, but also serves to teach them how to use BucketList once they do (since the UI is so simple, this task is relatively easy).

There is a "login" button at the top for old users to simply provide their username and password, and a large "create an account" button for new users.

Main Page:

When a user logs in, this is the main screen that they see. To navigate, they simply click on tasks / buckets in the left column, which change the view on the right side of the screen.Whatever task / bucket is being viewed on the right will appear in bold in the list on the left. Viewing a bucket or a task looks similar to the user; it simply displays the user's who are currently assigned to that task / bucket, and all notes regarding the task / bucket, and a button to add users to the task / bucket. To view / hide the tasks within a bucket from the list on the left, the user can click the triangle beside the name of the bucket.

To add a new bucket, the user must click the "New Bucket" button. This will simply create a new bucket in the list on the left side of the screen, and open that bucket's view on the right side. The user can then type the title of the bucket, add collaborators, and begin typing notes. By default, the user who created the bucket will be added as a collaborator on that bucket.

To add new tasks to a bucket, a user simply clicks the '+' box beside the bucket's name in the list on the left. The new task is then added to the bucket, and the new view is opened on the right. Similar to the process for adding buckets, the user can then type the title of the task, add collaborators, or begin adding notes. By default, the task is not assigned to any user.

The top half of the right-side screen is similar to a bulletin board with post-it notes. All the main notes concerning the user appear there. A user can drag-and-drop the notes around the screen to rearrange the view and organize it. In addition, they can click the 'x' in the corner of a note to remove it from the bulletin board, or click the 'sticky' button beside the note at the bottom to make it appear on the bulletin board. To add a note, the user can simply double-click anywhere on the bulletin board, and a new post-it note will appear, or click the "add note" button". They then simply type the note. In addition, a user can edit any of their own old notes by typing in the box under "all notes" (their notes will appear as text-boxes, while other users' notes will appear simply as un-editable text. User's cannot edit notes that other users wrote. The bottom half of the right-side screen contains all notes, so that a user can review old notes that might not be as immediately relevant to them. Every collaborator on a task / bucket will have the same notes in the bottom portion of the screen, but bulletin boards are unique to each user (so each user can arrange notes however they want).

To add / delete a collaborator on a task / bucket, simply click the appropriate bucket. A small pop-up will appear, containing a text-box in which the user can type the user-name of the person they wish to add or remove. If they are adding user's to a task, or removing users, there will be a drop-down menu with a list of options, as there are a limited number of users they may chose from (people already assigned to that bucket if adding a user to a task, or people already assigned to that bucket / task if removing a user). Users can view and add themselves to tasks within a bucket that they are collaborating on, but must be added by someone else to join a new bucket. Any user can remove themselves or anyone else.

To check off a task, simply click on the box beside the task in the left-side list. To clear checked tasks, click the "clear completed tasks" button.

Throughout this entire process, the user never navigates away from this "main page", this this is the only wireframe view.

Learnability:

The bulletin board and post-it note metaphor is one that a lot of users are familiar with, especially in the context of task management. Many people we talked with said they use post it notes to help them group ideas together and stay organize, therefore we think that this metaphor will help users become more comfortable using BucketList. 

The drawback regarding this design is that users might not know exactly how to interact with the system. It might not be obvious that they can edit their own notes, but not other users' (although there are some perceived affordences to make this clearer, such as the text boxes for their notes vs plain text for others'). In addition, they might not realize that they can drag-and-drop notes to reorganize them. To make this more clear, when mousing over a note, the mouse will change to a hand icon, to indicate that they can drag-and-drop the note.

Visibility:

The bulletin board allows users to easily view the notes that are most relevant to them for each task. The "all notes" section is the same for all users, but the bulletin board is unique and contains only the notes relevant to that particular user, arranged how they decided. The only concern regarding the bulletin-board is that it might look too crowded, and users may prefer to see notes simply as a list, to appear more organized.

This design makes it clear who wrote each note (by attaching an automatic signature to each note). In addition, each task / bucket clearly states who the collaborators are, to avoid confusion. The name of the task / bucket that the user is currently viewing is on the top of the right-screen, as well as written in bold in the list on the left, to ensure that there will be no confusion as to what task is currently being viewed.

Finally, the user's name always appears at the top-left of the screen, to ensure that one user does not accidentally edit tasks in another user's account, if that user previously logged in on a shared computer.

Efficiency:

Having one main screen that never changes make navigating the website more efficient. A user can simply click the "+" button to add a task, and is immediately in the correct page to add notes, collaborators, or any other relevant information. In addition, switching between tasks is extremely fast, as all tasks are always visible in the left-side list.

Errors:

It is very easy to recover from errors in this design. Users can always edit notes they wrote, in case they made a mistake or something changed. In addition, they can easily add / remove collaborators from any task / bucket.

Overall:

Overall, this design stresses the simplicity and efficiency of the user experience. There is only one page to navigate, and there are clear buttons for all major tasks. It is easy for users to see everything they need to do, and quick to accomplish tasks, both for new and experienced users. The main focus of this design is the bulletin board metaphor, which makes the note-taking / sharing functionality the key functionality of BucketList.

Landing Page

The landing page will contain a simple login in on the top section and a signin in the center.

There will be a small description of what BucketList is somewhere on the page. The main focus of the clean and uncluttered design of this page is to ensure that the user spends the least amount of time on the page and gets to organize their life as quick as possible.

Main UI

After a user logs in, this is the page where they will be spending most of their time. So it must look as clean as possible.

The Main page is divided into three frames. The top frame is just a view of where the user is. It contains the name of the site and logo and all the fancy items related to branding. It also contains todays date to give the user a reference point of the day

The Left panel contains all the information that are most relevant to the user. It provides a quick view of what is on the users list and what must be done. It allows the user to easily add, remove, cross off and modify their tasks and buckets. The specific detail of who is involved in the tasks are not included in this view because I feel like that is more of something in the secondary information category

The right pane is where the user can get more information about their tasks and buckets.

 If the focus is on a bucket, the user will be able to see all the other users who are currently subscribed into the bucket. The bucket creator will be able to add users to the bucket and remove users from the buckets. Bucket subscribers will be able to request to join buckets, remove their selves from buckets and cross of completed tasks in the buckets. The Bucket creator will also be able to change the bucket title name.

If the focus is on a task, the user will be able to see all the specific users associated with that task and specific notes about the tasks per user. Meaning each user will have a section to put their thoughts about the task they are going to complete. In this view, each of the subscribers will also be able to change the task title.

Learnability:

The overall idea of this design was to keep things as simple as possible. On the left, the user is given a chance to add buckets and tasks into buckets. And when a bucket is clicked on or a tasked is clicked on, The main window on the right will show certain information about the bucket or tasks. The information will include notes about the tasks, and the collaborators involved in each bucket and specifically the tasks.

Visibility:

The Top – Contains information about the website, user information and settings. Also contains the date for a reference point for the user to know when it is.

Left Pane – Contains a hierarchal format of tasks and buckets. It shows the titles of each and if it’s a group task or individual tasks. The user is also allowed to search for specific tasks/buckets in case the list gets too long. The user is also allowed to add, remove, and check off tasks quickly. This contains the important information that will be useful to the user for quick access

Right Pane – Contains more detailed information about the Buckets and Tasks. In the Case of the Bucket – IT will contain the bucket title and those involved in the bucket. It also will allow the user to send bucket subscription requests to other users and allow the bucket creator to unsubscribe users.

Efficiency:

The idea of keeping things simple lead to the dynamic once page idea. To the user it will flow better if it seems the pages aren’t changing. Every click will keep the users information in focus allowing the user to easily add, remove, and modify tasks and buckets.

Errors:

Again, with everything on one dynamic page and easily accessible, the user should be able to recover from errors a lot faster.

Overall:

All in all, we would like to keep the main UI of our group task organizing web app as simple and straight to the point as possible. It will always keep what is important in view to the user at all times.

Learnability:

This design is very easy to learn. Since there are not a lot of features, there aren't many areas which can introduce confusion to the user. In addition, each page is very simple, as each page has a very specific function (add a task, add a bucket, etc).

Visibility:

Once concern with this design is the lack of visibility. For example, when editing a task, the user cannot see what other tasks need to be completed. In some situations, this might not matter, but other times it might be nice to see reminders of what else is going on while editing / adding tasks. This design tracks modes well, and always displays the logged-in user's name, and shows who else is collaborating on tasks.

Efficiency:

Adding tasks is relatively easy, however it requires navigating away from the main page. This introduces some efficiency concerns, as there is a lot of time spent navigating through pages before simple tasks can be accomplished. However, since each action requires very little sub-steps, the overall efficiency of the system is still ok.

Errors:

It is possible to easily remove / add users, or edit bucket / task details, therefore any error is easily correctable. In addition, since there are lots of intermediate steps when adding information (navigating to new pages and clicking 'ok'), errors will likely be more rare in this design.

Overall:

This design is easy to use and individual pages are very simple, but the overall it is more complicated than the other two designs. Having multiple pages to navigate through makes the layout of the individual pages less complex, but the website as a whole becomes more complicated to navigate through / learn, and there are more sub-steps to complete for each action the user takes.

  • No labels

1 Comment

  1. Tsung-Hsiang Chang

    Good scenario and designs