Web application

Nike Jordan Editor

A real-time WYSIWYG editor for project owners, designers, copywriters to rapid prototype pages.

Company
AKQA
Collaborators
Jeffery QuaJimmy SoatStanley Yeung
Client
Nike Jordan
Technology
AngularJSDjangoMySQL
My Role
Developer/Designer
When
Feb 2014 - Mar 2014

Summary

The agency AKQA and their client Nike Jordan worked together to complete dozens of champaign webpages. Nike ran the majority of the creative process with their in-house copywriters, photographers, and creative directors. AKQA was the production muscle, bring together all the creative assets into a www.nike.com hosted webpage. Both Nike and AKQA did great work together; however, AKQA’s goal was to have more creative ownership. Unfortunatly for AKQA this ownership was seemingly impossible. The process between AKQA and Nike was fragemented, we were given hard deadlines, short production times, and low budgets. All of which, created a bottleneck that essentially blocked any progress towards more creative ownership. We had a mission to fix this fragemented process by bridging the the communication gap between Client Nike and Agency AKQA.

Process

Pathfinder took over 18 months to complete. It took this long because the stakeholders for Pathfinder were global. The system was estimated to move 2 Billion USD a year. And getting to a system that could accomediate all stakeholders was incrediably difficult.

Process
Plan

Pain Points

Our design prompt was but a utterance over lunch about replacing a leaving employee with a robot. We were unsure of what we were out to solve. Regardless, we put on our designers hats and went to best resource we knew at the time IDEO’s Method Cards. We better shaped our problem by journey mapping the process between AKQA and Nike 2014’s March Madness Campaign. Our journey map reveal that the process had many pain points. And these pain points were used to help framed the product requirements.

Launches were often tied to an event and therefore deadlines were non-negotiable.

Creative handoffs often bleed into execution timelines.

Expensive production cost in both design and technology departements.

Physical distance between AKQA and Nike caused long feedback turn arounds.

AKQA Designers used Photoshop which didn’t offer a good solution for Responsive design.

Nike’s CMS CQ5 was slow and required a certified trained Authorer to use it.

Proposed Solution

Create a design and authoring tool, that enables, en masse, inhouse or remote Nike teams to collaborate and to rapidly iterate web pages for nike.com.

Design Execution

We had to move quick, we went from a list of product requirements to paper prototype with in the first day. We based most of our interaction design on the precidence of teams’ tooling e.g. Photoshop and CQ5. Next, we gathered all of the creative assets, e.g. fonts, color pallets, icongraphy, etc, in preperation of developing a MVP.

“I want to design Nike web pages that are responsive without making a bunch of mocks photoshop. I want to inline-edit copy and be able to drag and drop images directly from my desktop into the page.”

Jimmy SoatDesign Director

Challenge

Create a tool that is intuitive, ergonomic, and flexible enough for teams to collaborate in building a web page for Nike Jordan.

Visual

In 2014, the Nike Jordan brand had just reimagined their visual design, from which came a new color palette and typeface. Our tool’s look and feel followed this new visual design. Moreover, we strived to make the UI feel natural on top of it.

Black White

Color Pallet

Two tone

Jordan Druk

Typography

Jordan Druk

Interface

We modeled our tool after explorer/finder or filesystem. We had 2 main views: Project Manager, which you can think of a Folder. Inside each project held many versions of a project which afforded the oppertunity of version control and rapid iteration. The second view was the Project Editor, which you can think of as a Document inside a folder, where users would edit the templates.

Making a project

We needed a view that would allow authors to create project and view them all at a glance. There were many stakeholders all collaborating. The idea was to enable any of them to rapidly prototype a page and the best way to do this was to clone and version control another project.

Image Editor

Drag and drop images from your desktop directly onto the browser for the fastest workflow. Just like photoshop, scale and transform image directly in the browser using bracket and arrow keys.

Text Editor

Double click inline text editing. Drag and Drop text elements to change text lock ups. Update grid alignments of text. Add and style buttons to any text lockup.

Grid Editor

Layout out main content by adding or removing rows. Control layout with drag- and-drop reordering. Grid out content by adding or removing items to a row. Double click on items and select their how items span on the 4 column grid.

Rich Media Editor

Support for rich video media on element backgrounds. Our text authoring allows markdown, text alignment and granular control to margins spacing.

