Category: Process

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
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
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 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.
Categories
demand-side eCommerce Frontend Full-Stack Innovation Leadership Process supply-side

Key UX Upgrade

(CrowdFlower : 6/15-7/15)

After two years of usage, the company could tell that the paradigm previously introduced had led to improved Usability overall of the product but users were still confused about workflow.

After having tackled the welcome, we launched into rolling out a complete overhaul of the UX, moving from a left nav Master-Detail paradgigm to a top-nav Subway-Map approach.

The main challenge with rolling out a new UX was that it had to happen for both a Rails and a Merb application. Neither uses the same paradigm when it comes to layout so the approach had to be adapted to each and yet made general enough to not incur (even more than was already present) tech debt.

I served as Tech Lead and architected a solution, led other junior engineers in implementation, and managed interactions and expectation with Product and Design.

Following is a general impression of where we began and where we wound up

Results

  • Led engineering efforts around a complete UX overhaul of the company’s most important customer interaction.
Categories
demand-side Full-Stack Management Process supply-side

Groupware for Nuclear Resources

(IAEA : 8/06-9/06)

This web app – a customization of an Open Source .NET portal framework – accepts project requests from people around the world and handles the workflow.

Results

  • led award-winning dev team of 3 for custom, web-based Enterprise Project Management solution used by 3,500+ users; 2,600 unique visits per month
  • Reduced licensing costs through the use of the MVC-based, Open Source web content management system: DotNetNuke
  • Implemented standardized practices for software project documentation
  • Created integrated MS Office tools to halve the amount of data entry performed by support staff
  • Retooled the application to support Unicode (e.g. UTF-8)
  • Created a prototype (using SOAP web services) for Translation Management between line-of-business web applications
Categories
Analytics APIs Building buy-in Collaboration Full-Stack Process Prototyping supply-side

The Portal for Nuclear Information

(IAEA : 8/05-8/05)

At the end of 2004, the IAEA had well over 200 scientific and technical information resources (e.g. databases, websites, applications, etc.)

In order to reduce the effort to maintain these (saving time for graphic designers, software engineers, DBAs, and resource custodians alike,) a single portal was conceived and made a priority deliverable for the IT and MIS sections.

As the Lead Information Architect, I was responsible for gathering technical details about the resources, supporting the technical architect, and driving the design behind the user experience.

Results

  • led requirements gathering and implemented modular components for the authoritative web resource on scientific and technical nuclear information
  • Met with and built buy-in among information stakeholders
  • Abstracted the business processes of the organization to the 50,000 ft view
  • Utilized user-centered methods to inform the design of the portal
  • Implemented the beta version using OpenText, LiveLink, and Java APIs for each