Annotated wireframes were a consolidation of what we learned from the paper prototype design and user evaluations, put into a digitalized and more polished form. The annotations allowed us to take a step back and have another look at our design decisions.
Initially we chose Axure for the job like many others, but we later switched to UXPin for the wealth of wireframing resources available on the platform and its greater ease-of-use. The result wireframes in UXPin were much more polished and truer to our original vision.
The wireframes closely relates to the paper prototypes that came before it. The wireframes began as a recreation of the latest paper prototype, which had incorporated our design changes according to user feedback. We also addressed many of the user concerns that we weren’t able to address due to the limitation of the paper medium. For example, we used iOS-native buttons and selection boxes to greatly increase the affordances of many of our controls.
The process of the wireframing also gave us many insights which went into the Hi-Fi mockups. For example, the monochrome nature of the wireframes forced us to consider how the design would look like without hue and saturation, which is important for accessibility. As a result, our wireframes and later Hi-Fi mockups are colorblind-friendly due to the use of different brightness values to distinguish markers and UI states.