525 Creative

Create Everyday

  • Home
  • About
  • Work
  • Perspective
  • Contact

Apr 04 2019

Hubspot Development

Role:

Producer / Developer

Project Duration:

12 weeks

Goals:

Migrate our marketing automation to HubSpot

  • Move emails from Eloqua to HubSpot
  • Use technology that’s responsive at its core
  • Adopt a CMS that’s flexible and allows users to create any design imaginable
  • Allow users to spend more time on quality copy and conversion funnels
  • See a higher ROI on inbound marketing campaigns

Responsibilities:

  • Audit preexisting platforms
  • Build email templates that optimized for both desktop and mobile clients
  • Create responsive HTML emails that provided consistent results
  • Develop library of common UI patterns for faster builds
  • Extended branding with SASS variables that eliminated the need for repetitive, time consuming CSS
  • Custom module development (HubL)for emails and pages
  • Build workflows, best practices, and processes
  • Train users how to use the platform

Impact:

  • Emails – 40% increase in click-through rate (CTR) over the preexisting designs
  • SEM landing pages – new variation consistently beat the control in the 8-14% range
  • 3rd party landing pages – new SEM LPs resulted in a 57% lift in conversion rate on the demo offer, and a 23% lift in conversion rate of HVLs
  • Reduced cost from building internally
  • Reduced reduce page build time and human errors
  • Enabled cross-functioning teams to produce their own campaigns with little-to-no HTML skills

Email Templates

Creating responsive emails with Eloqua’s design editor was very time consuming and prone to human error. Adaptive wanted to get away from complex table markup and inconsistent results. Working closely with Marketing Operations Manager, we identified the requirements, the main structural components of the email templates, and the order of priority.

I developed an MVP using Zurb Foundation for Emails. Zurb made sense because of it’s responsive grid, included UI patterns, and eliminates the need for repetitive, time consuming CSS. It’s also backed by the ZURB Stack, a Node-powered build system with HTML templating, Sass compilation, image compression, and inlining.

HubSpot Email Layout 1
HubSpot Email Layout 2
HubSpot Email Layout 3

Custom Module Example

After the proof of concept was developed I transitioned to building out the email templates using modular design methodologies. The main structural components for the emails were built as global custom modules, where the code can be contained and maintained while exposing only content fields and options to the authors. This approach allowed the templates to be scalable, flexible, and easy to use for both front-end and back-end users.

Custom email module example

HubSpot Template Anatomy Using Custom Modules

The problem: Each paid search landing page needed to be hand-coded, version controlled, localized, and required more than one resource to build, test, and deploy. The solution: Extend the modular design approach from the emails to the landing page templates and utilize all of HubSpot’s awesomeness.

I started this part of the project by creating mockups with Sketch, using InVision to capture feedback from the key stakeholders and to iterate on the designs. Once they were approved I created a library of custom modules in HubSpot that could be easily dragged and dropped onto the canvas giving the end-user the flexibility to create their own templates like Lego building blocks.

Alt Text

Landing Page Designs Using Custom Templates

Here are a few examples of what’s possible by adding some modifications to the custom modules.

Landing Page A
Landing Page B
Landing Page C

Written by Jabal · Categorized Under: Project Management, UI Design, UX Design, Web Development · Tagged: css, html, hubl, hubspot, javascript, js

Apr 04 2019

Angular.js Development for WatchWith

Role:

User Experience Engineer

Project Duration:

4 months

Goals:

Develop pixel-perfect user interfaces and proof of concepts with Angular.js

Responsibilities:

Development of interactive mobile, web and Smart TV television experiences, built in an HTML 5 / JavaScript environment

Development Stack

  • HTML5
  • Sass
  • JavaScript (Angular, Gulp, Express)

Impact:

  • Developed various proof of concepts that ultimately helped the company to get acquired by Comcast.

Background

Watchwith is the TV industry’s standard for time-based (a.k.a. scene based) metadata. TV networks use Watchwith to create, control, and distribute deep metadata about their content. TV service providers use Watchwith data and software to power exciting new video products. Watchwith’s deep metadata creation platform combines the scale and power of machine intelligence with the editorial and creative control of high end video post-production systems.

I Worked with the Head of Design and other creative team members to develop pixel-perfect designs and proof of concepts with Angular.js. I was responsible for the development of interactive mobile, web and Smart TV television experiences, built in an HTML 5 / JavaScript environment.

LookLive Demo

Cnet Examples

For the CNET project I built various interaction and animation events that would fire based on WatchWith’s timeline tool which fed the API. The client could use an familiar interface to quickly and easily pick and choose which events take place on a screen whenever they wanted it to happen. In the USA example above, when the actress walks into the scene the client wanted a display advertisements for the shoes she was wearing and similar options.

Cnet HTC Amazon See It image CNET shop example Cnet Vizio M Series Amazon See It Image Cnet iphone 6 Full Browser Image

UX Example of FOX In-Video Polls

Codepen Scrap Prototype

See the Pen zvywMg by Jabal Torres (@capitalJT)on CodePen.

Written by Jabal · Categorized Under: UI Design, UX Design, Web Development · Tagged: angular.js, css, html, js, ux

Jan 19 2019

The Other Woman – Promotional Web App

With Systematic.io I developed a responsive, pixel perfect single page web application to promote the feature film The Other Woman. I was responsible for the front-end development utilizing HTML5, CSS3, and JavaScript leveraging Zurb Foundation and Masonry.js.

Live Screenshots

The Other Woman Screenshot 0
The Other Woman Screenshot 1
The Other Woman Screenshot 2
The Other Woman Screenshot 3
The Other Woman Screenshot 4
The Other Woman Screenshot 5

Play with the prototype in InVision

InVision Prototype

Written by Jabal · Categorized Under: UI Design, UX Design, Web Development · Tagged: css, html, js, masonry.js, php

Apr 04 2019

Mad Men Season 7 DPK

The first digital press kit for AMC’s series, Mad Men, transitioning from traditional print to digital. I transformed the physical press kit experience to an interactive experience utilizing PHP, HTML5, CSS3, and jQuery to create a responsive single page flip book style app. The build included video players and integrated analytics. The experience was intended to be shared with media, influencers, and with fans through social channels and the AMC site. Ultimately increasing awareness and buzz around Season 7.

Role: Served as client facing lead developer on creative, production and QA testing, working with AMC’s directors of platforms and online development.

AMC’s Tumblr for MMS7

Conceptualized dynamic advertising units for social for the premiere of AMC’s Mad Men season 7. Design based on final key art illustrated by Milton Glaser and use of gallery photography by Frank Ockenfels 3, working closely with Creative Account Executive. This was part of the digital marketing plan of a full 360 integrated campaign from outdoor, print, digital and television.

Artboard 1 Artboard 2

Interactive Promo Concepts

img-thumbPromo Concept 1
img-thumbPromo Concept 1 Prototype
img-thumbPromo Concept 2
img-thumbPromo Concept 3

Written by Jabal · Categorized Under: Project Management, UI Design, UX Design, Video, Web Development · Tagged: css, html, javascript, js

© 2021 · FiveTwoFive · Powered by Fries