← Back to Work

Spec Detect

Student design project

Read about the project ↓
Screenshot of app Screenshot of app Screenshot of app Screenshot of app Screenshot of app Image of glasses and case used for testing Close-up image of glasses

Spec Detect is a group project I was involved in for a human-computer interaction class at UTM in Fall 2018. It is our solution for solving the problem of losing or misplacing glasses.

This article will condense our findings from our project and highlight my involvement with the group.

Roles

  • Researcher
  • Interviewer
  • App Designer
  • Test Runner/Driver

Tools used

  • Pencil & Paper
  • Figma & Figma Mirror

"Where are my glasses?"

In our HCI course, we were tasked to work towards a solution throughout the semester with the theme of "Internet of Things". With this in mind, my group and I juggled a few ideas around until we decided to solve the problem of losing or misplacing glasses. In order to design a solution that fit within the theme of "Internet of Things", we looked towards products such as Tile for inspiration.

Initial Design

Our initial solution – before conducting any research – was a pair of glasses which have a Bluetooth tracker in them that can paired with a companion app which can be used for tracking. I was put as the lead on the design of the app, but everyone in the group had a hand in every part of the design.

Glasses Design

Picture of initial glasses design on paper
A look at our initial design for the glasses, done by another group member.

Our initial glasses design had a Bluetooth radio built in to communicate with the user's smartphone, lights on the outside of the glasses which could be used to help find them in dark environments, a speaker to help finding the glasses using auditory cues and a QR code for easy pairing to the app. The glasses did not have any other "smart functions" on them like a camera, a way to check notifications, or the ability to control music. We wanted the glasses to not be more than a regular pair of glasses and to blend into everyday life. This would also allow the physical build of the glasses to not stand out as "smart glasses" and would make the pair more desirable to wear compared to other smart glasses like Google Glass. The glasses would come with a case which would be used for charging. To charge, the glasses would plug into the case with a port on the inside of the glasses which connects to a plug inside the case. The case itself would be connected to a power source via USB.

App Design

Picture of initial information architecture on paper
The first information architecture that we came up with for the app, based on what features we thought were necessary for the app.

The app would be the main place for users to interact with the search features of the glasses. From the app, you could add pairs of glasses, view location history, locate the glasses and manage a friends list of other users that were a part of the service. We also considered a feature dubbed as Glasses Hunt which would track the position of a user’s glasses in relation to their body – such as when they wear their glasses and when the glasses were off their person – to better help them better track their glasses based on patterns in their actions.

Research and Understanding our Users

With an initial design idea in our minds, we set out to research users to better understand their needs and refine our initial design. Our research consisted of a combination of observations of glasses users and interviews with glasses users. We limited our focus to glasses users, but we considered people who wear glasses all the time and those who only wear glasses a part of the time (e.g. sunglasses users).

We all conducted observation sessions at other classes with a lot of students at UTM. We looked at how students would interact with their glasses during a class. Many of the students in the classes we observed did not wear glasses, but among the glasses users in the classes, we noticed that most students would wear their glasses the throughout during lecture as they probably needed them to see. We noticed some unique behaviour with some glasses users, such as keeping their glasses on top of their head (i.e. not using them to see) and taking their glasses out of the bag as they only need them for reading.

We also all conducted one-on-one interviews with several glasses users. I interviewed five glasses users and focused on the following topics:

  • Where they typically store their glasses
  • How often they worry about losing their glasses
  • A story of them losing their glasses
  • Whether they would consider purchasing glasses with a built-in tracker

What surprised me the most about these interview sessions was probably the stories I heard about a time they had lost their glasses. Many of the stories boiled down to the user forgetting about the glasses before leaving a certain place. A couple users were not able to retrieve their glasses in their stories. Most users kept their glasses in a case when they’re not being used, except for one user who would hang the glasses on the railing of their bed.

Among all our interviewed subjects, we discovered that most glasses users would keep their glasses near their bed or their desk. Part-time glasses users are less worried about losing their glasses compared to full-time glasses users. There were also a few full-time users who don’t worry about losing their glasses because they wear them often. Most of our interviewees lost their glasses within plain sight, but we heard stories of glasses being stolen or lost while on a trip. Most users would consider purchasing a pair of glasses with a tracker in them, but there were a few users who wouldn’t consider them at all as they do not typically lose their glasses.

