Tips from iRUN 2.0
“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.”
-An iRUN 2.0 Participant
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.
More Miles, More Smiles 🙂
‘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?
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.
- FREE — Zoom for planning the entire event via video calls
- Adobe Photoshop for designing the logo, branding, marketing collaterals
- FREE — Google ecosystem: GMail, Google Drive, Google Forms
- For user generated posters and videos for social media: Microsoft PowerPoint!
- FREE —All branding collaterals used Montserrat Font from Google.
- FREE — Video compression and slicing: HandBrake Transcoder
- FREE — Social media posts: Facebook, Twitter, Instagram and WhatsApp status and direct messages to people and groups
- Web hosting along with domain registration and official email ID: GoDaddy.com
- Online Event Partner for registrations and ticket selling: TownScript.com
- FREE — Stock images and graphics: FreePik.com. I used a premium subscription to access exclusive library with Indian models.
- FREE — Website theme ‘Agency’ published by StartBootstrap.com for creating a website for iRUN 2.0
- FREE — For HTML/CSS editing of the webpages, version comparison and preview: Notepad++, WinMerge and Google Chrome Browser
- FREE — FTP client for uploading the website to GoDaddy hosting server: FileZilla
- E-certificate generation and emailing: Microsoft Word, Excel and Outlook
- 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
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.’
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
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
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.
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.
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.
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
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
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
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
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.
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.
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
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
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.
Montserrat font is used in all posters. Download Montserrat from Google Fonts.
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!
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.’
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.
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.
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
‘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.
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.
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!
