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
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 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
CMS demand-side Frontend SPAs

Demand-side Internal Tooling

(CrowdFlower : 7/13-8/13)

The CrowdFlower platform is consumed via a number of microtasking sites. Each site registers and maintains its own users, but to better track unique identities across the CrowdFlower platform, we built a Single Page App in Ember.js to allow associating users across partner microtasking sites with one unique identifier in the CrowdFlower platform.

Results

  • Implemented a CRUD tool for managing users using Ember.js while iterating in conjunction with Product Manager as requirements changed.
Categories
Architecture demand-side Frontend Innovation SPAs TDD

Improving QA with SPA

CrowdFlower : 4/13-7/13)

Test Questions are used as the gold standard of quality in the CF platform, but they can be laborious to create, particularly for work that’s periodically repeated.

As no templatized solution existed, a team of three of us (me as F2E, Product Manager, and Backend Engineer) tackled creation of an internal product to simplify the workflow.

The user flow was to create “Cases” of Test Questions that got sent to jobs as “Batches”; where the composite idea of a “Mold” encompassed all “Cases” and “Batches” for a particular set of target jobs.

(“The Forge” was the product’s original name, derived from a time when “Test Questions” were known as “Gold.”)

One of the more challenging aspects of the project was the testing of the app. Selenium has always been a robust solution for testing even JS-heavy experiences, but given its heft, Poltergeist was used instead.

The product was to eventually be made available externally but never was.

Results

  • Built internal workflow tool using Ember.js.
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
Architecture Collaboration eCommerce Frontend Innovation Prototyping SPAs supply-side

A New Way To Shop

(Shop It To Me : 1/12-4/12)

Shop It To Me has been a beloved service for years when it comes to finding the best deals across retailers, but we wanted to enable the user finer-grained abilities to find exactly the item(s) of interest for them.

We often had feedback about being able to drilldown by clothing type and brand (e.g. “Rebecca Minkoff handbags”) but our previous tools didn’t enable that kind of granularity.

Enter “Threads.”

As the brainchild of our CEO, project “Threads” has become a way for users to track the specific items of interest to them. We now empower the user with the ability to get as general (e.g. “Black dresses”) or as specific as they want. (e.g. “Rebecca Minkoff handbags under $300.”)

Below, you’ll see the hi-res) mockup we came up with (after having previously white-boarded the idea) in early March (click to view.)

inspiration (as mocked-up in Photoshop)

Over the following two weeks, I ramped up on Ember.js and implemented the first version of the app while the other engineer built out the pseudo-RESTful backend. I won’t claim that the code we produced was the cleanest either one of us ever wrote; while doing the best we could, getting to market was the true driving motivator.

We went live – that is, deployed to production for internal and a select group of test users – on March 27th, 2012, with the following (click to view)

very first landing page

Based on user tester feedback, we decided to bolt-on onboarding and improve the look, so four days later on March 31st, 2012, we deployed the following (click to view)

revised landing page with header and pseudo-onboarding

Based on observations during user testing, we realized the opportunity to incorporate a feed of site-wide activity as that would benefit discovery. We also took a few cycles to flesh out onboarding and a “Things To Do” list given challenges users’ had in making sense of the new product. We also tweaked styling to highlight the very newest items in the users’ results; screenshots follow (click to view.)

onboarding modal on landing page (4/11/2012)
 
1st try: TTD/activity feed on landing page (4/11/2012)
 
2nd try: TTD/activity feed on landing page (4/12/2012)
emphasizing new items (released 4/12/2012)

We brought in more and more user testers. Here’s a screenshot from April 17th, 2012, showing progress we made from our observations

4/17/2012 release of results page

While observing user testers, we discovered that they wanted tastemakers to help them navigate the overwhelming number of apparel items, so we introduced the concept of curation. We also made the assets/images larger by popular demand.

curation (4/23/2012)
results page (4/23/2012)
results page w/larger assets/images (next day : 4/24/2012)

After April 24th, we stepped back to assess how we were doing. I was rotated onto our bread-and-butter projects but the team was augmented with other talent and continued forward, contracting the look-and-feel out to a third party.

The product has since been retired.

Results

  • To revolutionize personalized shopping, a team of three (the CEO as product manager, me as the F2E/architect, another as backend engineer,) created a new shopping experience using Ember.js over two sprints
  • Ramped up quickly on Ember.js
  • Architected frontend as a Single Page Application
  • Worked with backend engineer to agree upon/implement integration between FE and BE
  • Drove development through four major iterations during a two one-month sprints
  • Suggested (though not responsible for implementing) lazy-load as a way to improve performance
  • Picked up design slack when we lost our Graphic Designer
  • Scoped frontend deliverables and managed expectations
  • Worked with CTO to coordinate out-of-cycle releases to production
  • Planned, conducted, and analyzed user testing