Langara IT Website Progressive Enhancements

Background

  • Information Technology department approached CM Digital Team to design a new, highly visible “IT Help” button on the IT website
  • Goal to have internal audience of Langara staff, faculty, and students to submit their IT-related issues using the new button and submission form, instead of emailing unstructured queries to the IT Service Desk
  • Scope also expanded to simplifying and reorganizing main navigation items, rewrites of some sections, removal of promotional image carousel

Role

  • Developed a list of possible site improvements and proposed alternatives
  • Executed and deployed all new changes
  • Designed charming new ‘Spinning Cogs’ GIF to play when preloading an embedded iframe form. Pre-loader later rolled out site-wide to all iframe forms.
  • Responsive CSS and HTML in Coda, Sublime Text, and managed collaboration of files in GitHub
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with Digital Strategy Manager and client for content.
  • Worked with developers for deployment and technical adjustments.

https://langara.ca/information-technology/index.html

Digital Yule Log

Background

  • Whimsical holiday campus closure sign for the new digital sign along 49th Avenue
  • Test video capabilities and scheduling abilities of the new sign

Role

  • Concept, design, and typography
  • Converted a fireplace GIF from Giphy into an .MPEG movie, which can play in ViQ Editor and publish to the sign
  • Technical deployment and scheduling

Langara Continuing Studies Website Progressive Enhancements

Background

  • Huge redesign effort to refresh Continuing Studies Website
  • Project began as homepage improvement initiative, but scope expanded as it was clear that attention and improvements were needed in many areas of the site:
    • Users reported registration page was unclear
    • Users reported ‘missing’ course detail information
    • Site-wide secondary menu was not CS-contextual. CS staff reports common instances of students registering for academic studies rather than continuing studies
    • Main navigation was convoluted and contained too many competing items
    • Use of header image carousels for promotional material meant analytics and heatmap software could not reliably ascertain the most popular and appealing content
    • Frequent student reports of frustration due to incomplete information about various classroom locations and teaching sites

Role

  • Analyzed website and wrote a report of 10 usability improvements
    • Each recommendation graded ‘High, Medium, or Low’ based on Difficulty Level, Feasibility, and Importance to User
  • Led Mixed-Methodology Usability Research Approach
    • Physical card-sorting exercise with CS staff
    • Online card-sorting exercise open to general public
    • Independent 3rd party Focus Group Findings (Insights West)
    • Verified and refined final designs using qualitative ‘think-aloud’ participant sessions
  • Led creative vision, prototyping, and mockup designs for each proposed site improvement in mobile, tablet, and desktop viewports
  • Wrote responsive CSS and HTML in Coda, Sublime Text, and managed collaboration of files in GitHub
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with Digital Strategy Manager and client for content as well as Developers for technical adjustments

https://langara.ca/continuing-studies/index.html

Daily Classroom Location Display

Background

  • First proposed deliverable as part of the CS Website Refresh project:
    • Redesign on-campus version of the classroom listing display for Continuing Studies (afternoon and evening courses)
    • Create a new publicly available responsive web version for students checking schedules on-the-go

Role

  • Added visual robustness through increased font sizes overall, clear delineation between rows, and clearer information hierarchy through secondary font, contrast, and sizing.
  • Reduced LCD screen burn-in through programmed alternating backgrounds: daytime, sunset, and evening pictures of campus
  • Designed clear, visible date and time functions to display. Both digital and analogue clocks provide at-a-glance utility for students who may be in a hurried state.
  • Led creative vision, prototyping, and mockup designs for each proposed site improvement in mobile, tablet, and desktop viewports
  • Wrote responsive CSS and HTML in Coda, Sublime Text, and managed collaboration of files in GitHub
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with Digital Strategy Manager and client for content
  • Worked with IT developers for technical implementation and adjustments

Langara Library Homepage Progressive Enhancements

Background

  • Langara Library approached C&M Digital Team for new progressive enhancements to Library Homepage
  • Emphasis on usability and a more focused student experience

Role

  • Increased size of ‘Quick Search’ field to draw more focus to online library search.
  • Addition of Langara Library ‘Layers’ brand elements to promote a consistent brand experience.
  • Design of a responsive CSS ‘Ask a Librarian’ module to minimize pain point for confused students. Promotes librarian utilization in student’s research process.
  • Led creative vision, prototyping, and mockup designs for each proposed site improvement in mobile, tablet, and desktop viewports
  • Responsive CSS and HTML in Coda, Sublime Text, and managed collaboration of files in GitHub
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with Digital Strategy Manager and client for content as well as Developers for technical adjustments

https://langara.ca/library/index.html

Student Links Microsite

Background

  • Brand new, mobile-first new student orientation website for Langara College Student Services
  • C&M Digital Team conceptualized, planned, wrote, designed, developed, and produced all content and assets. Student Links featured: 
    • Checklist of common student to-dos
    • Swipable ‘Tinder’ style cards of good on-campus tips and resources
    • List of key student services and important contacts

