Wireframes are grayscale mockups of a product, that utilize the designs created during the sketching and paper prototyping phases. They allow designers to visualize the interactions between components and how each function works together. Unlike high-fidelity prototypes, annotated wireframes do not focus on pixel-specific layouts. Instead, their purpose is to show the layout of features and spacing, which might differ from what the paper prototypes conveyed.

 

The annotation part of an annotated wireframe usually points to a feature that is not completely obvious. These annotations provide insights into the purpose and rationale behind specific design decisions. During our wireframing stage, we captured each interaction between the features and the varying states of the features in the wireframes. In Figma, this is represented by grouping each interaction with a specific feature, and error handling with that feature.

​

Between our paper protoypes and our wireframes we have made a few changes to the designs. Beginning with the authentication page, we added account creation and password reset interactions, as well as feedback for incorrect account info. On the "Add a credit card" page, we added feedback by displaying a success message when a card is successfully added to the account, and an "unable to identify card" message when the card cannot be added to the account. We have also added an "Add an orca card" page as this was a page that we did not include in our paper prototypes. Another page that was created was the checkout page, this is where the user can purchase tickets for their trip. The Saved page has been updated to include the user's trip history. When we created the wireframes for the saved page, we noticed there was wasted space between the saved trips and saved route elements. The trip history section was specifically added to this section as it already uses similar features that the saved trips and routes sections use. We also added the ability for users to edit their saved trips and routes.