재설계 방법 90 Seconds더 지속 가능한 .com

90Seconds.com 를보다 지속 가능하게 재 설계 한 방법 - 그리고 그 이유

온셀 세베시
2년 전・5분 전 읽기

지난 십 년 동안 온라인 스타트업과 제품이 세계 에너지 소비의 주요 업체 중 하나가 되었다는 사실부터 시작합시다. 인터넷이 글로벌 자원에 미치는 영향은 산업 혁명의 영향과 비교할 수 있으며, 계속 성장함에 따라 인터넷만이 향후 5 년 동안 세계 자원의 20 %를 소비 할 것으로 예상됩니다.

기술 회사로서 우리는 더 지속 가능한 제품을 설계하고 개발해야 할 사명을 가지고 있음이 분명합니다.

창립 이래로 저희는 전체 90 Seconds 비즈니스 모델을 보다 지속 가능한 방향으로 설계해 왔습니다. Shoot Anywhere와 같은 솔루션을 통해 출장 비용과 탄소 발자국을 줄이는 동시에 브랜드가 원하는 곳에서 동영상 콘텐츠를 제작할 수 있도록 지원하고 있습니다.

논리적 인 다음 단계는 웹 사이트에 동일한 접근 방식을 적용하는 것이 었습니다.

그래서 우리는 디자인을 시작했습니다 ...

도전 과제

우리의 가장 큰 도전은 10 년 이상 된 콘텐츠를 새로운 기술을 사용하여 새로운 레이아웃에 적용하는 것이 었습니다. 우리는 잘못된 움직임이 우리의 SEO 및 전반적인 사용자 경험에 부정적인 영향을 미칠 수 있다는 것을 알고 있었기 때문에 먼저 거의 20,000 개의 콘텐츠 페이지를 개선하고 오래된 콘텐츠를 제거했습니다. 작은 업적은 없습니다.

그런 다음 백엔드 및 프런트 엔드에 가장 적합한 솔루션이 될 기술을 결정해야했습니다. 우리의 이전 웹 사이트는 React와 WordPress의 매시업을 사용하여 버그와 다른 많은 문제를 야기했습니다. 그래서 우리는 방탄 플랫폼이기 때문에 모든 것을 WordPress로 옮기기로 결정했으며 네이티브 호스팅은 몇 안되는 녹색 호스팅 서비스 중 하나입니다 .

계속하기 전에 한 가지 중요한 고려 사항, 즉 기술에서 디자인 팀의 역할을 강조하고 싶습니다. 저는 우리 디자이너들이 '우리가 디자인을 하고 그게 다야'라는 마음가짐으로 스스로를 제한해서는 안 된다고 믿습니다. 우리는 콘텐츠 제작에서 기술 엔지니어링 및 SEO에 이르기까지 제품 개발에 직접 참여해야하므로 결과에 영향을 미치고 동료와 더 빠르고 효율적인 방식으로 협력 할 수 있습니다.

이러한 중요한 결정을 내린 후, 새로운 시각적 접근 방식인 '90 디자인'을 기반으로 디자인을 제작할 때가 되었습니다. 지난 2년 동안 우리는 디지털 플랫폼에서의 인간 경험에 전적으로 초점을 맞춘 디자인 시스템을 만들었습니다. 이는 저희 디자인 팀의 모토이기도 합니다: '우리는 인간을 위해 디자인합니다'. 우리가 디자인하는 모든 구성 요소와 레이아웃에는 사회학적, 심리적 이유가 있습니다. 따라서 90초닷컴 역시 이러한 이념을 자연스럽게 반영해야 했습니다.

이 90 Seconds 디자인 팀은 다음과 같은 도전에 직면했습니다.

새로운 디자인 및 개발 90seconds.com 을 디자인하고 개발합니다.
최신 시각적 지침을 유지하면서 90 Seconds 온전하게 보이고 느낍니다.
우리 시장과 그 안에있는 실제 사람들을 이해하십시오.

진행 상황

새로운 디자인 및 개발의 전체 90초닷컴 의 전체 디자인 및 개발에는 거의 1년이 걸렸습니다. 하지만 콘셉트 디자인과 초안을 고려하면 전체 일정은 2년 가까이 걸렸습니다.

