디자인의 원동력 – 웹사이트 재설계 사례 연구

웹사이트 재설계를 하기에 가장 적절한 시기는 언제인가요?

오래되고 버려진 것처럼 보이는 웹 사이트를 보지 못한 사람이 있습니까? 사막에 방치된 고장난 트럭의 껍질처럼, 몇 년 동안 분명히 손대지 않았습니다.

다양한 이유로 웹사이트가 개편됩니다. 유감스럽게도 많은 기업은 웹사이트 재설계가 필요하다는 사실을 깨닫지 못하고 경쟁자가 웹사이트를 개선하여 결과적으로 전환율을 높여 경쟁 우위를 확보할 때 뒤처지게 됩니다.

기업이 저지르는 빈번한 실수는 웹 사이트 요구 사항이 더 복잡해지고 결과적으로 웹 사이트를 확장해야 할 때 어렵고 잠재적으로 비용이 많이 드는 상황에 처하게 될 경우 발생할 수 있는 일을 조기에 고려하지 않는 것입니다. 또한 검색 엔진 최적화(SEO), SSL(순위 및 보안에 영향), 모바일 친화성(순위 및 전환에 영향)과 같은 중요한 요소가 종종 무시될 수 있습니다.

새로운 웹사이트 디자인은 새로운 브랜딩 방향이 수립되고 새로운 브랜드 마케팅 인력이 합류하는 상단의 리더십 변경으로 인해 종종 발생합니다. 회사의 웹사이트를 평가하던 중, 그들은 그 웹사이트가 형편없는 UX를 갖고 있다는 사실과 바람직한 콘텐츠가 상당 부분 빠져 있다는 사실을 알고 소름이 돋았습니다. 결론에 이르면 단순히 "브랜드의 목소리" 또는 회사가 찾고 있는 전환을 제공하지 않는 "브로셔 웹사이트"가 잘못 구성되어 있으며 변화가 무르익었다는 데 동의합니다. 웹사이트 개편이 필요한 시점입니다.

자동차 회사를 위한 웹사이트 개편

이 자동차 웹사이트 재설계 사례 연구는 공식 의뢰된 재설계가 아니라는 점을 언급하는 것이 중요합니다. 나는 회사, 그들의 디지털 전략 또는 자동차 산업 전반에 대한 내부 정보가 없습니다. 저는 단순히 자동차 산업을 웹사이트 재설계 사례 연구의 테스트 사례로 사용하고 있습니다.

이 사례 연구에서는 크로아티아 자동차 브랜드인 Rimac Automobili의 웹사이트 재설계 프로세스를 살펴봅니다. Rimac은 단순한 자동차 컨셉으로 시작하여 대형 부품 제조 회사로 확장한 브랜드입니다. 많은 신생 기업과 마찬가지로 회사는 결국 다른 것으로 진화한 아이디어로 시작했습니다. 이 확장은 웹사이트 구조에 영향을 미치고 전체 사용자 중심이 변경되었습니다. 시장 수요가 회사를 다른 방향으로 이끌었기 때문에 웹사이트의 초점도 옮겨야 했습니다.

훌륭한 웹사이트 디자인 솔루션을 달성하기 위해 고려해야 할 다양한 측면과 각도가 있습니다. 이전 웹 디자이너가 UX 연구, 와이어프레이밍, 프로토타이핑 및 사용자 테스트를 위한 리소스나 충분한 시간이 없었다는 사실에도 불구하고 디자인의 전반적인 품질에 관해서는 초기의 가장 작은 결정조차도 중요한 의미를 가질 수 있습니다. 부정적인 영향과 최적화되지 않은 웹사이트 품질은 궁극적으로 2~3년 안에 웹사이트 재설계로 이어질 것입니다. 이 결과는 장기적으로 클라이언트가 웹사이트에 대해 생각하는 것보다 더 많은 비용을 지불하게 된다는 것입니다. 잘 정의된 콘텐츠 전략과 정보 아키텍처는 새로운 웹사이트 디자인에 있어 매우 중요합니다.

