Once coronavirus started to spread, events around the world were being cancelled. First large, then the smallest. My email inbox and Twitter feed became flooded with invites to an excessive number of virtual events. It was too hard to find those invites with the link to join, and assume I remembered the correct time and date.
During the first week of the UK lockdown, I had to organise a small group and Alpha group video conference to gather (challenge #2) us together after an abrupt end to meetings. Getting a URL link was the easy part but posting in chat groups meant the link repeatedly got lost amongst continued conversations, and people would miss start times and be forced to ask for help to find the link and connect successfully.
We wanted to help meeting organisers (from church leaders to fitness coaches to book clubs) organise their online meet-ups and live streams in one place to make it easier for everyone to stay connected when they can't meet physically.
What it does
VirtualMeet is a platform to list and manage an organisation's public and private events taking place online to make it easier for people to discover, register and attend.
How we built it
We began with concept sketches. However, they were built on our assumptions about market opportunities and users’ desires. So we sought to verify how our product would actually fit into people's lives and validate our design choices through research.
Research & Design
Our UX designers designed a brief research protocol to answer 3 key questions:
- What do users want to accomplish?
- How should the product improve to help them accomplish it?
- What concerns and frustrations deter users from our product?
To answer these, we interviewed users, did think-aloud usability tests, and asked them to rate their experience on 9 point scales. To stay relevant to alleviating feelings of isolation and connecting the socially distanced, we only tested with people who are in quarantine, self-quarantine, or talk to people in quarantine and self-quarantine. In total, we interviewed and tested 5 users, including 2 pastors.
While the majority of our design decisions were spurred by this initial research, we would continue to speak with users throughout the hackathon to gather their opinions on various design choices, including ensuring wording is clear and informative, and identifying what video platforms users use most - ensuring that our product is truly user-centred.
Insight 1: Treat it like an event calendar
One key insight was that users are only interested in connecting to communities they are already part of in the physical world or came recommended by someone they know - despite our assumption that users would be open to discovering and connecting to online faith communities. Where we assumed that they would join online communities similar to how they would follow Instagram accounts, or subscribe to YouTube channels, or join Facebook groups, we learned that because video calls and livestreams are a different medium and aggregators fulfill a different purpose, our users had different concerns and priorities that were not analogous to other online communities.
Instead, they drew analogies to event calendars; that is, a way to see what livestreams are on their personal schedule. They also prioritized getting to them quickly and effortlessly. Their primary goal, upon opening our app, was to join a livestream on their schedule.
"If it doesn't save time, what's the point?" - Congregation Member A
In response, we re-imagined the homescreen as an event calendar and relocated features for discovering new channels. Live events were given the highest visibility and can be joined directly from the homescreen. We then relocated discovery features to be near channels that users follow, because testing showed that users conflated channels they follow with channels they don't. Considering that users prioritize their communities over new ones, discovery features were placed in the second tab, a lower priority position.
Similarly, the menu items were chosen and organized according to which tasks users would do more commonly. We also adopted language users preferred, changing "events" to "meets" across the entire app.
Insight 2: Privacy, privacy, privacy
Another key insight was that users had a wide range of privacy concerns.
“We have not posted zoom links in public yet. We are deciding today if we will do that for some upcoming meetings...the concern on posting publicly for a prayer meeting for example would be a group of people "bombing" the meeting and just being disruptive rather then joining for the intended purpose." - Pastor B
In response, we added options to make channels, groups and meets private and invite-only. They are also hidden from users unless invited. And event hosts can remove, block, and report problematic followers.
Our final designs were wireframed and mocked up in Figma, with guidance from the Material UI design system and Web Content Accessibility Guidelines.
The VirtualMeet platform is composed of three pieces of software:
- Frontend - React.js, using the Material UI design library
- Backend - Node.js, using the Adonis.js framework
- Database - mysql
The platform is deployed on Google App Engine with a Google Cloud SQL (mysql) database. The public landing page is built using Wordpress and deployed via the GCP Marketplace. We also set up SSL termination on the Wordpress Google Cloud Engine instance so we can serve the landing page over HTTPS. Using GAE enabled us to quickly deploy the platform to a public IP that we intend to mask behind the
For development, we used GitLab and set up two repos - one for the backend and one for the frontend - and established a continuous integration (CI) process that automatically runs tests and deploys the code to a GAE instance upon merge. The entire process from merge to live code takes < 5 minutes. Also, we used libraries like prettier to help standardize coding styles within the dev team and speed up code reviews.
Challenges we ran into
- Using Google cloud bucket storage to create URLs for images that wouldn't display in-app
- Go Daddy's servers were updated at no notice when we needed to make DNS changes to put the app online
- Putting in mitigation plans so MySQL will not blow the Google Cloud Platform free tier budget
- Mailchimp, Wordpress, GCP and mobile browser rendering can't love each other that much when trying to craft a great landing page and data capture form
- Uploading a favicon using Wordpress and GCP is actually quite hard to solve when it says we don't have enough memory to run action
- Figma continually freezing delayed delivery times
- Attrition of team members who joined but didn't attend or contribute meant we needed a team of twenty to end up with ten to produce what we did in just eight days
- Trying to adhere to development best practices in terms of pull requests, code linting and configuration management while also moving fast and keeping to a hackathon ethos
Accomplishments that we're proud of
- Launching an MVP in eight days with a team that had never worked together before, on 3 continents across 12 timezones, was a logistical challenge that we successfully managed
- The dev team is proud of continuous integration considering eight days ago, we started with a blank google doc to plan our schema
- Taking the time to test twice and putting our users first
- The design team is proud of the entire team for pivoting significantly and rapidly in response to user research data.
- Nicolai: Led from idea to MVP online of a SaaS product for the first time and learned so much from the team
- Jaimie: Learning Figma and Material UI design principals for the first time
- Justina: Learning to apply Material UI Guidelines and flexibly adjusting designs through dialogue with developers
- Eugene: Pulling together the final components and pushing the VirtualMeet app live and learning how to deploy a full-stack application on GCP
- Caleb: Joined day before the start, tech decisions were already made so to contribute had to learn React on the job
What we learned
The coronavirus pandemic has already changed the way businesses work, social groups meet, and even how churches do church. Beyond this virus, we will re-establish physical meetups, however, many people and industries will have participated and gained community through virtual meets that will be valued and retained.
Early in the Hackathon, we learned of two major concerns for Church leaders.
- a lack of knowing who across the Church community was still engaged, especially in larger Churches. We designed the channel subscription, group (Ministry) membership and the option of Meet registrations to help solve this.
- was cross-platform jumping, between Sunday services and small group or prayer participation. For example, Church leaders noted a dramatic reduction in participation when members had to switch from YouTube or Facebook to Zoom breakout rooms to receive prayer. We enabled multiple Meets to belong to a Group (e.g. Sunday Services) to make it easier for members to click into the desired prayer group within the main service Group.
What's next for Virtual Meet
VirtualMeet exists to help church and non-church members maintain or find hope and community during self-isolation and lockdown. Going forward VirtualMeet will provide a fit-for-purpose solution for organisations across the world in many industries who meet online and compete with Meetup.com, Facebook Events and Zoom.
We are offering team members who wish to commit to this start-up an equity stake and those that cannot continue with us will share equally a 5% hackathon equity pool.
Milestone One Launch our product in Alpha at the end of April 2020 with 20-30 churches representing hundreds of Meets
Milestone Two We're targetting 1000 churches to establish their VirtualMeet presence working through formal Church networks with over 9,500 sites that we have already approached, and our networks in New Zealand, UK, Toronto and New York
Milestone Three Through our chosen infrastructure partner, Daily.co, we will begin hosting small format Meets within the VirtualMeet platform to enable cross-ministry events like Sunday service and prayer-rooms within a single environment
Milestone Four Invite health and fitness coaches, book clubs and other social groups, business and life coaches and shared-interest meetups to establish their VirtualMeet presence
Milestone Five Introduce payments and donations for all Channels, Groups and Meets
Milestone Six API Integration with Church management software. Planning Centre is first with Services, Groups and People integrated