동영상 제작 플랫폼인 만큼 스토어프론트는 이미지와 동영상 중심입니다. 이는 장식적인 목적도 있지만, 사용자들이 동영상 제작에서 무엇을 기대할 수 있는지에 대한 아이디어를 얻을 수 있는 중요한 시각적 가이드 역할도 합니다. 또한 지속 가능성을 높이기 위해 노력하는 디자인 팀에게는 도전 과제이기도 합니다. 그래서 우리는 이 두 가지 최적화 방법을 따르기로 결정했습니다:

수동으로 edit, 시각적 콘텐츠를 자르고 최적화합니다.
Cloudinary API와 같은 온라인 기술을 사용하여 품질과 데이터 페이로드의 균형을 맞춥니다.

이러한 시스템이 어떻게 작동하고 Storefront를보다 지속 가능하게 만드는 데 도움이되었는지 살펴보기 전에 우리가 사용하는 디자인 방법에 대해 이야기하고 싶습니다. 90 Seconds 우리가 일관성을 유지하고 플랫폼 전체에서 유사한 사용자 경험을 제공 할 수 있도록합니다.

우리는 Figma 를 기본 설계 도구로 사용하고 10,000 개가 넘는 글로벌 구성 요소, 500 개 이상의 레이아웃 및 서로 지시하는 7 개의 시스템과 수천 개의 독립적 인 구성 요소 및 변형으로 구성된 설계 시스템을 중심으로 설계를 구축합니다. 퍼즐 조각처럼, 그들은 우리가 플랫폼을 구축하는 데 사용하는 다목적 레이아웃을 만듭니다. 2022년에 우리 플랫폼의 몇 가지 큰 변화를 준비함에 따라, 우리의 디자인 시스템은 원활한 사용자 경험을 보장하는 데 중요한 역할을 할 것입니다.

결과

우리는 자랑스럽게 생각합니다. 90seconds.com 90% 더 지속 가능하고 환경 및 사용자 친화적인 사이트를 만들었습니다. 또한 휴대폰, 태블릿 및 다양한 화면 해상도에서 네이티브와 유사한 레이아웃을 표시할 수 있도록 사이트 성능을 크게 개선했습니다. 아직 베타 1.0 버전이라는 점을 고려하면 이미 이룬 성과는 매우 놀랍습니다.

비교 전후에 몇 가지를 살펴 보겠습니다.

우리는 GTmetrix, Pingdom 및 WebsiteCarbon과 같은 우리의 영향을 계산하기 위해 여러 소프트웨어 및 온라인 플랫폼을 사용합니다. 테스트 결과가 항상 동일하지는 않으므로 중앙값을 사용합니다. 그들이 여기 있다:

	GTmetrix	핑돔
전에	F – 35% 성능	D- 홈페이지 크기: 10,65MB
후	A – 95% 성능	A- 홈페이지 용량 : 2,4MB

웹사이트용 탄소 발자국 에뮬레이터인 WebsiteCarbon에 따르면, 이전 스토어프론트는 사이트 방문자 10,000명당 나무 143그루가 1년 동안 흡수하는 탄소량을 배출했습니다. 매달 이보다 훨씬 더 많은 방문자가 사이트를 방문한다는 점을 고려하면 엄청난 양입니다.

새로운 스토어프론트90.wpengine.com을 통해 나무 9그루에 해당하는 양으로 탄소 배출량을 줄인 것에 대해 매우 기쁘게 생각하며, 탄소 발자국을 더욱 줄이기 위해 최적화 방법을 계속 연구하고 있습니다.

웹사이트카본

GTmetrix

요약

모든 소프트웨어 및 온라인 회사와 마찬가지로 90 Seconds 은 지구를 보존하고 보호하기 위해 최선을 다할 책임이 있습니다. 지구의 자원은 무한하지 않으며, 우리는 탄소 발자국을 줄이고 최대한 긍정적인 영향을 미치기 위해 우리의 역할을 다해야 한다고 굳게 믿습니다. 저희는 사용자를 위해 보다 인간 친화적이고 지속 가능하며 효과적인 제품을 개발하기 위해 노력하고 있으며, 이러한 노력이 다른 기업들도 비슷한 방향으로 나아가는 데 도움이 되기를 바랍니다.