테스크 그로우의 1월 UI/UX 개선

Jiho
Written by Jiho on
테스크 그로우의 1월 UI/UX 개선

Taskgrow의 고객 요청함

테스크 그로우는 실 사용자의 피드백을 받고자 오류와 개선 사항을 제보받는 고객 요청함을 만들었어요.

생각하지 못한 부분에서 사용자에게 불편함을 주는 경우가 많았어요.

Taskgrow의 개선1

Taskgrow의 개선2

테스크 그로우는 더 나은 사용자 경험을 제공하기 위해 고객 요청함을 기반으로 1월에 UI / UX를 개선했어요.

테스크 그로우는 어떻게 달라졌을까요?

더 편하게 오늘의 할 일을 입력할 수 있어요!

기존

Taskgrow의 고객 요청함

Taskgrow의 고객 요청함

할 일 추가는 우측 상단 + 버튼을 클릭 후에 추가할 수 있었어요.

하지만 + 버튼을 찾아 버튼을 클릭하고 사용자가 할 일과 뽀모도로 개수를 입력하여 추가 버튼을 누르는 과정이 번거로웠어요.

변경 후

Taskgrow의 고객 요청함

Taskgrow의 고객 요청함

간편하게 바로 할 일을 입력하고 엔터를 하면 할 일이 추가할 수 있어요.

뽀모도로가 기본 디폴트로 1개로 설정되도록 변경됐어요.

타이머 버튼 클릭으로 해당 할 일의 뽀모도로 개수를 추가할 수 있어요.

Taskgrow의 고객 요청함

뽀모도로 5개 이상부터는 직접 뽀모도로 개수를 입력하면 추가할 수 있어요.

예정 시간, 남은 할 일, 완료한 시간, 완료한 한 일을 알 수 있어요!

기존

Taskgrow의 고객 요청함

기존에는 할 일 리스트만 보였어요.

변경 후

Taskgrow의 고객 요청함

남은 할 일의 예정 시간과 남은 할 일, 완료한 시간, 완료한 할 일을 한눈에 확인할 수 있어요.

할 일이 끝나면 휴식 화면으로 넘어가요!

기존

기존 할 일 종료 화면

할 일이 끝난 후 남은 시간이 종료로 바뀌었어요.

변경 후

변경 후 할 일 종료 화면

할 일이 끝나면 휴식 화면으로 넘어가요.

게스트 유저로 사용이 가능해요!

기존

기존에는 로그인한 유저만 Taskgrow의 서비스를 이용할 수 있었어요.

변경 후

Taskgrow의 고객 요청함

회원가입을 하지 않아도 Taskgrow의 서비스를 테스트 해보실 수 있어요!

하지만 할 일 추가, 수정, 삭제, 뽀모도로 기능만 이용이 가능해요.

마음에 드신다면 회원가입 후 Taskgrow의 다른 풍부한 서비스도 이용해보시는 건 어떨까요?

테스크 그로우, 어떻게 써야할 지 알려드려요!

기존

Taskgrow의 고객 요청함

기존에는 바로 로그인 화면으로 나와서 Taskgrow가 어떤 서비스인지 알기 어려웠어요.

회원가입을 해도 따로 이용방법이 나와있지 않아서 어떻게 이용해야 하는지 알 수 없었어요.

직접 이것저것 클릭해야만 알 수 있었어요.

변경 후

Taskgrow의 고객 요청함

처음 접속하신다면 Taskgrow가 사용방법을 알려드려요. 화면을 클릭하면 바로 Taskgrow를 이용하실 수 있어요.

할 일이 종료되면 소리와 알람으로 알려드려요!

기존

기존에는 유저가 직접 화면을 확인하지 않으면 할 일이 끝났는지 알 수 없었어요.

변경 후

Taskgrow의 고객 요청함

할 일이 끝나면 소리 알람과 함께 우측 상단에 할 일이 끝났다는 알람이 떠요.

휴식 종료시에도 동일하게 알려드려요.

이제 수시로 화면을 확인하지 않아도 돼요.

타이머 재생시 favicon과 title로 실시간 시간 확인이 가능해요!

기존

Taskgrow 페이지에서 타이머 시작을 클릭하고 다른 페이지에서 할 일을 하고 있을 때 매번 몇 분이 남았는지 확인해야하는 불편함이 있었어요.

변경 후

Taskgrow의 고객 요청함

title로 실시간 남은 시간을 알 수 있어요.

Taskgrow의 고객 요청함

favicon은 총 12개로 이루어져있어요. 시간에 흐름에 따라 다르게 보여요.

대략 어느정도 시간이 흘렀는지 확인할 수 있어요.

선택된 할 일을 명확하게 알 수 있어요!

기존

Taskgrow의 고객 요청함

선택된 할 일은 글자만 파란색으로 표시됐었어요.

하지만 색상만으로 표시되면 색약이 있으신 분들은 구별하기 어렵기 때문에 좋지 않은 디자인이었어요.

변경 후

Taskgrow의 고객 요청함

그래서 색상 외에 구분되는 걸 추가하기 위해 border를 추가로 표시하여 모양과 색상 모두로 구분될 수 있도록 개선했어요.

완료된 할 일을 명확하게 알 수 있어요!

기존

Taskgrow의 고객 요청함

할 일 완료시 파란색으로 체크박스만 표시됐었어요.

변경 후

Taskgrow의 고객 요청함

완료된 할 일 표시를 더 확실히 하기 위해 텍스트 색상을 회색으로 변경하고 취소선을 표시하도록 변경하였어요.

전보다 더 명확하게 완료된 할 일과 남은 할 일을 구분할 수 있어요.

할 일의 순서를 변경할 수 있어요!

기존

기존에는 할 일의 순서를 변경할 수 없었어요.

변경 후

할 일의 순서 변경 가능

드래그 앤 드롭으로 할 일의 순서를 변경할 수 있어요. 중요도 순으로 할 일의 순서를 변경해보세요!


더 나은 서비스를 위해 Taskgrow는 사소한 부분이라도 불편함을 느낀다면 바로 수용해서 바꾸었어요. 버그나 불편한 점이 있으면 언제든 이야기해주세요. 다음 포스트에서 만나요~

Jiho

Jiho

테스크 그로우 프론트 엔지니어. 겸업으로 디자인, 기획 등을 맡음

Comments

comments powered by Disqus