Challenge

To design a low-carbon digital experience that aligns with Nike's commitment to sustainability.

Sustainability

Web

MVP

Role

Lead Product Designer

Client

Nike

Timeline

4 weeks

Challenge

To design a low-carbon digital experience that aligns with Nike's commitment to sustainability.

Sustainability

Web

MVP

Role

Lead Product Designer

Client

Nike

Timeline

4 weeks

Challenge

To design a low-carbon digital experience that aligns with Nike's commitment to sustainability.

Sustainability

Web

MVP

Role

Lead Product Designer

Client

Nike

Timeline

4 weeks

TLDR Project summary

Overview

Led the redesign of a low-carbon digital experience for Nike's Space Hippie line, aligning it with the company's sustainability goals.

Responsibilities
  • Art direction

  • Sustainable design principles

  • Distilling research into design decisions

  • End-to-end product lead

Impact
  • 98% file reduction!

  • Created a sub 20 kb image style

  • Built a lightweight and modular design system

  • Established a unique set of digital sustainable design principles

  • Delivered industry-level craft using only HTML and CSS


TLDR Project summary

Overview

Led the redesign of a low-carbon digital experience for Nike's Space Hippie line, aligning it with the company's sustainability goals.

Responsibilities
  • Developed new sustainable design principles

  • Created a lightweight, modular design system and art direction

  • Created a <20 kb image style

  • Implemented user-friendly, low-energy animations

Impact
  • 98% file reduction!

  • Established a unique set of digital sustainable design principles

  • Delivered industry-level craftsmanship using only HTML and CSS

TLDR Project summary

Overview

Led the redesign of a low-carbon digital experience for Nike's Space Hippie line, aligning it with the company's sustainability goals.

Responsibilities
  • Art direction

  • Sustainable design principles

  • Distilling research into design decisions

  • End-to-end product lead

Impact
  • 98% file reduction!

  • Created a sub 20 kb image style

  • Built a lightweight and modular design system

  • Established a unique set of digital sustainable design principles

  • Delivered industry-level craft using only HTML and CSS


Testimonials

Impact beyond the brief

Nick is a fantastic guy to work with. He has great critical thinking skills and dedication to going the extra mile. I've seen him tackle numerous complex challenges with ease, simplifying the user experience effortlessly. Any great team would be lucky to have him!

Kye Esa

Senior Producer, Rehab

Nick has an amazing ability to work seamlessly with cross-functional teams, grasp customer needs and set clear product goals. Highly reliable and dedicated, I always felt his projects were in safe hands from conception to execution. His expert direction and input ensured success and I strongly recommend Nick for any future endeavours.

Brendan Turner

Senior Producer, Rehab

Testimonials

Impact beyond the brief

Nick is a fantastic guy to work with. He has great critical thinking skills and dedication to going the extra mile. I've seen him tackle numerous complex challenges with ease, simplifying the user experience effortlessly. Any great team would be lucky to have him!

Kye Esa

Senior Producer, Rehab

Nick has an amazing ability to work seamlessly with cross-functional teams, grasp customer needs and set clear product goals. Highly reliable and dedicated, I always felt his projects were in safe hands from conception to execution. His expert direction and input ensured success and I strongly recommend Nick for any future endeavours.

Brendan Turner

Senior Producer, Rehab

Testimonials

Impact beyond the brief

Nick is a fantastic guy to work with. He has great critical thinking skills and dedication to going the extra mile. I've seen him tackle numerous complex challenges with ease, simplifying the user experience effortlessly. Any great team would be lucky to have him!

Kye Esa

Senior Producer, Rehab

Nick has an amazing ability to work seamlessly with cross-functional teams, grasp customer needs and set clear product goals. Highly reliable and dedicated, I always felt his projects were in safe hands from conception to execution. His expert direction and input ensured success and I strongly recommend Nick for any future endeavours.

Brendan Turner

Senior Producer, Rehab

Impact

Sustainable sneakers deserve a sustainable site!

Impactful CO₂ reduction

Achieved a 98% reduction in CO₂ impact compared to the existing Space Hippie website.

Custom sustainable principles

Established a unique set of design principles focused on sustainability for digital experiences.

Pure HTML & CSS

Achieved industry-level craftsmanship with no bloated frameworks, creating a low-energy, optimised site.

