Mesh

Mobile App and Data Visualization

Project summary

As part of a long lasting relationship between the Centre for Digital Media and Elevator Strategy, our team was tasked with creating a digital product for one of Elevator Strategy’s most valuable clients: Sustainable Brands.

This project involved the design and development of Mesh—an extension for the existing event app used by Sustainable Brands during their conferences. The primary aim of the project was to design and develop a product that would make it easier for conference attendees to connect with each other.

Conference attendee painpoints

The brief that our team was faced with was to tackle some pain points that the attendees of the Sustainable Brands conference experienced. The main 3 pain points were:

Our solution

A class of third-year Digital Media students were tasked with building an art installation to fill a large room. The only guideline we were given was that it had to match the theme of "darkness."

The most popular idea was a physical game that involved multiple teams made up of players wearing LED-equipped hoodies. This idea was the most ambitious, but also the most exciting.

LUXX is the eventual outcome of that idea.

My roles and responsibilities

I was the front-end developer on this project.

Since the existing app only allowed extensions to be built in React Native, I had to learn how to use React Native.

It was my job to collaborate with the designers and make an interface that enabled all the functionality necessary.

Some of my major tasks in the project were:

Functions of the App

Add/scan a card

On the main page of the app, press the “+” button to pull up the scanner. Scan a QR code on someone else’s phone or badge to add them to your connections.

Show QR code

On the main page of the app, pressing the top bar with your name and picture will pull up your QR code for someone else to scan. Press ‘Back’ to close this popup.

Delete card

To delete a card, in your list of cards, press a card and hold it down until a pop-up comes up. Respond ‘yes’ to remove that card. Note: This will not delete your card from the other user.

Show card

On the main page, tap on someone’s card to show their information.

External links

Once you have opened a card, tapping on the links with open the person’s contact information in the respective apps. Tapping on the LinkedIn logo will open that user’s LinkedIn profile either in the LinkedIn app or the browser if LinkedIn isn’t installed. Tapping the ‘Email’ button will open your email app with that person’s email address in the “to” field.

Export all

On the main page, if there are existing connections, press the “Export All” button to export the current cards in a text file. This information can be added to Notes or Emailed.

Challenges

New platform

I am fairly well versed in web development, but I had limited experience working with React Native. There was a learning curve at the beginning, but I was able to pick it up quickly and deploy the extension successfully.

During the initial stages we were weighing the pros and cons between building a new application or building on top of the Sustainable Brands app. Because we didn’t want the user to download two apps or enter their information twice, we decided that building on top of the current app was the obvious choice.

Platform limitations

The DoubleDutch development kit, which we used to develop the React Native extension, is relatively new. In fact, we were told we were among the first to build on it. Due to this, there was a lack of documentation on how to use it and what could be done with it, and we were frequently in touch with DoubleDutch engineers in order to get parts of the app working. Further issues related to the development kit included:

We were able to get around these issues by making frequent deploys to the app and testing it in the app; but it delayed out development process significantly.

Due to constraints with the DoubleDutch API, when adding a user by scanning their identifier (scanning the badges instead of in-app), the user doing the scanning will be unable to retrieve the email of the scanned person. We were in contact with DoubleDutch about this and we were told you cannot get user emails by identifier for privacy reasons.

Again, due to DoubleDutch API constraints, scanning users by identifier will become increasingly slow as the conference moves on, as the lookup requires getting all users before searching through them. DoubleDutch confirmed this is the only way to lookup users by identifier.

Future directions

Features

Due to the short duration of this project, one term, the CDM team, for reasons of scope, we could not develop all envisioned features for this product.

Here are some further developments that we feel would be good additions to the product.