Week 6-3 기초 프로젝트 - 그래프 개선, 피그마 작업

 

오늘은 오전 내내 코드카타를 진행했다. 생각 없이 문제만 푸니까 편했다...ㅋㅋㅋㅋㅜㅜ

오후에는 연준 튜터님한테 가서 그동안 짠 ppt 검토를 요청했다. 우리 조의 그래프가 모두 바그래프여서 다른 종류의 그래프를 넣어야 발표가 단조로워지지 않을 것이라고 했다. 꺾은선 그래프를 넣고, 검정색 그래프들을 다채롭게 넣어서 알아보기 쉽게 바꾸기로 했다.

 

UI/UX가 주제이기 때문에 개선된 UI를 직접 제시하는 게 좋을 것 같다고 하셨다. 피그마를 해본 사람이 나밖에 없어서 내가 하기로 했다. 그래프도 내가 했던 부분인데 다른 팀원분이 코드 가져가서 대신 해주시기로 했다...휴 다행 ㅜㅜ

 

피그마를 오랜만에 써봐서 가물가물 한 채로 간단한 레이아웃을 짰다.

내일은 허진성 튜터님께 가서 그래프 종류와 색상 등을 추천받기로 했다.

얼마 안 남았다. 끝이 오긴 하는구나 ㅜㅜ 빠르면서 긴 시간 같다.

---

 

그래프 개선

왼:before, 오:after. 막대에 색상 추가

 

왼:before, 오:after. 꺾은선 그래프와 색상 추가

 

 

As-is (현재 H&M 웹페이지 메인화면)

현재 H&M 홈페이지

• As-is :
  1. 배너가 차지하는 비율에 비해 활용도가 낮다.
  2. 지나치게 큰 이미지와 중복되는 메뉴 때문에 상품과 카테고리 접근까지 스크롤을 여러 번 내려야 한다. 이탈 가능성을 높인다.
  3. '더 높은 고도를 향하여' : 직역한 말투, 직관적이지 않은 표현으로 어떤 메뉴인지 알 수 없다. 실제로는 신상품으로 연결되는 페이지이다.
  4. '헤리티지 시크' : 직관적이지 않아 일반 사용자들은 어떤 장르인지 파악하기 어렵다. 이러한 용어의 사용은 사용자 친밀감을 낮춘다.
  5. 신상품 메뉴 : '더 높은 고도를 향하여' 메뉴와 중복되어 자리를 낭비한다.
  6. 카테고리 : 어떤 기준으로 추천하는 카테고리인지 알 수 없다.

 

 

To-be (개선사항을 반영한 새로운 레이아웃)

개선한 레이아웃

 

• To-be:
  1. 배너칸을 줄이고, 캐러셀로 만들어서 프로모션 여러 개를 한번에 홍보한다.
  2. 사용자 맞춤 카테고리를 지정할 수 있게 하여 편의성을 높인다.
  3. 사용자 맞춤 추천 아이템을 제시한다.
  4. 다음으로 신상품과 프로모션/할인 상품을 배치하여 홍보 효과를 노린다.
  5. 인기 카테고리 top3의 인기상품을 배치하여, 맞춤 아이템 이외에도 구경할 수 있게끔 다양성을 보장한다.

 

---

https://www.figma.com/design/dDd9HzDsveE9LWi5we5d3h/H-M-project?node-id=0-1&t=2Evy6MZTqVyuedPL-1

Figma