Author: Anthony Bull

Categories
demand-side eCommerce Frontend Innovation OOJS Process Prototyping

Better NUX

(Bluxome Labs : 6/16-6/16)

Towards improving the New User Experience, Design came up with the idea to use Callouts around page elements whose affordance wasn’t intuitive.

Given the mockup, I set about implementing it pixel-perfectly.

For the first pass, I simply crafted the markup based on Bootstrap’s Alert and hid it by default, revealing it with JS if logic was met.

Then, realizing that the Bootstrap Alert wasn’t sufficient for Design’s needs and that the Bootstrap Popover was, as well as that there would be opportunity to re-use the code elsewhere in the platform, I created a JS Class for the NUX (a.k.a. “Callout”) and subclassed (example) accordingly, modifying the markup accordingly.

Results

  • Established team habit around refactoring and improving OOJS.
Categories
Architecture Building buy-in Collaboration demand-side eCommerce Frontend Leadership Performance Engineering Process

UI Tech Debt

(Bluxome Labs : 3/16-6/16)

A remnant of the legacy codebase from the company’s origins eight years ago, the two most important routes on the platform for quality assurance had never been moved from the company’s original Merb app to its companion (upgraded) Rails experience (back when a first movement towards SOA happened three years prior.)

They were rightly regarded with trepidation given their dependence on MooTools when the rest of the platform had been moved to jQuery, especially as the Jasmine suite for their coverage had been mothballed about 18 months before and those same MooTools libs were tightly-coupled between two platform applications.

Towards a future of less frontend tech debt, I seized on the opportunity to champion and shepherd the project (as a Q2 engineering goal) through to completion.

Over the course of three months, I led the effort around project scoping, weekly communication around engineering effort, and architecting and leading the implementation, interfacing with Product and Design to ensure quality in light of the absent test coverage.

Results

  • Delivered on decoupling strategy for static asset management / Webpack’d bundles while collabratively iterating with VPE/VP PROD and Sr. Engineers
Categories
Building buy-in Frontend Optimization Process

Shifting Mindset

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

Prior to Q2 2016, the team had supported Product’s goals for delivering feature-value without ever considering engineering goals (better code quality/maintainability, page performance, workflow improvement, etc.) I took initiative to flesh out high-level deliverables for the quarter.

Below is an example of a set of performance metrics around the most-highly-trafficked page on the platform.

Though we didn’t meet this particular goal for the quarter – mostly because of a move to Webpack from RequireJS in late-April and then the introduction of React on the page in mid-May – the simple fact that the data was being tracked represented a major paradigm shift towards that of being a data-driven team, whether around page performance OR engineering deliverables.

Results

  • Introduced quarterly, data-driven, engineering KPIs.
Categories
Frontend Prototyping supply-side

NUX Refresh, Again

Bluxome Labs : 5/16-5/16)

The NUX for the people doing work on the CrowdFlower platform has been around for two years.

Time for a refresh! Given the following from Design

… I set about improving the NUX.

First, I could see the difference in the pre- and post- and decided to remove the dependency on Guiders, a lib that has long served CrowdFlower well. Then, given the design, I saw we could realize the implementation quickly with a Twitter Bootstrap Modal. Going a step further, I also realized it would be the perfect opportunity to introduce React (and even React-Bootstrap) on a small scale in a Rails app where it did not yet exist.

After several copy changes, this was the final Deliverable

(specs were not unfortunately not created in conjunction with the delivered product given the scope they would have added to the original ticket.)

Results

  • Deprecated legacy 3rd party JS lib usage (Guiders) in favor of re-imagined NUX with React component.
Categories
Architecture Backend demand-side eCommerce Frontend Full-Stack Innovation SPAs

Demand-side UX Refresh

(Bluxome Labs : 4/16-4/16)

In a unique position given my previous experience with the UX, I took an opportunity when tasked by Product and Design to not only reskin the Listing but also to upgrade it.

Given that no one besides me really knew how RequireJS was working in the application and given its falling-out-of-favor in the general community as a module-loading solution, it was time to upgrade it to Webpack.

Here’s what the Task Listing looked like before

Here’s the mock from Design

In chronological order, here’s what I did

  1. Upgraded DataTables from 1.9 to 1.10
  2. Refactored JavaScript towards more of an OO paradigm
  3. Applied new skin
  4. Ported JavaScript for RequireJS to CoffeeScript for Webpack
  5. Deployed

…and here’s what I delievered

with modal

Results

  • Successfully advocated for adoption of Webpack to replace RequireJS and then ported most-trafficked page, while achieveing near-pixel-perfect re-skinning.

 

Categories
Architecture Building buy-in Collaboration demand-side eCommerce Management Process

