CASE STUDY.
CASE STUDY.
Overview.
The Nike SNKRS app is a source for Sneakerheads that provides insider access to exclusive drops, the hottest events, and latest sneaker releases.
My role.
My team and I worked collectively to build a new feature for the SNKRS app involving thorough research, wireframes, and high-fidelity mockups. My role was both a project manager and UI designer.
Goal.
Understand the target market, learn how they would like to connect with fellow sneakerheads and understand what motivates them to purchase sneakers.
Tools.
Figma
Photoshop
Personas.
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 4 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.
Task.
My team was tasked with creating a community feature that allows sneakerheads to connect, share and discuss their love for Nike sneakers.
Project manager achievements
Defining project goals
Creating timelines
Delegating work equally
Monitoring the project to meet deadlines
Presenting final work to stakeholders
UI achievements
Sketching
Following Nike's brand guidelines
Designing high-fidelity wireframes
Prototyping
Problem.
Nike has a loyal sneakerhead customer base, but nowhere within the app to connect its users.
Solution.
To design a new forum and social feature for the SNKRS app to connect the sneakerhead community that allows them to showcase their sneaker collection.
Research.
Our research revealed that the sneakerhead community wanted a social feature that allowed them to showcase their sneaker collection and connect with the community.
Team.
2 UX designers
2 UI designers
1 project manager
1 copywriter
Timeline.
Overall: 3 weeks
Discovery & Research: 1 week
Design & testing: 2 weeks
(Screens designed by me)
The design process.
Interviews.
During the ideation phase of the project, we conducted interviews to help build our personas.
We interviewed 5 users remotely who claimed to be a "sneakerhead" with 6 open-ended questions that focused on their values and motivations.
Affinity Mapping.
We used this method following the interviews and surveys to empathize with our users, find common trends, and ultimately develop a better understanding of our users and their needs.
FigJam was the tool we chose for affinity mapping, each team member added the results from their user which we then categorized and grouped into categories which efficiently allowed us to gain the qualitative user research we needed in a short period of time.
Wireframes.
Using Figma, we translated our original sketches into low-fidelity wireframes. Once the team agreed on the final design we added stock images and copy to get it ready for our user testing phase.
We tested 5 users and made iterations based on the results of our testing to improve the design.
Once we felt confident with our designs and the feedback we moved on to creating our high-fidelity prototype.
Usability testing.
Once we created a high-fidelity prototype of the new flows using Figma we began our testing, we recruited 5 subjects for who fit our criteria.
Users were asked to complete specific tasks and we monitored their emotional journey throughout these tasks.
Our results from the initial testing allowed us to iterate and improve our designs.
Surveys.
Our next priority was to understand the target market and the challenges they face. In order to achieve this we conducted a screener survey. Our questions focused on our target audience's motivations, and values. From there we filtered through the strongest questions and launched our survey.
Issues
Too many (button) error options
Users had trouble navigating the profile page and were confused by unlabeled icons
Confusion with the labeling of "FitCheck" page and its purpose
Users felt the forum needed more detail and copy to define the action
Findings
After significant research and testing, my team and I concluded the sneakerhead community all wanted something they were missing — a way to communicate with each other and share their love for sneakers.
What I learned throughout this process
What questions to ask in order to help identify the problem
How to manage a team and meet deadlines
How to design pages in an existing app that’s in line with the brand's visual identity
How to iterate on designs using pain points
How to create innovative designs that solve a problem while remaining familiar to the user
Original team sketches
Original team sketches
Solution
Reduce error options to one single option to avoid confusion with the user
Label icons on the profile page
Removed "FitCheck" page found it repetitive of other posts and unnecessary
Add copy to the forum page for each posting so users have a clearer understanding
Final design.
Once we solved the usability issues we were able to finalize our designs. We wanted to ensure each screen aligned with Nike's visual identity, and brand values while addressing user pain points.
We developed and elevated 20 pages in total.
New app features include:
A forum that allows users to communicate and connect
Social section for users to share their sneaker collection