Technology Execution

We spent the majority of our 8 weeks in the development phase and we choose our stack based libraries that would lend themselves to a quick build. Our Applications architecture was heavily Object Oriented, our directory structure followed a traditional MVC, and our state was managed and shared to components via AngularJS’s Dependency Injected Services.

“I want to design Nike web pages that are responsive without making a bunch of mocks photoshop. I want to inline-edit copy and be able to drag and drop images directly from my desktop into the page.”

Jimmy SoatDesign DirectorFebruary 2014

Challenge

Adobe Experience Manager (formally CQ5) was slow tool that required a trained Author to design pages. Nike Jordan Editor was a collaborative prototyping tool but still needed a feature to extract images for final authoring back to AEM.

Solution

Design an effortless “Drag & Drop” interaction from desktop to webapp for adding images. Design a single click to extract all images on a page and output a single zip file.

Adding Images

1. ADDING IMAGES

Drag and Drop
Load Images

2. LOAD IMAGES

BASE64 INTO <CANVAS>
Base 64

3. TRANSFORM IMAGES

JPG TO BASE 64
JPG

4. TRANSFORM IMAGES

BASE64 TO JPG
Save Icon

5. SAVE IMAGES

JPG TO BASE 64
ZIP

6. DOWNLOAD IMAGES

ZIP ALL IMAGES ON A PAGE.

Takeaway

It’s convenient working in a controlled environment like an internal tool because we are safe to use many browser APIs that are not well supported. These API offer functionality that typically get delegated to backend systems e.g. zipping, transforming images, and writing files.

Challenge

How to synchronize user interaction across many applications

Solution

Real time interactively is a hard problem, so we relied proven libraries to manage it for use.

AngularJS Icon

ANGULARJS

FRONTEND FRAMEWORK

At the time, AngularJS is the most preferred framework, its component architecture made it easy to structure our web apps. AngularJS’s template language allow us to effortlessly impromptu design, develop, and refactor.

FIREBASE

REALTIME DATABASE

Firebase offered a extremely fast and flexible realtime noSQL database that we used to store all the text, images and layout data of our application. Any update to our page would have a real time update to the database.

Takeaway

When doing realtime data on every change you need to make sure you’re doing change detection and sending over the only data that has changed. We made a critical mistake in not doing proper change detection. Our app started to suffer when templates had large images because we were sending base64 image strings on every change to the document.

Challenge

We didn’t have time or permission to integrate a proper authorization and authentication story; however, we needed an application that private and easily shareable.

Solution

Using Node-WebKit JS we were able to make web application a run on a native operating system. Our application was only accessible if you had the latest executable and users could easily share the executable.

Node JS Webkit Logo

NODE-WEBKIT JS

NATIVE APP JS FRAMEWORK

By wrapping our client side application inside Node-webkitJS, we were able to call all Node.js modules directly from DOM and export a binary for OSX and Windows operating systems.

Takeaway

Node-Webkit enables a new way of writing applications with all Web technologies. However, as of writing this article the library is a bit dated, if interested in writing native operating system level web apps I would suggest using Electron. Moreover, if you want to write native mobile apps in the same workflow I would suggest Ionic or React Native.

Design Prototype Test Loop

Test / Measure / Iterate

We took an agile approach to the production of the Nike Jordan CMS. Meaning we broke our eight week project into four x two week sprints. Inside each sprint we would design, develop and test a feature with the AKQA designers. Our agile approch created a feedback loop that yielded much of the insight needed to fail fast. We believe this is what allowed us to make such a functional and polished project in such a short amount of time.

Process

After completing this project we had the great oppertunity to do a presentation infront of the entire AKQA San Francisco office. Jeffery Qua and myself stood in an room of 450 sets of eyes and ears that watched and listened to what we had made.

Presentation

Result

From lunch room small talk about robots and leaving empolyees to a functional real-time WYSIWYG editor. We set out to make a tool that helped reduce the friction between AKQA and NIke, with hopes that AKQA could get more creative ownership with Nike Jordan. In the end, we made a product that did just that.

Retrospect

This project was a great kickstart to my career. As an intern, I was able to experience the end to end process between agency and Client; between Creative and Technlogy. This project built the foundation of a Process Model, that to this day, I still use.