[UX/UI] 트위터 디자인 예제 (2)

3. 디자인

3-1. 인포메이션 아키텍쳐 리디자인

리디자인 목표를 충족시키기 위해 기존 인포메이션 아키텍쳐를 새롭게 구성한다. 사용자의 편의성과 경험을 최우선으로 고려하여 각 단계를 재정립한다.

1. 전화번호 동기화

• 변경 전
  
  익명성이 중요한 트위터 특성을 고려하면, 이 단계는 특히 내향적인 사용자들에게 부담이 될 수 있다.

• 변경 후
  
  사용자 경험을 간소화하기 위해, 다른 서비스를 통한 연락처 공유가 일반적인 추세임을 고려하여 이 단계를 생략한다.

2. 관심 분야 설정

• 변경 전
  
  사용자의 관심 분야를 너무 세분화하여 선택하는 데 부담을 주었다.

• 변경 후
  
  사용자의 선택 부담을 줄이기 위해 대주제만 선택하도록 하고, '다음' 단계를 삭제하여 피로감을 감소시킨다.

3. 팔로우할 친구 추천

• 변경 전
  
  팔로우 개념이 생소한 사용자들에게는 온보딩 단계에서의 팔로우 결정이 부담스러울 수 있다.

• 변경 후
  
  팔로우 추천 목록을 제거하고, 온보딩을 간결하게 마무리하여 사용자 리텐션을 개선한다. 추후 다른 방법으로 팔로우 추천을 제공할 계획이다.

4. 로그인 랜딩 페이지

• 변경 전
  
  리텐션 데이터 분석 결과, 로그인 단계에서 대다수의 사용자가 서비스를 이탈하는 것으로 나타났다. 이는 트위터의 장점을 충분히 이해하지 못한 채 서비스를 떠나는 사용자들이 많다는 것을 의미한다.

• 변경 후
  
  사용자의 관심 분야를 먼저 파악하여 온보딩 과정을 생략하고, 개인화된 트윗을 먼저 보여준다. 이후 추가적인 사용자 액션(좋아요, 공유, 3분 이상 사용, 10회 이상 인터랙션)이 발생할 경우 로그인 또는 회원가입을 유도하는 방식으로 변경한다. 이를 통해 사용자 경험을 개선하고 서비스 이탈률을 감소시킨다.

3-2. 와이어 프레임 그리기

인포메이션 아키텍쳐 플로우를 실제 모바일 화면에서 구현해보며, 리디자인된 인포메이션 아키텍쳐 플로우가 사용자 입장에서 자연스러운지 검증한다.

1. 프론트 페이지 및 관심 분야 설정

관심 분야를 간소화한 화면을 로그인 페이지 앞에 배치하여 와이어 프레임 설계한다.

2. 전화번호 동기화 및 팔로우할 친구 추천 삭제

전화번호 동기화 및 팔로우할 친구 추천을 삭제한 와이어 프레임을 구성한다. 이를 통해 사용자 입장에서의 자연스러움을 검증한다.

3-3. 비주얼 디자인 그리기

설계된 인포메이션 아키텍쳐와 와이어 프레임을 기반으로 시각화한 디자인을 만들어 사용자 친화적으로 구성한다.

1. 관심 분야 설정 축소 및 프론트 페이지 이동

효율적인 화면 구성을 통해 UX적 관점에서 리텐션을 높이는 방법을 고민하며 디자인한다.

2. 전화번호 동기화 삭제

전화번호 동기화를 삭제하여 와이어 프레임과 맞게 플로우 구성한다. (트위터 실제 화면 재사용)