The First 10 Years
Following is a summary of significant work we did in the first ten years. This period represented a transition from working with relatively more clients on smaller, executional projects to a point where our services were more about advising and architecture.
2017 – 2020
Work for Clorox continued in this period with Leon playing the role of Senior Platform Architect for. A major effort was made to modernize most sites to the current platform version which as eased continuing support. We also aided in launching many sites serving markets outside of the US. Adapting the platform for the WPML plugin was particularly interesting.
We launched the NYU Langone Health Brand Center, a resource for the organization to communicate brand standards to their many marketing partners. This site was built on WordPress using a custom page-building interface that uses a set of carefully-crafted modules. In this way, the look of the site is uniform and regular, as well as quick to build out content. We built this site in partnership with Applied Design Works.
During this time, Clorox Digital Labs rebranded as Electro Creative Workshop. The team took on hosting more sites and looked to improve the hosting platform to support higher levels of traffic. Being standardized on WordPress and having nearly all sites replatformed, we began evaluation of PaaS vendors with a specialty in WordPress. This included WordPress VIP, WP Engine and Pantheon, which was our choice. In 2019, we ran a project to get sites off of the legacy Rackspace servers and onto Pantheon. This required changes in architecture to the sites which had been built to rely on the custom hosting setup at Rackspace.
During this time, new privacy laws came into effect in California that required managing cookie consent on all Clorox sites. It also required building a system for managing consumer requests for deletion of private information. We built a new platform for allowing a central tool to reach into the consumer databases and execute these deletes securely. The architecture includes Rest endpoints added to sites via WordPress plugins, with key pairs providing authentication.
We also began helping Clorox choose a CDP (customer data platform) during this period.
2016
In 2016, 18INT continued to provide services as a virtual Senior Platform Architect for the group running most Web sites for Clorox. This included code reviews, mentoring and running the ongoing project to enhanced the platform.
Platform expansion for Clorox included the development of a plugin used to synchronize content between staging and production environments, a tricky problem for WordPress.
We also began work on a site for New York University through Applied Design Works. Only in interim site was published this year with larger work due in 2017.
We also began supporting Boldium in the role of mentor to their developer staff.
Finally, in June we build a site for 12 Digit Marketing in partnership with Santa Cruz Studios.
2015
Services to Clorox this year were split between managing the Clorox platform and the Fresh Step web site, which launched a re-platform where the frontend design remained unchanged but the backend transitioned from the older custom framework to WordPress. A lot of innovation went into integration with internal and external systems. We also assisted in the transition of the Brita and Kingsford Web sites from SilverStripe to WordPress. The Clorox Web Platform became more sophisticated this year and expanded into WordPress plugins. This allowed for much easier distribution of shared functionality. We also began using PHPUnit to ensure that platform work was solid before it went into testing.
We launched support for additional languages for the prodrenalin.com site using the WPML plugin. We leveraged this experience later to support multi-language support for Clotrox Webs sites.
Working with Santa Cruz Studios, we build another WordPress marketing site, this time for Apalar, who offered a mobile ROI platform, focused on mobile app marketing measurement, attribution, optimization, and audience management.
2014
In 2014, several sites moved to SilverStripe, including the flagship Clorox.com site. although we were primarily providing support directly to developers replatforming sites from the Clorox bespoke platform. We continued to manage several sites, including Fresh Step, where we build a major new aspect to the loyalty program to support pet shelters. We led the technical design, developing a full technical specification and working with the loyalty program vendor to update the services on their side. The registration process changed to send the two types of visitor (consumers and shelter owners) down two distinct UI flows. The new system tracked donations of points by consumers to shelters. Consumer were able to search for shelters by geographical proximity, which we were able to implement with a relatively lightweight database table of latitude and longitude pairs along with some math.
Early in this year, we launched a redesign site for Liquid Plumr that included a game hub.
The most significant change with Clorox was an upgrade to the relationship with 18INT. We started providing technical leadership on a few sites, then the list of sites grew. In 2014, we changed the relationship to be more about platform architecture and less about maintaining particular sites. We took over ownership of the foundational PHP library used by most Clorox sites for managing consumer information. We also made a successful argument for adopting WordPress as the standard platform for all sites. This was built upon the success of the Formula 409 build. It also brought most site development into the internal agency, then called Clorox Digital Labs. This largely ended a period when half of site development was done by outside agencies with the internal team only managing deployments.
WordPress in 2014 was becoming a default choice for building marketing sites across the entire Web. We partnered with Landor to build a new site for Wilson Associates, a luxury architecture design provider. We developed the theme from scratch to achieve the rich design that matched the client’s offerings. The team at Landor included a longtime colleague who went on to start Applied Design Works.
2013
Throughout 2013, we continued to manage several sites for Clorox and increasingly worked closely with the Clorox team on platform and process improvement. We launched redesigned sites for Scoop Away and Liquid Plumr. These were done on the bespoke Clorox framework, not a CMS. The experiment with Expression Engine taught us that it wasn’t a good fit, and we moved to try SilverStripe in the later part of the year. This choice represented the give and take in a large organization. While it seemed clear that it would not be the best choice, we were obligated to make a best effort.
Meanwhile, I worked with a team and an internal sponsor to pilot a WordPress build of Formula 409. This took the site from a cumbersome Adobe Flash platform to a full CMS. It was deemed a low risk experiment on a brand with less attention. Costs were much lower, and by this time, WordPress was a mature platform for building marketing sites. That it happened to be a complete content management system was the special feature that we would learn ultimately sold it to be the standard platform for Clorox in the next year.
The Fresh Step site added support for BazaarVoice, a service for managing user reviews. Consumers were able to review both the Fresh Step products as well as the items in the rewards catalog. We developed custom integration to reward consumers with virtual currency for leaving reviews, and this activity also went into the public feeds. The partner on the brand side of the Fresh Step site was remarkably open to trying new solutions and making technical improvement that went beyond what was represented in the visual design.
Outside of Clorox, we launched the ProDRENALIN site meant to sell ProDAD software. The platform was WordPress and it used the WP eStore plugin to sell licenses and provide software downloads. By 2015, WooCommerce began to dominate the WordPress ecommerce space. In 2013, the choices were more varied, and this plugin worked well for several years. We maintained this site for five years, eventually using WPML to add support for multiple languages.
2012
In 2012, Clorox was interested in moving towards CMS for their sites, which to that point had been built in a bespoke PHP framework. The Glad brand was chosen as a pilot for building on Expression Engine, and 18INT was chosen to lead the build. The primary challenge of this project were understanding how best to implement on Expression Engine and Code Igniter. This required a significant overhaul of custom code used by Clorox so that it could continue to work with the older framework for static sites as well as EE. This involved building an abstraction layer with a well-documented API.
Another large project that launched in 2012 for Clorox was the Fresh Step site, which involved standing up a completely new site for the brand of kitty litter with an ambitious design with many social aspects. It launched with a loyalty program managed by ePrize, integrated via an XML-based API. Consumers entered unique codes printed on packaging in exchange for a virtual currency. The “paw points” could be spent on coupons and cat-themed items such as toys.
As it emulated a social network, the site tracked user behavior and exposed it in a public activity feed. Aside from earning and spending points, consumers could upload pictures of their cats and use them to make virtual postcards and movie posters. The technical design involved a lot of image manipulation and storage, definitely a challenging task for PHP 5 at high volume.
During this year, we continued to manage the development work on the Clorox Professional and Tilex sites. We took on management of the Kingsford and Grilling.com sites this year. The development team for Grilling was external, so the this effort involved coordination and regular code reviews. The Clorox development team has always aimed for higher standards, which meant a fair amount of back and forth with the external teams to conform to standards.
We worked for Legacy Games on their site promoting games with a Jane Austen theme. The site was built on WordPress with the intent of supporting regular blog posts about the family of games. All the usual connections of the era were implemented, such as FeedBurner and Facebook. It also provided for newsletter signups to MailChimp.
2011
In 2011, we started working for Clorox, implementing redesigns of Tilex.com and CloroxProfessional.com as well as providing ongoing technical leadership on a collection of existing brands (HiddenValley.com, Pinesol.com and others).
The Clorox Professional site was completely re-imagined and rebuilt from scratch. We integrated a beautiful design provided by Critical Mass with hundreds of pages describing 43 products and three industries. Custom functionality included a recipe database, a product filter and tool for finding a reseller.
This project provided two great challenges: substantial, complex material and a tight deadline. We augmented the internal Clorox team with three of our own to build out the product pages rapidly. Despite great effort up front in designing the site and preparing the copy, we continually struggled with ambiguous or missing information. Despite these challenges, we delivered a great site on time. Feedback from the client was universally positive, especially that from brand managers at Clorox.
In the first quarter of 2011, our most significant work was on a Facebook gamed called Hollywood Magic™ from AltEgo. We provided
- Facebook Graph API expertise,
- analytics implementation,
- REST services, and
- basic database admin tools.
Hollywood Magic launched in April 2011 and can be played at <http://apps.facebook.com/hollywoodmagic/>. We were grateful to get this business from Red i Studios. We used the latest PHP and Javascript SDKs from Facebook for this project. We implemented Google Analytics, Kontagent, KISSmetrics and Mixpanel. We also used jQuery for admin tools.
At the end of the project, our contact, Julie said of Leon:
He is a pleasure to work with. He has a great work ethic, works well with others and has good communication skills. He’s a strong problem solver and consistently delivers on schedule.
Another project close to launch, and currently in beta, is PicsChecker™. This application pairs with an application running on an Android phone to capture photos and SMS messages. Events are stored in database and reported to user via email. The application aims to keep kids safe through parental monitoring. The application was built using the FreeEnergy PHP framework and Yahoo! YUI javascript library.
Pre-Launch
Here are some significant projects Leon worked on prior to starting 18INT.
TMCAL
In 2009 and 2010, Leon was the VP of Engineering for Berkeley Transportation Systems. While there, he led several projects that helped BTS move into new sectors. One of them was TMCAL, an automated logging system for TMC (traffic management center) operators. The users of the system sit in a dark room all day, monitoring traffic problems and notifying the proper agencies. Information about accidents flows in from a public CHP feed and a list auto-updates every few seconds. Operators “capture” the CHP information and begin managing field elements, such as the large electronic signs you see on freeways in California.
Management of roadways in California is divided into 12 districts, each of which runs a TMC. Each TMC, in turn hosts an installation of TMCAL that communicates with a central server at headquarters, in Sacramento. In the event of communication loss, each TMC can continue operating, and when communication is restored, the district server will sync back up with HQ. As long as all communication lines are working, operators at HQ can monitor any district.
The application was coded by a team of three engineers using PHP, MySQL, Zend Framework and Yahoo’s YUI. The forms in the site make heavy use of autocomplete and Ajax-powered validation. Operators, for example, may enter a location on a freeway by county-route-postmile and the system automatically identifies it by name, such as “Alhambra Ave Exit”. As the application manages large lists of field elements and activities, YUI’s datatable widget is also gets a heavy workout. All tables use sorting, pagination and filtering. They also update their contents using Ajax as new information is available.
The TMCAL project was in a final pilot phase in the Fall of 2010, and was expected to go live in the state in 2011.
Arterial PeMS
In 2009 and 2010, Leon led a team adding support for arterials to the BTS flagship, PeMS. Already established as the leading solution for measuring freeway performance, BTS expanded into the performance of surface streets by completing projects in San Diego and Los Angeles.
Consuming terabytes of sensor data is a difficult problem solved by BTS in years past. Incorporating arterial data provide a new set of issues. In particular, describing the topology proved to be much more difficult. Cars moving down the freeway have limited options for changing direction. Cars on streets can change streets every block. They can even turn into a driveway. Cars getting on the freeway may stop for a metering light. Cars on surface streets are governed by signals that can restrict left and right turns as well.
PeMS expanded to include intersections, links between them (streets) and points along the links to represent locations of detectors. It also gained expanded to include signal timing plans. Performance measurement is calculated based on the signal timing plans or with an estimated plan when the exact timing of the lights is not known. The system also gained an ability to measure the health of the detectors in the field.
Work in 2010 included a sophisticated configuration editor that allows administrators to managing detectors placed in the field. And parallel to all this work, the user interface for PeMS was enhanced to use Yahoo’s YUI framework.
The effort required the participation of the entire BTS staff of engineers working in Perl and PHP against an Oracle database. A lot of effort went towards project management in order to meet tight deadlines.
Arterial functionality can be seen on the Caltrans version of PeMS at http://pems.dot.ca.gov/.
Basket Case
Basket Case is a game hosted on Facebook. The user interface is Adobe Flash. The backend is PHP using MySQL for high scores and talking to Facebook using their API.
The game was designed by Red i Studios, a highly creative company with many successful games in their portfolio for big brands such as Marvel, TNT and LeapFrog. Aside from the appealing look and feel of the game itself, it also features the amazing ability to be retooled easily for any specific brand. Any company seeking a quick presence on Facebook should consider contacting Red i Studios.
We implemented all backend code and the secret sauce necessary to host the game on Facebook. Flash maestro, Dayvid Jones, implemented the frontend of the game.
UCB Events Calendar
The University of California in Berkeley maintains a staff just to manage events on campus. It’s a big job because every organization on campus creates separate calendars of events. Before we got involved, events were merged by hand into a single calendar. The UCB staff led by Jeffrey Kahn brought us the idea of a highly automated and customizable solution. Leon led the team on this project while at Clear Ink.
One of the most challenging aspects of building this application was dealing with repeating results. Microsoft Outlook and Google Calendar make it seem easy, but representing complex rules for how an event repeats according to rules (e.g. every 3rd Tuesday) in a concise manner was a fun problem to solve. The application also included a robust system for allowing events to be exported as XML and transformed by XSL. The effort required a team of four engineers to complete plus the crucial help of the UCB events staff.
The UCB events calendar can be used at events.berkeley.edu.
JMH WHC
The Women’s Health Center run by John Muir Health in Walnut Creek, California offers classes related to women’s health. In particular, the WHC provides important classes to parents-to-be. At the time, our team maintained the marketing site for JMH and we saw the opportunity to automate class enrollment. Crude desktop-based software wasn’t cutting it for the team at the WHC, and enrollment was done strictly by phone. We brought the whole experience to the Web. Leon completed most of the coding for this project personally while working for Clear Ink.
Managing classes and students is not the typical e-commerce project. Beyond charging credit cards, the structure of the catalog is radically different, requiring a unique approach.
On the front end, students can browse through classes by topic, choose a particular instance of the class and sign up.
On the backend, administrators can create classes and instances of the classes called sections. Each section defines a schedule of meeting times. It also meets in a certain place, has a maximum class size and is taught by an instructor.
In addition to the Web interface, WHC administrators continue to offer phone service. The backend interface includes the ability to enroll users by proxy. Administrators may also break the rules of maximum class size or rules about signing up for a class after it’s begun. The backend also provides reporting to show performance of classes and administrators.
The JMH Women’s Health Center class search can be viewed at https://www.johnmuirhealth.com/index.php/whc_search.html.
Autodesk Podcast
In 2005, podcasts were bleeding edge, perhaps too new for most people. Yet a podcast was the perfect way for Autodesk to communicate their technology savvy. Leon led the team on this project while at Clear Ink.
Every year, Autodesk marketing goes on the road to promote their products. In 2005, we recorded audio of the keynotes at each stop as well as extemporaneous conversations with people attending or speaking. We used Drupal for the platform of the site and received raw audio immediately after the event concluded. Our team rushed to prepare the finished podcasts that included intros and outros.