A real-time WYSIWYG editor for project owners, designers, copywriters to rapid prototype pages.
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.
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.
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.
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.
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 DirectorCreate a tool that is intuitive, ergonomic, and flexible enough for teams to collaborate in building a web page for Nike Jordan.
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.
Color Pallet
Two tone
Typography
Jordan Druk
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.
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.
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.
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.
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.
Support for rich video media on element backgrounds. Our text authoring allows markdown, text alignment and granular control to margins spacing.
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 2014Adobe 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.
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.
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.
How to synchronize user interaction across many applications
Real time interactively is a hard problem, so we relied proven libraries to manage it for use.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.