The Challenge

Edward Jones was gearing up to host free online webinars for clients who would be interested in learning about how to grow and protect their financial future during the COVID-19 pandemic. However, they needed a landing page that made it seamless for users to sign up for a session hosted by a financial advisor.

We were tasked with building an interactive webinar registration tool that would have an easy-to-use interface, while capturing the necessary information from the attendee and notifying the financial advisors.

The high-level work flow looks like this: User lands on page > They search and select from available webinars by filtering from a master list > They are directed to a modal where they enter their information > Finally, email is triggered to the Financial Advisor who reaches out to the participant manually with their Zoom or WebEx info.

Below were the high level details/requirements our team captured:

• Approx. 400-500 Financial Advisors (FAs) would host a session (one session each); they were aiming for approx. 30 participants per session; sessions were 45 mins.
• The webinar program only needed to run for a couple of months.
• Financial advisors had their own Zoom or WebEx accounts that they wanted to use for their meetings.
• When a user visited the landing page they needed to be presented with a list of options, they can filter by FA, location or date/time of webinar.
• Upon selecting a webinar, the participant clicks on the FA and is presented with a modal where they could sign up.
• Sign-Up modals had to be CASL (Canada's anti-spam legislation) compiant
• Sign-Up modals need their own shareable URL that the FA could share to their own contacts. If someone visited the shareable link, it would directly open to the specific webinar that the user shared.
• After signing up, an email notification needed to be sent to that FA with the participants information.
• They needed a database to store all participant registration information.
• It needed to be WCAG AA accessible
• Needed to be responsive for mobile users
• The client wanted a confirmation email + reminder email for the participant who was signing up 
• This landing page could not be hosted on edwardjones.ca site, which meant our team needed to setup hosting and configure a custom domain.
• The webinar registration tool needed to support English and French
• Our client would provide us all the webinar and FA data in an Excel spreadsheet. 
• Due to the limited time we had to implement this tool, the client was not going to be able provide us with designs. Instead, our team would have to handle designing and developing the tool based on the wireframes we were provided. We only had one month to complete the project (Design / Development / Deployment)!
  ‍

The Solution

At Clearoute, we always start with requirement gathering to better understand our client’s challenges and ensure we meet their overall objectives.

We knew the timelines were very tight for this project and our client didn’t have the cycles to provide designs. When our team reviewed the wires, we also felt that the user experience needed to be worked on since the wireframes we were provided had too many steps for the user to complete the registration process.

We identified that the current registration process could be made more intuitive, and that user experience was the greatest driver of higher conversion rates.

We offered to bring in our UX designer to help build high-fidelity prototypes which could then go straight to development since the layouts could easily be converted to code.

Our prototype provided a seamless experience for users to view upcoming & past events, as well as register. To help the client manage registrations, we implemeted a web application that fed data through an online spreadsheet that made it easy to manage access and share using a link.

The prototype was built and approved by the client in 1.5 week, which left us 2.5 weeks for development. We had already started setting up the environments and the Vue.js SPA (single page application) while the UX work was underway. This helped us be efficient so that we could go straight to development when the designs were approved. We completed the development within 2 weeks which left us a couple of days to do QA and implement any remaining client feedback before deploying the tool.

We hosted the web app through Netlify since the site needed to have caching on its static resources. We also used serverless functions to handle the email notifications and even setup a MongoDB to save the registration details since the requirements didn’t call for a relational database (i.e. SQL).

‍

The Result

• Reduced registration time
• Improved user experience
• Simplified data management
• Better site speed
• High event turnout
  ‍

Technologies

• Axure (for prototypes)
• Vue.js + BootstrapVue
• MongoDB
• Netlify Serverless Functions / AWS Lambda Functions
• HTML5, CSS3, JS
  ‍
  

Our Services

• UX
• Design
• Web Development
• UAT