Annotated Wireframe

Our wireframe is essentially a blueprint for our interfaces. Building from our paper prototype, we created a digital version of the interface, more clearly mapping out where each button, field, and icon was supposed to go. The elements are arranged neatly and with alignment, as the wireframe is the skeleton for what would eventually be the final product.

We created this wireframe to finalize the layout we established in our paper prototypes. The wireframe is intended to show hierarchy of content on the page, as well as exactly where everything should go. It, however, cannot display dynamic properties such as interactions and user flow, so we have added annotations to convey these ideas to the user. Effects such as dimming of a button, actions such as dragging a slider, and the countdown timer, are all annotated to show the intended action.