Case study: How to easily design and execute a virtual event

Anas KA
Bootcamp
Published in
15 min readOct 4, 2021
Starting point of a run, the runner looking down to her feet
“Your journey of reading this lengthy article of 3,000 words begins with a single step!”

“Great Initiative! Thanks for conducting iRUN 2.0 for a cause. Kids are super excited to receive the Souvenir and E-Certificate for Magic Miles and I am so excited to receive the medals, e certificate and T Shirts ! Looking forward for the next steps and how the contributions change someone’s life who is in real need.”

Our email inbox is flooded with similar messages as above. We all felt a sense of accomplishment after the participant certificates of iRUN 2.0 are emailed. A much larger task of couriering medals, souvenirs for kids and T-shirts are ongoing. In this article, I’m trying to narrate how we designed and executed iRUN 2.0 — a virtual run organized to fundraise for cancer care of the needy.

Table of Contents

NOTE: The below hyperlinks will only work in browser. The Medium iOS and Android apps didn’t redirect the table of contents.

  1. More Miles, More Smiles :)
  2. At a Glance: What Happens Behind the Scenes?
  3. Tools/Services Used
  4. iRUN Logo and Branding
  5. Google Account at the Centre of Everything
  6. Event Partner for Ticketing
  7. Designing a Website for iRUN 2.0
    Customizing A Free Website Theme
    Webpage Before The Event
    Webpage: Day 1 Of The Event
    Webpage: Day 2 Of The Event
    Webpage Immediately After The Event
    Webpage After The Event
    ‘Need Help?’ Contact Form
  8. Helpdesk Support via Email
  9. Hosting the Website
    The Basics
    Installing SSL Certificates
  10. User Generated Posters
    PowerPoint For Poster Creation!
  11. Social Media Marketing
    PowerPoint For Video Creation!
    Social Media Posts From Desktop
    Instagram Posts From Desktop
  12. Participation Proof Submissions via Google Forms
  13. E-Certificate Generation and Bulk Mailing
    Configuring Official Email In MS Outlook
    E-certificate Template
    ‘Mail Merge To E-mail’ Add-in
  14. There is more to come…
    Acknowledgments

More Miles, More Smiles :)

A young boy with a mobile phone, smiling and pointing up!

‘iRUN’ is a virtual run/walk event — you can run anytime, anywhere you choose, as opposed to running at a specified venue on a scheduled time. This event is organized by the Rotary Satellite Club of Cochin Downtown.

The registration fee collected from the iRUN participants is contributed to CanCure Foundation, a Not-for-Profit Society for assisting the needy people in the process of diagnosis, treatment of cancer and rehabilitation. The first ever iRUN happened in September 2020 and iRUN 2.0 was conducted on 25th and 26th of September 2021.

At a Glance: What Happens Behind the Scenes?

A 10,000 feet view of the steps behind iRUN 2.0
A 10,000 feet view of the steps behind iRUN 2.0

I hope that this article will serve as a reference guide for people who are planning small online events. My plan is to keep this article updated with more relevant details. If you have questions, I would like to hear from you — kindly post them here.

Let us begin, sit tight!

Tools/Services Used

Following tools and services (both paid and free) are used for the executing iRUN 2.0.

  1. FREE — Zoom for planning the entire event via video calls
  2. Adobe Photoshop for designing the logo, branding, marketing collaterals
  3. FREE — Google ecosystem: GMail, Google Drive, Google Forms
  4. For user generated posters and videos for social media: Microsoft PowerPoint!
  5. FREE —All branding collaterals used Montserrat Font from Google.
  6. FREE — Video compression and slicing: HandBrake Transcoder
  7. FREE — Social media posts: Facebook, Twitter, Instagram and WhatsApp status and direct messages to people and groups
  8. Web hosting along with domain registration and official email ID: GoDaddy.com
  9. Online Event Partner for registrations and ticket selling: TownScript.com
  10. FREE — Stock images and graphics: FreePik.com. I used a premium subscription to access exclusive library with Indian models.
  11. FREE — Website theme ‘Agency’ published by StartBootstrap.com for creating a website for iRUN 2.0
  12. FREE — For HTML/CSS editing of the webpages, version comparison and preview: Notepad++, WinMerge and Google Chrome Browser
  13. FREE — FTP client for uploading the website to GoDaddy hosting server: FileZilla
  14. E-certificate generation and emailing: Microsoft Word, Excel and Outlook
  15. FREE — For automated e-certificate generation and emailing, this year we used Graham Mayor’s Mail Merge to E-Mail tool (Version 2.4) along with MS Word, Excel and Outlook.

