At Pasadena City College (PCC) every new student must take an Online Orientation. PCC’s existing Online Orientation was built 5+ years ago and was a series of videos that were outdated, but also allowed for little flexibility in modifications to content or updates over time.  Additionally, it collected no user information other than completion. PCC’s Online Orientation is an integral step to introducing students to PCC as well as setting them up for the next steps in the onboarding process to registering for classes.

PCC Online Orientation goals:

  • Mobile First
  • Content Management System
  • Integration with their systems including Banner
  • Introduce PCC to new students and the resources available to them
  • Gamification
  • Track users through to completion
  • Collect user information
  • Mobile phone number verification

Our Approach

Working on a tool that is used campus-wide and brings together so many different departments, people and facets of the school can be a challenge.  With any project of such scale, we start first by getting stakeholders from all interested parties together to understand their individual goals and needs — get their buy-in. From there we zero in on a core group that will help us bring the project to fruition reaching out to experts in various areas as needed.

Due to the nature of needing to integrate with PCC’s existing systems including Banner and PCC having the benefit of having an in-house programmer, we worked with PCC’s web team (shout out to Dave Smith) to help with the backend development and integration.

We decided to use WordPress as our content management system as it gave us a leg up on the admin side as well as the flexibility of integrating with PCC’s systems and control over layout and design.

Content and Design

We used common patterns and structure used in online courses and classes as the inspiration for how we approached both the Orientation content and design. We finally split the Orientation into sections each centered around a particular topic within a similar structure:

  1. Introduction Video from a Current PCC Student
  2. Table of Contents
  3. Content
  4. Summary of Key Takeaways
  5. Form Questions Related to Section

Within each section, we designed various components and design patterns that could be used in a variety of ways to maintain overall aesthetic consistency, but better engage students with the content they were absorbing.

User Experience — Progress and Gamification

We wanted to create a “gamification” aspect to the Orientation to keep students engaged, add a little fun, and have them pay attention to key takeaways.  Using PCC’s mascot, Larry Lancer, we incorporated a points system based of every Larry the user “squashed.” Larry Lancer’s face would be attached to key takeaways and important information that we wanted students to focus on. Each time they click on the “Larry” they receive a point which is tallied throughout and presented upon completion. Considering there was no actual prize that a student could win, we introduced this as a concept to add a little humor to what in the past has been a “boring” introduction to PCC.


Working with PCC we mapped out the necessary integrations with existing systems. We then worked with PCC’s programmer, Dave Smith, to build out integrations with WordPress, Banner, CCC Apply and Twilio. Students needed to be able to login via Single Sign-On (SSO) using their existing PCC login details and once logged in data needed to be attached to each individual student through to completion.

Office of Strategic Communications and Marketing being the lead on the project, there was an emphasis put on making sure we had authenticated mobile numbers for each student so the school could communicate with students directly and set us up for success in future onboarding endeavours, for example, “just in time” messaging for registration, classes, etc.  Using Gravity Forms and their add-on for Twilio, we worked with PCC’s programmer to create an authentication process to verify mobile numbers and store those in a Banner database that can be accessed by counselors, admissions, marketing, and anyone privy to the student data.


Prior to launching we conducted user testing, first internally and then via student focus groups as well as opened the app to anyone that was willing, including High School Students.  We collected the feedback directly via a feedback from that was on the app. We consolidated the data, made adjustments and had a final walk-through with the main stakeholders.

We launched the app mid-semester so that we could test the app in the real world without the pressures and numbers that would be completing the Orientation at the start of a new semester. In the first two weeks post-launch we had 400+ successful completions with no bugs or issues. Ongoing we are collecting data on usage, completion and user interaction.

View Demo: