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.
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.
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
Upgraded DataTables from 1.9 to 1.10
Refactored JavaScript towards more of an OO paradigm
Applied new skin
Ported JavaScript for RequireJS to CoffeeScript for Webpack
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.
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.
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.
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.
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.
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.