Impact

Sustainable sneakers deserve a sustainable site!

Impactful CO₂ reduction

Achieved a 98% reduction in CO₂ impact compared to the existing Space Hippie website.

Custom sustainable principles

Achieved an 83% pass rate on usability tasks, meeting or exceeding the 80% success threshold for smooth user interactions.

Cost-effective validation

Validated concept and product via clickable prototypes, avoiding costly development through iterative testing and feedback.

Impact

Sustainable sneakers deserve a sustainable site!

Impactful CO₂ reduction

Achieved a 98% reduction in CO₂ impact compared to the existing Space Hippie website.

Custom sustainable principles

Established a unique set of design principles focused on sustainability for digital experiences.

Pure HTML & CSS

Achieved industry-level craftsmanship with no bloated frameworks, creating a low-energy, optimised site.

How did we achieve this?

We created and applied sustainable design principles to cut the Space Hippy website size by 98%, focusing on image optimisation and custom code as key drivers.

How did we achieve this?

We created and applied sustainable design principles to cut the Space Hippy website size by 98%, focusing on image optimisation and custom code as key drivers.

How did we achieve this?

We created and applied sustainable design principles to cut the Space Hippy website size by 98%, focusing on image optimisation and custom code as key drivers.

Click to load imagery

In addition to optimised images, users could choose to load a higher-quality version if needed. Selecting higher-quality images showed an increase in CO₂ impact, giving instant feedback on sustainable choices.

Click to load imagery

In addition to optimised images, users could choose to load a higher-quality version if needed. Selecting higher-quality images showed an increase in CO₂ impact, giving instant feedback on sustainable choices.

Click to load imagery

In addition to optimised images, users could choose to load a higher-quality version if needed. Selecting higher-quality images showed an increase in CO₂ impact, giving instant feedback on sustainable choices.

Future-facing art direction

Building on our sustainable design principles, I explored various ways to showcase the product whilst drastically reducing file size. Combined with efficient coding, this was key to lowering the site’s carbon footprint.

Future-facing art direction

Building on our sustainable design principles, I explored various ways to showcase the product whilst drastically reducing file size. Combined with efficient coding, this was key to lowering the site’s carbon footprint.

Future-facing art direction

Building on our sustainable design principles, I explored various ways to showcase the product whilst drastically reducing file size. Combined with efficient coding, this was key to lowering the site’s carbon footprint.

Modular components

I created a stripped-back design system that would give us flexibility and interest whilst also being simple and lightweight to build using just HTML & CSS.

Modular components

I created a stripped-back design system that would give us flexibility and interest whilst also being simple and lightweight to build using just HTML & CSS.

Modular components

I created a stripped-back design system that would give us flexibility and interest whilst also being simple and lightweight to build using just HTML & CSS.

Tiny images, massive impact

To reduce the site’s CO₂ impact, I designed an optimised image style under 20kb, maintaining product detail for accessibility and usability.

Tiny images, massive impact

To reduce the site’s CO₂ impact, I designed an optimised image style under 20kb, maintaining product detail for accessibility and usability.

Tiny images, massive impact

To reduce the site’s CO₂ impact, I designed an optimised image style under 20kb, maintaining product detail for accessibility and usability.

Lightweight code

We reduced the website code size by 70% by keeping the site simple and modular, allowing us to use only CSS and HTML, even for animations!

Lightweight code

We reduced the website code size by 70% by keeping the site simple and modular, allowing us to use only CSS and HTML, even for animations!

Lightweight code

We reduced the website code size by 70% by keeping the site simple and modular, allowing us to use only CSS and HTML, even for animations!

Credits

Marie Vodickova

Creative Strategy

Robin Hunter

Full Stack Engineer

Nick Clement

Creative Director

Credits

Marie Vodickova

Creative Strategy

Robin Hunter

Full Stack Engineer

Nick Clement

Creative Director

Credits

Marie Vodickova

Creative Strategy

Robin Hunter

Full Stack Engineer

Nick Clement

Creative Director

Want to find out more?

Want to find out more?

Want to find out more?

© 2024 Nick Voke

Made with 🩶in Framer

© 2024 Nick Voke

Made with 🩶in Framer

Made with 🩶in Framer

© 2024 Nick Voke