04: MSI - Deals Page & Deal Generator Tool

Improving Production Efficiency with API Driven Component & Automation Tool

UI/UX Design, Front-End Engineering, Rapid Iteration

Overview:

MSI Marketing approached me to make the MSI Deals Page: A webpage that would list and direct users to discounted MSI product deals at different online retailers. In the past, MSI launched similar web pages that displayed deals for short-lived seasonal campaigns. However, the new initiative would take a more evergreen approach. The MSI Deals Page would remain "always-on" and be updated more frequently with various campaigns and deals throughout the year.

Role:

Project Lead
UI/UX Designer
Front-End Engineer

Process:

1. Challenges
2. Objectives
3. 1st Iteration (Week 1)
4. 2nd Iteration (Week 2)
5. 3rd Iteration (Week 3 & 4)
6. 4th Iteration (Week 5)
7. Additional Implementations

Challenges:

The MSI Deals Page would iterate on similar seasonal campaign pages in the past. However, these past implementations had challenges in updating and maintaining these pages. Updating the deals took a long time. They had to be manually coded in HTML by a web developer. Deal pricing would often be inaccurate and inconsistent due to quick price changes by the sellers. This lengthy process of updating deals compounded this issue. For the MSI Deals Page to be feasible, these issues had to be addressed among additional design changes to accommodate an updatable "always-on" webpage.

The web page was limited to being hosted on a CMS (Content Management System) with no access to a database or back-end development. Solutions had to be developed almost entirely with front-end technology.

Objectives:

After evaluating the project goals and challenges, I established two primary objectives:

• Design and develop the customizable, customer-facing MSI Deals Page.
• Improve the production process for updating the page's content.

With a limited timeline and an expectation to deliver the web page for an upcoming campaign, I took a rapid iteration approach to the project.

1st Iteration (Week 1):

Deal Page - Initial Redesign

With a sales campaign launch approaching, my priority was to design and develop the consumer-facing MSI Deals Page. Using previous campaigns as a model, I neutralized the color and themes to give the page flexibility to work with varying art directions for different campaigns. I also implemented a "tagging" system for improved product discoverability.

Workflow Improvement - Early Stages

Because page design was the priority, initial methods of improving workflow were rudimentary and only marginally improved production efficiency. The initial effort laid the groundwork for more substantial improvements in later iterations.

• Created an semi-automated Excel template deliverable.

  In past campaigns, the marketing team sent Google Sheets containing deal information to the design team. To save time on the design team's manual page updates, I concatenated cell data into HTML blocks that could be easily copied and pasted into the page code.

• Created a library of reusable partner retailer logos.

  I trimmed the logos to a uniform size. I also concatenated the image URLS into the Excel deliverable.

• Initiated the creation of product image library.

  The method would improve production in the future, but still required designers to manually create product images.

2nd Iteration (Week 2):

Deal Page - Hatch Implementation

After successfully launching the first iteration of the Deals Page, MSI HQ Marketing Team authorized me to implement Hatch, a third-party Where To Buy solution. Hatch provided an embeddable plugin that would automatically update a product's pricing. I was also given access to MSI HQ's Hatch API which would offer greater customizeability. Due to the limited time before the next deal update, I opted to use the Hatch embed function and prioritize improving the deal update workflow.

Workflow Automation - DealData.js & DealData Generator Tool

For this iteration, I prioritized automating the repetitive, time-demanding task of manually writing HTML code. Consequently, I gave marketers more precise control over deal content and the ability to self-QA before sending deliverables to designers to upload into the CMS.

DealData.js - Generating HTML Content from AJAX

By repurposing some of functions for concatenating Excel data from before, I wrote a template script (DealData.js) that generated HTML using JSON data to fill preset variables. I opted for a JSON/AJAX solution because I did not have access to the CMS database.

DealDataGenerator Tool - Converting User Input into Data Files

After developing DealData.js, I devised a method for converting user input into usable JSON files.

