Talkdrop

Augmented Reality Installation
  • UX/UI

  • AR

  • Spatial Design

  • User Research

View Site

All Drexel Digital Media Seniors are given the opportunity to work on a senior thesis project. Alongside five of my peers, I chose to create Talkdrop. Talkdrop was an augmented reality installation in the lobby of a Drexel academic building meant to bring the students inside closer together. The project took nine months to fully prepare and concluded in a three month exhibition in the URBN Center lobby. I was the lead designer of the Talkdrop team meaning I oversaw all of the visual and interactive elements of our digital application and physical installation.

Research

Digital Media senior projects are entirely open-ended and most of our team members had varying interests. In order to better understand everyone's goals for our project, my team and I performed individual research about our desired focus. We then ran a design exercise in which we would post our ideas on a board and then organized them into categories. This helped us to group concepts together and observe commonalities. These commonalities gave way to team discussion about our relationships with digital media.

Our conversation ended with a long list of assumptions we had about human, social, and digital behavior all revolving around personal connection.

Research exercise Talkdrop Research Board

Testing these assumptions involved running surveys and experiments with Drexel students. We asked them about their personal relationships, especially those that had digital influence. Ultimately we found that over 70% of students felt disconnected from students outside of their classes and 90% wanted to connect better within their academic community.

List of assumptions from research

This survey data and our research findings led us to a powerful theme for our project: “Technology should connect you to the people closest to you. Not just in online communities but in your local communities too.”

In the pursuit of crafting local communities, we came across the concept of a ‘social object’. A social object is something that creates a connection between people, connection creates community. A shared neighborhood, a popular song, or an office water-cooler are all great examples of one. We tested the power of a social object by placing large blank boards with open-ended questions written on top of them in high traffic areas. The boards quickly filled with responses to questions like "What are you working on?" or "What's your dream project?".

Board experiment shortly after set-up Board experiment with a lot of responses

We observed people standing at the boards reading all the answers, leaving their own, and coming back later to read new ones. Students felt comfortable communicating in this medium because it was asynchronous like a forum or thread, they could participate at their own accord. Being able to make your mark and have fun in neutral spaces was empowering and made students feel more connected to their peers.

From this heavy research phase we determined the key components we needed in order to achieve our mission were a social object, a platform that bridges the gap between the digital and the physical, open ended interactions, and a method of communication that is humanizing.

Talkdrop was all of these things and more. Talkdrop was a physical installation and augmented reality companion app that encouraged Drexel students to connect using voice messages exclusive to the exhibit.

Talkdrop concept art

Social Object Design

One of my many contributions to Talkdrop was the design of the installation itself. Although we were digital media students, an important component of our project was the physical exhibit. It acted as an essential anchor for the AR localization, but held a much greater purpose as a place for students to feel comfortable sharing their thoughts.

We believed we could activate an existing space using a physical social object we called the ‘Drop Zone’. Rather than have Talkdrop in multiple locations, we decided it would be best to create one central hub. A singular location gave us better control over the results as well as required people to come out into the world in order to create connections.

The visual design of the 'Drop Zone' needed to be eye-catching but also functional for the Talkdrop experience. By using a variety of visual elements, the social object made AR scanning work properly as well as inform passers-by what they were looking at. Designing the ‘Drop Zone’ required a series of iterative mockups that began with paper sketches that became digital renders.

Early Drop Zone Render Render in the space

The 8 foot tall object itself demands attention with its size as well as its abstract patterns and pops of color. Attached signage provides context and download instructions as people walk by. The informational panels’ physically extrude off the base creating edges that require people to move around the object in order to read all of the information provided . This got people moving more actively within the space before they even opened the app.

The large black and white geometric patterns play with a sense of depth tying into the three-dimensional themes of Talkdrop. They also provide a strong backdrop for the digital experience and create visual contrast with the colorful physical signage. The rainbow of colors displayed on the signage is consistent with the digital 'Voice Drops' themselves. All of these visual elements come together to create the modern and playful attitude of the Talkdrop experience!

The social object is made of four wood panels wrapped in vinyl prints which we glued into a cuboid around a steel beam. The information panels are laser-cut chipboard wrapped in vinyl prints that were then glued onto the larger panels.

Social object informational panel Drop Zone

UX Design

Alongside the design of the physical 'Drop Zone', I worked with the design team to craft the digital experience. This process began with some basic user flows which helped us understand our audience's needs and typical experiences with Talkdrop.

The user flows were not only important in defining use-cases, but also provided a starting point for story boarding the 3D experience. The digital objects we meant to virtually augment into the space held meaning and were to be interactive. We had to make sure their appearance and position made sense and did not overstep its bounds. These design exercises informed us about how users would interact with the augmented world beyond the 2D interface.

User Flows Concept flow

Once we had understood our three-dimensional world, the next step was wire framing. This was an iterative process that reflected several rounds of user testing and visual polishing to reach a high fidelity of interface design. We had a lot of experience wire framing 2D interfaces, but not with 3D objects also being augmented into the space. These digital objects are just as, if not more, important than the interface for the experience. Therefore, we decided to combine our AR story boarding with wire framing. By using a real photo of the space with simple 3D circles and rectangles, we were able to understand how people would interact with their device as well as the world around them.

Early wireframing process Final wireframes

The companion app has an on-boarding experience that acclimates users to the concept and functionality of Talkdrop. We chose to include on-boarding because they usually lacked real experience with AR applications. It begins with simple 2D information and transitions people into the 3D experience with simple steps that introduce the basic mechanics of Talkdrop. Significant user testing gave way to on-boarding that ignored any superfluous information and got people into Talkdrop as quickly and educationally as possible.

Final on-boarding Scanning the social object

Users are then presented with the main screen which displays what their camera sees with minimal interface overlaid on top. We made an effort to minimize the amount of interface to improve the user experience as well as give the maximum amount of space to the augmented objects. Utilizing a camera-like interface was familiar to our audience based on their use of social media apps. Placing a microphone on the central action button made it clear that you would be recording audio. By incorporating familiar iconography like play and stop, the digital functions of the augmented bubbles are intuitive.

Exploring Talkdrop Recording a Drop

Recording feedback was heavily emphasized in user-testing and became an integral part of the design. We created a large 'Recording' animation to assure that people were aware of their actions. The playback screen that follows allows you to delete, change the color of, and place your 'Drop'.

Customizing and placing a drop Having fun with Talkdrop

Conclusion

We held a launch event at the beginning of May 2019, to promote our app. Over the course of the day, we asked students to download and use Talkdrop. In just a few hours, we had 138 voice drops added. Students, professors, friends, even security guards got in on the fun.

For many, this was their first experience with AR. We watched as people played with and used Talkdrop in ways we would never have anticipated, like counting down to the end of the term, talking about a new podcast they’re working on, or placing voice drops in hidden locations.

Within weeks Talkdrop had over 50 unique downloads and over 200 submissions! Check out our website for testimonials and to learn more about Talkdrop!