New loading GIF for delayed loading iframe forms. Feature later extended site-wide
IT Help issue submission page
IT Homepage (Tablet)
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.
New ‘Locations’ page with embedded maps and details for each Continuing Studies teaching site (Mobile)
Refreshed Program and Courses Listing (Desktop)
New tab listing of programs by citation type
IT Homepage (Desktop)
Expanded, more visually robust Registration page
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
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 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
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!
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
