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
![](https://framerusercontent.com/images/FoZADTFFbrFv5fT7kGSw3XJARI.png?scale-down-to=512)
![](https://framerusercontent.com/images/FoZADTFFbrFv5fT7kGSw3XJARI.png?scale-down-to=512)
![](https://framerusercontent.com/images/FoZADTFFbrFv5fT7kGSw3XJARI.png?scale-down-to=512)
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!
![](https://framerusercontent.com/images/1xLVG1mlqEqdij6HiPyi1odZ6qM.png)
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.
![](https://framerusercontent.com/images/HVhDsP1S3cKBRqrmpHTj4DAUtc.png)
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!
![](https://framerusercontent.com/images/1xLVG1mlqEqdij6HiPyi1odZ6qM.png)
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.
![](https://framerusercontent.com/images/HVhDsP1S3cKBRqrmpHTj4DAUtc.png)
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!
![](https://framerusercontent.com/images/1xLVG1mlqEqdij6HiPyi1odZ6qM.png)
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.
![](https://framerusercontent.com/images/HVhDsP1S3cKBRqrmpHTj4DAUtc.png)
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.
![](https://framerusercontent.com/images/dDshkESScDCtva3qew65wkKWE.gif?scale-down-to=512)
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.
![](https://framerusercontent.com/images/6iTV9pIsICtvtoUR8ByX5h2skM.png?scale-down-to=512)
![](https://framerusercontent.com/images/6iTV9pIsICtvtoUR8ByX5h2skM.png?scale-down-to=512)
![](https://framerusercontent.com/images/6iTV9pIsICtvtoUR8ByX5h2skM.png?scale-down-to=512)
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.
![](https://framerusercontent.com/images/kSkDM21gJAcQvBkNBvi5GmcP3U.png?scale-down-to=512)
![](https://framerusercontent.com/images/kSkDM21gJAcQvBkNBvi5GmcP3U.png?scale-down-to=512)
![](https://framerusercontent.com/images/kSkDM21gJAcQvBkNBvi5GmcP3U.png?scale-down-to=512)
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.
![](https://framerusercontent.com/images/fXMCuESOotTtLET3CpeT03z6JQ.png?scale-down-to=512)
![](https://framerusercontent.com/images/fXMCuESOotTtLET3CpeT03z6JQ.png?scale-down-to=512)
![](https://framerusercontent.com/images/fXMCuESOotTtLET3CpeT03z6JQ.png?scale-down-to=512)
![](https://framerusercontent.com/images/FSighQUipCKNvNOaKmBR8jYnjLM.png?scale-down-to=512)
![](https://framerusercontent.com/images/FSighQUipCKNvNOaKmBR8jYnjLM.png?scale-down-to=512)
![](https://framerusercontent.com/images/FSighQUipCKNvNOaKmBR8jYnjLM.png?scale-down-to=512)
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.
![](https://framerusercontent.com/images/puho9XoG1NlmbQXfxx0eALr3p4.png?scale-down-to=512)
![](https://framerusercontent.com/images/puho9XoG1NlmbQXfxx0eALr3p4.png?scale-down-to=512)
![](https://framerusercontent.com/images/puho9XoG1NlmbQXfxx0eALr3p4.png?scale-down-to=512)
![](https://framerusercontent.com/images/MUSKA6gQo3sDpTpabCIBaQ442tE.png?scale-down-to=512)
![](https://framerusercontent.com/images/MUSKA6gQo3sDpTpabCIBaQ442tE.png?scale-down-to=512)
![](https://framerusercontent.com/images/MUSKA6gQo3sDpTpabCIBaQ442tE.png?scale-down-to=512)
![](https://framerusercontent.com/images/KyBTgbzYU6HoxQl4yYEHZLYo.png?scale-down-to=512)
![](https://framerusercontent.com/images/KyBTgbzYU6HoxQl4yYEHZLYo.png?scale-down-to=512)
![](https://framerusercontent.com/images/KyBTgbzYU6HoxQl4yYEHZLYo.png?scale-down-to=512)
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!
![](https://framerusercontent.com/images/8IUtn5732msTlhN1antx9wY0Q.png?scale-down-to=512)
![](https://framerusercontent.com/images/8IUtn5732msTlhN1antx9wY0Q.png?scale-down-to=512)
![](https://framerusercontent.com/images/8IUtn5732msTlhN1antx9wY0Q.png?scale-down-to=512)
![](https://framerusercontent.com/images/GT75RYv8GEbmvGERrEgnEmYElM.png?scale-down-to=512)
![](https://framerusercontent.com/images/GT75RYv8GEbmvGERrEgnEmYElM.png?scale-down-to=512)
![](https://framerusercontent.com/images/GT75RYv8GEbmvGERrEgnEmYElM.png?scale-down-to=512)
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?
Made with 🩶in Framer
© 2024 Nick Voke