Timeshare Resorts

Digital POS Touch Screen Application

Digital Strategy, Innovation, User Experience

This timeshare company develops properties and sells vacation ownership. Sales centers on-site at their properties historically performed well. Off-site sales centers underperformed. Our partner agency, Brand Tango, conceptualized and designed a modern, interactive experience meant to bring the vacation ownership experience to life without physically being at a property. Brand Tango asked us to produce the digital POS and video experiences that were the innovative features of the installation.

In the reception area we concerted and produced a 20 minute video loop by animating about 100 still photographs as cinemagraphs, inserting some video clips and adding motion graphics.


Tyco Gas & Flame Detection - Brand Launch

Design Strategy, Motion/Video, Advertising

Tyco acquired four companies to add to an existing sub-brand, Scott Safety, to create a new sub-brand called Tyco Gas & Flame Detection. We were the launch agency charged with introducing the new company, which had a combined hundreds of years experience, to the legacy companies first, then to the world.

Internal Launch Day included events at each of the legacy companies. We prepared customized presentations for each company that integrated with planned speeches from executives. The presentations introduced the new logo and brand visuals, new positioning and brand messaging. Each event generated employee enthusiasm demonstrated by ovations following the presentations. Applause and excitement were the success metrics.

The external positioning centered on established expertise and a new level of strategic capability made possible by the dovetailing specialties of the legacy companies.

Ad for Tyco
Tyco Ad Banner

Weil Vitamin Advisor

Web, Packaging, Branding

Still Life for Weill Vitamin Advisor

The Weil Vitamin Advisor had a few challenges to maintaining healthy growth (no pun intended). First, they needed to attract younger customers as their aging base could not be relied upon for continued growth. Second, their celebrity founder, Andrew Weil was well into his 70s. The brand needed to be protected from any possible health related concerns for the iconic figurehead as well as a potential for loss of relevancy to a younger audience. Finally, the Weil products are premium priced. With all of the discount wellness options available, the Weil product line needed strong reasons to believe in easily grasped way.

Weil Vitamin Advisor Website

The Weil Vitamin Advisor provides vitamin and supplement recommendations based upon an in-depth questionnaire about health history, lifestyle and goals. Messaging emphasized the fact that it is an integrated approach with More than just pills! It’s a personal lifestyle program. We tapped into the target audiences’ mindset with Naturally sourced. Artisan crafted. 

Weil Vitamin Advisor packaging

We saw product fulfillment as an opportunity to improve and extend the brand experience. We redesigned the dispenser box that their daily paks come in and added messaging and offers to the delivery in order to increase perception as a premium program.

Weil Branded Imagery

We did a brand photoshoot, both lifestyle and still life to create ownable assets for all communications. We also developed a marketing plan and media plan, both of which were executed internally by the brand.

Well & Being

Brand Launch

Graphic/Communication, Web, Branding

Brand Discovery for Well & Being

For this brand launch, the brand concept was already defined – an enhanced, luxury spa experience that fully integrated holistic wellness into the offerings. We refined the concept and created identity, look and feel and communication strategies. We named them Well & Being which allowed us a clever way to build wellbeing into the brand identity while also nodding to the brand pillars that were represented by the tagline Mindful Physical Natural. The ampersand was a central brand visual that represented an invitation to more.

Well & Being Logo Design Well & Being Website design and Build

Our charge for the website was to create an intuitive, natural navigation that allowed visitors to explore the many services and treatments following their own singular path. We had a mega-menu top nav, but relied on a recommendation engine to connect the users current page location with other options that may be on that wellness path.

Well & Being Brand Discovery

We charted the customer journey from first exposure to a bricks and mortar location through checkout, with a heavy emphasis on the post-purchase experience.

Well & Being Personalized Magazine Well & Being Personalized Magazine

On a very tight budget we created a personalized digital magazine as the central component of of the post-purchase strategies. Customers and web visitors filled out a questionnaire that identified their individual health and wellness interests and goals. Magazines were assembled dynamically, serving content specific to users’ interests.

TSA Pre✓

