CaseIT Participant Portal

A hub that centralizes all things CaseIT during the week of the competition.
Business Problem

As a technology case competition, many processes for the participant were manual and cumbersome.

The CaseIT Portal was designed for competition participants to be the hub and one source for information in regards to all things CaseIT during the week of the competition.

How might we leverage technology to improve the participant experience during the week long competition event.
As the event has ended, the live site is offline. Please contact me to view an archive.

My Role

I worked with CaseIT as a volunteer during my time as a student at Simon Fraser University. Alongside I worked with five other designers in putting together all creative aspects of the CaseIT competition including all creative assets for print, web and social channels.

My focus was on technology and digital enhancements (website, device management, live streaming and the participant portal). Together, we came up with the concept, strategy, designs of UX and UI. I was the sole front and back-end developer of this project. Everything built was custom created except for leveraging UI kit to help speed up the front-end dev process.

Things I did

  • Defining the digital strategy
  • Lead design sprints and design workshops
  • Wireframes, Interaction and UI Design
  • Prototype and testing with stakeholders
  • Fully develop front and back-end (PHP, MySQL, JavaScript, HTML, CSS)
Planning and Research

Looking at "How Might We"

We began by looking at the journey of a competition participant in addition to looking at old data based on feedback from the portal in a previous year. Through this, we identified touch-points from registration on day 1 to the finals presentation on day 4. This allowed us to come up with the following How Might We questions:
  • Show participants how to use the portal earlier and for what purpose?
  • Introduce the portal earlier in the process and make it meaningful?
  • Map out areas of interest around our event venues?
  • Notify participants of updated information, notices or announcements?
  • Improve communication between participants and their team hosts?
  • Make the schedule more interactive and show a daily itinerary rather than just a timetable?

Live Chat & The 24 Hour Deliberation Period

Usage of the portal spikes during the day 3 deliberation period as competition participants are locked in a hotel room for 24-hours and during this time, all outside communication is prohibited. Therefore, the only method of communication available to competition participants is the "live chat" implemented into the portal.The purpose of the live chat during this time is to answer questions, fulfill requests such as bringing the team food/drinks and accompanying competition participants when they wish to leave the deliberation room.

The Proposed Solution

Knowing that the live chat and portal was being used on Day 3 wasn't enough. We needed to make this the hub for all things CaseIT during the week of the competition. As a result, we decided that aside from a visual overhaul to match our updated branding, it was necessary for us to answer our "How Might We's" in order to provide an improved user experience and allow the portal to fulfill its long term goal. Therefore we decided on the following implementations:
  1. Integrate the Day 1 registration process into the portal
  2. Expand use of Live Chat and increase its visibility
  3. Enable Push Notifications for Announcements and Messages
  4. Enhance the schedule view and provide more valuable information about each event

Day 1 Registration

In previous years, the registration process was all done manually. It required participants to sign several forms by paper and also provide our registration volunteers with their hotel and deliberation room numbers. This was a clumsy process as multiple forms were provided on a clipboard while our volunteers tried to write down the hotel room information that was being given by our already frustrated and tired participants.

Thus we simplified this process by integrating it directly into the portal, reducing the amount of cognitive overhead and frustrations of dealing with paper forms. It also enabled early exposure to the portal giving participants a feel of what to expect.

Portal Activation

Upon arriving at the registration booth. Participants are provided with an instructional sheet which indicates their login information and the portal activation process. The portal activation captures all the information that was previously required in paper form, digitally.
Portal Login Information and Features Overview Sheet
Step 1 of the Portal Activation/Registration Process

To facilitate the process, we also setup an on-site activation booth to allow for participants to go through the activation process immediately should they choose to do so.
On-site Portal Activation

As a result of moving this process to the portal. It allowed for participants to digitally provide us this information and accept/agree to the various forms that were previously required to be signed in paper format. Participants also had the choice of using our on-site activation booth or proceed to their hotel room immediately and completing the activation process at their own leisure.

It also allowed us to capture the hotel room information once the participant had finalized this information with the check-in counter of the hotel thus minimizing mistakes and allowing for changes should any room modifications occur (which often did).

Live Chat

Based on data from last year we had already known the live chat was one of the most popular features of the portal. However we decided to expand the availability of the live chat by integrating it in more prominent locations and providing real-time updates on its availability.

Expanded Live Chat

As a result, we increased the visibility of the live chat offering by including it as a tile on the dashboard, at the bottom right corner of every page, and a separate requests page that gives more detailed information on what the chat can be used for.
Live Chat Tile on Dashboard

Step 1 of the Portal Activation/Registration Process

The live chat status automatically updates based on availability and the live chat widget appears automatically on every page if someone from the organizing committee is online.

Announcements & Messages

Due to the nature of the competition, sometimes things changed last minute. Integrating push notifications with a dedicated announcements and messages page allowed us to efficiently and reliably broadcast a message to over 100 combined participants, coaches and volunteers.
Announcements Tile on Dashboard

To ensure all previous announcements have been read the dashboard also indicates the number of unread announcements the user has.
Number of Unread Notifications

We also implemented a multi-channel push notification system. If the user's browser is focused on the portal, it will deliver an internal site-wide notification. Otherwise, the browser's in-built notification system is used. This ensures that announcements are received (and read) in real-time.
Number of Unread Notifications

An archive of all announcements and messages the user has is also available for their reading pleasure.
Page of all announcements and messages

Enhanced Schedule View

In the previous version of the portal, the schedule view did not provide any new information. It was a time-table rather than a schedule and provided no added benefit to the participant as they were often escorted by volunteers to the various events. As a result, we wanted to include information that would be beneficial to the participant by giving them not only a schedule but also providing more information about each event.
Schedule Tile on Dashboard to remind participants on what's happening next

Detailed Schedule View with Event Description

The detailed schedule view and event description provides additional value to the participant allowing them to get a good sense of what the event is about and how to prepare for it.

The Process

The new features as mentioned previously is largely due to the exploration of asking ourselves questions on how we might do something differently or better. These questions and insights came from the process of running through a design Sprint.

We modified the google venture design sprint to be a 3 day process instead of 5. But largely we kept the same components with a few tweaks here and there:
  • Ideation and Strategy Making (Challenges, Frictions, Technical Capabilities, Constraints)
  • Sketch out different solutions (Rapid, Rough and Quick Ideas)
  • Decide on ideas and storyboard it
  • Vote on the best ideas then develop a user story
  • Work on a refined sketch/prototype and show it to users
Ultimately we ended up with the following artifacts to work with:
Quick, Rapid Ideas and Sketches (Crazy 8's), Preliminary Wireframes and Layouts

Userflow and more "refined" wireframe sketches

Dashboard and Navigation Mockup

Schedule Page Mockup

Our Results

  • We ended the event with a 99% activation rate completed on-site at the registration booth.
  • Every user who had an account logged in more than once.
  • Activity/usage of the portal tremendously increased from previous year on all 4 days
  • Answered more than 190 live chat requests during the competition week

Thanks for reading! 👍

Return Home