Updated Design

With our research about our users finished and gathered, we went back to our design to update them based on our findings.

Glasses Design

An image of our glasses design
An updated digital mockup of our glasses.

We did not change out glasses design much from our initial design. We only made the frame thicker to make sure that we could fit all the electronics.

App Design

An image of our updated information architecture
An updated information architecture. We dropped features and reorganized some functions to help us focus on what's important.

Our app underwent a bit of a reduction in terms of scope. We dropped Friends and Glasses Hunt and considered them out of scope for this project. We had a History section on the main level of the app that would show a cumulative location history of all the user’s glasses paired to the app but decided to get rid of that in favour of per glasses history.

As lead of the app's design, I opted to go design an iOS app for this project. While I do not own an iOS device, the other group members owned an iPhone and I knew that designing an app that followed iOS guidelines would help them and other iOS users navigate our app when it came time to test the design. This also gave me a chance to learn and understand the iOS design guidelines, which I was not as familiar with compared to the Android/Material Design guidelines.

Initial App Mockups

Screenshot of our initial app home screen design Screenshot of our initial app home screen design
A first look at our Home screen for the app.

The home screen is where users see all their glasses in a list. From here, users can add a pair of our glasses, take a look at notifications and go to app settings. Once glasses were populated on the home screen, the user can quickly ping their glasses with the icon on the right side inside the list item.

Screenshot of our initial app pairing process Screenshot of our initial app pairing process Screenshot of our initial app pairing process Screenshot of our initial app pairing process
A first look at the process for pairing a pair of glasses to the app.

If the user adds a pair of glasses, we guide them in a step by step process through both of the available pairing methods: QR code scanning and Bluetooth.

Screenshot of our initial app details screen Screenshot of our initial app details screen Screenshot of our initial app location history screen
A first look at the Details screen for a pair of glasses.

Each pair of glasses has a details screen showing the current location of their glasses in relation to them. Users can quickly "ping" their glasses up if they are within range of the user's device, view the location history of the glasses or manage hardware settings such as the volume of the speaker and the brightness control of the lights.

Screenshot of our initial app help menu Screenshot of our initial app help menu Screenshot of our initial app help menu
A first look at the Get Help Finding Glasses menu from the Details screen.

Users can also share the last known location of the glasses to other users through the operating system's native Share feature and access a feature known as "Community Search". Based on Tile's Notify When Found feature, if another Spec Detect user passes by the the original user's glasses that have been misplaced beyond the detection range of the device, Community Search will notify the user when the other user passes by with the approximate location of where the ping happened. The other users are kept anonymous for privacy reasons.

Screenshot of our initial app notification screen
A first look at the Notifications section.

Notifications from the Community Search feature will appear in the Notifications tab. Selecting the notification will open up the pinged location in their preferred maps app.

User Testing

Three classes were spent testing our design with our classmates. We had our classmates run through scenarios of interacting with both the app and the glasses. Those scenarios included the following:

  • First time opening the app and first time pairing the glasses
  • Adding an additional pair of glasses
  • Doing a basic locate of the glasses
  • Doing a community search
  • Unpairing glasses
  • Charging the glasses

We conducted tests using methods such as Wizard of Oz, paper prototyping and high fidelity tests on a smartphone using Figma and Figma Mirror. The hardware we used for the glasses contained no electronics since we do not have access to electronics, nor the know-how to create a working wireless solution. So we used theatre glasses and a spare glasses case to mock our product.

Final Design (for our course)

Our final design consisted of changes we had taken into account from feedback from our testing sessions, as well as an increase in fidelity with the addition of colours and branding for the app. We also came up with a name for our app which he had put off throughout the semester as it wasn't important during the early parts of the design process.

This project represented one iteration of the design process that goes through many iterations before release. The solution I present may not be ideal for shipping as many more iterations would undoubtedly improve the design, but we only had time to go over one iteration.

Final Glasses Design

Image of glasses and case used for testing
For our "final" glasses design and tests, we used a spare glasses case and 3D movie glasses. We also used a sticker to denote a charging light on the case, as well as a cutout of a QR code in the case.

