수명 주기 동안 모든 모바일 애플리케이션 또는 웹 플랫폼은 일반적인 리브랜딩 캠페인의 일부로 몇 가지 디자인 변경을 거칩니다. 제품의 초기 출시 전 처음 몇 번의 반복은 사용자에게 전혀 표시되지 않습니다. UX 및 UI의 최종 모습은 경쟁업체의 시장 조사 및 일부 내부 사용자 테스트에 의존하는 제품 팀에 의해 결정됩니다. 그러나 몇 년 동안 시장에 출시된 기존 앱이나 플랫폼을 완전히 재설계하는 경우 이해 관계자는 그렇게 해야 할 합당한 이유가 있어야 합니다. 한 제품에서 다른 제품으로의 변형, 사명 및/또는 비전의 변화, 시장에서 경쟁업체와 차별화하려는 욕구가 모두 잠재적인 이유입니다. 제가 작업하는 제품의 경우 이 세 가지 요소가 한꺼번에 재설계 결정을 촉발했습니다. 그래서 팀은 새로운 제품 디자인에 많은 것을 담아야 했습니다. 이 경험은 재설계를 책임 이자 기회 로 인식하는 것의 중요성을 다시 한 번 입증했습니다 . 책임으로 재설계 Promova의 재설계는 단순히 기존 언어 학습 앱의 계획된 업그레이드가 아닙니다. 사실 업데이트된 네이밍과 디자인으로 우리는 충성스럽고 잠재적인 사용자들에게 완전히 새로운 제품을 제시해야 했습니다. 경쟁사와 다른 무언가를 하고 언어 학습 시장의 틀을 깨는 것은 막중한 책임입니다. 그래서 우리는 정체성 스타터 팩을 만들기 위해 디자인 사무소를 고용했습니다. 새로운 디자인 접근 방식은 정적으로만 테스트되었으므로 학생들이 사용하기 시작했을 때 인터페이스에서 어떻게 인식되는지 아무도 완전히 이해하지 못했습니다. 아시다시피 사용자는 시간의 99%를 제품 외부에서 보내 므로 인터페이스는 일반적으로 허용되는 패턴을 기반으로 구축되어야 하며 실험을 피하는 것이 좋습니다. 하지만 우리의 길은 달랐다. 사람들이 변화를 좋아하지 않는다는 점도 언급할 가치가 있습니다 . 이 가설은 Instagram이 업데이트를 발표할 때마다 입증됩니다. 사용자는 업데이트에 대해 많은 증오를 표현하고 앱을 사용하지 않겠다고 씁니다. 그러나 시간이 지남에 따라 그들은 변화를 적응하고 받아들입니다. 1차 UX, UI 개발 단계에서는 디자인 사무소에서 제안한 내용을 그대로 따르고자 노력했습니다????. 하지만 아이디어를 확장하고 화면을 추가할수록 디자인이 여전히 복잡하다는 것을 깨달았습니다 . 화면에 색상이 가득했습니다. 인지적으로는 내용을 인지하기 어렵고 혼란스러운 느낌을 주었다. 인터페이스 디자인은 일종의 학습 가이드가 되어야 하며 사용자 의 학습을 방해하기보다는 이상적으로 사용자를 도와야 합니다 . 첫번째 시도 그래서 디자인을 단순화하기 위해 여러 번 반복해야 했습니다. 결과적으로 답변 옵션에서 파란색 카드와 그라디언트를 제거하고 모든 브랜드 색상을 한 화면에 맞추는 아이디어를 버렸습니다. 인지 부하를 줄이고 계층 구조를 개선하는 목표를 설정했습니다. 항상 아이디어를 확장하고 화면을 추가하여 솔루션을 테스트하십시오. 세 개의 화면에서 작동하는 것이 30개 화면에서는 작동하지 않을 수 있습니다. 문제를 해결하고 소중한 시간을 절약하려면 조기에 파악하는 것이 좋습니다. 가능한 한 빨리 새 디자인 테스트를 시작하십시오. 모든 방법론을 사용하는 것이 좋습니다: 게릴라 테스트, 하이파이 프로토타입, 이미 만들어진 기능에 대한 중간 수준의 사용성 테스트. 모든 것을 모으기 전에 모든 것을 모으십시오. 개발 주기가 더 짧고 빠르기 때문에 웹 버전 에서 새로운 디자인을 구현하기 로 결정했습니다 . 이 결정을 통해 우리는 실수를 저지르고 저렴한 비용 으로 다양한 설계 옵션을 테스트할 수 있었습니다 . 따라서 제품에 모바일 앱과 웹 버전이 모두 있는 경우 웹에서 먼저 새로운 디자인을 구현하는 것이 좋습니다. 그리고 제발 모든 구성 요소를 한 번에 만드십시오 ???? . 이렇게 하면 훨씬 빠르게 변경하는 데 도움이 됩니다. 결국 우리가 디자인에 질서를 부여하는 데 도움이 된 것은 블록 사이의 들여쓰기였습니다. 브랜딩의 주요 특징 중 하나는 블록이 서로 잘 맞아 견고한 구성을 구축한다는 것입니다. 그러나 인터페이스에서 이러한 압축된 블록을 기능에 따라 그룹으로 나누었습니다. 예를 들어 퀴즈가 있는 카드에서 질문 블록은 답변 옵션이 있는 블록과 잘 구분됩니다. 퀴즈 디자인의 무결성을 유지하는 것이 좋습니다 . 별도의 기능을 설계할 때 로컬 기능이나 추가 그라데이션????을 추가하고 싶은 유혹이 큽니다. 그러나 이 모든 것은 결국 제품의 무결성에 부정적인 영향을 미칠 것입니다. 기회로 재설계 재설계는 책임으로만 볼 것이 아니라 기회로 보아야 합니다. 왜? 단순히 이전 디자인의 단점을 보완 하고 과감한 솔루션을 테스트 하고 최적의 디자인 시스템을 개발할 수 있는 기회를 얻었기 때문입니다 . 예를 들어, Promova에서는 새 디자인에서 수업 피드를 개선하기로 결정했습니다. 우리의 주요 아이덴티티 도구는 양식이기 때문에 수업 유형을 인식하는 데 도움이 되는 일종의 팁이 되기를 원했습니다. 이전에는 작은 아이콘만 해당 유형(어휘, 문법, 말하기)을 나타내는 한 입 크기의 모든 레슨이 동일하게 보였습니다. 모든 인터뷰에서 우리는 사람들이 이것에 대해 알지 못하는 것을 보았습니다. 이를 고려하여 재설계에서 각 유형의 수업을 고유한 형식 으로 코딩했습니다. 사용성 테스트는 사람들이 플랫폼을 두 번째로 사용할 때 어떤 블록이 어떤 수업 유형에 해당하는지 이해할 수 있음을 보여주었습니다. 수업 피드 재설계는 계층 구조 와 액센트를 해결할 수 있는 기회이기도 했습니다 . 이전 디자인은 매우 겸손했기 때문에 모든 UI가 거의 같은 크기였습니다. 콘텐츠 팀과 협의한 후 수업 내 모든 일러스트레이션을 확대하고 타이포그래피를 사용하여 수업에서 실수한 횟수나 그날 배운 단어 목록과 같은 학습의 핵심 사항으로 강조점을 옮겼습니다. 계층 구조 및 악센트 또 다른 과제는 우리의 방대한 원본 일러스트레이션 유산을 보존하는 것이었습니다 . 수천 개가 있으므로 새 디자인에 통합해야 했습니다. 재설계는 기회라는 점을 염두에 두고 일러스트레이터와 함께 커버에서 컬러 뒷면을 제거하고 일러스트레이션을 마스크에서 "끌어내어" 둥근 모양으로 자르는 데 상대적으로 적은 시간을 들였습니다. 그 결과 우리는 깨끗하고 아름다운 커버를 컬러 블록에 직접 배치했습니다. 레슨 커버 또한 제품 전체에 단일 애니메이션 원칙을 구현했습니다 . 그것은 아이콘을 사용한 실험에서 탄생했습니다. 우리는 블록의 "탄력 있는" 변형을 통해 학습 도구의 개인화를 사용자에게 전달하고 싶었습니다. 우리는 이 원칙을 모든 애니메이션에 통합했고 애니메이션 아이콘은 결국 로더가 되었습니다. 짐을 싣는 사람 재설계는 또한 플랫폼 간의 원활한 전환 원칙을 구현하는 기회였습니다 . 웹과 앱 버전의 인터페이스가 거의 동일하여 사용자가 스트레스 없이 학습 환경을 전환할 수 있습니다. 프로필 화면 이는 개발자들과의 원활한 커뮤니케이션 덕분에 가능했습니다. 따라서 재설계 중에 엔지니어링 팀과 많은 대화를 나누십시오. 기술적 한계에 대해 배우고 더 많은 영감을 가지고 구현할 수 있도록 설계를 "판매"하는 데 도움이 될 것입니다. 마지막으로 위에서 언급한 모든 기술의 정수인 온 보딩 재설계에 대해 논의하고 싶습니다 . 온보딩을 최대한 재미있고 재미있고 소통할 수 있도록 만들려고 노력했습니다. 결과적으로 우리는 모든 사람이 질문에 답하여 고유한 아이콘 집합을 수집하는 일종의 게임을 만들었습니다. 그런 다음 약간의 마법을 추가하면 짜잔: 맞춤형 과정이 준비되었습니다 ✨. 온보딩 이것은 디자인이 감정을 불러일으켜야 한다는 것을 잊지 말아야 한다는 완벽한 알림입니다. 사용자의 감정이 최고조에 달할 때까지 생각하고 어떤 단계에서 칭찬할지, 어떤 단계에서 지원할지 등을 결정하세요. 결과 일반적으로 Promova의 재설계를 통해 오랫동안 미뤄왔던 것을 대담하게 시도 할 수 있었습니다 . 우리는 경쟁자들과 다른 것을 했습니다. 제품이 어떻게 보일지에 대한 위험한 결정이었습니다. 그러나 지금 볼 수 있듯이 사용자는 앱이나 웹 버전을 사용하는 데 아무런 문제가 없습니다. 처음 며칠 만에 170,000명 이상의 사람들이 새롭게 재설계된 플랫폼을 사용했습니다.