Blogroll

Kababayan Academic Mentorship Program (KAMP) Visual Identity

Background

  • Visual identity package for Kababayan Academic Mentorship Program (KAMP): a VSB-sponsored, weekly, after-school program for newly-arrived, high school-aged Filipino students
  • Conducted a brand convictions exercise with KAMP co-founder to develop an overarching vision and concept
  • Volunteer as Marketing Co-lead

Role

  • Concept, design, and development of all visual identity materials:
    • KAMP Logo
    • WordPress website
    • Stand-up solo banners
    • Posters
    • Business card template
    • Stationery template
    • 1″ buttons
    • Summer KAMP sub-brand

https://www.kamp.education

Langara Registration Videos

Background

  • Langara College Registrars Office needed simple video tutorials to guide new students through the Langara College online registration and waitlisting process
  • Collaboration with International Education and Domestic recruitment departments

Role

  • Video and sound editing
  • Art direction, static design slides, and visual continuity
  • Collaborate with project producers and writers on story flow

Langara 2020 Strategic Plan Website 

Background

  • First project for the new Communications and Marketing Digital Team
  • 2020 plan outlines the College’s vision, mission, and strategic priorities from 2015-2020
  • Goal to develop a new future-looking responsive website for the 2020 Langara College strategic plan, which will not look functionally outdated in the year 2020

Role

  • Designed bar graph graphics in Adobe Illustrator
  • Led creative vision, prototyping, and mockup designs for each proposed site improvements in mobile, tablet, and desktop viewports
  • Hand-coded responsive CSS and HTML one-page lander Bootstrap template 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.

http://langara.ca/about-langara/strategic-plan/2020/

Langara-branded Bookstore Apparel

Background

  • Langara Bookstore approached C&M for cool, new Langara-branded apparel and accessories
  • Each design was tested with physical focus groups and voted on in social media. Most popular design would be made and sold in the Langara Bookstore.

Role

  • Concept, production, and creative lead for all finished designs
  • Led a pop-up focus group in the college main foyer where students were invited to provide feedback on existing Bookstore apparel as well as name their favourite t-shirt brands and materials
  • Led social media campaign where Langara community could vote for their favourite design through Facebook and Instagram ‘Likes’. To encourage conversation, designs were tested against one another.

‘Game of Thrones: Sexy or Sexist?’ -Langara English Forum Displays

Background

  • Collaboration with Langara English Department to promote their new monthly, free drop-in ‘English Forum’ mini-lectures. Each month’s English Forum featured an interesting book or literary themes deemed too narrow of a topic to be offered as a full credit course. “Game of Thrones: Sexy or Sexist?” was the first English Forum lecture.
  • Department asked to see thematic variety in displays, which required a thorough design system
  • Each display consisted of multiple layers of paper or mounted foamcore to produce a ‘diorama’ look. Layers included:
    • Background image
    • English Forum logo
    • Forum title banner
    • Forum location, date, and time panel
    • Foreground featured characters
    • Cover artwork of featured book

Role

  • Designed and produced displays and all creative collateral materials leading up to event
  • Developed a thorough, modular design system for all print collateral including posters, brochures, and handouts
  • All mock ups and final print collateral designs made in Adobe Indesign, Photoshop, and/or Illustrator
  • Collaborated with clients and project lead to edit and massage content to ensure all print collateral was consistent and complete

‘This is Langara’ Campaign

Background

  • College-wide campaign to build up institutional pride through inspiring faculty, alumni, and successful student stories
  • Promote engagement among employees by finding and telling compelling stories about Langara
  • Stretch goal to design first responsive website for Langara College

Role

  • Concept, art direction, design, and production of all campaign items
  • Led team brainstorms about theme, strategies, and promotional tactics
  • Extended campaign look-and-feel in all mediums:
    • Print (Viewbook)
    • Web (responsive campaign microsite)
    • Signage (canvas street banners)
    • Physical displays (event booth displays using alloy autopoles)

2014-15 Viewbook (Domestic)

2015-16 Student Links (Domestic)

http://thisislangara.ca

Official Langara College iOS App

Background

  • First released in Aug 2010 as the first official iPhone app by a BC college
  • One-of-a-kind among other post-secondary/university iPhone apps because it strongly emphasized utility for current students, not simply as a prospective student marketing tool
  • Cancelled classes, News and Events feeds, push notifications, geolocation campus maps, important dates, ontacts, and other important student information

