Nike Jordan Editor

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.

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.

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.

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.

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.

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.

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.

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.