Nike responsive website

Making meaningful data more accessible

Communicating data through a delightful interactive experience

We generate 2.5 trillion bytes of information every day. Data is constantly being extracted and analyzed, but is worthless if we don’t communicate it correctly.

The Nike team collaborates with employees in its official stores, sharing important sales data. We created a new experience to make that data clearer and more accessible.

The result is a highly interactive, responsive website, which translated into a greater interest in exploring the data and a better understanding of the information.

Services and deliverables
Content audit
Interactive infographics
Data design
Art direction
Responsive website
Information architecture
Interactive infographics

About Nike

The world’s most popular footwear retailer

Nike is the world’s largest supplier of athletic shoes and apparel and a major manufacturer of sports equipment, employing about 76.700 people worldwide.

With so many people involved in various jobs at the company, communication becomes essential.

The starting ground

Data can be overwhelming

The team at Nike communicates regularly with the employees at their official retail stores, sharing important data about sales and information about new and existing campaigns.

By learning about this data, stores can have a better understanding of the performance of their products.

↑ They collect the data using very detailed, thoughtful spreadsheets, to later share them as email attachments.

Creating the first newsletter

A new beggining

Sports Direct, the British retail group, opened a new shop at Thurrock (London) with Nike having an extensive presence in it.

↑ Video of the new shop.

A month after the opening, the team at Nike had collected key data about the performance of its products in the store during these first weeks.

↑ Data about product performance.

The challenge consisted on finding the best way to communicate the data by creating the first newsletter to be used as a template for other ones to come.

Content audit and research

Uncovering new opportunities

Although emails can be a personalized and direct way to communicate, they were not seeing the expected results.

The main problem was the recipients were not looking at the attached spreadsheets with crucial data.

We analyzed the system, and discovered a few areas of improvement that lead to new opportunities:

Hold attention
Having to click and open an Excel file (or any other external software) usually requires a few seconds. During this time, our attention gets lost.

Visuals
Database and tables don’t have a visual nature and are difficult to process and understand by the human brain.

Mobile friendly
Many readers opened the email on their phones, but they didn’t have Excel installed, so they couldn’t open the spreadsheet.

Website

A format users love

Instead of relying on Excel to communicate the data, we created a website which allowed us to better visualize it.

Also, we were able to break up the information into pages for a more accessible experience.

Wireframes and prototypes

Working collaboratively

We created a document with the project approach and website structure.

We also handed out a prototype so that everybody involved could test the website and content flow.

These tools allowed us to work collaboratively with the Nike team, making it easier to share any feedback.

↑ Document with the project approach and website structure.

Responsive website

Anytime, anywhere

The web is responsive, it adapts to every screen size, so it doesn’t matter if the users are accessing it from mobile or desktop devices.

Content experience

Prioritizing engagement

If we want our users to pause for a second and read the newsletter, it should be relevant, well structured and engaging.

Photos, interactive content, videos, infographics and other visual elements make the content more interesting and easy to digest.

Content structure

Everything clear

We divided the website into 3 sections, based on the content the team at Nike needed to communicate:

Landing / Homepage
This is the first page that gets seen by the users. It features the video and it’s a brief introduction to the new store.

The store
The spatial distribution of the store is a key consideration of on-site sales. This page explains the inside of the store.

Insights
This page features the key data about sales at Thurrock shop collected during the first month.

Homepage

The first page a user sees

This page is designed to get the user’s attention quickly.

The page opens with a bold animated headline. Video content is more engaging than static images or text, that’s why we place it in the main section.

From top to bottom, the most relevant content is shown first and the less relevant occupies the last section.

↑ Mobile version of the website.

Store page

From the inside

On this page, the user will be able to get a better idea about the distribution of the store.

It features a map of the different areas and detailed photos.

↑ Mobile version of the website.

Insights page

A more engaging approach to data

This page is a summary of the most important data collected from the first months of the store, displayed visually, with animations and video content so that the readers aren’t forced to look at the numbers, but engage in the flow of the data.

↑ Mobile version of the website.

Final results

When data needs to speak human

We live in a world where data is shared constantly. Today, there are technologies capable of collecting enormous amounts of data that can be beneficial for any company.

But how we communicate it is as important as the data itself. If we don’t do it in a way that is engaging and accessible to everyone, it will never be seen, read, listen to.

The result of this project is a highly interactive, responsive website, which translated into a greater interest in exploring the data and a better understanding of the information.