iRUN Logo and Branding

iRUN logo

Are you seeing a race track as well as an activity tracker (fitness band) in the iRUN logo? Very good! The detailed design story of the logo is narrated here. Since iRUN is the initiative of Rotary Satellite Club of Cochin Downtown, the colors used are the same of Rotary International logo — ‘Rotary Royal Blue’ and ‘Rotary Gold.’

iRUN 2.0 Logo
iRUN 2.0 Logo

To differentiate between last year’s iRUN, instead of adding the year as a suffix to the logo, we decided to use a version system. In 2021, we are using the name iRUN 2.0. In 2022, it will be iRUN 3.0.

Google Account at the Centre of Everything

Google Account at the Centre of Everything
Google, Google, everywhere!

Registering a Gmail ID helped us to do Single Sign-On (SSO) to many services mentioned below (GoDaddy or TownScript) and social media accounts. It is super convenient, especially when more than a person is looking after all these.

Gmail is configured to receive emails sent to official email ID ‘info@irun-rotary.’ Gmail can also send out replies that appear to be coming from the official email ID — a feature known as ‘Alias.’

Google Forms, Google Drive and Google Sheets are useful in ‘Contact Us’ section of the website, proof of participation submission with images and participants data analysis.

Event Partner for Ticketing

iRUN 2.0 page hosted by TownScript
iRUN 2.0 page hosted by TownScript

TownScript.com helped us to create an event page that can handle all registrations and payments. TownScript gives us detailed reports on the registration trends, a complete control on the ticket sales and even promotes our event on their platform.

TownScript ‘Tickets’ admin page
TownScript ‘Tickets’ admin page gives us the complete control on registrations

Designing a Website for iRUN 2.0

CUSTOMIZING A FREE WEBSITE THEME

The website theme ‘Agency’ published by StartBootstrap.com is a good place to start. Using Notepad++ tool, I customized the HTML file to feature iRUN 2.0 specific content in different sections. I also tweaked the CSS file of the theme to apply iRUN branding colors on the webpage. The masthead banner featured a prominent CTA (Call To Action) button and this helped us to draw the visitor’s attention to the most important thing in the entire webpage.

‘Before and After’ the editing of a website theme
Before and After: LEFT — ‘Agency’ website theme; RIGHT — iRUN 2.0 webpage customized from the theme

This website theme is responsive and mobile friendly. The images featured in the masthead are downloaded from FreePik.com using a premium account. Images of Indian looking models are not available in the free account of FreePik. So we had to go premium. Also, image attribution is not required while using this premium license. Pixabay, Pexels and Unsplash are some other free stock image sites for you to explore.

WEBPAGE BEFORE THE EVENT

The website is just like an online brochure — it should have all the relevant information about the event, how to register, registration fee, details of organizers and a contact form.

Website screenshot: BEFORE the event
Website: BEFORE the event

This year, ‘Magic Mile’ — a new category for kids was introduced. So the banner image on the masthead highlighted a couple of kids running. This image was kept till Day 1 of iRUN 2.0. The CTA button was ‘Register’ for the event. On clicking, the user will be redirected to iRUN 2.0 TownScript page with registering options.

WEBPAGE: DAY 1 OF THE EVENT

Website screenshot: DURING DAY 1 of the event
Website: DURING DAY 1 of the event

The banner image on Day 1 of the event depicted a boy playing with a toy airplane. When I first stumbled on to this picture in FreePik, the idea of ‘launch’ resonated well with me and so I decided to go ahead with this image for Day 1 of iRUN. The CTA button was retained as ‘Register’ to accommodate last minute registrations.

