Gallery

Prototype

Making and Iterating Our Design Solutions

Overview

After establishing a direction and focus for our design solution, we engaged in various prototyping methods to develop tangible artifacts. We then evaluated our artifacts for functionality and used the feedback to create prototypes at higher levels of resolution.

Implementing Ideas

Paper Prototypes

Conceptualizing Our Prototype

In order to create our paper prototypes, we used the hierarchy from our information architecture to design our interface. Three key goals were emphasized throughout the entire process: one, our users would be able to navigate to a specific indoor location, two, our users would be able to manage their points of interests, and three, they would be able to explore the locations in their surrounding. These low fidelity prototypes allowed for interaction between each interface screen. We then conducted usability testing with our prototype based on the completion of the three tasks and improved upon our initial designs through feedback.

Takeaways

The back buttons needed to be enlarged.
Easy to make changes due to the low fidelity of our prototypes.

Paper Prototypes

Team C.A.T.S. and Paper Prototype

Working on making the iPhone outline for our paper prototypes

Audio Component

Stack of audio component in our paper prototype

Team C.A.T.S. and Paper Prototype

Working on making the iPhone outline for our paper prototypes

Full Document

Simple Evaluations

Evaluating Our Prototype

For the purpose of testing the usability of our paper prototype, we conducted simple evaluations. In the simple evaluations, we invited four users and asked them to complete three key tasks while blindfolded. This allowed us to observe where we succeeded and fell short. We implemented the feedback from these evaluations into our wireframes.

Takeaways

Participants had difficulty understanding units of distance with formal metrics like meters and feet.
Participants had difficulty understanding when to speak when they wanted to dictate commands.
Participants found it difficult to navigate the Favorites UI.

Simple Evaluation

Full Document

Consulting with Hadi Ragin, Accessibility Specialist

Consulting with Hadi Ragin, Accessibility Specialists

Seeking Professional Feedback

In order to receive more feedback on our design, we presented our paper prototype to Hadi Rangin, an accessibility specialist at the Accessible Technology Center and Do-IT at the University of Washington. Hadi is also visually impaired so his feedback was particularly beneficial for our purposes. We implemented his key feedback into the annotated wireframes and in our final high fidelity mockup.

Takeaways

Provide several options for customization in settings such as units of distance changes and the default list or map view for navigation.
Audio information should be used as a secondary source of communication while visual information should be primary.

Annotated Wireframes

Digitalizing Our Prototype

Annotated wireframes are to show the overview of purpose and functions of the product. With the feedback we received from our experience evaluations and from Hadi, we created our annotated wireframes which showcased our app’s functionality. Some of the elements we explored in our wireframes were text sizes, text/background color contrasts, and other visual aspects. This helped us envision our final product, and the improvements we could make to our interface.

Annotated Wireframes

Team C.A.T.S. and Key Path Scenario

Discussing how we should improve the key path scenario

Team C.A.T.S. and Wireframe

Discussing the annotated wireframes

Team C.A.T.S. and Key Path Scenario

Discussing how we should improve the key path scenario

Takeaways

Consideration of the size of visual information presentation
Option for the type of feedback users receive (haptic or audio)

Annotated Wireframe Examples

Key Path Scenario 1

Inputing and navigating to a destination

Key Path Scenario 2

Exploring what's around user

Key Path Scenario 3

Deleting a location from favorites

Key Path Scenario 1

Inputing and navigating to a destination

1/3

Full Document

Finalizing Our Prototype

With the design of our system fairly settled, we created high-fidelity mock-ups to capture the look-and-feel of the app as if it was ready to ship. We enriched interactivity so buttons and links could be selectable and user action could be met with responses. We refined our visuals: thinking about spacing, visual hierarchy, and typography. We also completed the content so that text and visuals would be as close to what would be seen realistically. Because our app relies on screen readers like VoiceOver, we needed to make sure all of our non-text elements had labels that could be interpreted.