Medium: Mobile
In March of 2012, RIM (now BlackBerry) was on the hunt for a designer to augment their BB10 in-app icon team. Seizing on this fantastic opportunity, I would later take over as lead in design and management mid-way through the contract, ending at BB10's launch in 2013. Together we produced over 1,500 in-app icons for dozens of core apps.
Cross Cut and Action Bar icons provide key in-app support. Unlike application icons you'll see on the Z10, their look and feel is simple, bold and neutral, giving a good balance between visual readability without distracting from the page content. Color versions that utilized the same style were then created to add punch to Help and Settings drop-downs. Where needed, colour psychology was applied. These icons only represent the core though, with about a half dozen other sizes also produced.
For 3rd party icons, in the in-app style, it was necessary to bend the guidelines a little. Line thickness and gradient styles are more in-line with the brand's original style.
The emoticons for BB10 were designed and updated alongside their previous BB7 counterparts. When I came on board, it was my job to effectively double both sets for a 2013 update/release. The samples shown represent my personal contribution to the BB10 set.
I'd like to thank those that came before me and/or provided much of the visual groundwork: Anton, Dusan, Elaine, Joel, Per, Przemek, Vlad and others. All visuals are the property of BlackBerry and are used under permission.
Medium: Video, Web
As Canada’s top insurer, Sun Life provides coverage for health, life and group-based plans. To better reach their key demographic, they provide informative product videos online. My skills were brought in to help update and streamline the overall look of these videos, integrating closely with the brand and its diverse colour palette. Of the 5+ boards produced; we'll be quickly reviewing 3.
Each production began with a detailed script lacking in visual direction. Working with the producer, I'd discuss various scenarios of execution and present quick concepts for review. For the majority of boards we focused on slick vectors that were, after finalization and approval, plucked straight from the frames and plugged into After Effects. Not only did I provide detailed notes on what was happening in each scene, but highlighted and added in details specific to the animator's needs.
FastForward PlanProtect promotes the new digital claims and review process, counteracting fraud and keeping honest insurer’s premiums low. Graphics are big, bold and easily digestible.
Scotiabank partnered with Sun Life to offer customers a broader range of insurance solutions in-branch. Capitalizing on the similarity of brand shapes, I depicted this merger with great impact.
"Game Changers," was not just a highlight on new innovations in client engagement, but also represented a visual change in direction from previous boards. Rather than having vectors act as the hero, they work as backdrop. These FX pull elements directly from the Sun Life brand mark.
Vector boards depict the max crop (2x3) it might receive post-production. In animation, the elements are easily sized and positioned to HD width. Because "Game Changers" involved green-screen actors that would bleed outside of 2x3, I depicted the full HD width with 2x3 crop marks.
Medium: Print, Web
For their 2011 Annual Report, Toronto Rehab had two distinct needs. The first was to create a bright and lively presentation that highlighted many years of past successes. The second was to produce a layout flexible enough to go from print to web, permitting them to swap out static images for video clips at the beginning of each section.
Copy deck changes were an ongoing struggle to visual flow. This was solved by adding call-out text from key statements in the body.
High quality images were in short supply, so for some portions I supplied photographic services.
The colour scheme is rather interesting in how it worked out. Toronto Rehab's corporate colours are green and blue, yet they wanted a lively interior. After reviewing various print materials produced in the past, there was a multi-colour poster that wound up serving as inspiration. As the last section deals with financial and statistical data, we return again to the green and blue to close out the document.
Infographics in the closing section went through several stages of investigation to determine the easiest methods of communicating the data. Several mock-ups are included (last graphic).
Medium: Web, Video
Coming from a string of distinguished condo and high-rise partnerships in Toronto, Ozz Electric wanted to generate a brag video. While the script was still in development, the producer wanted something immediate with which to drive Ozz's direction. I was tasked with reinvigorating their brand through a hybrid story / style board.
The overall look is very similar to a storyboard -- opening scene with logo as hero, various suggested shots of speaker and text, alternate background shots and suggested closing scene. Further in, there's a detailed breakdown on photo presentation (simplified options depicted).
The opener consists of two scenes meshed together with a flash. A vector 3D logo flies in while a light races across the Z. The light source flares and we transition to the 2D vector.
One feature I was particularly fond of was the day vs night option, developed for most scenes. With the speaker you'll see a more business-casual look in the night shots, and then a very business-oriented feel for the day option. This play on day and night is also reflected in the last scene, where we turn off the lights to close us out.
Lastly, we come to the photo suggestions / style board area, which breaks down the various colours to be used and includes about a dozen (in the full board) stock images for reference and/or actual use (hence visible watermarks).
Medium: Print, Web
In the fall of 2011, Cisco had a big visual problem that needed solving. They owned the artwork for 30+ characters spanning 4 vertical partnership infographics. They had no way to access those characters to generate future presentations and each infographic, having been made years apart, featured differing styles. Also, their partnership list had grown since, and so new characters were needed. Cisco was unsure where to begin.
After discussing the details of the task with Cisco, it was determined they wanted to homogenize character styles, expand the collection to 100+ across 9 verticals and create easy drag-and-drop files for use in PPT and Word templates. My project bid PDF included an infographic of the steps to take, to help clarify (last graphic).
Extracting the characters ranged from simple opening of files in illustrator, to having to redraw from scratch due to low resolution source. Ears, noses, eyes, mouths, expressions, hairstyle and more were all standardized and streamlined. The harder part was generating the 70+ additional characters, trying to make them look like a family that belonged to the base set, while also allowing new personalities to shine through.
Several PPT templates were developed to help aid the customer in arrangement and general sizing.
Keystone icons, at top, are designed to visually stand apart from the characters, and each graphic can be repurposed as a background / backdrop effect for the characters (review PPT template).
Inspiron (fictional) is a company offering a large application suite that allows companies to track and mine data from agent-customer interactions, be it voice or chat.
Inspiron's clientele, by way of a response portal, can generate case logs for immediate review on any software problems users may be having. Inspiron tracks these interactions between their own Agents and the customer. Wishing to maintain superior customer service, a mobile app was requested to meet the needs of mobile Agents and their Supervisors.
The application breaks down into 3 sections - Cases, Training, Contact Us, and I'm showing the most relevant screens around the first two.
Inspiron Agents can monitor all incoming tickets, easily sort and filter their own, and even flag some cases for later follow-up. Supervisors have the same privileges, they simply do not have a MY cases tab.
Note - The inspiration for this project is related to a recent employer with a similar application that I worked on several years ago. Rather than show old work, I have updated the UI in this mock-up to the latest flat iOS look and have changed all references to businesses. Most importantly, I have simplified case functionality and display. This mock-up is not for sale and is for demonstration purposes only of my current skillset.
Medium: Print, Web
In mid 2009, still hot on the heels of the Obama election in the U.S., Cisco had been selected to spearhead the streamlining of health care records-keeping and data delivery for the nation’s hospitals. I worked closely with Cisco to develop a new seal concept that enveloped the ideals of American authority, family needs and Cisco’s innovations in connecting and sharing data. After weighing many different options, we finally settled on a concept posted here.
By fall of 2010, Cisco's role and scope within the U.S. Government has grown to include initiatives involving Federal banking, Homeland Security and various service sectors. My mission was to take these various aspects and develop several new logos based upon our original health care initiative. In essence, build a brand family that could work as stand-alone items or in tandem.
Utilizing the past style and colour formatting gave us the opportunity to focus more on brainstorming graphics for the middle seal. 2 of the final 5 seals are presented and described below...
The Homeland Security branding focuses around building a custom version of the DHS seal, working in scales for commerce and a lock with WWW for cyber security. An image of the U.S. Fades into the background as the “Cisco swoosh” of data rushes over top. The swoosh, which also appears like a U.S. Flag, was a favourite of Cisco in developing the health care branding.
For Federal Financial, Cisco sought the power of the Eagle to represent safety, security, and an always vigilant nature. In addition to the Eagle, we worked in a highly detailed image of the Federal Reserve building, in loosely keeping with the look and feel of the White House seal. In addition, simplified scales were introduced along with a shield and lock combo, representing financial security.
Medium: PPT, Print
Starting with a simple branding project on information awareness, Cisco sought to portray a flexible ribbon of 3 colour tones for Synapse. Working with a triangle theme, the curves and direction help to represent the flow of information.
Expanding upon the branding project, a full-page illustration was designed for use in PowerPoint and print. Working now with 4 areas of focus, I designed a layout which harkened back to the popular game, Simon Says. To the uninitiated, Simon Says was a game that issued instructions and players had to follow those instructions to the letter, or else!
All layers and special effects were built within Adobe Illustrator. Style was kept very clean, and orange was added as a warm highlight to the base blues, yellows and greens.
Medium: Print, Web
Email Karma works directly with businesses who maintain client email lists, ensuring that they use best practices.
The main theme that the client wanted to portray is that “EK” can assist any business in rehabilitating their client list to rebuild trust. I felt the best way to achieve the blended idea of positive karma with rehabilitation was to incorporate the Yin-Yang symbol into the graphic. From there, I worked in 2 emails with one facing towards flames (sad expression) and then one with a halo (smiling). For the final touch, the positive email and the Karma text were set in a warm golden yellow. The client loved the result. Additional touches included a semi-customized font that mimicked the icon slightly in its LK combo, thus allowing it to stand on its own at times. The style of the font was closely matched to the angles and curves within the icon.
Medium: Video, Print, Web
As part of a muti-video campaign, half a dozen storyboards were developed for Bentall Kennedy. The main themes revolved around environmental safety and procedures. In addition to the storyboards, a large custom set of icons were developed for both video, print and web use. The style is clean, bold and fresh. When needed, the icons would be represented in lime green as a negative connotation. When positive, in blue.
