Nike has prioritized it’s relationship with consumers. Part of this strategy is more targeted interactions, more timely communication and more global consistency online. This means content! (and lot’s of it). Nike spent some time auditing the in-house off-the-shelf tools being used to manage these efforts and exposed a multitude of pain-points. The decision was made to create a content management system internally and I was hired to help design it.
I set out to learn about content publishing at Nike and how I could help the authors. I conducted user Interviews, started job shadowing, performed hours of research and had great conversations about what they needed to do their job and what would help them enjoy doing it. Nike was using a multitude of admin tools to create, track workflow, distribute and transform content. These tools were not very extensible, didn’t talk to each other, were very expensive and were rife with years of in-house, functional add-ons resulting in extremely poor UX and UI. In addition, there are multiple edge use cases, distribution flows, roles and responsibilities, tracking, authoring and publishing scenarios. It was all inefficient, cumbersome, open to frequent errors and post publishing redo’s. The key take-away was that the tools were the bane of the authors jobs, the poor UX caused low user confidence and fear within tool use. Redesigning the product with proper UX and utilizing better UI would vastly improve multiple aspects of authoring content at Nike.
Using what was learned during discovery, I was able to apply a lean UX process and get the initial guidance and direction underway quickly. I created a new architecture and interface strategy that would bucket much of the functionality into similar but separate functions resulting in a much lower cognitive load. A significant change was made to the interface by switching the entire Nike admin tools repository over to material design style form fields–more explicit labels and friendly placeholder text removed a huge amount of user guesswork. In addition, a running list of all messaging and notifications was being created and written with a friendlier, more helpful voice. For the application interface, white boarding sessions informed wireframes of all screens in the app. User-flows were created where needed and we we’re ready to get into the UI.
Knowing that whatever was designed, if successful, would need to be shared out to other Nike admin tool teams, I started creating UI library components in Sketch to aid future designers in building UI for other tools. Careful not to fatigue or confuse users, Key screens were user-tested prior to prototyping to get a feel for how things would be received. I also worked closely with key stakeholders to maintain their confidence and provide clarity.
Prototype & Test
Click-through prototypes were built utilizing inVision and where necessary, Principle for any interaction animations. I conducting a series of phased in-person user tests using video recording and monitoring via Lookback. The Speak-aloud protocol was used as subjects gave feedback and small changes were made to the UI. I worked hard to make sure there were no future blockers, using this toolset really worked well to lean out the aforementioned steps in the process and provided valuable points to act and iterate on.
As elements passed user-testing and UI components came together in react, I worked closely with the development team to make sure direction wasn’t lost in translation. A very large development team at Nike required a significant amount of UX evangelism, justification and education. Several elements in the application had a phased integration which caused a lot of MVP design phases per function/section. As the team was putting it all together I started to meet with other Nike admin teams to populate the UI components and UX strategy creating with CMS.
As the application came to life, I was able to setup regular user testing for iteration. The entire process cycle fell into place naturally as users began to us the CMS. More functions added, more use cases learned, more things to work on. In the end, the CMS will really never be completed. It is a dynamic tool, constantly changing, iterating, designing and testing. By aligning with a deeper UX strategy and creating UI components, the design accomplished all the original goals and then some. Content is now being authored with high confidence, without fear, and without pain-points in a highly efficient manner. The tool has now improved the lives of the users who use them and a system is in place to allow for quick design and implementation for years to come.
Admin Tools Design System
Once the new design was publicized, additional admin teams started asking me to design more admin apps. It became clear that creating a design system for Nike admin tools was in high order. By creating a standard interface component library, we would be able to spin up apps in short order that maintained consistency, familiarity and most importantly usable UX patterns for the users who power Nike using internal applications. Initially I began by creating a design system utilizing a detailed Sketch library while eventually moving over to inVision’s new DSM. Once the UI components were in place, I began working with an internal dev team to create a react storybook for developers. The end result of this work was made apparent by being able to comp and develop an entire app in a matter of days. To date, the Admin DS has been used to create apps that handle users and roles; taxonomies; optimized, rule based merchandising; and Nike’s new digital asset management tool.
Work has just begun on the CMS mobile App for iOS. I will update when more becomes available!