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.


Nike’s marketing team uses iPads to access, retrieve, download and present the branding material for various purposes. While iPads make it super comfortable to carry around, one of the major challenges is the limited memory.

Also, there is a variety of content being stored and had to make it usable for the users to identify and access the files.

There would be simultaneous requests to retrieve the files from the cloud and this would make the downloads slow. So arose the need for offline access.We had to reflect the upbeat and sportiveness into the interaction.

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 of the visual designs.

Moodboard for the visual direction

We knew we wanted to go for a tile interface, because it is a folder structure and the ease of access is important.

Also there are many states for each folder to be shown.

Initial sketches and wireframes

After discussing with the technical team and project manager from the scrum meetings, the Epics and Stories were identified.
Some of the key workflows were to :
- List the files
- Keynote viewer
- PDF reader
- Manage downloads
- Offline content viewing

Then I started sketching the user flows and possible screen flows for each of the Stories.

Wireframes exploring options for the file folders

Whenever there is an updated file, a notification appears on the folder. The user can download a newer version and it will be queued.

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

The folders mainly consists of keynote files, PDFs and movie files used by the marketing people.
Keynote and PDF viewers had to be custom built internally on the app.
So I got the opportunity to think from ground up and design interactions for the Keynote and PDF viewer.

I sketched the detailed interaction to play, advance, pause, and resume functions of the slideshow. Also the page scroll function for the pdf reader.

PDF viewer has functions like page view, brightness control, scroll etc which we thought is useful to the users.

Image viewer interactions

Video player interactions

Visual Designs

Login Screens with user id and password entry flow

The file folder view after logging in

PDF reader, Image viewer and Movie player. If thumbnail previews are not generated on the folder view, icon placeholders are loaded.

Apart from the above scenarios, we had to design multiple cases of Offline viewing, Managing downloads, Queing etc.
There were number of decisions made from the User Experience point of view.
We also tried to improve the application by iterating on the visual nuances and micro-interactions.


The app was delivered to the customers and it was well recieved.
Thourough User-Testing was done by the delivery team in the US. We had couple of weeks to fix technical and UX bugs.

Nike appreciated our teams work ( design and technical ) and also gifted a pair of Sneakers for the entire team.