리디자인 및 기획(19~22)

정신없이 일정에 맞춰서 작업 완료하려고 기획이나 디자인 고민하면서 했다....

집중하느라 블로그 쓸 생각도 못했지 뭐람?!

 

 

우선 상세페이지 리디자인 완료!

기존 상세페이지는 위치, 날짜, 시간이 중복으로 들어가기도 하고 원하는 정보를 바로 확인하기 어렵다고 생각됐었다

그래도 뭐.. 일단 기존 UI를 기반으로 좀 바꾸다가 

기획도 내가 하게 됐겠다!!! 내가 생각한대로 중요도를 따져서 리디자인 완료!!

운동 매칭이기 때문에 사진이 그렇게 중요하지 않다는 생각으로 사진은 그대로 크게 들어가지만 

중요한 타이틀, 장소, 위치, 시간, 제한 인원을 사진 위에 배치해서 중요 정보를 바로 확인할 수 있게 했고, 

바로 아래 장소의 위치를 지도와 연결되도록 제일 상단에서 확인 할 수 있도록 했다

그리고 아래로는 모임에 대한 세부 정보를 나열해서 원하는 정보를 빠르게 얻을 수 있게? 훨씬 짧아진 상세페이지가 완성이 됐다

 

 

상세페이지에서 이어지는 초대하기 기능 관련해서는

기획했던 대로 팔로우하지 않았더라도 바로 직전 매칭에서 함께했던 메이트들도 같이 뜨게 했는데 

상단에 타이틀도 있고, 팝업으로 띄우기에는 정보가 많다는 생각이 들어서 빽빽해보이게 되면 안되니까.. 

전체 페이지로 바꿔서 확실히 시원하게 메이트를 초대할 수 있도록..!! 변경했다 

 

 

또한,,, 선택박스들.. 폰으로 피그마 들어가서 무심코 확인했는데 

너어어어어무 컸다.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래서  height를 좀 줄였다 ㅋㅋㅋ

 

 

마이페이지도 16으로 바뀐 마진값에 맞춰서 만들어둔 화면들 수정하다가 

너무 옛날 스타일의 디자인이기도 하고 요즘 마이페이지는 다 업데이트 되면서 기능이나 설정 위주로 강조하고 프로필은 덜어내는 업데이트 방향이라고 생각했다. 

그래서 다양한 어플들을 살펴보다가 '플레이링크'도 프로필 수정이 있어야되니까 프로필은 있어야하지만?

그렇다고 프로필 사진이 강조되는건 안된다... 하면서 레퍼런스로 당근을 참고했다 

디자인을 하기 전, 먼저 내 프로필에 필요한 정보 / 다른 사람 프로필을 볼 때 필요한 정보 를 나눠서 정리해봤다 

정리한 내용을 바탕으로 마이페이지 메인 화면과 프로필을 연결지어서 어떤 정보를 어떻게 보일지를 구성했고, 

결론은?!

마이페이지 메인에서 프로필의 비중을 줄이고, 프로필을 누르면 바로 수정으로 넘어가던 플로우는 프로필을 만들어서 한 번 거쳐가게 정리된 프로필을 하나 추가하되, 프로필에서는 사진이나 개인정보보다 어플을 사용하면서 필요한 내 운동 레벨/기록이 더 잘보이도록!

기존 UI (프로필 추가 ver) / 프로필 내용 구성 기획

 

우리도 온라인에서 낯선 사람과 매칭이 되는 어플이다보니 신뢰 지표가 필요했고, 기존 기획에서는 '12명의 사람들이 또 함께하고 싶어해요'라는 라이팅으로 되어 있었다.... 

나는 이 라이팅으로는 아무도 관심 가지지 않고, 신뢰가 가지도 않고, 우리도 컨셉을 가지고 후기 내용을 바탕으로 한 눈에 보여줄 수 있는 지표가 있어야된다 생각해서 기획해봤다 

 

지금까지는 기획이라고 해도 신기능 아이디어 내고 그 기능을 어떤 플로우로 연결해야될지 정도의 기획이었는데 

다른 느낌의 기획이라 정확한 단계? 그런건 잘 몰라서 일단 아이데이션부터....

4개의 아이디어를 내고 그 중에서 가장 편하게 받아들일 수 있고 직관적인 땀방울로 AI를 활용해서 아이디어를 구체화 시켰다

 

나온 아이디어로 100ml를 기본 값으로 하고 그 이하가 되면 탈수상태, 패널티는 증발 시스템 으로 내가 원하는 구체화가 될 때까지 AI괴롭히기... ㅋㅋㅋㅋㅋ GPT도 쓰고 그록도 쓰고 제미나이, 구글 AI모드 등등 다양하게 썼다.. 

 

이렇게 경우의 수에 맞게 기획을 마무리하고 

디자인 작업!!

마이페이지에서 넘어가는 내 프로필 / 채팅 및 상세페이지에서 넘어가는 다른 사람 프로필

정보 구성 기획해둔대로 완성했다 

