[UI DESIGN] 티끌 디자인 일관성과 업데이트

[UI DESIGN] 티끌 디자인 일관성 맞추기

 

안녕하세요! 티플의 디자이너 나태진입니다.
티끌 서비스 론칭 준비하면서 디자인 컨셉을 도출/통일했던 과정을 소개하려고 합니다!
여러 이슈로 인해 다소 정석적인 디자인 과정이 아닌 점 참고 부탁드립니다

---

🖌️  UX 디자인

시각적인 UI의 콘셉트를 도출하는 것에서 사용성은 UI/UX 디자인에서 가장 중요한 것으로 해당합니다.

기획 분야에서는 “사용자의 니즈를 찾아 그것을 서비스로 충족시키는 것이 목적”라고도 하지만 디자인은 서비스 안에서의 니즈 파악과 충족이 핵심인 것 같습니다.
- 기획에서의 니즈: 서비스의 필요성, 유저 성향 등등

- 디자인에서의 니즈: 서비스 이용시에 사용성에 관한 것, 단순한 정보의 분류 등등

때문에 니즈는 서비스를 제작하면서 핵심적인 요소입니다. 
개인적으로 티끌의 UX를 제작하면서 사용성에 관한 니즈를 충족하기 위해 노력했는데요.
예를들면, 초기 선택사항이 많은 서비스의 특성을 고려해 성향검사나 대부분의 버튼을 보다 와이드하게 구성했고
선택 영역을 키우고 텍스트 영역을 최소화해 최대한 빠르게 핵심 기능으로 이동할 수 있도록 유도했습니다.

질문과 답의 늪에서 빠르게 넘어갈 수 있게 유도하자

 

 

 

 

🖌️  캐릭터 베리에이션

기존 디자이너가 서비스 디자인을 하면서 티끌처럼 작은 것들이 모이는 먼지 컨셉의 '모아' , '마니' 캐릭터가 있었지만
릴리즈 과정에서 총 11개의 소비유형이 생기고 성향에 따라 캐릭터를 부여하면서 11개의 각기 다른 캐릭터가 필요해졌습니다.

모아, 마니

 

초기 출시를 앞두고 먼지 형태를 유지하면서 컬러의 변화 정도로 구분을 주었습니다.
또한 먼지의 하찮음(?)을 표현하고자 캐릭터의 입과 눈썹을 삭제했습니다.
(추후 티끌이들이 쌓이는 연출을 할 때 방해가 될 것으로 생각한 이유도 있음...)

성향에 따른 11개의 캐릭터

하지만 성향에 맞는 각각의 컬러를 설정하였음에도 형태는 단조로워 보이면서 오직 컬러만으로 구분을 주니 너무 산발적으로 보인다는 단점과.. 유저가 본인 성향에 이입이 될 것 같다는 생각이 전혀 들지 않았습니다.
+실제로 유저 테스트 결과 캐릭터에 대한 언급이 거의 없었습니다. 
성향마다 개성이 드러나 유저가 서비스에 이입하고 지속적으로 사용하기를 원했지만 애초에 개성이 드러나지 않는 상황.

 

 따라서 돌아오는 업데이트에 기능추가는 물론 이러한 점을 우선적으로 고치려 노력했습니다.

베리에이션된 티끌이들

눈 형태와 악세서리로 11가지의 성향을 드러내었고
산발적인 컬러들을 비슷한 톤으로 정리하여 서비스 안에서 이질감이 적게 들도록 리뉴얼하는 결과를.. 가져왔습니다.
업데이트 후, 각각 성향의 캐릭터를 대조해 보는 것도 재밌을 것(?) 같아요!

🖌️  UI 디자인 요소

일관성있는 UI만 유지해도 사용자의 혼란을 줄이고 사용성을 높일 수 있습니다.

서비스 안에서 같은 기능으로 연결되지만 일관성없는 UI로 배치되어 있다면 다른 기능인지, 어디로 연결되는지 혼란이 오기 마련이라
상호작용을 위해 일관성을 명확히 하면서 초기 사용자가 서비스에 익숙해지는 시간을 단축하기 위함입니다.

초기 티끌은 기존의 디자인 컨셉과 UI가 통일되지 않은 느낌을 받았습니다.
겹겹이 버튼이 쌓여있거나 캐릭터나 주요 디자인 요소는 동글동글하고 귀여운 형태지만 UI 전반적으로 딱딱 떨어지는 각진 요소들이 많았고
비활성화된 버튼들의 위치와 컬러가 제각각이었습니다.

하나..만 예를 들면 제작 과정에서 마이페이지 닉네임 변경 페이지의 경우
이전에는 테스트 버튼과 완료버튼이 함께 있어 경로가 많아지고 버튼의 위계도 애매한 상황과
위 닉네임 변경 기능에서 중복확인 버튼이 타 기능에 비해 강조된 UX로 느껴졌습니다.

더 직관성을 부여하기 위해 기능을 분리했고 최종 완료 버튼에 강조를 두었으며
닉네임 변경 기능의 안에 위치한 닉네임 제한사항과 중복확인 버튼의 강조를 축소시켜 중요한 정보순으로 보이도록 했습니다. 

전 / 후