GR4 - Paper Prototyping
Platform and Software Specifications
Our project is an HTML5 mobile-web app that loads on a browser. It can render on any smartphone browser. We checked it on the Android; however, the iPhone (from what we tested) renders a better design experience. Our website also works better on newer smartphones - since they are better suited and faster for HTML5, CSS3 and Javascript.
Deep Implementation
Swiping: Swiping should work safely. The library we chose is lightweight and so it should load all pages and swiping should be fast and efficient.
Platform independence: Since this is a mobile-web application, it works on any browser on any smartphone.
Shallow Implementation
Window resizing: Do not turn the phone sideways---the app does not resize well.
Filtering: The filtering (for vegetarian, gluten-free, nut-free, etc) will be done by the backend. Right now, if you click on a filter there will be feedback that you clicked it, but the actual menu items will not disappear. That's why the chicken sandwich still appears when you filter for vegetarian. The only filter that works right now is vegetarian, for the same reason.
Menu items: The pictures are hard-coded in; there is no database that loads pictures. The only menu uploaded is that for Flour Cafe.Platform independence
Interdependence of libraries: Due to a new release which is still someone buggy, but enables some of our features, JQueryMobile will from time to time incorrectly display the page. If this happens, please reload the page. JQueryMobile is still partly in beta.
GPSAuto-complete search bar: We have not implemented searching for restaurants yet because that too will require an extensive back-end.
How to start the prototype
Load the internet on your smartphone and visit: http://aidsorc.org/compprot
When it loads, choose Flour Cafe to explore their menu. Because only the lunch options would be affected by the vegetarian tag, the feedback for filtering for vegetarian only appears on the lunch page (so don't be alarmed if you don't see any feedback on the dessert page, for example).
Tasks (from GR2)
- Share location, and find Flour Cafe (Selecting a restaurant)
- Apply the vegetarian filter to Flour Cafe (Filtering a restaurant)
- Explore the Lunch menu at Flour cafe and find the details on the Portabello Mushroom burger (Viewing the menu)
Reflections
This project imposed a whole new set of constraints on our original paper prototype. We did an additional round of testing on our paper prototype and found that people were open to several layouts. We had concluded after our second iteration of paper prototyping that people would want multiple food icons on the top of the screen and entree details in the center. But in a third iteration of paper prototyping, we just had one huge picture which would take up the entire screen, and people liked that as well. They especially liked the idea of having big pictures so they could see the details of the dish. We ultimately decided to go with a combination of the two because we felt it would be the best use of our screen real estate. The original icons would have clouded up the screen, and one of the main purposes of our app is to give customers a realistic view of what they are eating. We want this picture to be as large as possible, and because mobile screens are so small, we decide to make this picture the main stage. However, we also wanted to include ingredients/price.
Essentially, we ended up with a two-tiered menu - with the main menu showing categories as originally planned, and the second showing a more in-depth view of the dishes. Interestingly enough, with our approach, we arrived to a similar conclusion that startups such as E La Carte which are disrupting the menu space (which might somewhat be a validation of our design), though we do rely on images a bit more.
...