brunch

You can make anything
by writing

C.S.Lewis

by vine Mar 24. 2022

과거 UX/UI 프로젝트 리뉴얼하기 (끝)

프로젝트 전략 도입하기- Develop

순서

과거 UX/UI 프로젝트 리뉴얼하기 (클릭하면 해당 게시물로 이동합니다)


1. 프로젝트 탐색 및 정의 내리기 - 리뉴얼 이유 찾기 

2. 프로젝트 탐색 및 정의 내리기 - Discover  

3. 프로젝트 문제 정의하기 - Define

4. 프로젝트 전략 도입하기- Develop (현재 게시물, 완료)




안녕하세요.

이전 UX 전략들을 토대로 UI 디자인에 넣는 작업을 해당 과정에서 진행하였습니다.


1. 이전 사이트 맵에서 필요한 부분만 사용하기

Before

기존의 구조도에서는 개인/단체별 필터링 과정을 넣어서 개인과 단체의 구분을 명확히 하고 다양한 선택지를 메인 이전에 제공함으로써 특별한 선택지 없이 개인의 취향에 맞추어 레이블링 작업을 거치는 과정이 있다고 하였지만 기부자 화면으로 돌아가면 개인을 위한 프로필 화면이라는 느낌보다는 선택되지 않은 날 것의 표현들로 구성되어 있습니다. 또한 개인과 단체의 특성은 다를 수밖에 없고 관리자와 사용자라는 이미지를 주어야 하는데 사이트 맵 자체에서는 구분이 명확하지 않아 사용자에게 하여금 혼란을 줄 수밖에 없습니다.


그렇기에 우선 사이트맵에서부터 각 전략들을 집어넣고 분류하는 작업을 진행하였습니다.





2. 변화된 기부 앱 구조도

1. 사용자별 화면 구성 무게감 동일하게

기존에는 기부자 화면과 기부단체의 화면의 무게감이 틀렸다면, 리뉴얼 화면에서는 개인과 단체로 나눠진 화면의 구성이 무게감이 비슷하도록 구성하여 서로가 상호작용을 할 때 명확해 보이도록 구성하였습니다.


2. 리뉴얼을 하며 정리된 UX 전략 구성

메인이 되는 UX 전략인 사용자가 기부의 허들이 없도록 하는 구성을 위해 개인에게는 개인에게 맞는 구성으로, 단체에게는 기부에 대한 관리가 용이한 형태로 구성하였습니다.


3. 단체 부분의 간략화

단체들의 경우, 관리에 용이한 대시보드 형태로 제작하려 노력하였습니다. 카테고리 및 맞춤 단체 추천 등 관리에 집중하고 회원들의 신뢰도 상승에 도움을 주는 구성으로 유도하였습니다.





3. 앱의 UX전략을 보여줄 와이어프레임

일부 디자인 시스템의 수정


정리한 내용들을 토대로 와이어프레임을 제작하였습니다. 저는 와이어프레임을 쌓아가면서 콘텐츠 별 표현들도 추가해서 디자인 작업할 때 들어갈 문장들을 상상하며 작업하였습니다.


화면구조도 설계할 때와 달리 구성된 요소들의 정보 디테일을 살릴 요소가 추가되거나 순서가 변경되기도 했습니다


와이어프레임을 토대로 디자인을 완성하였으며, 작업 결과물은 하단 링크를 통해 확인하실 수 있습니다.

https://notefolio.net/hwaje0ng/294511



작업을 끝마치며,


새삼 이전의 내가 열정 가지고 했었구나라는 걸 더 알게 되고, 이번에는 마감일 없이 작업을 진행했는데 그 부분 때문일까? 혹은, 내 작업물이 이게 맞는 방향인 걸까? 하는 생각이 꼬리를 물면서 생각보다 작업이 많이 더뎌졌고 2021년 끝물에 작업을 하다가 개인적인 문제로 진행이 어려웠던 작업이었어요. 여러모로 아쉽지만 다음엔 작업할 때 더 보완하려면 어떻게 해야 할지 많이 알게 되어서 좋은 경험이었다고 생각합니다.


글을 작성하면서 마지막 과정에서 실제 사용성 테스트 과정까지 보여드리지 못한 부분이 아쉽네요. 다음에 작업을 하게 될 경우에는 더 많은 부분을 보여드릴 수 있도록 노력해봐야겠어요.

작가의 이전글 과거 UX/UI 프로젝트 리뉴얼하기

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari