Jacob Chan

Back to work

Jacob Chan

Onsite Recommendation Configuration Tool

To allow customers to build (kick-ass) recommendations UI.

Role

In the Summer of 2016, I had the amazing opportunity to work for Boomtrain, a startup based in San Francisco. As the Product Engineering Intern at Boomtrain, I got to work very cross-functionally across product, design, engineering, solutions, and many more teams. I acted as the glue between these teams, to align vision and roadmap expectations for various products, as well as developing solutions here and there for urgent needs.

Problem

One core product of Boomtrain is the Onsite Recommendations - much like Amazon’s or Netflix’s recommendation engine, but for publishers, ecommerce sites, and more.

Onsite Recommendations Examples

Examples of Onsite Recommendations on Live Users

The current solution involved our old product and an outdated UI.

Onsite Recommendations - Old UI

Old UI of Onsite Recommendations Configuration Tool

And so the problem was set:

Goals

The main goals for this core feature would be that a non-technical user can go in and create these on-site widgets for their website easily.

Some secondary goals included:

Specifications and wireframes

Specifications

For specifications, we looked at multiple things:

Target Users & Goals

As a tool for customers’ websites, a lot of thinking was done around the age-old question: How much functionality should be exposed to the user? How much should be hidden?

This is due to our division in our target users: marketers and outreach coordinators would use our tool to configure OSR’s, but also developers may also use this tool. Here is our thinking around this:

Workflow Redesign

The utilization of the old UI was examined. I could see the inefficiencies and gaps users had to step over to get what they wanted. For non-technical users, this was difficult because:

Landing Page of Old Config Tool

Landing Page of Old UI

Inspirations

Functionality: Chrome Web Inspector

Chrome Web Inspector

Inspiration: Chrome Web Inspector: Spacing

Simple to Use: Sketch

Sketch

Inspiration: Sketch


Existing OSR’s

We wanted for customers to do everything they could do and are doing, but better. Here are some examples of our OSR customers:

Onsite Recommendations Examples

Examples of Onsite Recommendations on Live Users


Wireframes

We wanted the users to feel as if they were building something, so the workflow around the starting, designing, and saving of the widget must feel:

Iterations

Throughout the process, many small iterations were done to improve and get closer and closer to the desired user experience.

Onsite Recommendations - Wireframes

Wireframes of Proposed Onsite Recommendations Configuration Tool


Implementation

I was the sole developer on this, but consistently asked for feedback regarding the user-experience and intuitiveness. Here are some highlights: