GR6: User Testing
Design
(Insert picture of full first page of interface)
In the end, we decided that the white pane layout best illustrated our step-by-step food ordering process. We grouped together all of the pre-order steps on one page to really show how few steps the user needs to take in order to get begin a food order. Lastly, we decided to put food in the background, because not only will it spark an unsure user's appetite, but if this were a small business, we could use this as advertising space for restaurants in the area (they could send us high-resolution photographs of their menu items, pay a small sum of money, and we could "feature" these food items).
(Insert picture of restaurant selection panel)
For this panel, we knew we had to implement some sort of search and ordering, as there are many restaurants in a given delivery area. However, our computer prototype exposed some design problems that had gone unnoticed. For example, we wanted to highlight the background of selected restaurants, as well as dynamically highlight restaurants when the user hovered over them. However, we never made a distinction between hovering over a selected restaurant or hovering over an unselected restaurant. So, in our final product, we chose two distinct highlighting values. In addition, we also noticed that on the food-ordering sites we were using, restaurants were often listed under multiple categories. Therefore, we made the decision that if a user selected, for example, "Chicago Pizza" under the pizza category, the corresponding "Chicago Pizza" in the American category was also selected.
(Insert picture of facebook panel)
For this panel, we wanted give the users the flexibility of either inviting Facebook friends or sending a mass e-mail out to a list (or inviting non-Facebook friends). Who is logged in is prominently displayed so there is little chance for a mistake. In addition, the "Add Friends" box for Facebook utilizes the exact Facebook way of filtering/choosing friends, so this offers users a familiar experience. We direct people to enter friends' emails with a grayed out cue in the correct box.
(Insert picture of send message panel)
Though there were suggestions to cut this panel and merge it with the add friends panel, we decided to keep this panel both to avoid clustering and to provide the users with a fairly large and obvious continue button. In addition, the third panel was more aesthetically pleasing with regards to the overall layout.
(Insert picture of entire second page)
If the initial user didn't narrow down restaurant selection to one restaurant, this page is the next one that comes up. We debated a lot over how the site would behave depending on how many restaurants the organizer selected. In the end, we decided that if the user selected only one restaurant, then they would be taken directly to the ordering page. Otherwise, they would be brought to this voting page setup.
(Insert close-up of voting panel)
We initially had two radically different ideas regarding the voting system. One was very similar to how Doodle operates, with a binary voting system (the one we ended up choosing). The other was a "up-vote" "down-vote" system similar to reddit. We eventually decided to incorporate the Doodle system, as it was the most straight forward for the users. In addition, this part was the most difficult to display using our layout. During our computer prototype, we only showed two restaurant possibilities. As one of our classmates pointed out, this design wasn't feasible for scaling. In the end, we decided to implement a scrolling display. Unfortunately, this does cause a significant decrease in visibility. However, we want to give our users the most flexibility in restaurant selection (ie, not limit to only 5), and given this, a user can ultimately select all 30+ restaurants, we needed to have some sort of scrolling display. Lastly, only the organizer can see the "choose" buttons, so there is little in the way of confusion.
(insert close-up of chat/order panel)
This was also another box that we had some trouble designing, as there wasn't enough room on the screen for both aspects. We wanted the social aspect of the chat box, but at the same time, the organization aspect of the order box was also necessary. However, we realized that people probably wouldn't be analyzing their total cost and talking to people at the same time for the most part. Therefore, we combined the two into one tabbed box that defaults to the chat. In addition, we also send order messages to the chat box ("foo has ordered bar") to alert others that there are orders taking place, as during the paper prototype testing we found that some people didn't quite understand that everything about this site is social (including the ordering), so we wanted to take no chances with someone not seeing who has ordered what.
(insert close-up of menu panel)
Because restaurant menus have such a wide range of sizes, we also had some difficulty designing how to display menus. We wanted to utilized the predetermined categories, but we were unsure how to display the menu in a way that was aesthetically pleasing with respect to the rest of our site. Eventually, we decided to do the tabs on the side of the panel, with the items on the right (with dropdown accordion for options). However, after the computer prototype we later found that we still had a size issue (and a color issue). Therefore, we changed the background to its current color (white), and added a hover background color for the items. As for the size, we also fixed this one with scroll bars for menu items and menu categories where needed.
(insert close up of bottom panel)
In addition, during paper prototyping, users were having trouble figuring out when their friends were done ordering, and many often pushed the order before their friends had finished ordering. Therefore, we decided that we needed a means to make it very visible when someone is done ordering. Therefore, we added this bottom paned with icons for each person. Initially for the computer prototype, the bar was subtle and contained all of the Facebook photos of the people in the order and grayed out text that turned white when the person finished. However, users of this prototype pointed out that there was nothing to draw their eyes down to that part of the screen, and that the change was far too subtle. Therefore, we changed it to the current red X/green checkmark.