Our glasses and case went through a lot of redesign throughout the testing. Users mentioned that charging was not intuitive and confusing. So instead of a cable that plugs into the bridge, we adopted a system similar to Snapchat Spectacles, where glasses has charging pins in the arms and the case has magnetic pins that line up with the pins on the glasses arms when folded. We also moved the QR code from the glasses arm into the case as there is much more room for the QR code to be scanned, making it easier for the phone to recognize the QR code. We also added a charging indicator light at the front of the case, signified by the yellow sticker.

Final App Design

Our app mostly received visual updates with more colours to help highlight important points of interest, as well as improvements to the flow of certain processes based on our testing.

Image of the final app home screen design Image of the final app home screen design
Through the Edit function, users can quickly rename their glasses and unpair from the home screen. We also added a text label to the Find button to help users understand what the icon meant.

We added labels to the buttons on the home page to help the user understand what the buttons do. We also changed the icon to quickly "ping" a pair of glasses to an icon that made more sense to our users.

Image of the final app pairing process design Image of the final app pairing process design Image of the final app pairing process design Image of the final app pairing process design
We took advantage of an actual photo of the glasses to demonstrate Bluetooth pairing, as well as made the camera viewfinder fullscreen for QR code pairing.

We didn't make any changes to the pairing process apart from moving the QR off the glasses into the glasses case as previous mentioned because we found that our users had no difficulty going through the pairing process.

Image of the final app details screen design Image of the final app details screen design
We added location markers for both the user and the glasses and hid the menu options in a menu to not overwhelm the user with options.

We named the menu with the functions at the bottom of the Details screen the "Assistance Menu" and put the options in a slide up drawer instead of showing them all the time. We found that users would be overwhelmed with all the options being visible at once, so putting them away unless needed was the best action to take.

Image of the final app glasses settings design Image of the final app glasses settings design Image of the final app glasses settings design
Instead of a pop-up dialog for volume and brightness, we used sliders that can be quickly accessed.

We made volume settings and LED brightness settings an easy to use slider rather than burying the option in an additional dialog. We also never had a confirmation dialog for unpairing glasses, so we added that to ensure the user does not accidentally unpair their glasses.

Image of the final app help menu design Image of the final app help menu design Image of the final app help menu design
"Get Help Finding Glasses" was shortened to "Get Help". Community Search was given a toggle as well.

We expanded the Get Help functions into a full screen menu instead of overlaying it at the bottom of the Get Details screen. We used placed the iOS share dialog in the screen to demonstrate that the user can share their location just like how they can share other information on iOS. Community Search was turned into a switch after we realized that the user should have a way to turn off the feature should they either find the glasses themselves or otherwise.

Image of the final app location history design
We made no major visual changes to Today's Locations, but did reduce its scope.

We reduced the scope of location history to only include the location history of the current day and renamed it "Today's Locations". Some of our testers cited privacy concerns over keeping an extensive location history of the user's glasses, and we also came to the realization that old location history for glasses may not be relevant to the user.

Image of the final app notifications screen design Image of the final app notifications screen design
We added a bit of text for the user regarding the purpose of the Notifications screen if there are no notifications.

We added a text blurb if there are no notifications in the Notifications screen to explain what that section is used for, as well as a link to learn about Community Search, which would open the same dialog shown in the Help Menu screen from above. We also added a Clear all button if the user receives a number of notifications that they have no use for.

Image of the final app charging glasses information design
A new information screen regarding how to charge the glasses.

We added a screen to demonstrate to the user how to charge the glasses. While the charging process is made easier, one of our members suggested we add it to have that information available when the user needs it. This screen is accessed when the battery level gets low on the glasses and the app notifies the user of the low battery warning. Tapping the notification will take the user to this screen.

Wrapping Up

This was my first experience working from start to finish on one iteration of a design. Looking back as I write this condensed version of the project, there a few changes I'd make to the design now to further improve it. But all-in-all, I'm very happy with how this project turned out. My group members were fantastic to work with and we all put in hard work to create this project. The experience I got from this class would move forward towards my next design project for another class, where I would get the chance to tackle a different problem area and take different approaches to designing a solution.

Back to top ↑