• Use Google Sheets for Familiarity

  Having considered creating an entirely new tool to write JSON data directly from user input, I instead chose to maintain the use of Google Sheets for receiving user input. I created a standardized Google Sheet with predefined columns that corresponded with JSON variables in the template script. This reduced development time as well as the amount of training I need to provide to marketers on the updated workflow.

• DealDataGenerator Tool

  After establishing user input would be handled by Google Sheets, I need to convert that data into JSON text files for DealData.js. I designed and developed the DealDataGenerator Tool that would allow marketers to convert uploaded Google Sheet CSV files into downloadable JSON files with a single click. The tool generated an interactive preview for marketers to QA their content before sending the JSON file to the design team.

  

New Workflow - Production Time Reduced by ~50%

The new workflow will remove a possible point of human error, provide early QA, and cut production time in half.

Design Audit

Templating from Data and Hatch provided many opportunities for the Deal Page design, but there were some issues with the new implementation.

Pros:

• More Deals

  The improved workflow allowed for displaying and updating more deals. The page design no longer needed to accommodate the difficulty of deal updates. I added an extra column of deals and removed the bottom carousel to simplify the page design.

• Specific Deal Messaging

  With prices moved to the Hatch popup menu, the initial deal module could now display marketer-controlled messaging.

Cons:

• Hatch Service Issues

  Limited Internet connectivity or ad-block could cause the Hatch buttons to not load.

• Custom-Link Unpredictability

  As a result of Hatch not listing some specific promotions, I created a "custom-link" workaround to give marketers the ability to link the "Shop Now" button directly to retailers. However, this created an unpredictable experience when some of the "Shop Now" buttons linked directly while others displayed the Hatch popup menu.

3rd Iteration (Week 3 & 4):

Deal Page - API Support

After successfully launching the 2nd iteration, I began converting the Deal Page to use MSI HQ's Hatch API data rather than Hatch's embedded plugin. I looked at the API Data to determine which information was available to update the Deal Page. I created a new "Where-To-Buy" overlay to replace the original Hatch plugin. I updated the templating scripts to generate the new redesigned API-driven content.

DealData.js & DealDataGenerator - Plugin Conversion & Regional Support

Word of the project spread to the MSI Canada Marketing team. They contacted me asking to help implement the tool onto their CMS. So along with converting the templating script to produce content from API Data, I made adjustments to the code to be a pluggable component for other regions.

DealData.js Updates

• Unifying Templating Scripts into a Templating Engine Plugin

  I isolated the templating engine scripts and linked both the deal page and tool to it. This helped to simplify the code and reduce redundancy, as well as helped with versioning.

• Add Regional Paramenters

  After creating the Templating Engine, I added additional parameters to support other regions. Another region's web admin can instance the engine class with their designated region code.

• Create Version Library

  I created a version library to prevent out-of-sync issues among different regions.

DealDataGenerator Tool Updates

• Add Additional Features

  By request of the US Marketing team, I added new input fields for white-listing and support for custom retailer links.

• Write Documentation

  I wrote and uploaded an online reference guide. I used it as supportive material when training the Canada Marketing Team.

4th iteration (Week 5):

Deal Page - UI Update

After running the API system for a week, another design audit revealed some deals failed to load data from the API. With the UI failing to update, the user would be stuck without feedback. In addition to the API issues, it would be opportune to improve navigation visibility.

API Fallback & Feedback

Switching to API data required a solution for handling transfer delays and errors. Data would occasionally not send on the initial request, so I wrote an error handler that would resend multiple requests (Max 3) before displaying a "Deal is not Available" message. The additional requests would stall the UI, so I added a loading animation to give the user feedback that the retailer list is processing.

Navigation & Awards - Improved Visibility

I chose to display the awards with a minimalistic text-based layout instead of the original graphical banner. I darkened the current tab marker and added drop-shadow to increase the overall navigation contrast.

Tag Navigation - Improved Visibility

I increased the font size and contrast for all the tag options. I added drop-shadow on the current tag to add another layer of contrast.

Additional Implementations:

With the deals component built, it has since been customized and implemented onto multiple campaign pages.