Annotated Wireframes

Drawing from our paper prototypes, sitemap and other artifacts from our design process, we created annotated wireframes of our entire system. Annotated wireframes can be thought of as an in depth version of our sitemap. We were able to use the sitemap as a guide for they hierarchy of commands in the menu. We also outlined a visual design of the interface with detailed annotations explaining the proper use and functionality of each element. Once we received user and peer feedback on our annotated wireframes, we once again modified our design to better satisfy the wants and need of our users. Five screens from our wireframe were then fully developed in our high-fidelity mock-up.