Let's Get Our Training On

UI / UX & WEB DESIGN 

JAN - SEP 2016

After being at SideMark for a few years, I’ve come to witness the same systemic issues that plague most organizations – departments working in a vacuum, with their own processes, and not having the understanding or tools to be fully integrated into the overall system.

At the most fundamental level, it’s an issue of communication. We have to communicate to collaborate. To address this communication gap, I started to envision a simple departmental passport training for cross training that is sans manual, fun, funny, and interactive. And I wanted to use the Marketing department as a pilot program.

My team and I used colorful imagery, tongue-in-cheek copy, and gamification to showcase how we are integrated into a company-wide process. This guided experience – contained within a microsite – allowed for face-to-face conversations between departments that don’t usually interact with one another.

We used Webflow to build out the final site.

 

Giving Credit

What was especially important to me was to make sure every team member contributed to the overall experience, especially by doing something they loved and wanted to strengthen their skill set in.

  • Wan Choi came up with the typefaces and colors to be used. He designed all the graphics on the site and built the site using Webflow.
  • Because Trevor Brewster wanted to focus on film and motion graphics, he worked on the A Day in the Life video.
  • Jennifer Herald took on all the challenges collateral – from the jeopardy game to the homework cards. She also spearheaded the “Let’s Get Social” unit of the training.

0.1 MIND MAPPING

I talked to the executive and management teams to understand 1) what they already knew about the Marketing department and 2) what they would like to learn about the department.  

With this insight, I came up with a list of goals that I wanted the Marketing Passport Training to achieve. Using these goals and working backwards, I mind mapped the content structure and training framework necessary for achieving these goals. 

0.2 THE FRAMEWORK

After discussing with my team, I decided to go with 6 basic units, with challenges to reiterate the knowledge in between certain units. There is also a very simple homework assignment designed to get trainees to follow SideMark’s social media platforms.

I believed we needed some monetary incentive. After talking to HR, we decided to hand out gift cards to those who completed the homework assignments.

A. THE MARKETING DEPARTMENT

  • The Four Marketeers
  • Marketing @ SideMark
  • Find Your Way with the GPS
  • A Day in the Life

B. GET DOWN WITH THE LINGO

  • RFPs, mockups, thought starters, presentations
  • closeout binders, QBRs
  • email campaigns, collateral
  • At the end of the day, it's about what you need!

Challenge 1: Don't Jeopardize Your Knowledge

C. DON'T BE AN ODDBALL. FOLLOW PROTOCOL.

  • Heads Up. Seven Up.
  • It starts with a conversation.
  • The devil is in the details.
  • Call me (back), maybe?

D. DIY TOOLKIT

  • Logos, Forms, and Templates
  • Thought Starter Templates
  • Case Studies
  • RFP Resources: Templates, bios, photos
  • Sales Tools

Challenge 2: Follow the Breadcrumbs

E. QUID PRO QUO

  • project photos
  • project case studies

Challenge 3: Act Out a Scene-Ario

F. LET'S GET SOCIAL

  • Channels
  • Methods of engagement for each platform
  • Previous campaigns

0.3 WEBSITE ILLUSTRATIONS

Wan came up with the typefaces and colors to be used throughout the entire passport training. He then applied the design guidelines to these illustrations for all the hero graphics for the website.

0.4 A DAY IN THE LIFE VIDEO

I worked on the video storyboard and script, and handed it over to Trevor to work his magic. He improved upon what I did and even created his own version of the Harry Potter theme song (using his iPad) as the opening score for the video. And did I mention it was his first time using After Effects.

0.5 PRINT COLLATERAL

Jennifer worked on all the print collateral, including challenges and homework cards. She had to work within the design guidelines set by Wan.

0.6 TRAINING SCRIPT

We were halfway to the finish line before I realized that we needed to know who is going to present/guide which part. I didn’t want to waste precious time deciding who is training which part during the actual training session. So, I came up with a script and asked everyone to practice his or her own parts. The goal was to make sure every team member spoke to his or her various areas of expertise.

We also ran some practice sessions with a few fellow employees, with bribes of free lunch and snacks. From these practice runs, we were able to refine some content and resolve a few navigation issues.

The Marketing passport training was really well received, mostly because of the hilarious video and beautiful graphics. But more importantly, I believe it encouraged all of us to have a sense of empathy when working with each other.

The plan is to develop a passport-training platform for all the other departments at work, each with its own framework and graphic style.

[unex_ce_button id="content_zxyzwy9mq,column_content_u3crrqe86" button_text_color="#000000" button_font="light" button_font_size="12px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/grid-crazy/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]PREVIOUS[/ce_button]
[unex_ce_button id="content_zxyzwy9mq,column_content_2zkscy89k" button_text_color="#000000" button_font="light" button_font_size="12px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/vote/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT[/ce_button]