WEBPAGE: DAY 2 OF THE EVENT

Website screenshot: DURING DAY 2 of the event
Website: DURING DAY 2 of the event

Another new category that was introduced this year is ‘Family Run.’ You can participate in iRUN as a group of maximum 5 family members. On Day 2 of the event, the banner image in the masthead highlighted a happy family enjoying a scenic park. The CTA button was again kept at ‘Register’ to accommodate last minute registrations.

WEBPAGE IMMEDIATELY AFTER THE EVENT

Website screenshot: immediately AFTER the event, for just two days
Website: immediately AFTER the event, for just two days

When the event was concluded, I changed the banner to an image showing a school kid with a winning smile and a trophy. Now the CTA button was changed to ‘Upload Proof’ directing the people to the Google Forms links for participation proof submission. This CTA button was on display for two days till the deadline was over.

WEBPAGE AFTER THE EVENT

Website screenshot: AFTER the event
Website: AFTER the event

After the expiry of proof submission deadline, I changed the CTA button on the masthead to ‘Donate.’ On clicking it, the webpage will redirect the visitor to the ‘Support Us’ page of CanCure Foundation. ‘Rules’ section was removed completely; contact form was moved to the end of the website.

Following comparison shows the changes made in the website before, during and after the event.

Comparison of changes made on the website: BEFORE, DURING and AFTER the event
Changes made on the website: BEFORE, DURING and AFTER the event

Take a look at irun-rotary.org website now.

‘NEED HELP?’ CONTACT FORM

Although the ‘Agency’ website theme comes with a ‘Contact Us’ form, it needs a paid subscription to work. The easiest workaround was to embed a Google Form in the ‘Contact Us’ section of the webpage.

Google form in action as ‘Contact Us’ form
Google form in action as ‘Contact Us’ form

The height of the Google Form in the ‘iframe’ embedding on the page is fixed at 800 pixels. If the message entered is longer, a vertical scroll bar will appear for the form. Although I’m not happy with the visual appearance of the form (customization options are very limited), it is working perfectly. And that is more important!

Helpdesk Support via Email

People asked a lot of questions to us by:

  • Filling out ‘Need Help?’ Google form on the website
  • Directly emailing to ‘info@irun-rotary’
  • Clicking on the ‘Contact Organizer’ button featured on the TownScript event registration page

Questions ranged from registration category, payment gateway issues, how to record the run distance, how to submit proof of participation, submissions not going through due to technical difficulties, complaints, brickbats and compliments.

Two of us spent day and night in answering the questions using the Gmail ID. Gmail can be configured as a recipient of auto-forwards from the GoDaddy email server so that when people email to ‘info@irun-rotary,’ it gets delivered in the Gmail. Also, the official e-mail ID can be configured as an ‘Alias’ in the Gmail so that our replies from Gmail appear to be coming from the official email ID of ‘info@irun-rotary.’

Hosting the Website

THE BASICS

Website hosting essentials
Website hosting essentials

GoDaddy.com has a hosting plan that provides a domain name and an email ID at a discounted rate only for the first year. We can access the hosting sever via the default cPanel in a browser or through an FTP client. I used FileZilla FTP client for the easiness of updating the website.

Last year, we were using DreamHost hosting service and frankly, it is much better compared to GoDaddy in terms of easiness of setting up a website. But it is costlier than GoDaddy while hosting a single website. So we switched to GoDaddy this year.

DreamHost.com is the best web hosting partner for you if you are hosting multiple websites. The setup of a website is very easy with them and your mind will be at inner peace! You don't have to worry about additional charges for essential services (like custom email IDs, SSL certificates…). On the other hand, GoDaddy will charge you for anything other than the plain vanilla basic service.

INSTALLING SSL CERTIFICATES

GoDaddy doesn’t provide free automated SSL certificate installation from ‘Let’s Encrypt,’ unlike services like DreamHost. So this has to be manually done once in 90 days. This SSL certificate installation will make our website URL redirect from ‘HTTP’ to ‘HTTPS.’ Click here for the PunchSalad tutorial to learn how I installed SSL certificate in our hosting account. It is working fine as intended.

