Most of us got a taste of real time notifications and updates a few years ago when we saw live updates to notifications and friend requests on Facebook. Anyone who worked on web development wondered what made this magic happen, the rest of us just took it for granted and these days real time updates on the web and mobile is the new normal. If you plan to keep your audience engaged and informed at all times, clunky look ups for updates just won’t cut it.

The case study below examines how we used a real time technology to build user engagement and more importantly the user informed of the latest information that was important to them. There are many technologies and frameworks out there that help you to do this and there are various considerations on which one you should choose but that is another post!

It’s been two years since we started building out eventuosity for our client – an event planning platform that helps planners manage all aspects of their trade shows, conferences, corporate excursions and basically any kind of event where people and logistics are involved. The platform has done well and grown with several hundred events being planned on it with thousands of attendees using the mobile apps to stay connected.

There was one bit missing though – true omni-channel real time features for chat and notifications. Communication is still a pain point with events as organizers and attendees start communicating using phone calls, Instant Messengers, SMS and emails. Organizers need to quickly respond to attendee questions such as – Who is the next Speaker? or Where do I get my attendee badge? The need was simple – we needed a true real time mechanism for chat and notifications. As a co. we have had a fair share of experience building such features for other applications using :

  • QuickBlox
  • PubNub
  • OpenTok
  • Socket.IO

These solutions all have their pros and cons but eventuosity is an early stage start-up and we didn’t want to get bogged down by 3rd party costs and dependencies at this point.

Enter Meteor.JS, a lightweight Javascript framework built on top of NodeJS that does just that – real time web apps. What made this a perfect fit for eventuosity was another thing, Meteor requires MongoDB to store and retrieve messages and eventuosity uses Mongo as its database.

Implementing Meteor was a breeze, we rolled out a micro server on AWS, deployed using the MetorUP script and we were good to start writing up the backend logic. But this post isn’t about the nuts and bolts, it’s about what we achieved User Experience wise in the app.

Most of the UX we built can be seen on popular social networking apps like Facebook, the difference being the objective of those features. Social networking sites want you to spend all your time on them and hence design their notifications as calls to action to keep you coming back. For eventuosity our objective was to keep the Event organizers and attendees updated with the latest happenings at all times. Miss one Event update notification and you could be driving to the wrong convention centre.

So, the first step was to make a persistent application header with the most important notification types so that you don’t message an update on any screen of the web app. You don’t need to depend on your email to check for these updates. The notification type icons have an unread notification bubble that serves as a call to action to check for important updates.

4

  1. Event invites and updates – The notification bell when clicked shows all your updates for events, sub-events, tasks, and resources.
  2. Inbox – The message icon shows notifications for all unread inbox messages received.
  3. Chat – Perhaps the most important shows real time notifications when an individual or group message is posted.

1

Let’s say you are an overworked event planner and have had a long day and decided to catch some tunes on Youtube. Wouldn’t you be anxious if you missed an important question from an attendee or an update of a task that was just completed? Relax – we have you covered.

Desktop Notifications – Thanks to HTML5 modern browsers now support Desktop Notifications. If you give your web app the required permissions, it can keep you informed of notifications even if you are in a different browser tab or even if your browser is minimized.

3

Some users don’t like to give desktop permissions to web apps for various reasons – the feature is quite new or they find them annoying. So we still need way to catch their attention – this is handled as well using the Document Title in the browser tab.

5

Whenever a new notification is received the browser tab title is updated with the unread number of notifications serving as a call to action to check the app for any important updates.

All this talk of notifications but how do you really chat. Well people in the field can chat using their mobile apps and wearables like the iWatch or Moto 360 but how does the planner chat?

The app has a centralized chat screen where we could redirect the user to reply to a chat message. But, what if the planner was busy creating an event or replying to an inbox message. Clicking on the chat bubble notification would take them away from what they were doing and potentially lose unsaved work – NOT NICE! So, we took some inspiration from Google Hangouts, now clicking on the chat notification irrespective of what page you are on opens a small chat dialog on the bottom right corner of the screen where you can quickly reply to a message and close it.

2

So, the above showcases how you can use newly available HTML5 capabilities and the powerful Meteor framework to create a true real time collaborative application that boasts of all the bells and whistles users have come to like (and gotten used to) in modern social networking apps like Facebook and LinkedIn.