Design
Our final design is not very different from our design after GR4. On the front page, some of the symbols for restrictions changed, as seen below. Originally, we were planning on using symbols such as cheese and meat to designate different restrictions; we settled on using letters that are commonly used to designate restrictions.
Selecting restriction buttons still works as before. The custom button’s textbox now has autocomplete. Originally the custom button’s slide out bar slid downwards from the custom button. It now slides to the right. This was changed after paper prototyping feedback.
Below is the results page. Originally no recipe would be displayed after a search, but we changed it to show the top recipe by default after a search.
A mini-search bar was added to make it easier to correct searching errors. Previously, during paper prototyping, it was necessary to go back to the homepage to search again.
The original recipe and the substituted ingredients can be toggled using this button. This has been the same for the whole process.
When the substitutions are present, the old ingredients are crossed out.
Additional substitution information can be found by hovering over the tooltip. This is one of the few things that still confused users during our last round of user testing as sometimes they didn’t realize that they could hover to attain more information.
There is a loading screen with this animation.
Overall, since the website idea was straightforward, we successfully implemented a simple user interface. We received good user feedback, primarily during paper prototype testing, and we integrated suggestions into our interface.
Implementation
[implementation]
Evaluation
[evaluation]
Reflection
[reflection]