Nike SB

Embracing accessibility in Nike SB

Celebrating the best of skate culture by creating a more inclusive, accessible, and original site.

Client

Nike

scope

Accessibility Review

Website

Challenge

Improve accessibility and usability of the site without losing the current charming and unexpected qualities of the site.

Challenge

Improve accessibility and usability of the site without losing the current charming and unexpected qualities of the site.

Challenge

Improve accessibility and usability of the site without losing the current charming and unexpected qualities of the site.

Solution

Tactical accessibility, responsiveness, and design updates focused on making the site work as intended for more audiences on more devices.

Solution

Tactical accessibility, responsiveness, and design updates focused on making the site work as intended for more audiences on more devices.

Solution

Tactical accessibility, responsiveness, and design updates focused on making the site work as intended for more audiences on more devices.

Result

A more inclusive, accessible, responsive, and usable site whose previous charisma is now magnified.

Result

A more inclusive, accessible, responsive, and usable site whose previous charisma is now magnified.

Result

A more inclusive, accessible, responsive, and usable site whose previous charisma is now magnified.

Roles

I worked with and presented to an internal team and the primary client directly. The internal team included:

Strategy & UX Design

Experience Design Dir.

UX Designer (my role)

Design

Digital Creative Director

Digital Designer

Development

Technical Director

Principal Developer

Project Management

Senior Producer

Process

The Nike SB site is a cultural site. It offers insights into specific athletes, videos of impressive moves, and highlights of significant and meaningful programs such as "Skate Like a Girl" and the "Why So Sad?" project, another project I had the privilege to work on.

As a remote/hybrid team, we communicated primarily via online tools, scheduling meetings when necessary.

Initial Site Review

I completed an initial overview of the site, documenting the primary opportunities for adjustment. Most fell into one or more of the following categories:

  • Keyboard Navigation

  • Color Contrast

  • Overlapping Elements

  • Confusing Controls

  • Mobile Interaction

I completed an initial overview of the site, documenting the primary opportunities for adjustment. Most fell into one or more of the following categories:

  • Keyboard Navigation

  • Color Contrast

  • Overlapping Elements

  • Confusing Controls

  • Mobile Interaction

I completed an initial overview of the site, documenting the primary opportunities for adjustment. Most fell into one or more of the following categories:

  • Keyboard Navigation

  • Color Contrast

  • Overlapping Elements

  • Confusing Controls

  • Mobile Interaction

Full Site Review

The Digital Designer and I worked together to create a comprehensive review of the site, pulling out all examples of issues to be resolved and opportunities for improvement.

This involved:

  • A full accessibility & usability review

  • A specific recalibration of the navigation

  • A rethinking of the homepage filtering

  • A new color-theming approach & type exploration

The Digital Designer and I worked together to create a comprehensive review of the site, pulling out all examples of issues to be resolved and opportunities for improvement.

This involved:

  • A full accessibility & usability review

  • A specific recalibration of the navigation

  • A rethinking of the homepage filtering

  • A new color-theming approach & type exploration

The Digital Designer and I worked together to create a comprehensive review of the site, pulling out all examples of issues to be resolved and opportunities for improvement.

This involved:

  • A full accessibility & usability review

  • A specific recalibration of the navigation

  • A rethinking of the homepage filtering

  • A new color-theming approach & type exploration

Exploration

After pulling out examples of the issues and categorizing them by type, we started exploration into potential solutions.

Recommendations & Testing

We organized documentation and reviewed the recommendations with the client in detail.

We also provided the tools necessary for the Nike team to easily apply accessible color combinations going forward, removing the need for them to individually identify workable combinations for each element (especially tricky with animated elements!).

After approval, updates were submitted to Dev. We tested the elements individually and collectively to ensure all updates worked cohesively as planned.

Conclusion

The review of the Nike SB site was extremely detail-oriented, creative, and meaningful. We were able to experiment with ways to be both clear and playful, intuitive and unique, and colorful but readable.

Chris Dukeminier, Global Brand Director, sums up the Nike SB site in a few words.

Contact

Let's work together.

Want to see how intuitive, delightful, streamlined, and thoughtful your next project can be?

Contact

Let's work together.

Want to see how intuitive, delightful, streamlined, and thoughtful your next project can be?

Contact

Let's work together.

Want to see how intuitive, delightful, streamlined, and thoughtful your next project can be?

© Made by Kelsey Wirtzfeld

© Made by Kelsey Wirtzfeld

© Made by Kelsey Wirtzfeld