Graphic/Communication, Design Strategy, Advertising

Keep Your Shoes On campaign for TSAPre-check

Avoidance. That’s why people sign up for TSA Pre✓. They simply want to avoid the hassle of going through the regular security line with all of its small indignities – taking your shoes off to walk barefoot or in socks or stockings on an airport floor; taking liquids and electronics out of your carry on; the luck-of-the-draw spot-checks; the time it takes to get through the line.

Since the regular security line is a TSA service, we could not use avoidance as a driver. It had to focus on a positive aspect of pre-check without directly speaking to perceived negatives. Also, TSA could not guarantee that pre-check would save time, though it commonly did.

Keep Your Shoes On NYC Billboard for TSAPre-check

Research showed that taking their shoes off is the part of the security process that travelers hated the most. Our campaign was simple. Keep your Shoes On. We used stylized shoes as an iconic representation which allowed us to give it a branded look. By changing shoes we could target different demographics and even regional customization.

Keep Your Shoes On Fort Lauderdale Airport Banner for TSAPre-check using a high-heeled sandal
Keep Your Shoes On Texas Airport Banner for TSAPre-check using a cowboy boot

Scott Safety

Product Launch, Campaign, Websites, Video

Scott Safety is a global category leader in Fire Safety products. They developed a new, disruptive product for the petrochemical, oil and gas industry, in which they do not have the same reputation to leverage. They came to Pixelslave to develop a 360º launch and pre-launch campaign that would raise awareness and generate leads while shortening their typical 18 month sales cycle.

Animated product video – The prototype product was not yet complete so we realistically animated the video from CAD drawings. We used the video in several channels.

Microsite for Scott Safety

We created a microsite for the new product strategically different than Scott’s typical rollout look.

Email Ad for Scott Safety Scott Safety Mechanicals for Promotional Item
We developed a tradeshow strategy which included a distinctive, branded thumb drive that had the product video and collateral on it. This was given in exchange for contact information. We also provided pre and post show communications, including a high-impact, dimensional mailer for influential prospects. The prelaunch campaign was highly successful developing hundreds of leads and conversations as well as pre-orders, successfully meeting the goal of shortening the sales cycle. We continue to work on projects for Scott Safety’s other vertical markets.
Typography for Scott Safety

ALO® Drink

Content Marketing, Branding, Advertising

Aloe vera has strong association with health and wellness. Rather than compete with the hundreds of other beverages making those claims, we let the aloe vera health benefits speak for themselves while we emphasized better flavor and lifestyle inspiration as our differentiators. Our campaign was Inspire Your Body.

Our video campaign featured dancers around the world dancing to ALO® Drink. This is an evergreen concept that can continually evolve. ALOtones® is a unique concept that puts music in every bottle. That creates 360º refreshment: flavor + positivity + a musical ingredient. This allows ALO® Drink to stand alone as a beverage providing nourishment for mind, body and soul (the musical ingredient).

ALODrink.com Website Screenshot
ALO Organic ALO Drink ALO Twist Strawberry and Lime flavor

We also provided the more typical services for a CPG product line, including new product package design, B2B communications, B2C product-focused ads, POS materials, etc. Across all communications we connected the product to inspiration while communicating other benefits appropriate to the audience.The products shown here are new products, each in a different product line.

Give Me… Deep Sea Horror Movies

I came across a list in on Mashable of all the Netflix movie genres that were available for search. Netflix only provides a short list of genres to search, so I thought it would be cool to have access to the complete list for quick searches when I know just what I’m in the mood for. Mashable’s list was just a single paragraph with break tags, giving the genre title and code, in this format:

Action & Adventure: 1365

It then instructed the reader to paste the genre code into a Netflix URL string to go to that search. I thought it would be fun to build a selector for myself that I could keep here on my blog to use whenever I felt like it, but I also thought it would be a great way to explore the power of jQuery string operations.

There is more than one way to break up strings with jQuery. The two I’ll be looking at here are “substr” and “split”. (“Slice” works for strings were you know the length of what you want to slice. If all my genre codes were the same length it would have been an option here as well.)

