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.
Categories
Architecture demand-side eCommerce Frontend Full-Stack Innovation Machine Learning Management

Delivering AI

(CrowdFlower : 8/15-9/15)

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

In the months leading up to that, the CTO had been prototyping an intial verion of the app in Rails which, for the conference, was to supposed to be integrated with other legacy apps (Rails 3.2 and Merb) and have its UI overhauled to be compliant with the newly-created company Styleguide.

Week 1

  • Given Balsamiq wireframes, put together a few layouts
  • Put basic routes in place
  • Began architecting common styling solution between AI app and legacy apps
basics coming together

Week 2

  • Continued work on common styling
  • Made choices aobut JS libs and prototyped interactions given wireframes; got buy-in from CTO, Product, and Design
  • Began work integrating with ML Python web service

first index page of models

Week 3

  • Given higher-resolution mockups by Designer, started to polish look-and-feel
  • With architecture in place, began to parcel work out to other engineers

first version of export

Week 4

  • As conference neared, knew we weren’t going to be able to deliver everything; worked with Product to focus on MVP
  • Oversaw work of other engineers

adding data to the model

Week 5

  • Continued to lead other engineers and refine interactions
annotating a model

Week 6

  • Applied final polish
  • Delivered for the conference! Following are a few screenshots demonstrating some of the deliverables

Results

  • Led team in coordination with CTO to deliver AI application (Rails) for company-sponsored conference on Machine Learning, Artificial Intelligence, and Data Science.
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
Architecture Collaboration demand-side Distributed Teams eCommerce Innovation Process SOA

Legacy App Port

(CrowdFlower : 4/15-8/15)

In the Spring of 2015, seven years after the company’s inception and three years after the intital movement towards an SOA paradigm and away from the monolith Merb app (essential to the company’s business,) the architectual shift was still not finished.

Towards further paying down the tech debt of needing to maintain that app, I lobbied for, organized, and oversaw the extraction of the final presentation layer components into a more modern, more maintainable Rails app.

While not quite the magnitude of the previous major refresh, I recognized it would still be a mammoth effort. In order to attack the port, I created a spreadsheet project plan, inventorying all platform routes torwards prioritizing for the eight most-important, portable, customer-facing routes.

Following is a before-and-after example of what was achieved across those eight routes over four months.

Results

  • Secured adoption by CTO, VP PROD, Lead Engineer, and VPE to port view layer from legacy Merb app to Rails app.