Goal

There are so many small, but important items in our lives: keys, wallets, phones, glasses, bikes, remotes, children, socks, etc. Jigsaw allows you to easily track and locate all of the small things that help make up the big picture.  Jigsaw is a four piece puzzle where each piece acts as a tracking device with your phone. You can separate each piece and attach it to individual items, because at the end of the day you want all your pieces together, right where you can see them.

Intended Users

Our intended users are rather broad.  Essentially users are any adult with a smart phone device that has a habit of losing personal items.

My Role

I worked with Charlotte Dissmore on this project.  I mainly focused on creating the high-fidelity prototype of Jigsaw; however I did help create half of the paper prototype of Jigsaw, moderated our guerilla research session, critiqued our laser cut puzzle pieces, and filmed our prototype video.


The Process

Ideation

Charlotte and I started the process by thinking of issues that we’ve encountered within our lives.  I brought up the fact that my father has a tendency to lose the important things, such as his phone, wallet, keys and glasses, which slows down his day and frustrates him.  We thought that we could prototype a puzzle object tracker that helps you keep track of items you often lose.  Along with the puzzle pieces, we wanted to create a mobile application that would allow users to view their items on a map in proximity to their location. If the user is nearby their puzzle piece but can’t see it, they can push a button on the app to activate the speaker on the piece. The piece would chime until the user has found it. Additionally, if the user has lost their phone, they can locate it by using one of the puzzle pieces, which would activate the app and call their phone, alerting the user to where their phone is located.

Sketching

We started the implementation of the puzzle object tracker by sketching out what the puzzle pieces would look like and how a user would interact with the mobile app.  We sketched out what objects the puzzle pieces could possible attach to and what scenarios users would use the puzzle in. We also decided that the puzzle pieces should all fit together to create a whole puzzle.   For the mobile app, we sketched out different ways that users could “call” their puzzle pieces.  We ended up deciding that users should be able to view both a list view of all of their puzzle pieces as well as view the whole puzzle of their pieces connected together.  Users would be able to “call” a piece by selecting a piece off of the list or puzzle.  Additionally, we decided that the mobile app and puzzle pieces should be as customizable as possible, so we added a settings page that would allow users to change the name, sounds, and volume of the puzzle piece as well as deactivate the puzzle piece.  Within the settings page we also added a color option that would allow users to change the color that represented the puzzle piece on the app.  We discussed that when a color of a piece was changed on the app, it would also change on the physical piece; however we ended up disregarding this due to feasibility purposes.

Paper Prototyping

We utilized paper, sharpies, and post it notes while creating the paper prototype of our sketches.  The paper prototyping allowed us to more concretely figure out how the app would interact with a user.  We played around with various list, map, and settings layouts and eventually arrived upon the idea of a large list, a simple map, and a drop down settings area.  Additionally, we create many different versions of the map page as we attempted to demonstrate how the icons on the map would change as a user moved around, searching for their puzzle piece and object.

Guerilla Research

After creating our paper prototype, we were lucky enough to recruit a participant to test out our paper prototype.  The participant found our prototype to be relatively complete and stated that they didn’t feel extremely confused.  However, the participant did struggle with the iconography we drew and the color matching we implemented.  We had linked the color of a puzzle piece with the color the puzzle piece was on the map view within the app. The participant mentioned that they had to guess which color represent which piece while on the map and it was difficult for them to remember the color coding scheme and make a color connection.  Additionally, the participant stated that our deactivate button in our settings was too large and too prominent.  The participant thought that the shape and size of the deactivate button in our paper prototype would tempt users to deactivate the puzzle piece without fully realizing what they were doing.

2 1/2 Prototyping

After conducting a short research session, I started focusing on our high fidelity mockup, while Charlotte created the designs for our puzzle pieces.  We worked collaboratively through Charlotte creating the puzzle pieces in Illustrator and me providing my input through critique the puzzle piece designs.  When we had settled on a design that we both agreed upon, we tested the design on matboard, using a laser cutter.  Our first initial design was too large, with each of the puzzle pieces a little bit larger than a smart phone.  Charlotte iterated on the puzzle piece design and made several different smaller sized pieces.  We then laser cut the small pieces on wood.

High Fidelity Prototyping

While the laser cutting was taking place, I worked on turning our paper prototypes into a high fidelity mockup.  I created the high fidelity mockup in Adobe Illustrator and inserted the Illustrator files into Proto.io.  We chose to use Proto.io, because Proto.io allows for audio to be linked to certain areas on the prototype.  We wanted to include audio, because we wanted our app to be utilized by blind people, who wouldn’t be able to read the textual cues on the app’s interface.  In the end, we were able to implement a Siri like voice on the last screen of our app, where users have found their keys; however the recording can only be heard when the prototype in on a mobile device and the success screen is pressed upon and held

View our high fidelity prototype on Proto.io

Video Prototyping

After we finished laser cutting our puzzle pieces and creating our high fidelity mockup we created a video prototype that displayed a scenario where a user had lost their keys and need to find them.  The user panicked, but then remembered that they had their Jigsaw app to help them easily and quickly find their keys.


Outcome

Sucesses

I was really happy with how well Charlotte and I worked together and how quickly we were able to execute the different staged of the project’s processes.  We didn’t have any big issues with the laser cutter, Proto.io was fairly easy to understand and implement, and we able to produce a project we felt proud of.  I really enjoyed being able to experiment with Proto.io.  I initially thought that it was going there was going to a steep learning curve with executing the tool; however I found the tool fairly easy to interpret and understand.

Learned Lessons

While, I am pleased with our final project and the prototyping we created, I wish that we would have had more time to prototype the project.  Charlotte and I had just barely started designing ways that we could make Jigsaw more usable for people with impairments, such as blindness and/or Alzheimer’s.  For instance, Jigsaw could remind users of what items they need to grab at certain times of the day based on a user’s online calendar.  Additionally, we wanted to create a flexible, customizable system and had ideated on designing a puzzle with more than four pieces or a puzzle that had a customizable picture on the top of the pieces; however we ran out of time to try and design the pieces and laser cut them.  Lastly,  we discussed designing an interface for a smart watch that would easily tell users where their objects are and would direct user’s to their objects based on vibrations and visual cues.