User Generated Posters

An example of user generated particpation poster
An example of user generated poster on iRUN participation

When a person registers for the event, it is always better if they are announcing their participation in social media. Ideally, an online server-side solution like ImageMagick should be used, but because of the lack of technology knowhow on how to use it, I didn’t explore that route now. I will definitely do this for our iRUN 3.0 next year.

Here is what we did as a workaround for iRUN poster creations.

POWERPOINT FOR POSTER CREATION!

A transparent PNG template was created in Photoshop and it was embedded in a Microsoft PowerPoint slide. Now any person can open the PPTX file, insert their selfie photo into it, place it correctly, click ‘Send To Back,’ add name, add place and add their quote on iRUN. This slide can be saved as JPG/PNG/PDF/MP4 formats for sharing in social media.

Poster creaton in PowerPoint
You don’t have Photoshop? Don’t worry, let’s use PowerPoint!

Montserrat font is used in all posters. Download Montserrat from Google Fonts.

An example of user generated finisher poster
Another example of user generated iRUN finisher poster

Social Media Marketing

iRUN 2.0 Facebook page, Twitter and Instagram

We observed that iRUN 2.0 posters on Facebook page and Whatsapp forwards/status messages had maximum reach. Utmost care is taken to use the right hashtags and people tags when posting on Facebook page. User generated posters and their posts related to iRUN are liked to improve the reach and engagement.

POWERPOINT FOR VIDEO CREATION!

Posters and videos featuring celebrities and influencers are posted regularly — first on Facebook page and then on Twitter and Instagram. As soon as endorsement videos shot on mobile phones are received, they are quickly edited and uploaded with iRUN 2.0 branding using — hold your breath — Microsoft PowerPoint!

Video creation in PowerPoint
You don’t have a video editing tool? Don’t worry, let’s use PowerPoint!

The modus operandi is similar to the user generated posters explained above. Here, the video is inserted to an empty slide in portrait mode. ‘Start Automatically’ setting is turned ON for the video clip under the menu ‘Video Tools -> Playback.’ Titles and branding are added on top of the video using rectangular shapes of PowerPoint. Animations (Fade in, Fade out) are added to these shapes as needed. Once all done and reviewed, the file format of ‘MPEG-4 Video’ is selected in the ‘Save As…’ menu. This creates a video in MP4 format with all the right animations.

This video file can be uploaded in Facebook or YouTube. HandBrake Transcoder is used to compress the video further for its easier distribution in WhatsApp.

SOCIAL MEDIA POSTS FROM DESKTOP

Since most of the work is carried out on a desktop, social media posts are done from the desktop itself by accessing social media sites on the browser. More settings and options for social media are accessible from the browser compared to a dedicated mobile phone app.

I always use two browser tabs for the same social media. It is easier to search for people, handles and hashtags in one tab while drafting a post in the other tab. This ensures the tagging of the right people. Imagine doing this on a mobile phone!

It is always better to do social media posts from a desktop than spending time on transferring files from the computer to the mobile phone and then stooping over a tiny screen to type in the content.

But not on Instagram!

INSTAGRAM POSTS FROM DESKTOP

Instagram on a desktop browser will not allow you to post images. But there is a small workaround for that — In Google Chrome, right click on the Instagram page and select ‘Inspect.’

Instagram on Google Chrome
‘Toggle Device Toolbar’ on ‘Inspect’ window of Google Chrome

Now the ‘Inspect’ window will open up on the browser tab. There is a tiny ‘Toggle device toolbar’ icon (‘Responsive design mode’ icon in Mozilla Firefox) on top of this ‘Inspect’ window. Click on it to activate.

Now the Instagram page will appear as if it is viewed on a mobile phone browser. The page width is restricted to 400px or so. Now, just refresh the webpage by hitting ‘F5’ on the keyboard. You can also click the ‘refresh’ icon near the address bar on top. The tab bar should now appear at the bottom with the [+] button for starting a new post in Instagram.

