UX/Strategy, Digital Product
CaseIT Digital Experience
CaseIT Digital Experience

New CaseIT.org Web Experience shown on a Laptop Mockup

Project Summary

A project to establish a digital online strategy for CaseIT as well as take from concept to completion a series of 3 websites that catered uniquely to each of CaseIT's customer segments.

For

CaseIT (Client)

Type

UX/Strategy, Digital Product

Date

2015 - 2016

Role

Strategy, UX/UI, Wireframe, Mockup, Develop

Team

Bruce Beh & CaseIT Design Team (Visuals)

Software/Tools Used

Illustrator, HTML/CSS, Axure, WordPress, PHP/MySQL


Largest International MIS Case Competition

Founded in 2014, CaseIT is an annual undergraduate business case competition where students from around the world come to Vancouver, BC and compete in a 24 hour technology case, reflecting on business problems found in the industry today. The best solution is presented in front of a panel of industry professionals and judges.

CaseIT Customer Journey Framework

Problem

Although marketed as a technology case competition, CaseIT was lacking an online presence that resembled the level of expertise and calibre of professionalism the competition had paralleled. As a result, the competition was falling behind in achieving a digital future.


Research

Our Customer Journey

In order to achieve the goal in a better online presence it was necessary to determine who came to the CaseIT website and why they came to the site. A journey framework was created to map out areas of concern each stakeholder had with CaseIT through the stages of awareness, discovery, finding information, attending the competition and after the competition. The results of this are summarized below.

Sponsors

  • How does this align with our company?
  • What benefits do we receive?
  • Are we being properly recognized?
  • Do we have evidence of creating impact?

Schools (Faculty)

  • What is the competition about?
  • How do we prepare our students?
  • What can we get from attending?
  • How can we do better next time?

Participants

  • What is the competition about?
  • How do I best prepare myself?
  • What tools are available to support me?
  • How can I keep connections I've made?
CaseIT Customer Journey Framework

CaseIT Customer Journey Framework (Click for Full Screen)


Web Traffic Based on Customer Segments

Based on research, user feedback and analysis of CaseIT's web analytics. Each stage of our customer's journey brought on a different increase in segment of web traffic to the CaseIT website. This insight led to the proposed solution of deploying a series of three websites that catered to each customer segment based on their individual areas of concern.

CaseIT Web Traffic by Stakeholders

Proposed Solution

Design, develop and deploy a series of three websites that catered to each customer segment based on areas of concern and addressing any pre-existing friction points.


Process

The Sponsors

Sponsors are what makes CaseIT possible and are typically the first major source of traffic year over year to the CaseIT website during the early stages of planning. This is because the sponsorship team starts working immediately to find new sponsors and renew previous contracts. Without the commitments of sponsors there would be no CaseIT.

Existing Friction Points

We interviewed the existing and past sponsorship teams to try and determine what issues they were facing when talking to potential sponsors. Aside from funding or lack of interest we discovered the following issues.

  • PDF Attachments sometimes did not get past email filters or there was no place to attach a file (web forms)
  • Companies spent a very small amount of time reviewing material that was sent to them
  • There was no accurate way to determine whether a proposal was looked at or opened
  • Proposals often contained information that was not up-to-date since things changed rapidly during the planning process
  • Links back to existing CaseIT website was confusing and had too much cognitive overhead

Why the Sponsorship Microsite?

As the design team was in the process of creating a new CaseIT Brand, we had decided to launch a microsite instead of a re-designed section of our site to ensure we were able to develope this idea quickly without having to worry about affecting the usability and experience of the existing CaseIT website.

This led to the decision of creating a Microsite which targetted only sponsors and what we had to offer. Allowing us to focus on content that was most valuable to potential sponsors eliminating the need for them to have to dig through the rest of our website for information that may not be relevant to them.

We took into account what was already in our PDF Sponsorship Package and transitioned it to a format that made sense for the web. Giving sponsors a concise overview of what CaseIT is, how previous sponsors have seen an impact, what opportunities are available and finally what benefits are avaialble in becoming a sponsor.

CaseIT Microsite Sketches

CaseIT Sponsorship Microsite initial sketches.

As the ultimate goal with the Sponsorship Microsite was to reduce and eliminate the friction points as brought up by the sponsorship team. Design decisions and user-flow was largely shaped by reducing cognitive overhead and answering the questions as presented by the sponsor segment in our customer journey framework. The single-scroll design also eliminated the need for the viewer to have to browse through a menu or click multiple links to get to their destination.

CaseIT Sponsorship Microsite

CaseIT Sponsorship Microsite shown on a Desktop Mockup.


Process

The Participants

The biggest interaction between CaseIT and participants is during the week of the competition. Since our participants were University students familiar with the latest technologies our challenge was improve their CaseIT experience through technology and how we could make their experience better during the competition where stress levels may be high due to uncertainty in the environment and the nature of the competition.