Role

  • Led design and execution for iPhone and Android apps using AppMakr platform (2008)
  • Worked in collaboration with IT developers for Cancelled Classes feed
  • Worked in collaboration with Communications web team to develop, curate, and update validated XML/RSS feeds for News, Events, and Info Sessions
  • Migrated all content, assets, and functions from AppMakr platform to RedFoundry after College-wide transition to current orange brand (2011)

Awards and Achievements

???? GOLD – Nifty and Thrifty ($100 or under)
National Council for Marketing & Public Relations (NCMPR) 2012 Medallion Award
(Western colleges in US and Canada)

Conference Presentation –  (Edmonton, AB, Canada. Apr 2011)
Colleges and Institutes Canada (CICan), formerly Association of Canadian Career Colleges (ACCC)

https://appsto.re/ca/IetRw.i

IT Window Signs

Project Description

These are hanging window signs I made for the folks at the Langara IT Service Desk. The idea was to create out-facing signs that the service desk staff could change throughout the day as needed. Being IT, I thought it was a good opportunity to add some personality to the signs by using easily-recognizable operating system icons.

Materials

They are printed on 4-colour adhesive paper, which was then laminated and mounted on 1/8 inch black PVC Sintra sheets. The completed signs were then drilled at the top corners and hung on windows on the front doors using regular ol’ bathroom suction cup hooks from Home Depot.

Learnings

This is actually the second generation of the signs. The first set was mounted on foamcore, which ended up too light and delicate. In the winter, the wind would occasionally blow the foamcore backed signs right off the hook and over time the corners became so damaged that we had to replace them. Sintra is substantially heavier and more durable. So far, so good.

The icons are loving reproductions of the original Macintosh system icons by legendary user-interface artist Susan Kare. I admire the amount of love, care, and wit into the icons and you can read more about the folklore behind the original Macintosh icons through her BUZZ page. You can also purchase prints of her iconography at Kare Prints. I’ve had my eye on the ‘hello’ script print for years and might finally order one for my apartment.

Role

  • Concept development
  • Research
  • Client relations
  • Representation mockups (Photoshop)
  • Final design (InDesign)

“Tabata This!” Workout Timer

Project Description

The ‘Tabata This!’ workout timer was a passion project I helped my friend Eric with back in the summer of 2012. Tabata is a popular variant of high-intensity interval training (HIIT) exercise strategy. The Tabata regimen, as it’s called, consists of 8 sets of short but intense exercises, each 20 seconds in length, with 10 second recovery periods. The total length of each exercise is 4 minutes.

Eric asked me to help with the design of a workout timer app he wanted to create for himself and friends he hosts at his home gym. He enlisted two very bright iOS and Android developers from the gym to turn our mockups into a working shippable product.

Eric and I collaborated on a new design to:

  1. Make the user interface simpler and more intuitive
  2. Extend the user-experience with sharing tools, a hero screen, and countdown sounds
  3. Make the active countdown clock larger to make it clearer from a distance

Learnings

One of our earliest design insights was that the user would likely set down their devices several feet away and be focused on the exercise and not the clock. After our competitive analysis we noticed that many workout timers at the time were vertically oriented, which limited the size of the countdown numbers. The most popular ones relied on changing background colours to distinguish between workout and recovery periods.

In response to this visually, we decided the numbers should be as large and clear as possible. One of my recommendations included using the font FF DIN for the countdown clock font, which had its roots as a German road signage typeface. Not only was it tall, stark and maximized our vertical screen space, but typefaces of its kind was also very popular among exercise apps at the time (pre-iOS 7 Human Interface Guidelines).

Additionally, the app needed to provide the user with auditory cues through beeps, voices, and other sounds to indicate the start and end of workout and recovery periods. Intuitively, the user would barely be able look at their device screen depending on the exercise and especially after their muscles begin to fatigue over the course of the workout.

Results

  • Launched Fall 2012 as a paid app and later made free
  • iOS downloads: 4,500 free and 800 paid
  • Android downloads: 27,500

Role

  • User interface design
  • User experience recommendations
  • PSD mockups, PNG assets

Spam prevention powered by Akismet