Annotated Wireframes

We created wireframes for our full system but mainly focused on the primary tasks. We took designs from the paper prototype as a reference and with no color, images, or actual text we developed this blueprint using Figma which was helpful for the team to think and communicate about the structure of the application.

We included placeholders for Images, texts, buttons, and this low fidelity with no colors helped us to focus on the structure over details. We included Annotations for each page using simple and concise language so that it will be helpful for the team to understand the use or purpose of the button or feature.

We also took the feedback from paper prototypes like the user should be able to search for a book without logging in, separate page for displaying Bookstores and online stores, and adding labels for bottom navigation bar options and made changes accordingly. The site map was helpful for understanding the page flow.