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.
Our NUX had seen a revamp in the previous major refresh, but we tackled it for a re-design in order to
give our newly-onboarded Visual Designer an opportunity to get his hands dirty with crafting a visual identity direction and
get a sense of the effort for introducing a new layout as it would eventually affect two very heterogenous apps
What it was like before
Here’s a first pass as I took the Designer’s vision and implemented it as a new layout, complete with Zendesk API integration to create a ticket on form post
Following is a representative control version of the landing page
I whiteboarded several concepts gaining buy-in from the chief product stakeholder and then implemented same, using Optimizely to set the parameter to determine which variation a user saw; below you will see the iterations.
Unfortunately, none performed better than control.
Results
Tracked performance of inbound traffic from Facebook, Twitter, Google AdWords, and StumbleUpon and designed/implemented various landing pages to improve signup rates.
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.
Taken in comparison with the default look and feel of our quintessential ‘tell-a-friend’ experience…
… the following examples depict some of the numerous ways we have experimented with (testimonials, site activity feeds, markup positioning, copy, timer, interstitials, refreshed creatives, etc.) to encourage users to spread the word.
These represent just a handful of the variations I’ve implemented.
Results
Realized a bump of 10-15% in the number of friends told (depending on the variation)
Below are a few of examples of the types of one-off marketing materials we sent to our users. They tend to fall into several categories: tell-a-friend promotions, Black Friday, Cyber Monday, special sales/announcements, and new product announcements.
All newsletters are designed and created in-house.
Results
Created numerous hand-crafted, one-off HTML newsletters
Reduced the time it takes to create a newsletter from two days to two hours
Normalized a set of legacy tables to reduce the possibility of error when assigning subject-line and other trials
To keep the user on-network, we created an on-site details page. We explored different MVPs which partially leveraged the metadata already present in our inventory, partially as they were intended to aggregate content from the retailers.
Here are a few concepts we vetted as MVPs
with local availability
with free shipping
with price and inventory history
with remaining quantity
with recently clicked
with cross-sell
The following screenshot shows that we even tried our hand at soliciting reviews as UGC
… before finally settling on this as the (now retired) final product.
Results
created an on-site details page to boost checkout conversion
worked 1:1 with Product to prioritize features
prototyped MVPs using Photoshop
implemented all aspects of the frontend under a sprint schedule
Conceived as a framework for local deals, we pivoted to a daily deal paradigm leveraging our apparel inventory when the market opportunity presented itself. This lead to revenue generation via several 100K impressions/day.
Initially, Product curated deals by hand and as market potential was proven for the idea, we built an infrastructure for algorithmically selecting 100s of deals/day (based on signals such as open and click activity) and gave Product a way to QA the deals.
Here is an example of the ‘Deal of the Day’ in the ‘spotlight’ position of our flagship email product (click to view)
Results
built the original (local, pre-Groupon) deal POC infrastructure, front-to-back
assumed maintenance responsbilities
collaborated with Product to address bugs and implement additional features, most notably: ‘stackable’ deals
implemented admin tool for Product to QA deals
coined the term ‘spotlight’ now used internally to refer to the real estate occupied by the deal
