Medium Fidelity Wireframes

This was the phase of the project where the most time was spent. Having partially begun this in the summer with different project objectives in mind, the project had to be revised from this point onward to be a solo project.

Though having some initial screens done in advance through Figma might seem to make the work easier, it provided additional challenge in having to make constant revisions to the application and decide on how to make the design more user friendly as opposed to being easier to code. The user flow was revised to include more screens, and these needed to be accounted for as well. I had initially devised 10 screens, though the total would expand to 19 before usability testing was done.

At this point, no branding was devised, as I wanted to focus as much as possible on the layout of the user elements. I felt it was more efficient to guarantee the usability of the project before dedicating development time fully into the branding of the application. As such, there is minimal styling of the screens, only Europa font as a holdover from the initial wireframes.

The original screens were not as detailed, and lacked the compatibility feature that is a mainstay of the final product.

The final version of the wireframes introduces the compatibilty functions that are now a core of the app, as well as more screens and onboarding.

Screen Comparison (Old vs New)

From the old to the new, the screens had to be revised to ensure that dietary restriction information was easily visible for users who depend on this data. As well as that, the screens had to account for the features of the application that were not present in the original iteration, such as a notification system. Error handling was also revised so that a user could navigate to any part of the application from almost any screen. The differences can be seen below, from the old to the new screens, in that order.