Role

  • Led creative vision, prototyping, and mockup designs for each ‘tab’ page in mobile, tablet, and desktop viewports
  • Responsive CSS and HTML in Coda, Sublime Text, and managed collaboration of files in GitHub
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with Digital Strategy Manager and client for content, Developers for technical adjustments.

Awards

🥇 GOLD – Microsite
National Council for Marketing & Public Relations (NCMPR) 2016 Medallion Award
(Western colleges in US and Canada)

🥈 SILVER – Microsite
National Council for Marketing & Public Relations (NCMPR) 2016 Paragon Award
(All community colleges in US and Canada)

https://langara.ca/student-links

Langara Asks 💬 YouTube Video Shorts

Background

  • Kick-off videos for Langara YouTube channel web series called Langara Asks 💬
  • Run-and-gun style interviews of instructors and graduating students at Convocation 2016

Role

  • Concept development, story, graphic art direction
  • Videography and B-Roll capture
  • Video edits and production
  • Audio edits and music selection

Awards

🥇 GOLD – Best Video Shorts
National Council for Marketing & Public Relations (NCMPR) 2016 Medallion Award
(Western colleges in US and Canada)

Bike to Work Week and BC Commuter Challenge Web Videos

Background

  • Short video covering Langara’s Bike to Work Week 2016 efforts
  • Run-and-gun interview style

Role

  • Interviewer and videographer
  • Same day edits
  • Basic audio edits, music selection

Background

  • Short video featuring Langara employee participation for BC Commuter Week 2016
  • Basic interview, cut with GoPro footage

Role

  • Interviewer and videographer
  • Editing for story
  • Audio edits, music selection

‘Teachers Read Nice Tweets’ Valentine’s Campaign

Background

  • Special Valentine’s Day video to promote quality of instructors at Langara College. This was our spin-off version of Jimmy Kimmel’s “Celebrities Read Mean Tweets”
  • Comments gathered through Facebook, Twitter, and Instagram. We asked “Who’s your favourite teacher and why?”
  • Teachers were gathered for personal readings and genuine reactions to unedited student comments

Role

  • Concept, story, and production
  • Art direction, comment graphics, and animation design
  • Video capture (Canon SL1 DSLR, 28mm pancake lens, hotshoe mounted Rode VideoMic Go) and editing (iMovie)
  • Sound editing and music selection

Awards

🥇 GOLD – Social Media / Online Marketing Campaign
National Council for Marketing & Public Relations (NCMPR) 2016 Medallion Award
(Western colleges in US and Canada)

Notable Feedback

Facebook, Twitter, and Instagram Comments

  • “This video is exceptionally well-done! Whoever made it, kudos to you!” 
  • “This is great, I’m lucky to have had 2 of those lecturers featured in the video teach me. Well played Langara!” 
  • “Love this ! What a great idea.”
  • @langaracollege thank you very much for doing this!
  • Very sweet Valentines day video celebrating the teachers of @langaracollege
  • This pretty much sums up why @langaracollege is a great place to work – @tararobertson
  • @langaracollege you guys knocked it out of the ballpark. Awesome idea.
  • @langaracollege I agree! Every teacher that I’ve had at Langara has re-shaped my life in a positive manner – I feel so lucky 🙂
  • @sylvia_tan @thestevequilala Awesome video, super stoked watching it! – @johncmwong
  • @douglascollege you guys really need to step it up. 💁 @langaracollege

Company Emails

  • I just watched the video – you folk in C+M are AWESOME!!!
  • Watched Valentine’s video. Brought a tear to my eye! Fantastic!!!!!!
  • The Valentines video is amazing!! <3
  • Great work you guys. Absolutely adorable and cockle warming (from the bashful blushes). So inspiring. Looking forward to seeing what else you guys are cooking up! Go team go!

‘Langara at a Glance’ website

Background

  • Department of Institutional Research approached the CM Digital Team to develop a new at-a-glance, dashboard for important, publicly-shareable College metrics
  • Total of nine (9) Tableau dashboards outlining demographics and composition of the student body.
  • Tableau dashboards, needed to be mobile-friendly
  • Each dashboard featured multiple dimensions including:
    • Term-by-term Registration Numbers
    • Aboriginal student enrolment
    • Residency status of students
    • Country of origin for student body
    • Lower Mainland city of residence
    • Age group and gender
    • Students by program
    • Credentials awarded

Role

  • Developed a solution to make Tableau dashboards available on mobile devices by swapping CSS display: show/none; with viewport media queries for 2 separate desktop and mobile dashboards
    • Hide 300px wide Tableau dashboard for desktop query
    • Show 500px wide Tableau dashboard for mobile query
  • Designed visually appealing vector graphics and icons to showcase key College metrics (Adobe Illustrator and Photoshop)
  • Led creative vision, prototyping, and designs for mobile, tablet, and desktop viewports
  • Responsive CSS and HTML in Coda and Sublime Text
  • Development, testing, and production sites managed in Cascade Server CMS
  • Worked in collaboration with client for review and content approvals

https://langara.ca/about-langara/langara-at-a-glance/index.html