대기업 웹사이트, 뉴스 포털 및 기타 콘텐츠가 많은 사이트를 디자인할 때 저는 원자 디자인의 열렬한 팬입니다. 원자 디자인은 처음에 여러 화면과 예상치 못한 상황에서 작동하는 모든 UI 구성 요소를 만드는 유연한 디자인 시스템입니다. 프로젝트의. 이 특정 사례 연구는 대형 뉴스 포털을 위한 것이 아니지만 그럼에도 불구하고 원자 디자인 요소의 디자인 라이브러리(주의 깊게 고려되고 잘 정의된 디자인 구성 요소 집합)가 나중에.

웹사이트가 적절한 콘텐츠 전략과 정보 아키텍처를 갖춘 후에야 사용자 경험에 초점을 맞춰야 합니다. 적절한 웹사이트 구조가 없으면 사용자 경험 디자인은 효력이 없습니다. 얼핏 보기에는 웹사이트가 보기에도 좋고 기능도 좋아 보이지만 유연성이 충분하지 않다면 언젠가는 웹사이트 재설계를 고려해야 하는 상황이 불가피할 것입니다.

이 자동차 회사의 웹사이트를 재설계하는 이유는 무엇입니까?

Rimac Automobili는 확장 중이며 공식 게시물에 따르면 "Concept_One" 이라는 신개념 자동차가 이미 생산되고 있습니다. 이 미사용 웹사이트 재설계 당시 그들의 웹사이트에는 "C_Two"라는 한 대의 자동차만 전시되어 있었습니다. 시각적인 다양성은 없었습니다. 웹 사이트는 두 개의 템플릿으로 만들어졌기 때문에 각 페이지가 매우 유사해 보였습니다. 디자인은 C_Two 자동차의 품질을 설명하기 위해 별다른 요소 없이 크고 매력적인 자동차 이미지에 중점을 두었습니다. 웹사이트 방문자가 자동차 구매를 결정하도록 유도하는 데 필요한 필수 정보입니다.

“첫인상을 남길 수 있는 기회는 두 번 없다.”라는 말이 있듯이. 방문자(이 경우 대부분 고성능 자동차 애호가)가 백만(USD)에 가까운 자동차를 구매하도록 효과적으로 설득하기 위해 훌륭한 디자인의 영향을 사용하는 것이 중요합니다. 이러한 고급 웹 사이트는 엄청나게 높은 표준을 충족해야 합니다. 그들은 품질 감각과 카리스마를 보여야 하며 높은 수준의 영업 정신과 매력적인 스타일을 제공해야 합니다.

훌륭한 웹사이트 디자인은 유사한 웹사이트의 바다에서 눈에 띄어야 합니다

자동차 산업의 큰 문제는 해당 분야의 대부분의 웹사이트가 동일하게 보이는 경향이 있다는 것입니다. 다른 색 구성표와 영웅 이미지를 제외하고는 거의 동일한 웹 사이트 템플릿을 사용하는 것처럼 보입니다.

자동차 회사의 웹사이트 디자인 결정 이면에는 여러 가지 요인이 있지만 100만 달러와 25,000달러 사이의 자동차와 표시 방식을 명확히 구분해야 합니다.

고급 자동차 분야에서 페라리, 람보르기니, 애스턴 마틴은 지나치게 단순하고 일반적으로 기업 웹사이트를 보유하고 있는데 (내 생각에는) 실제로 훌륭한 사용자 경험을 제공하지 않습니다.

중간 소비자 범위(Volkswagen, Toyota, Peugeot 등)는 위에서 언급한 고급 사례와 매우 유사한 웹사이트 콘텐츠 구조를 가지고 있습니다. 고급 소비자 자동차 브랜드와 중급 소비자 자동차 브랜드의 가장 큰 차이점은 가격입니다. 따라서 고급 자동차가 있는 Rimac은 이러한 차이를 반영하고 값비싼 브랜드를 선보일 수 있는 뛰어난 웹사이트를 가질 것이라고 기대할 수 있습니다.

이러한 초고가 자동차 브랜드 웹사이트를 방문할 때 고객의 기대치는 높습니다. 그것은 큰 재정적 약속이며 당연히 그들은 돈으로 살 수 있는 최고의 차를 얻고 싶어합니다.

리맥이 도요타보다 좋은 이유는? 그들의 웹사이트를 보면 매우 다른 두 브랜드 사이에 큰 차이가 없습니다. 이것은 웹사이트의 품질에서 분명하지 않습니까?

훌륭한 웹사이트 디자인으로 고급 자동차 구매자 타겟팅

