Prototypes

Low-fidelity prototype

1. To Sketch Ideas

For the Optimal Experience

We used insights from our contextual inquires to determine the application's key functionalities. We considered the several user cases, from registering before departure, activating the application, searching for matched targets, getting informed with cues, etc...

We determine user flows, sketch the paper prototype, test the prototype with real users, design wireframe pages, and eventually prioritize the most important features before moving our design to digital.

2. Paper Prototype Demo

Test Case 1:

In this video, we will be testing the registration function.
User's goal of this test case is to enter their information and also configure their preferred setting using the mobile version of the application.

Test Case 2:

In this video, we will be testing the searching function. We designed two ways for searching: by keywords or by specific attendee names.
User's goal of this test case is to search for a list of matched attendees or a specific attendee, and to successfully locate the target the user wish to approach.

Test Case 3:

In this video, we will be testing how to switch from the glass app to the mobile / web version of the app.
The user's goal of this test case is to utilize the advantages of cross-platform applications, switch between them anytime at the user's convenience.

Test Case 4:

In this video, we will be testing how to obtain social cues and use them to effectively network with people.
We designed several ways (visual icons, pure texts, audio assistants, trends over time) to display those cues and hints. Users are able to switch and select their preferred interactions with the glass.
User's goal of this test case is to obtain accurate insights and hints from the app, on the social cues that are happening around the user.

3. Digital Wireframe Elements Design

We finished the paper prototype and tested it with real users.

We used insights from previous steps to continue to digitalize our design by making some digital UI elements and wireframe pages.

Figure 1: Logo exploration for the project

Figure 2: Visual prompts for different social cues (displayed in the glass app)

Working Prototype

We continued to work on moving our low-fidelity design to a more digitalized, high-fidelity one based on what users tells us through iterations.

Source code: https://github.com/ssmumu/ARproject_cues.git

Feature 1

Implementation of this feature is to enable users enter their information and configure preferred user settings using smartphones or web browser.
It is an standalone web-based application written in C# using ASP.Net Core MVC.

Figure 1/2: Working Prototype - page design for the mobile version of the app

Figure 3: Working Prototype - page design for the web-based application