I started out by converting my list to options. There’s an online site that does that quite well, so no need to do extra work. After I pasted my options into a select element I decided I wanted to shorten the option to just the title, and I had to also set the genre code to be the option value. I started with the code below:

(function() {
//set variables to store results of operations
var optTxt, newTxt, optVal;
//iterate through each select option except the default, which is “Select a genre”
$('#selectGenre option:not(":selected")').each(function(i) {
//get the text from the option and store it
optTxt = $(this).text();
//get the substring from the start of the string to the colon for a title-only option text
newTxt = optTxt.substr(0,optTxt.indexOf(":"));
//get the substring after the colon and trim off the leading space
optVal = (optTxt.substr(optTxt.indexOf(":") + 1).trim());
//assign the shortened title text to the option
//assign the genre code to the option value

This works fine, but the code can be simplified by using “split” instead. I think “split” is a better choice anyway. Taking a substring implies that you’re taking a piece of the string and leaving the rest behind.  But what is happening here is that the entire string is being used and it is being split into two pieces at the colon. Below is a new version of the code using “split”:

//split the option’s text string at the colon for the new option text
newTxt = optTxt.split(":")[0];
//split at the colon, using “pop” to get the end of the split string
optVal = optTxt.split(":").pop().trim();

This is much cleaner code, but I can still do better. I’m splitting twice because I just replaced “substr” with “split” as I evolved my code. But there’s an important difference between the two operations. “Split” makes an array that I can reuse, so I don’t need to split my string twice. I can perform that single split at the same time I get my string from the option and work on the array after that:

//get the original option text and split it
optTxt = $(this).text().split(":");
//take the first string in the array the split created
newTxt = optTxt[0];
//then the second, and trim the leading space
optVal = optTxt[1].trim();

I added some code to put together the search link and a button to take me to my search on Netflix based on my selection. I also used jQuery’s cool “isNumeric” function to keep the button from working if the initial option “Select a genre” is selected, since it doesn’t have a genre code associated with it and would give a 404 error.

Below is the finished code:

See the Pen Search Netflix by Genre by Connie Finkelman (@pixelslave) on CodePen.21122

Responsive Zoom Grid

Responsive grid that enlarges images

I recently had a website design to implement that had a grid of images on the homepage. Normally I’d use something like Masonry for that, but in this instance I needed a custom solution.

The grids were based on 356px squares. Some images were square, some were rectangular, taking up two squares horizontally, and one was vertical, two squares tall. I chose not to use Masonry because I had a finite number of images (7), the placement had to be exactly as specified by the designer, I didn’t want to introduce so much overhead in JavaScript for such a small layout, and because with so few elements to control I could handle placement manually with CSS. In addition, CSS is much more efficient at calculating redraws for simple animations than JS is.

Masonry zooms the images slightly on hover. That tiny amount of zoom isn’t enough to blow out an image. But my images needed to zoom to about 120% of the original, which would have resulted in an obvious loss of quality if they were enlarged that much from their natural size. That meant they would have to start out at 120% of their intended size, then be shrunk down for the initial view to fit the grid boxes. Because of this, and because the artist specified a lateral shift as well as an enlargement, I knew they had to be backgrounds (another reason I couldn’t use Masonry).

To make my images I began with my grid size and enlarged it by 120%. I fitted my images to that larger box, as shown in the top part of the image below. The bottom image shows how the image will look when shrunk to its presentational size.


Below is the codepen for the final result. (I made half-size placeholder images for the demo and us.) View it on codepen.io in “Live” view to see the responsive behavior. I pulled out most of the customizable aspects of the layout into SCSS variables to make it as reusable as possible, since I would replace the images, change the colors, and double all the sizes for my actual project. The project in an environment where I didn’t have SCSS, but I could still use the SCSS provided by Codepen to auto-prefix and compile for me, then paste the result into my CSS file.


See the Pen Gridded home page layout by Connie Finkelman (@pixelslave) on CodePen.21122


The finished page can be viewed live on the client’s website.