모든 웹사이트는 사용자를 고려해야 합니다. 이런 종류의 자동차의 타겟 고객은 누구입니까? 그들은 무엇을 찾고 있습니까?

Rimac의 자동차 가격은 약 $850,000이며 "한정판" 레이블을 받을 자격이 있는 몇 개만 만들어집니다. 이러한 자동차를 구매하는 데 관심이 있는 고객 유형을 정확히 식별할 수는 없지만 대부분의 고객이 부유한 엘리트 출신일 것이라고 가정할 수 있습니다. Rimac의 웹사이트는 이러한 고객을 효과적으로 타겟팅하고 있습니까?

정보 아키텍처 분석

예제 웹 사이트에서 첫 번째 탐색 항목은 "Concept_One" (당시 회사의 유일한 제품)인 것을 볼 수 있습니다. 이후 실제 웹사이트가 업데이트되었습니다. 두 번째 탐색 항목은 회사의 진화, 자동차가 어떻게 생산되었는지, 세 번째 항목은 회사의 제품 및 서비스입니다. 네 번째 탐색 항목은 다른 회사 제품(그레이프 전기 자전거)입니다. 마지막 두 항목은 보도 자료를 포함하는 "보도"와 "블로그"로, 대부분의 뉴스가 소셜 네트워크에 게시되었기 때문에 특별히 유용하지 않습니다.

또 다른 문제는 경력 링크가 이차적이고 덜 중요한 탐색 항목으로 숨겨져 있고 회사의 거대한 확장을 고려할 때 중요한 문제를 나타냅니다. 사용자를 기업 관심사의 초점으로 생각한다면 대부분의 기업 웹사이트(일반적인 예외는 기업/초대형 웹사이트)에서 눈에 띄는 "경력" 링크 또는 CTA를 갖는 것이 매우 중요하다는 것을 알게 될 것입니다.

웹사이트 재설계 프로세스

홈페이지 히어로 이미지 전후

원래 의도는 더 어둡고 강력한 버전의 자동차를 만드는 것이었습니다. 온라인에서 Concept_One 자동차의 이미지를 찾았고 "포토샵 매직"으로 홈페이지의 첫 번째 영웅 이미지를 만들었습니다. 다음 아이디어는 애니메이션이 자동차를 천천히 드러내는 것이었습니다. 처음에는 배경, 그 다음에는 자동차의 윤곽, 그 다음에는 완전히 렌더링된 이미지가 뒤따랐습니다.

홈페이지 디자인

홈페이지의 개념은 상단 탐색과 자동차 영웅 이미지의 두 가지 주요 시각적 영역을 정의하는 것이었습니다. 그게 다야 미니멀하면서도 눈에 띄게 만들기 위해 불필요한 것은 제거했습니다. 한 눈에 모든 중요한 사항을 볼 수 있습니다. 다른 모든 항목은 사이트 내의 하위 페이지로 이동되었습니다.

콘텐츠 전략 및 디자인

이러한 웹사이트 개편 프로젝트의 경우 사이트의 구조와 시각적 미학뿐 아니라 콘텐츠도 디자인하는 것이 중요합니다. 이것은 무료 웹사이트 재설계이기 때문에 실험에 더 많은 자유를 제공할 뿐만 아니라 스스로 디자인 결정을 내릴 수 있는 완전한 기회가 있는 미학적 유연성을 제공합니다.

프로세스는 간단합니다.

1. 웹사이트에 표시될 본문을 준비합니다.
2. 가속, 마력 및 최고 속도에 대한 눈길을 끄는 세부 정보와 같은 일부 디자인 요소를 아이콘이나 대화형 애니메이션을 통해 전달합니다.

이렇게 하면 UI에 보조 단어가 필요하지 않고 웹 사이트 방문자에게 더 중요한 영역에 주의가 끌립니다.

웹사이트 탐색 재설계

웹사이트의 탐색 구조는 이제 중요도 계층을 기반으로 재정렬되었습니다. 탐색의 첫 번째 드롭다운으로 차량 이 있습니다. 이는 회사에서 향후 더 많은 자동차 모델을 추가할 수 있기 때문에 설계 유연성을 제공합니다.

