Griddle+Design

Griddle Design

=**Step 1. Developing low-fidelity prototypes**=

Amir's Paper Prototype Amir's Digital Prototype

Ghassan's Paper Prototype Ghassan's Digital Prototype

Janahan's Paper Prototype Janahan's Digital Prototype

=**Step 2. Evaluate the prototypes**=


 * Amir's Prototypes**

When discussing Amir's prototypes, we ran into the issue of the ambiguity of groups. We realized that it would be tricky to implement groups well, as a person could be in a user's specific group, but not necessarily be that user's friend. Also, a user's friend can end up in multiple groups. To reduce the stress of the user's conceptual model, we decided to get rid of the idea of groups. If a user wants to see another person's schedule, they will only have to friend them. Once the user friends another user, he or she can invite the other user to events.

We also came across the issue of adding classes since creating an event for each class would be come tiresome to the user, week after week. We came to the conclusion that classes should be added from the user's settings page with a simple Add Class dialog.

Amir tried implementing public and private events, but was unclear as to how they would work. We decided that private events should show up as "Busy" on the user's calendar. Also, when an event is private, others can only be invited when a user who is presently attending the event invites them. When an event is public, anyone can see the event's details and decided to attend the event.


 * Ghassan's Prototypes**

After looking at Amir's and Ghassan's prototypes, we decided it was pretty essential to put a weekly calendar view on the homescreen, so the user can see their upcoming events quickly. The user should also see who's currently available from the homescreen is also essential.

Ghassan's paper implementation shows who's currently free without much detail, but we decided it would be best to see each free user's status under their name if they have one set.

Ghassan's paper implementation also shows a calendar view on other user's pages. We agreed that the user should be able to see their friend's calendars, and be able to create events quickly by dragging their mouse over the calendar to create a block of time. The user can then set the event's name and invite more if they want to.


 * Janahan's Prototypes**

We liked Janahan's implementation of a "What's Hot" section and decided that would definitely be something we want in our finished product. This way, users can easily see what else is happening on campus, and learn about possible activities that they can attend. This would probably include football games and things that SEE organizes, such as the All-Nighter.

Janahan also included the idea of adding a picture to each user's profile page, which we also decided was a good idea.

**Step 3. Reconsider priorities, and make a decision**
We decided to base our design off of Ghassan's paper prototype, with plenty of modifications.

After further discussion, we agreed on what the final product should look like. We decided that invitations should show up on the user's calendars so the user can see how the event fits in the context of their schedule.

We also decided that when creating event, the user should see two tabs, a "Select Time" tab and a "Best Times" tab. The "Select Time" tab allows the user to select the time his- or herself. The "Best Times" tab shows a list of times that work for all the users invited, and the person creating the event can select whatever time he or she likes best.

In the middle of the page, the calendar will appear. On the left, the list of friends who are currently free will appear, along with their statuses showing up under their names. On the right, the "hot topics" section will appear. If the user clicks an event in the middle of the page, the details of that event show up on the right, covering up the "hot topics" section.

We decided a search feature on the homepage would be a great idea, with the ability to search for people and events.

When creating an event, the user can decide to make the event private. When an event is private, it merely shows up as "Busy" on their calendar.

**Step 4. Refinement**


Without being logged in, the user comes to our splash screen. From the splash screen, the user can either easily login or create a new account from the same page. The user can also learn more about Griddle and see a sample use video teaching them how to use Griddle.



This is the page the user sees when logged in. On the left, the user's profile picture, name, and status appear. The user can change their picture by clicking it, and can change their status by clicking that. If the user is free, Griddle will show who else is free. The user can also click a button to see what everyone else is up to. On the right, hot events appear. These are events with lots of people attending that might appeal to the user. In the center, the user's schedule appears. The user can click on individual events to see more details, or can use their mouse to drag out blocks to create a new event. More on that later. Invitations appear on your calendar as transparent blocks, such as the "Dinner" block with the dots appearing above. Those invitations are clickable, too. The user can see all invitations by clicking Invites on the top bar and the user can also create events by clicking on the top bar. By clicking the Invites button, all of the user's invitations appear where the "Hot Events" appear. Just like the "Hot Events," the user can click on a specific invitation and details will appear below the calendar, just as it does when the user clicks on a specific event on their calendar, as described below.



If the user clicks on an invite on their calendar, details about the event appear below the calendar. The user can select to accept or decline the invitation. This dialog will also appear if the user clicks on events that they're already attending, so the user can decline at a later date and have the event disappear from their calendar.



If the user clicks the "What is everyone else up to?" butt on the left, a box appears in the middle of the screen which shows a list of all of the user's friends, including their statuses and what events their currently attending.



If the user clicks on a friend's name, Griddle takes the user to the friend's page. On the page, the friend's profile picture, name, and status appears. Their calendar also appears. The user can use their mouse to drag out a block to create a new event. This will bring out a dialog under the calendar, allowing the user to set the event's name, invite other friends, and set to make it private. By dragging out the block, the user has already set out the start and end times of the event. The user can do this from their own calendar on the homescreen also.



If the user clicks the Create Event button from the top bar, it takes them to a New Event page. Just like the dialog from dragging on the calendar, the user can set the Event Name, invite friends, set it to private. The user can also set the event length and set the time. A tab bar also appears. In the Select Time tab, the user can select the time manually. From the Best Times tab, Griddle shows the times that work best for all the invitees in a list form, and the user can select whatever time he or she likes best.



If the user searches using the bar on the top, Griddle shows related people and events. The user can see people and friend them. The user can also see event details and decide to attend those.