...
One of our main goals for this application is to make it compatible with different devices. Below we present the interface on an iphone and a computer. We also present the different features and the reasons behind these choices.
Overview screen
When you go to GroupOrder, the first thing you see is a clear step by step process of how this app works. During the paper prototyping we got positive feedback on this as well as the big red button and how easy to notice its clickability (red button = clickable). Our intentions back then was to make it clear for the paper prototyping user that anything red can be clicked. But we ended up carrying the red button with us to the computer prototype where this became the signature design of this app.
Navigation Bar
The navigation bar was one of the parts that we iterated on the most. We initially had the following
We realized two things with it: 1) It did not scale well with the resizing of the screen, and 2) people were perceiving gray as something which is incomplete or inactive (This was one the comments in the heuristic evaluation).
...
As mentioned before, the results from the heuristic evaluation showed that users perceived gray as inactive and red as active in our app, hence, we decided to gray out temporarily unavailable truck. In addition, we also added a note that says “coming soon” if people end up hovering over it or were willing to click on it for a better system feedback.
Menu/Order Page
unmigrated-wiki-markup
We also iterated considerably on the method of selecting quantity. Our original interface, shown below, had a \ [+1\] and \ [-1\] button. After user testing, we received the feedback that it was unclear what these buttons did and users were unsure how to remove an item. We originally thought this had to do with the ambiguity of \ +1, so we changed the label to an up arrow and down arrow. However, this was even more confusing in that the arrows appeared to somehow control the vertical arrangement of the table. Not good.
Tangential to this, we also discovered the issue that when incrementing quantity, the only visual response was the item quantity value under the right “Your Order” section. Users would click on the left side of the page, and not receive any feedback visually close to the button. This was even more so an issue on mobile devices, where the “Your Order” section would be positioned below the entire menu by our fluid layout. In this system, users would have to click to add an item, scroll down to confirm it was added to the cart, scroll up, and continue shopping. Also, not good.
...
This visual simplification led to quicker ordering and much more natural user experience. It also solved the tap-scroll-check-scroll on mobile devices.
Initially had +1/-1 and two columns
Changed buttons to up/down arrows
...
We also added a required field for name, as well as 10-digit phone number validation for the mobile number in almost any format (supports hyphens, parentheses, etc.).
Confirmation
After our heuristic evaluation, we added more information to our order confirmation page. Many users were unclear about what happens when their order was placed and how to contact the site to change an order. We added a phone number to call for questions, which is how we imagine support would be handled for this service with an alpha launch.
Previous screen
Implementation
...