홈페이지에서 보조 제품 페이지에 즉시 액세스할 수 있도록 하기 위해 효율성을 위해 다른 제품 목록 페이지(다른 웹페이지에서)를 만드는 대신 제품 및 해당 하위 범주를 드롭다운 영역으로 홈페이지에 통합하고 탐색. 아래 디자인은 방문자가 탐색에서 제품 을 클릭하면 홈페이지에 아이콘으로 렌더링되는 다양한 제품을 보여줍니다. Products 에서 두 번째 수준을 나타내는 3D 제품 렌더링의 경우 잘 알려진 표준화된 도구인 Three.js, WebGL, Canvas 및 Greensock을 권장합니다.

웹사이트 재설계 내의 보조 페이지

홈페이지 와 달리 정보 및 서비스 페이지와 같은 보조 페이지는 Z 패턴이 더 많이 적용된 다른 그리드를 사용합니다. 다른 그리드 레이아웃의 목적은 이러한 페이지를 스캔하는 동안 방문자에게 보다 흥미롭고 역동적인 환경을 제공하는 것입니다.

핵심 아이디어는 여전히 가능한 한 적은 텍스트로 시각적 미니멀리즘입니다. 사람들은 많은 텍스트를 읽기 위해 이러한 유형의 자동차 웹사이트에 오는 것이 아니라 정보를 빠르고 시각적으로 얻기 위해 방문합니다. 이것은 페이지 제목의 크고 굵은 글꼴과 다양한 글꼴 스타일의 사용에 대한 생각이었습니다.

이러한 종류의 "회사 브로셔" 웹사이트 재설계는 서비스 재설계와 다릅니다. "회사 브로셔" 웹사이트는 마케팅 제품에 관한 것입니다. 서비스 지향적인 웹사이트 재설계는 클릭을 전환으로 전환하고 궁극적인 이익을 얻는 쪽으로 기울어집니다.

결론

디자이너가 위임되지 않은 디자인 프로젝트에 참여하는 것이 좋은 이유를 추천하는 여러 디자인 블로그 기사가 있습니다. 정말 멋진 프로젝트를 디자인하고 싶다면 웹사이트, 앱, 엔터프라이즈 SaaS 제품 등의 아이디어를 선택하고 이에 대한 디자인 문제를 해결하세요.

Dribbble은 디지털 디자이너가 자신의 디자인 능력을 뽐낼 수 있는 원치 않는 개념 재설계 프로젝트로 가득합니다. 세상에 창의적인 솔루션을 제시하는 멋진 디자인을 제공하는 것 외에도 "실제" 제품 문제에 대한 작업은 잠재적인 회사와 고객에게 귀하가 생각하는 방식, 프로세스 및 전문 지식을 보여줄 것입니다.

제 경우에는 이 분야의 웹사이트 디자인이 예외적으로 높은 표준을 충족하는 것이 특히 중요하기 때문에 고급 자동차 웹사이트를 다루는 것은 훌륭한 연습이었습니다.

그러나 주의 사항: 디자인에 뛰어들어 디자인을 시작하기 전에 디자인 미학의 관점에서뿐만 아니라 콘텐츠, 기능, 구조. 내장된 유연성이 설계를 진지하게 고려하는 것이 중요합니다. 웹 사이트 또는 하위 페이지가 작동하고 확장할 수 있을 때 미래의 요구 사항에 맞게 약간 조정하는 것이 더 쉽고 효율적이며 훨씬 덜 고통스럽습니다.

때로는 잠재 고객에게 웹사이트 개편을 하도록 설득하는 것이 정말 어렵습니다. 종종 고객은 자원, 자금 또는 시간이 부족하여 커밋하기를 꺼립니다. 그럼에도 불구하고 원치 않는 웹사이트 재설계는 웹사이트 재설계 과정을 세상에 알릴 수 있는 좋은 방법입니다. 그리고 누가 압니까? 귀하의 웹사이트 재설계가 "실제" 프로젝트를 승인할 만큼 내키지 않는 클라이언트에게 깊은 인상을 줄 수 있으며, 추가 보너스로 디자이너가 돈을 받는 곳입니다!

• • •

Toptal Design 블로그에 대한 추가 정보:

• 웹사이트 재설계의 기초 – 사례 연구
• UX의 진정한 ROI: B2B 재설계 사례 연구
• IKEA를 상자에서 꺼내 16억 사용자를 위해 재설계
• Facebook을 다시 디자인합시다: 시작하기 위한 10가지 영감
• CrunchBase를 설계하는 방법