Zoom 반응형 웹 디자인
AIDA 모델을 활용한 사용자 행동 유도 반응형 웹 디자인
Responsive Web Design
Style Guide
B2C/B2B
OVERVIEW
Zoom은 원격 협업과 커뮤니케이션을 위한 SaaS 프로덕트입니다. 사용자는 어디서든 비디오 회의, 음성 통화를 통해 소통하고 협력할 수 있습니다. 이 프로젝트에서는 줌 웹사이트의 사용자 경험을 개선하기 위해 반응형 웹 그리드 시스템을 적용하여 리디자인을 수행하였습니다.
다양한 기기에서 일관되고 효율적인 인터페이스 제공을 위해 크게 세 가지 주요 해상도에 맞추어 디자인을 진행하였고, 기기의 특성을 고려해 더욱 편리하게 사용하도록 구성했습니다.
PROGRAM
Figjam, Figma
MY ROLE
마켓 리서치, 경쟁사 분석, 시각디자인
디자인 시스템, UX/UI디자인
PROJECT TYPE
개인 프로젝트 ㅣ 기여도 100%
DURATION
2주
CURRENT PROBLEMS
슬로건을 효과적으로 전달하지 못하는 히어로 섹션과
시각적 혼잡도가 높은 콘텐츠 섹션
히어로 섹션에서는 Zoom의 메인 기능인 ‘AI that makes you more effective’이라는
슬로건과 관련 이미지가 메시지 전달에 충분히 기여하지 못하고 있고, CTA 버튼이 눈에
띄지 않아 사용자의 참여를 유도하기 어렵습니다. 콘텐츠 섹션에서는 정보의 과잉으로
텍스트가 밀집되어 있어 시각적 혼잡도가 높습니다.
HOW MIGHT WE
어떻게 하면 정보의 과잉과 시각적 혼잡을 줄여 랜딩 페이지를
더욱 간결하게 만들면서 Zoom의 아이덴티티를 잃지 않을 수 있을까?
GRID SYSTEM
그리드 시스템을 이용한 반응형 웹 디자인
웹(1920px), 태블릿(1024px), 모바일(393px) 세 가지 주요 해상도에 맞추어
그리드 시스템을 설계하였습니다. 각 해상도에 최적화된 그리드 레이아웃을 사용함으로써,
콘텐츠와 UI 요소들이 다양한 화면 크기에서도 균형 있고 조화롭게 배치될 수 있도록 하였습니다.
STYLE GUIDE
디자인 일관성을 유지하기 위한 스타일 가이드
브랜드의 일관성을 유지하기 위해 줌의 폰트와 컬러를 사용했고,
디자이너가 스타일 가이드를 이용해 더욱 쉽게 디자인을 수정할 수 있도록 재정비했습니다.
RESPONSIVE WEB DESIGN
Desktop
Tablet
Mobile
WHAT I LEARNED
반응형 디자인에 대한 이해
리서치를 바탕으로 사용자에게 어려운 부분을 리디자인 하고 이 화면의 사용성을 테스트하는
과정에서 리디자인한 화면도 사용자에게 또 다른 어려움을 줄 수 있다는 것을 알 수 있었습니다.
생각지 못한 다양한 관점을 제공해 준 사용자 덕분에 사용성 테스트 후 아고다의 앱을 수정하는 데에
많은 아이디어를 얻었습니다.
NEXT STEP
애플 워치같은 웨어러블 기기의 UI 디자인
리디자인한 UI 외에도 세부 검색의 필터와 정렬 기능과 자세한 호텔 정보 레이아웃이 보기
어지러워 잘 읽히지 않고 활용되지 못한다는 단점이 있었지만 코어 문제점에 밀려 이 부분이
우선순위에서 밀리게 되었습니다. 다음번에는 이 부분도 리디자인을 진행해 보고 싶습니다.