Because of some unknown reasons, PNG images are not allowed to be posted in Instagram. Maybe Instagram cannot handle transparency or image filters might mess up PNG images. Instagram accepts JPG/JPEG images while using the browser for posting.

Participation Proof Submissions via Google Forms

After completing the run, participants are required to upload proofs in the form of a screenshot of the activity tracker app showing the distance. Participants also should upload a selfie photo taken during iRUN. These are required to issue a finisher medal and e-certificate citing the distance ran by the participant.

For collecting the proofs, a new form is created using Google Forms. Mandatory fields are added for entering name, distance ran and image upload options (for screenshot and selfie photo). For analysis and deduplication, emails and mobile numbers used for registering at the TownScript website are also to be entered here.

iRUN 2.0 Proof of Completion form
iRUN 2.0 Proof of Completion form

This form automatically creates separate folders in the Google Drive for the screenshots and selfie photos. In the ‘Settings’ of the form, ‘Allow response editing’ was switched ON and ‘Collect email addresses’ setting was switched OFF.

E-Certificate Generation and Bulk Mailing

This year for iRUN 2.0, we are using Graham Mayor’s Mail Merge to E-Mail tool (Version 2.4) along with MS Word and Outlook. This automates e-certificate generation as a PDF file, attaches it to a new email in Outlook and sends it to the participant without human interventions! This is a boon when you need to send over a thousand e-certificates.

CONFIGURING OFFICIAL EMAIL IN MS OUTLOOK

All certificates need to be sent from the official email ID ‘info@irun-rotary’ that came along with the GoDaddy hosting account. Incoming mail server (IMAP) name, its port number, outgoing mail server (SMTP) name and its port number are to be entered into Outlook configuration page. These data are available from GoDaddy account dashboard.

E-CERTIFICATE TEMPLATE

A certificate template is created in Photoshop. This image file is inserted into a Word file and saved as a DOCX format.

Blank iRUN  certificate template
Blank certificate template on MS Word file

Placeholder for ‘name’ and ‘distance’ are placed on this Word file at the desired location with the correct font size, color and weight.

‘MAIL MERGE TO E-MAIL’ ADD-IN

E-Certificate Generation and Bulk Mailing
E-Certificate Generation and Bulk Mailing

‘Mail Merge add-in’ is installed in the MS Word software that will place a ‘Merge to E-mail’ button on the ‘Mailings’ Tab of the top menu ribbon. An Excel sheet with separate columns for participants name, distances they ran and email addresses is created from the ‘Proof Submission Forms.’ When the ‘Merge to E-mail’ button is clicked in MS Word, a dialog modal window opens up where we can map the placeholders on the certificate to the Excel sheet columns corresponding to names and distances. On the tool dialog window, the radio button for ‘Merge to PDF Format Attachment’ needs to be selected.

Final iRUN PDF certificate
Final PDF certificate that is auto-generated

There is a provision in the tool to add an email subject and body text. When we click on ‘Complete the Merge’ button of the tool, PDF certificates will be generated and emailed one after the other using the official email ID configured in Outlook.

Email to participants with PDF Certificate attachment
Email to participants with PDF Certificate attachment

In 2020 we used Doug Robbins’ Merge Tools along with MS Word and Outlook. Next year we are planning to use Digital Inspiration’s Mail Merge Add-on tool that works with GMail for sending e-certificates. But this is not yet tested fully and it will be evaluated before the 2022 iRUN event.

There is more to come…

This article will be updated with more details once the procured Finisher Medals, Souvenirs for kids and T-shirts are packed and couriered to all participants. Stay tuned…

If you have questions, I would like to hear from you — kindly post them here.

ACKNOWLEDGMENTS

An amazing team worked selflessly for the success of iRUN 2.0 since August 2021. Special shoutout to Sujata, Madhu and Reshmi. This was a learning opportunity for all of us.

Keep smiling and cheers!

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Anas KA
Anas KA

Written by Anas KA

Anas KA is a Designpreneur, UX Strategist, Design Blogger and Product Designer who is passionate in mentoring designers. Writes at Kikkidu.com & designPULI.com

Responses (1)