Overhauling Quality

Bluxome Labs : 4/16-4/16)

Test Questions have long been the quality assurance mechanism of the CrowdFlower platform.

The interactivity behind them was created around 2008 in MooTools as part of a Merb application; that interactivity was never ported, even as the company increasingly adopted Rails and jQuery. For over three years, discussion has been of porting the Test Question interface out of Merb (the last presentation-layer in that app) and into a company-standard Rails app. Given the expected amount of effort with little user-benefitting ROI to be realized for simply a straight port, it’s easy to understand why it had only ever remained a discussion.

Finally, in April, 2016, the stars aligned when the VP of Product expressed a desire to spend time on improving Test Questions usability while the VP of Engineering decided the time was right for moving forward on a micro-service architecture, dividing “frontend” and “backend” responsibilities accordingly. I seized on the opportunity (without being mandated to do so) because I saw that we could kill two birds with one stone

Following is an inventory (I created the initial format for) of JS libs across three different routes (completed by a junior engineer)

I then used this inventory in conjunction with a Jira report to help scope the effort and parcel out work to likely candidates, an example of which can be seen below

Finally, I tracked progress in a wiki page, providing status updates to key stakeholders.

Results

  • Laid groudwork for complete FE overhaul, including success criteria and risks, after shopping technical ideas around with Lead engineers, VP PROD, VP ENGR.
Categories
Collaboration Frontend Full-Stack Innovation Machine Learning SPAs supply-side

ML Workflow UX

(Bluxome Labs : 3/16-3/16)

After focusing on other priorities, I was pulled into a revision of an interface (I had also created) as delievered for the Rich Data Summit allowing customers to send any model predictions under a certain threshold to the crowd.

I took the following (revised UX) static mock from Design

and iterated to deliver the following

Results

  • Crafted SPA as lynchpin connecting platform’s Machine Learning (Python) and human-in-the-loop (Ruby) systems after convincing team SPA was optimal approach.
Categories
Frontend Innovation Prototyping supply-side

Data ETL UI

(Bluxome Labs : 2/16-2/16)

Given only the following mockup from Design (created using InVision)

I did research until I found this.

I knew there would be a fair deal of work to do to re-purpose the idea to realize what Design had proposed so I started out small in my iterations.

First, I tried to standup the simplest POC using jQuery Draggable that I could in a single, local page.

Then, I added Bootstrap (the styling paradigm of the eventual target codebase) and continued to refine interactions

To get Product and Design’s feedback, I deployed the protoype on Heroku.

I was getting close to integration and that would eventually prove the most challenging (given pre-existing styling interactions and positioning.)

I incorporated my work into the main codebase and iterated on styling and interaction from there. Also, I created a CoffeeScript spec for covering the main features.

Here’s the final product

Results

  • Re-purposed an existing drag/drop example using jQuery Draggable in order to facilitate data management.
Categories
Agile Leadership Optimization Process

Filling Shoes of Scrum Master

Adopting Agile methodologies and nomencalture, our team chose to make sprint commitments in points (using Fibonacci numbers.)

Seeing an opportunity to use discipline towards making our performance go up-and-to-the-right, I began tracking some key metrics in a spreadsheet, some of which are displayed below

Figuring that the data would resonately at a gut level if visualized, I charted it as well

Results

  • Took on Scrum Master role (in addition to IC and Tech Lead responsibilities) and used a data-driven paradigm to achieve a 69% trailing-3-sprint-average improvement.
Categories
Architecture demand-side Distributed Teams eCommerce Frontend Full-Stack Management Process Prototyping supply-side

Styleguide

(CrowdFlower : 8/15-10/15)

In late August 2015, given previous successes in the year, I was tapped to lead the engineering team for delvering a visual identiy refresh (in conjunction with conference-ready AI deliverable) by early October.

Week 1

  • took Bootstrap 3/Flat UI/custom styling from Designer and created a static page as ‘gold standard’ for other engineers to reference
  • identified priority routes on which the new design would need to be rolled out
reference page

Week 2

  • created a new layout for and and began rolling out new design on the Rails app
  • drafted a plan for updating the Merb app seamlessly
  • began to onboard other engineers

Weeks 3-5

  • prototyped and tested the idea for asset precompiling in the Rails app and replacing the base assets of the Merb app
  • continued polishing
  • guided other engineers on implementation
  • continued polishing

Week 6

  • coordinated bug-free deploy in conjunction with Marketing (who was working for similarly refreshing the third-party-hosted home page)

Results

  • Organized work of four engineers (two local incl. CTO, two remote) as Tech Lead while planning (and tracking against) engineering sprints and deliverables over two months.