마이페이지 메인에 프로필 비중을 줄이고, 내 프로필에는 마이페이지에서 '매칭관리'로 볼 수 있는 매칭 기록 및 후기는 빼고 신뢰지표와 운동 레벨만, 그리고 상단에는 프로필 수정 버튼과 함께 기본 정보들을 작게 배치해서 예전의 UI에서 많이 보던 나!!!!! 하던 UI보다는 필요한 정보가 보이는 UI로 완성..!

 

배경에 그레이로 깔고 박스로 정리해서 더 깔끔해졌다 ㅎ

다른 화면들에 비해 마이페이지는 '설정' 느낌이 강한 페이지라 구분을 주고 싶었다 

 

그리고 다른 사람의 프로필에는 프로필 수정버튼 대신 팔로우 버튼을 넣었고, 후기와 매칭 기록까지 추가했다 

그리고 신뢰지표에 대한 정보 버튼을 눌렀을 때 오버레이까지, 지표 수치에 따라 어떻게 바뀌는지도 완성..!!!

근데 디자인하고 보니 물방울 모양 클리핑마스크 안에 로티 애니메이션을 넣을 수 있나.. ? 싶어서 찾아보고 물어보니 가능하다고 하셨움

개발도 궁금해지고,, 프로젝트 하면서 더 개발에 대한 정보도 하나씩 얻는 중 ㅎㅎㅎ

 

 

매칭 관리에서도 원래 후기 작성하기 버튼이 메이트관리 버튼처럼 강조되어 있었는데 

메이트 관리는 매칭 수락 알림이라 강조되는게 맞지만 후기 작성하기가 그정도로 강조되는건 순위가 아닌 것 같아서 좀 덜보이게 바꿨다 .

 

채팅도 변경 사항이 많아질 경우 어떻게 표현될지 고려해서 피드백 받고 픽스!!!!

 

위의 내용들은 총괄님이 나한테 기획까지 맡긴 이후로 첫 피드백이어서 긴장했었는데 

다 깔끔해지고 명확해졌다고 갑자기 엄청 업그레이드 됐다면서 수정이 필요한 부분 없어보인다 해주심 ㅎㅎㅋㅋㅎㅎㅋㅎㅋㅎㅋ

 

확실히 내가 생각해서 기획하고 하니까 기존 UI에 묶이지 않고 확실한 리디자인과 원하는 만큼의 디테일한 기획까지 순조롭게 될 수 있어서 편했다 ㅎ

 

그리고 내 생각에는 개발쪽에 디자인 넘길 때, 플로우 단위로 넘기면 개발이 더 편하지 않을까 싶어서 완성 안된 플로우는 전달 미루고 있는데 총괄님이 완료되는 페이지마다 넘겨서 빨리 진행하고 있었다고,,, 하셨다.. 

개발자분께 회의시간에 물어보니 플로우로 넘겨주면 편하다고 하셔서 결국 플로우 단위로 넘겨드리기로..!!!

 

그리고 전체적으로 한 번 훑어보시더니 흑백톤이던거 없어지고 좋아졌다고 ㅎㅎㅎㅎ 히히히 

나 들어오고 브랜딩, 방향성, 디자인, 기획 구체화 등등 다양하게 잡혀가서 좋다고 하셨다

확실히 기존 디자인이 와이어프레임 느낌이 강해서.. 거기에 묶이지 않고 확 바꾸려고 하니까 기획 부실, 체계 없음이 잘 보였던 것 같움,,,

내가 들어오고 나아졌다니까 좋긴 하닿ㅎㅎ

 

피드백 이후에 메인 페이지에서 이어지는 이용방법 플로우로 간단한 기능을 훑어볼 수 있는 온보딩을 기획했다 

너무 글이 많지 않고 우리 어플이 명확히 보여지게 하고 싶었다. 

그래서 우선 어떤 기능을 넣을지 추려봤다 

1. 레벨테스트를 간단히 진행해서 나와 비슷한 수준인 사람과 운동할 수 있기 때문에 내가 민폐일까 걱정할 필요 없다는 차별성
2. 내가 원하는 조건으로 매칭을 만들고 내가 수락한 사람들로 구성할 수 있는 커스텀 매칭
3. 수많은 후기들을 바탕으로 한 눈에 직관적으로 표현해주는 신뢰지표
4. 다음에 또 함께 하고 싶다면? 랜덤으로만 되는게 아니라 함께할 수 있는 팔로우 / 초대기능

이렇게 넣는걸로,,,

그리고 레퍼런스를 찾아보는데... 뭔가 마땅하지 않아서 stitch AI를 활용해서 와이어프레임을 뽑아봣다 

와이어프레임 나온거 보자마자 바로 진입화면 아이디어 뚝딱. 

 

슬로건이 필요할 것 같아서 총괄님께 정해진거 있는지 물어봤다 근데 있는 슬로건은 우리동네가 너무 강조되어있는데.... 

현재 리디자인중인 플로우는 동네가 운동 매칭에는 운동 시설의 위치가 중요하지 현재 내 위치는 큰 의미가 없어서 축소시키는 방향이라,,, 

