Nike Brand Bookshelf

NIKE | UX | 2015

Nike Brandbook Shelf is an iPad application designed and developed at Mutual Mobile which is used by the internal marketing team at Nike to access brand guidelines and material often used on the go while at client meetings or in between office commute.


Most of the users sell off their cars before the expiry of their lease term while it is mostly in good condition either because there is a new car released in the market. Companies to entice the users offer heavy discounts to maintain loyalty to the brand. These companies take help of RMS Actuos platform to evaluate the condition of the old car. Executives from RMS would visit the customers and by asking few questions and taking pictures of the car generate a damage report and send back to the office. Based on this report, dealers offer discounts on the purchase of a new car.
However, manpower being limited RMS wanted to build a DIY app for customers to self-evaluate the condition of the car and answer few questions on the mobile device.

My Role

I worked as an interaction designer along with a visual designer (Mahesh) to craft the user experience keeping the Nike brand guidelines in mind. We had the creative freedom to work on micro-interactions and explore various modes of interacting the content on the relatively new medium ( iPad ).


After several calls with the client ( Nike ) and several more calls with the Project Manager, I understood the persona and the user scenarios. We followed Agile methodology and had several Scrum meetings to assess the complexity of the stories and tasks. I took to pen and paper to sketch the user journey and different states of the interaction. My initial wireframes were received well and I worked on several iterations.

Initial sketches and wireframes

Some of the key workflows were to :
- List the files
- Keynote viewer
- PDF reader
- Manage downloads
- Offline content viewing

Measuring the pros and cons of each type of representation gave a lot of clarity in our approach. However, we had to go with stack representation because it was visually less cluttered and gave easy access to folder actions.
Each file has multiple states based on whether there are updates or whether it is being downloaded or is currently downloading etc.

Sketching interactions for Keynote and PDF Viewer

Keynote and PDF viewers had to be custom built internally on the app and so I sketched the detailed interaction to play, advance, pause, and resume functions of the slideshow. Also the page scroll function for the pdf reader.

Translating wireframes into Visual Design

I discussed with the team and the visual designer, how the application can be enhanced by iterating on the visual nuances and micro-interactions.


To keep up with the brand guidelines of Nike we came up with subtle animations embedded into the folder views.