Challenges from CaseIT Participants

In addition to talking to past participants, as a result of the competition having been around for over 10 years and having participated last year it was not hard to come up with a list of issues that our participants had during the week of the competition.

  • Uncertainty in details and rules of the competition
  • Stress preparing for the competition and being in a new environment
  • Who to contact if/when an issue arises
  • What events will be happening and where are they

Why the CaseIT Participant Portal?

These challenges led to the creation of the CaseIT Participant Portal. The goal was to be the one source for information in regards to all things CaseIT for participants during the competition week.

Although some of the information participants were looking for was already available on the main CaseIT website. The participant portal focused on information that was relevant only for participants with much more detail and ways for participants to contact various members of the organizing committee should a question arise (which often did).

As a result the Participant Portal allowed for the following:

  • Participants could verify personal information such as Preferred Names, School, Team Host and Hotel Room Information
  • View a detailed schedule of what happens during each day of CaseIT
  • Customized schedule of deadlines and presentation times based on a random tiering system
  • Live Chat with members of the Organizing Committee during the entire competition period
  • Directory of everyone within the Organizing Committee and contact methods
  • View Important Announcements from CaseIT and their Team Hosts
CaseIT Participant Portal Instructions

CaseIT Participant Portal Instructions.

Since participants have no prior exposure to the system before the competition week due to confidentiality reasons the system was designed to be simple to use. A rapid on-boarding instruction sheet with their account information is provided upon check-in. As the system was designed, implemented and developed in a very short period of time, the website largely represented the default visual style of Bootstrap 2.0.


Process

Schools, Faculties & General Public

Prior to the design of the CaseIT Digital Experience the only online presence for CaseIT was the main CaseIT Website and the CaseIT Facebook Page. As a result of CaseIT being only a week-long competition once a year in Vancouver, BC. A large part of people who interact with CaseIT is through the main website.

Existing Friction Points

The website itself had an aging architecture and design. Information was scattered and the site had looked like it hadn't been updated for a very long time besides the change of the year from 2015 to 2016. While content was available on the website, it was not exactly easy to find.

  • Information was difficult to find (usability issues)
  • Content felt like it had not been updated for a long time (lack of recency)
  • No connection with visitors during the week of CaseIT
  • Did not look visually appealing or attractive
  • Pages had inconsistent layout and navigation

At this point it was about addressing a much wider audience. We had to cater to anyone who could come into contact with CaseIT while addressing the friction points stated above. We also needed to answer the questions that all three customer segments had from our journey framework. More importantly, we had to ensure interested schools and faculty members could find the information they need to determine whether or not CaseIT was a right fit for their students.

The New CaseIT Web Experience

Recency of Information

CaseIT Hero Banner Wireframe

Hero Banner Wireframe

To address the display and recency of information a hero banner shows the most relevant CaseIT information at the time including any new announcements or events that were happening now.

CaseIT What's New Wireframe

What's New Wireframe

We also added a what's new section that would display blog posts and social media posts from our various social media channels. A countdown timer here would also display the number of days until CaseIT.

As we were starting a journey into re-designing the rest of CaseIT, a section dedicated to CaseIT Labs features the process in which the CaseIT Design Team created to prepare for the competition as well as a behind the scenes look of the various things the team does to prepare for CaseIT.

Usability & Finding Information Quickly

CaseIT Quick Links Wireframe

Quick Links Wireframe

We designed a quick-links menu system on-top of our existing global navigation to allow for access to most frequently accessed information.

We also ensured proper use of SEO and implemented a site-wide search powered by Google to allow for all information to be searchable should a user want to look for information through a specific keyword or search term.

Visual Design

CaseIT Visual Experiments   CaseIT Visual Experiments

Visual Experiments

We went through a few variations of visual design and possible layouts for the new website. Ultimately it was decided to follow a professional/corporate feel rather than focus heavily on visuals and added too much visual (and backend) weight to the site.

Physical/Online Presence

To address the lack of a physical/online presence a live-stream component of the competition was introduced for the first time. This allowed family, friends and others who were not able to make it to the finals presentation event to witness in real-time what CaseIT was like from the comfort of their home through the CaseIT website.

CaseIT Web Final Mockups CaseIT Web Final Mockups

Final Mockups


My Responsibilities

  • Developed the Strategy and UX for the entire CaseIT Digital Experience
  • With the CaseIT Design Team, design the UI for all 3 websites
  • Implementation of all 3 websites from concept to completion

Our Results

  • Increased Web Traffic to CaseIT.org by more than 50%
  • 90% use of the CaseIT Participant Portal during the week of competition
  • New Sponsorship contacts as a direct result of the Microsite