Figma로 예매 화면 리디자인

[Figma로 예매 화면 리디자인]

• UX/UI 디자이너 업무 과정 실습해보기
• 사용자가 겪는 불편함 발견(문제 인식) -> 문제 정의 -> 개선점 찾기 -> 리디자인의 방식을 실습

​

​

리디자인을 진행 할 화면

• 조건: 화면 안에 있는 모든 정보를 유지하며 리디자인을 진행

​

1 . 문제 인식

• 제목이 두 번 반복되어 두 번 읽어야하는 점이 번거롭다.
• 어떤 프로그램인지 한 번에 알기 어렵다.
• 버튼과 배경의 대비가 약해 잘 보이지 않는다.
• 본문 글씨가 읽기 불편하다.
• 예매하기 버튼이 여백 없이 너무 화면에 꽉 차있다.

​

​

2. 문제 정의

• 제목이 두 번 반복되어 사용자에게 피로감을 준다.
• 어떤 프로그램인지 직관적으로 파악되지 않는다.
• 중앙 버튼이 크기에 비해 잘 보이지 않는다.
• 본문의 가독성이 떨어진다.
• 예매하기 버튼의 배치가 화면의 완성도를 떨어져 보이게 한다.

​

​

3. 개선 방향 잡기

• 제목을 하나로 수정하고 위계를 통해 강조한다.
• '교육 프로그램'을 따로 강조하여 직관적으로 파악할 수 있게 한다.
• 중앙 버튼들의 색상 대비를 높이거나 새로운 배치로 불필요한 화면 차지를 줄인다.
• 본문의 타이포를 조절하여 가독성을 높인다.
• 예매하기 버튼의 여백을 더 주어 배치를 수정한다.

​

​

4. 리디자인 결과물

• 개선 아이디어를 반영하여 두가지의 리디자인 완료

리디자인 ➀

 

리디자인 ➁

 

​

• 기존 화면과 비교

좌: 기존화면 / 우: 리디자인 ➀

 

​

좌: 기존화면 / 우: 리디자인 ➁

 ​

>> 리디자인 작업 과정

• 제목을 한번만 사용하고 제목을 직관적으로 강조하기 위해 사진과 함께 배치했다.
• '교육 프로그램'인것을 사용자가 바로 인식할 수 있게 제목과 함께 상단에 배치, 도형으로 강조했다.
• 리디자인 ➀ 에선 중앙 버튼들은 배경과 대비를 높였다.
• 리디자인 ➁ 에선 버튼을 아이콘 버튼으로 간소화시켜 제목 우측과 예매하기 버튼 좌측에 배치시켜보았다.
• 본문 글자의 가독성을 위해 블랙으로 변경해주었다.
• 예매하기 버튼의 여백을 더 주었으며 하단 바의 그림자 경계를 만들어 분리를 했다.

 

​

*회고

리디자인을 진행하며 기존 화면의 문제점과 개선점을 찾는 과정을 경험했다.

명확한 문제 정의가 개선 아이디어를 제공하는데에 중요한 역할을 한다는 것을 배웠다.