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.
(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.