Nike App Feed
Platform: iOS & Android
Role: Design Lead
User Experience, Visual Design, Motion Design, Prototyping, Sketch Component Library, Brand Guidelines
What is it?
Nike Feed is a personalized stream of products and editorial content for users of the Nike App. A place of discovery for new and existing users.
The Process
Collaborators & Stakeholders
Global Brand (Identity System)
Program Management
Product Management
Engineering
Geo/localized authors
Collaborators & Stakeholders
VP of Design
VP of Product
NRC & NTC representatives
Research & Insights
Content Strategy
Components
I began by looking at the different types of content that could be in the Nike Feed. We wanted an editorial feel overall, so variety of content was important. But because the Feed would be used across different apps and authored by different geographical creators, we wanted to create a select number of components for consistency.
Concepts & Prototypes
We tried a lot of variations on what a feed could be. One idea was to create an Instagram Stories type of model, where Nike's beautiful content could be fully showcased fullscreen. Another was more of a weekly digest of stories, limited to a small number to give it a digestable and magazine-like feel.
After designing and prototyping several concepts, we partnered with the Research team to meet 1-on-1 with users in Chicago and LA to gain insight into the interaction models and types of content. What we found is that the feed should be personalized and not overly complicated.
Final Designs
Sketch Component Library
The team and I created the framework and guidelines for the new Nike Feed, but the task of creating the content and actual cards and threads was on the Global Brand team. So part of our deliverables upon completion of the project, was the Sketch files. So I created a shareable Sketch Component Library.
This allowed the components to maintain proper spacing and styling, in order to stay true to the original design and keep the feed content consistent. We also worked with the engineers to create components on the dev side, matching exactly what we designed and handed off.