슬로건을 다시 정해야해서 내가 AI들을 돌려서 다양한 아이디어를 뽑아보다가 의견 열심히 말했다..

어떤건 너무 우리 기능과 안맞는 말이고, 어떤건 기능이 전혀 안보이는 말,,,,이라고 반대하다가 

AI가 신뢰에 중점을 둔 슬로건을 뽑아줬는데 확실히 뾰족해지니까 후킹이 되고 와닿는 문구였다 

그래서 총괄님께 우리가 중점을 어디에 둘지 정해야된다 말해서 운동 / 경기관람이 가장 큰 기능이니 거기에 맞추자! 라고 하시는 말에 

바로 뽑았다

그래서 나온 슬로건 "운동을 레벨대로, 직관은 취향대로" 

다양하게도 나왔다,,,

슬로건도 나왔겠다! 

바로 와이어프레임 바탕으로 디자인 슬쩍 완료 

라이팅이 너무 재미 없는 것 같아서 열심히 또 AI한테 내가 원하는 느낌 입력 시키고 엄청 돌렸다.... ㅎ

 

 

온보딩을 만들다 보니 레벨테스트 카드가 완성되어야 온보딩에 넣을 수 있네...????

그래서 호다닥 레벨테스트 결과 카드 구성도 다시 정리했다 

 

앞면에서는 어떤 레벨인지만 크고 명확하게 보여주고, 뒤에 상세정보 있는게 '자세히 보기' 라서 흐름이 좋다고 생각해서 

이런식으로 정리했다 

눌러서 뒤집으라는걸 알려줘야되니까 터치하는 애니메이션 찾아서 넣고 어떻게 뜨기를 윈하는지 코멘트까지 달았다 

일단 결과가 나와서 카드가 뜰 때는 앞면의 레벨 뽝!! 뜨고 카드가 뜨고 2초?정도 뒤에 터치하라는 알림 1~2초 보여주면 사람들이 눌러서 상세 결과 확인하도록 플로우를 만들었고, 

상세결과에 들어가는 정보는 기획을 담당하기 전에 전달받았던 내용에서 가장 사용자가 궁금해하고 승부욕을 낼 수 있는 두개만 골라서 넣었다 

 

그리고 메달과 같이 넣을 캐릭터는.. 다시 뽑아야되는데 

지금 진아님이 콘텐츠디자인? 암튼 이벤트 배너 / 상세페이지 / 캐릭터 / 카드뉴스 등등을 담당해주셔서

기획 및 디자인 작업 중에 필요한거 있을 때 진아님께 요청 중.ㅇ... 인데 

명확하게 전달해야 편하시겠다 싶었다. 

그래서 어떤 스타일을 원하는지 슥슥... 

진아님이 뽑아두셨던 캐릭터들로,, ㅋㅋㅋㅋㅋㅋㅋ

 

근데 내가 계속 기존 캐릭터랑 색상이 다르다 질감이 다르다 생긴게 변형됐다.. 고 디테일을 보다보니.. 무한 다시... ㅎ...

그래서 살짝 죄송스러운 마음에 온보딩 진입화면에 들어갔던 것들은 내가 직접 뽑았다..ㅎ

기존 UI / 리디자인 후 아이콘 넣기 전 UI / 최종 리디자인 완료 UI

필터에 아이콘 넣고 레벨별로 이름을 딱딱한 느낌이어서 게이미피케이션 느낌으로 친숙하게 어플 스타일과 맞춰서 바꿨다 

그에 맞게 기존에 있던 디스크립션도 더 재밌고 친숙하게.... 라이팅도 고민하느라 은근 시간 많이 썼다..... 

 

---

이렇게 정신없이 고민하고 기획하고 디자인하고 피드백받고 개발쪽에 넘기고 하다보니 블로그를 이제야.. 몰아서 왕창..ㅋㅋㅋㅋㅋㅋ

 

기획을 자세히 배운 것도 아니고 기획 방법에 대해 전달받은거 없이 일단 하고 있긴 하지만, 

실제 출시한 어플이라 플로우와 경우의 수, 사용자 편의, 비즈니스 모델까지 생각해서 하려고 노력중이다... 

그래서 요즘 생각이 자꾸 이 어플은 뭐로 돈벌지..? ㅋㅋㅋㅋㅋㅋㅋ

일단 지도를 넣으면서도 외부 지도로 연결해서 쓸 때 돈이 얼마나 쓰이는지 그런것도 물어보면서 하게되고.. 그러다보니 수익이 어디서 나는건가,,, 수익구조가 필요할 것 같은데... 하는 생각이 ㅋㅋㅋㅋㅋㅋㅋ

 

일단 지금은 리디자인 완성이 다가오고 있어서 남은 작업은

1.  이벤트 상세페이지 전달받으면 넣기
2. 레벨테스트 카드에 넣을 캐릭터 전달받아서 완성하기
3. 온보딩 라이팅 강조 작업 후 완성
4. 전체 플로우 / 경우의 수 확인 후 개발에 넘기기 

거의 다 완료해서 이제 개발에 넘긴 부분들 요청자로 태그 하는 방식으로 전달하기로 했다