Tag: JavaScript

Categories
demand-side eCommerce Frontend Leadership SPAs

WYSIWIG Platform UI

(CrowdFlower : 7/15-8/15)

The team knew that our most-important customer-facing UI needed an overhaul. Approximately a year before, a contractor had come in to attempt that. His prototype, built early in 2014 in React, lay dormant because it had not had a project champion to fully see it into production. In the summer of 2015, the timing was right for our team (with me as the Tech Lead) to pick up the banner and carry it forward.

We revisited the prototype, shown below

No usability tests had been done on it so we didn’t really know how customers would take to it. Product handed us a design and we promptly set about its realization.

Though I attempted to introduce the use of Webpack and Hot Loading, given how much re-writing would have been necessary to move from the Sprockets dependency management paradigm of Rails to that of Webpack and with the looming deadline, that intitiative had to be abandoned.

We made progress as we extracted some modal functionality into a right-hand pane.

The UX really began to come together: the following screen capture demonstrates one of the key interactions.

We launched something similar (but more polished, see doc link) and that is running in production.

Results

  • Led a team of three Rails engineers (two local, one remote) to upgrade and overhaul a React app towards improving usability and throughput in the system.
Categories
Emails supply-side

Growth Activities

(Bluxome Labs : 4/14-6/14)

Email sent to discover Net Promoter Score.

Email sent to discover product/market fit.

JavaScript alert interrupting user to take survey.

JavaScript modal for simple survey.

Results

  • Executed email campaigns for marketing research.
Categories
Growth NUX supply-side

Social NUX

(Bluxome Labs : 5/14-6/14)

Did not actually implement social signup, merely checked for clicks on buttons (using Optimizely to show/hide based on whichever variation user was assigned.)

With social signup options above:

With social signup options below:

Results

  • Tested conversion hypotheses with social signup buttons.
Categories
eCommerce Frontend Innovation supply-side

Supply-side Refresh

(CrowdFlower : 7/13-12/13)

This was an enormous effort to overhaul a product whose UX had not been altered much in five years.

We took a piece-by-piece approach to swapping out components because of the complexity of the legacy behemoth. First, we refreshed the views in the legacy app, which involved changing styling in three different places (because the app had grown “organically” over the years, taking on three different styling paradigms styling was defined in custom stylesheets, in Less, and inline.)

In parallel, part of the team started building out the new peer Rails 3 app, the eventual destination for all views, complete with the company’s brand-new proprietary SSO solution (also built in parallel.) Finally, routing was updated to send all traffic to the Rails app.

Forming

Between August and September of 2013, we coalesced as a team under the project champion, the company’s CTO, and began formulating what the new UX should be and do.

Below is a screenshot of an example of the dashboard as seen by the end user (Merb, built in 2008)

Below is a screenshot of the progress of a microtask job, also as seen by the user (sensitive information redacted)

Norming

Between September and October of 2013, we cranked out the new experience.

Based on a design concept by the other F2E in the team, we began restyling low-risk interfaces of the system. The new design was not simply a reskin, but involved introducing a similar-yet-improved information architecture, an example of which can be seen below

Following are a few more example screenshots demonstrating the evolving look-and-feel

Configuration Panel

As we were tackling the UX, a backend engineer in a peer team was working in parallel to create a custom role-based SSO system that we would leverage for enforcing authentication and authorization in a new way for the company.

Shortly before the conference, a decision was made to go with a second design concept, not entirely different from the original, but a little more polished. A designer was requisitioned to provide the new design. From that point forward to product launch, we mostly fine-tuned the details.

The following screenshot demonstrates not only the new design but also the use of the new SSO solution, which can be seen where certain UI elements are disabled based on the user’s permissions

To QA the new experience, we ran it in alpha against production data repositories just prior to the conference.

Performing

After the launch, we maintained the product, adding features we had not been able to squeeze in.

Below is an example screenshot of how the final product shaped up

Results

  • Consolidated multiple styling paradigms for new UX ahead of company-sponsored conference.
Categories
demand-side eCommerce Frontend Full-Stack Innovation Prototyping

Big Data ETL

(Bluxome Labs : 8/12-9/12)

Results

  • Got up-to-speed on the basics of Hadoop and prototyped v1 of Driven UI.
Categories
Affiliate Backend eCommerce Frontend Full-Stack Growth supply-side

Selling More

(Shop It To Me : 6/10-7/12)

Results

  • Iterating with Product to scope, implement (Rails w/MySQL,) and A/B-test pixel-perfect sign-up/refer-a-friend/search/browse/opt-out/profile experiences
  • Drove conversions in the form of signups, virality, and clicks for not only our flagship web and email products (used by 4M+ users) but also eight new product launches
  • Architected company’s newest Ember.js-based product
  • Quickly integrated into a small, fast-moving, startup engineering team
  • Became proficient in all things Rails
  • Ensuring quality through the use of code reviews, TDD, unit, functional, integration, and regression tests under continuous integration, testing plans, and mentoring/pairing to deliver functionality, fix bugs, refactor legacy code, and transfer knowledge
  • Have assumed lead (primarily frontend) responsibilities while reporting directly to CTO
  • Established F2E guidelines and best practices
  • Architected the company’s newest product, an Ember.js-based Single Page Application
  • Leveraged Facebook, Twitter, and Pinterest APIs to increase our social reach (including the use of Facebook Connect and the Like Button during signup and tell-a-friend experiences)
  • Prototyped iPhone app for user to navigate item stream during in-house Hackathon
  • Contributed improvements to our Nokogiri-based data-harvesting framework.
Categories
crm eCommerce Frontend Prototyping supply-side

First Subscription Product

(Shop It To Me : 5/10-7/10)

Since retired, the product was the first foray into the world of premium subscriptions. We went through 35 variations of the invite email while experimenting, five of the landing page, and several promotional creatives embedded within the flagship email product.

Here’s one example invite (click to view larger):

The product has been retired.

Results

  • implemented company’s first subscription product
  • Created a Chrome browser extension (using jQuery based on ease-of-namespacing) as a complementary value-added delivery channel
  • Delivered HTML promo emails, details/purchase/confirmation pages (models, views, and controllers,) CRUD admin tool, and gateway payment processing via ActiveMerchant and Braintree (including mid-tier error-handling logic)
  • Validated emails with EmailReach
Categories
demand-side Frontend

Display Advertising

(Yahoo! : 1/10-5/10)

Galaxy is a component of Yahoo! Mail (one of the most complicated MVC apps in JavaScript on the planet) as part of Rushmore that enables consumption of events from both the Yahoo and Facebook networks without having to leave Mail. As part of the Tiger Team, I was brought in as a F2E to help meet deadlines by implementing features.

Results

  • Contributed to the most important RIA in the display advertising industry (at the time)
  • adding and testing front-end functionality in Yahoo Mail
  • ensuring cross-browser compatibility for IE 6/7/8 on XP Vista, Safari 4, and Firefox 2/3
  • helping to improve the team’s recruitment and hiring processes

 

Categories
Frontend Full-Stack

RIA for Monitoring

(Yahoo! : 03/09-11/09)

To leverage my skills and experience from developing web apps forĀ monitoring at the enterprise level, I joined a peer team which had been providing the service engineers of Yahoo with a white-box solution paired with Nagios.

In a bid to move away for the costly distributed model of federated service engineering, our team was tasked with providing a centralized enterprise solution. I contributed as a front-end engineer and implemented features in a custom Perl MVC framework.

Results

  • added RIA functionality to an enterprise monitoring-as-a-service replacement for Nagios
  • won a naming competiton for branding the product
Categories
Frontend Full-Stack SPAs

Experience Monitoring at Scale

(Yahoo! : 5/07-2/09)

Yahoo invests a lot of resources into making sure that each of its properties is available around the clock. To assist in that task, a centralized, black-box service was created as part of dev tools to help everyone from senior management to service engineers monitor and understand the health of properties.

On the backend, the service consists of the data store, a metrics collector, aggregation tools, and the configuration store (database-driven.) On the front end, there’s dashboarding, custom reports, and a self-service configuration tool.

Results

  • built and maintained web tools for a Nagios-based experience management solution checking 10,000+ URLs worldwide daily generating 63M measurements per month
  • reduced workload of system engineers by creating (from scratch) a web-based, MySQL-driven, MVC-architected, self-service configuration tool for creation of and management of Nagios checks
  • led SCRUM-influenced development and improved the quality of the team’s SE process by standardizing on championing the use of Catalyst (an MVC framework in Perl.) Improvements included shortened dev cycles, the introduction of TDD, improved performance, better documentation
  • created snappy, responsive interfaces using custom JavaScript along with YUI in conjunction with JSON-serving REST web services (Perl.) Also achieved performance gains through page-weight optimization
  • reduced development costs through the use of VMWare virtual machines for testing, building, and deploying as part of continuous integration. Implemented a packaged solution for automated regression testing using Firefox, Selenium, X, WWW::Mechanize