UI·UX 디자인 공부/제로베이스 스쿨 - 레퍼런스 분석

레퍼런스 분석 3주차 [우리동네GS]

CY__ 2024. 9. 17. 01:43

 

 0. About 우리동네GS 

우리동네GS는 GS25와 GS더프레시의 상품, 배달, 결제, 택배 등

여러가지 유용한 서비스 및 와인25+와 멤버십 혜택까지
모든 것을 한 번에 빠르고 편리한 방법으로 이용할 수 있는 위치 기반 종합 서비스다.

기존 '나만의 냉장고(GS25)', 'THE POP', '우딜-주문하기’, ‘GS더프레시(GS수퍼마켓)’이

ALL-IN-ONE으로 결합된 통합 앱이다.

(출처: https://play.google.com/store/apps/details?id=com.gsr.gs25&hl=ko)

쉽게 말해서 GS 편의점과 마트 통합 서비스 앱이라고 보면 된다.

(아래 내용은 그냥 보기 편하게 편의점, 마트로 작성될 예정)

나만의 냉장고 + THE POP + 우딜 + GS수퍼마켓 = 우리동네GS


 1. 화면 구성 분석 

 

화면 구성 분석은 Footer를 기준으로 하며

이 앱에서 가장 많이 사용되는 페이지 순서인  홈 → 결제·적립 → MY → 검색 → 주문내역 순으로 할 예정이다.

 

 1) 홈 (메인화면) 

지난 주에 보았던 [트래블월렛]과는 사뭇 다른, 훨씬 복잡한 레이아웃과 콘텐츠를 보여주고 있다.

(https://cy79.tistory.com/21 ← 트래블월렛 분석)

물론 서비스 특성 상, 복잡한 구성은 불가피하긴 하다.

이번에는 위의 이미지에서 라인의 색상으로 항목을 구분해보았다. 

 

(하늘색 라인) 편의점 서비스 : ③GS25 ⑤나만의 냉장고 ⑧GS25 이달의 행사

(민트색 라인) 마트 서비스 : ④GS더프레시 ⑧GS더프레시 행사전단

(검정색 라인) 편의점&마트 공통 서비스 : ①헤더, ②⑨배너, ⑥재고찾기, 택배예약, 와인25+ ⑩푸터

 

...일단 홈 화면의 구성은 이러하다.

서비스 특성을 감안하더라도 좀 많이 복잡하다.이와 관련해서는 아래 개선점 항목에서 더 자세히 작성하겠다.

 

이 홈 화면 구성을 더 자세히 분석해보자면 아래와 같다.

 

①Header 헤더

주소 설정 페이지 → 주소를 설정하여 주변의 편의점과 마트의 재고 현황, 픽업·배달 서비스 등을 파악할 수 있고

챗봇 상담 → 궁금한 점을 빠르게 질문하고 답변을 얻을 수 있다.

알림 페이지 → 서비스 관련 알림 메시지를 받고, 장바구니에는 상품을 담아서 픽업·배달을 요청할 수 있다.

 

②배너

이벤트, 프로모션 등의 배너를 볼 수 있다.

(왜 이렇게 위, 아래에 따로 뒀는지는 잘 모르겠다..)

 

③GS25

편의점 픽업, 배달, 사전예약 등의 서비스 페이지로 이동한다.

 

④GS더프레시

마트 픽업, 배달, 사전예약 등의 서비스 페이지로 이동한다.

 

⑤나만의 냉장고

나만의 냉장고는 편의점 1+1, 2+1 상품의 증정품 재고가 없거나, 증정품을 나중에 받고 싶을 때 사용된다.

 

이렇게 보관된 상품과 상품 내역,

근처 매장 또는 즐겨찾기한 매장의 재고 현황도 나타난다.

상품의 이미지를 크게 보여줘서 어떤 상품인지 한눈에 알 수 있다.

 

 

상품을 터치하면 교환할 수 있는 바코드가 나타나고 바코드 터치 시 화면이 밝아지며 바코드가 확대된다.

이전 화면에서 [14일 남음]이라고 표시해주기도 하고

이 페이지에서 보관 일시와 기간이 상세히 표시되며 요일까지 나타내줘서

상품 보관기한을 직관적으로 이해할 수 있다.

 

 

증정품 호환이 가능하면(ex. 펩시콜라와 칠성사이다 → 증정품 호환)다른 상품으로 교환할 수도 있고

1회에 한해 보관기간도 연장된다.

 

 

⑥재고찾기 / 와인25+ /택배예약

[재고찾기] 편의점, 마트의 상품 재고를 찾을 수 있다.

[와인25+] 와인을 픽업할 편의점·마트를 찾을 수 있다.

[택배예약] 택배 서비스를 예약할 수 있는 페이지다.

재고확인 상세 페이지

 

재고확인 페이지 이동 시 현재 가장 검색량이 많은 상품들의 순위를 보여주며

상품 검색 시 근처 매장마다 몇 개씩 있는지 재고 현황만 확인할 수 있다.

매장 선택 시 그 상품을 바로 픽업·배달을 신청할 수 있지는 않고,

매장 정보가 뜨며 그 매장에서 픽업·배달을 요청할 수 있는 페이지로 이동할 수 있다.

 

택배예약 상세 페이지

 

택배예약 페이지는 상단에 택배 서비스 관련 배너가 나타나며

이용가능한 매장과 예약내역을 확인할 수 있다.

그 밑으로 반값택배, 국내택배 두 가지의 옵션이 나타난다.

반값택배는 편의점에서만, 국내택배는 편의점과 마트 모두 이용할 수 있다.

 

 

 2) 결제·적립 

  • 푸터 세 번째 탭, 결제·적립

이 앱을 사용하면서 가장 자주 마주하게 되는 화면이다.

해당 탭 터치 시 화면 밝기가 밝아지면서 결제 QR코드 모달이 밑에서부터 올라온다.

 

①QR 항상보기 토글 & [바코드] [설정]

QR 항상보기 토글 활성화 시 앱을 실행하자마자 QR화면이 나타나게 된다.

 

[바코드] 아이콘 → 개별 바코드를 볼 수 있는 모달이 나타난다.

[설정] 아이콘 → 결제·적립·할인 관련 설정을 할 수 있는 페이지로 이동한다.

대부분의 설정을 토글로 설정할 수 있다는 것이 특징이다.

 

②결제·적립·할인 QR코드

GS 편의점 또는 마트 이용 시 결제·적립·할인을 적용할 수 있는 QR코드다.

 

QR코드 터치 시 밑에서 크게보기 화면 모달이 뜬다.

 

③결제수단

모바일팝, GS Pay, 기타 결제수단 등 결제수단을 정할 수 있는 탭이다.

좌우로 스와이프할 수 있으며 결제수단 변경 시 QR코드가 재설정된다.

 

④포인트

체크박스 터치 시 포인트를 사용할 수 있다.

'항상 최대사용'이라는 체크박스도 있어서, 쌓아둔 포인트를 전부 사용하기 편리하도록 되어 있다.

 

 

⑤혜택

통신사 할인, 쿠폰 할인(편의점/마트 선택), 구독 할인, 현금영수증 등 여러 혜택을 적용시킬 수 있다.

 

 

 3) MY 

  • 푸터 다섯 번째 탭, MY

큰 카테고리로 치면 회원 등급, 포인트, 주문·결제·할인 정보, 나의 정보, 문의 및 공지 정도로 구분된다.

메뉴가 많다보니 크게 2개의 컬럼으로 나눠져 있고

각 세부 카테고리마다 화살표로 접었다 폈다 할 수도 있다.

가장 자주 사용되는 메뉴들을 최상단에 아이콘과 함께 배치했고

그 외의 것들을 밑에 리스트 형식으로 나열한 것 같다.

이 페이지의 세부 항목을 하나하나 들여다볼 수는 없으니

내가 생각하기에 주된 페이지들을 분석해보겠다.

(위의 이미지에서 흐릿하게 처리한 것들은 카테고리 분류상으로 필요하지만

분석까지는 하지 않을 것들이다.)

 

①GS 리테일 멤버십 혜택

 

회원 등급과 함께 어떤 서비스를 가장 많이 사용했는지 Progress bar의 형태로 보여준다.

회원 등급이 빵빠레 효과(애니메이션이 있지는 않다)로 디자인되어 있어서 '내가 이만큼 사용했다'하는 성취감이 배가 된다.

 

② 자주 쓰는 메뉴 - [쿠폰함]

 자주 쓰는 메뉴 중 쿠폰함만 분석해보려 한다.

 

상단에 [사용가능] [사용내역] [쿠폰등록] 탭이 있고

그 밑으로는 편의점, 마트, 픽업, 배달 등의 카테고리를 선택할 수 있도록 되어 있다.

최신순, 임박순으로 정렬도 할 수 있고

쿠폰의 남은 날짜를 '15일 남음'으로, 글씨색 또한 붉은 계열로 표기해서 남은 기간을 빠르게 파악할 수 있다.

편의점과 마트 카테고리를 하늘색과 민트색으로 구분한 것 또한 직관적인 파악을 돕는다.

 

④나의 정보 - 이벤트 참여 내역

 

GS 행사 상품을 결제할 시 자동으로 이벤트에 참여되고 앱 내에서 매달 출석체크 이벤트도 진행중인데

매번 이벤트 페이지로 이동해서 내가 어떤 이벤트에 참여하고 있는지 확인하는 것은 서비스의 사용성을 크게 떨어뜨리게 된다.

우리동네GS는 내가 현재 참여하고 있는 이벤트들을 하나로 모아놓은 페이지에서 손쉽게 파악할 수 있다.

 

 

 4) 검색 

  • 푸터 두 번째 탭, 검색

 

상단 검색창 아래에 최근 검색어와 인기검색어, 광고배너까지 나타난다.

순위가 올라가고 있는 검색어는 하늘색 화살표로, 내가려고 있는 검색어는 회색 화살표로 나타내어

어떤 것이 오르내리고 있는지 색상만으로 명료하게 파악할 수 있다.

 

상품을 검색하면 상단 카테고리에 편의점&마트의 픽업·배달탭을 선택할 수 있고, 그 밑으로 연관검색어도 나타난다.

밑으로 내리면 상단 카테고리의 콘텐츠들(편의점 픽업, 마트 픽업, ···)이 보인다.

행사상품이라면 상품 썸네일 상단에 [1+1]과 같은 작은 아이콘이 있고

품절일 시 이미지가 어두워지며 '앗, 품절이에요' 메시지가 나온다.

 

 

 5) 주문내역 

  • 푸터 네 번째 탭, 주문내역

 

편의점·마트 픽업과 배달, 사전예약 등의 주문내역을 확인할 수 있다.

(1개월) ← 이 부분 터치 시 기간을 설정할 수도 있고

주문 내역 그대로 장바구니에 똑같이 담을 수도 있다.

상품에 대한 후기 작성도 할 수 있다.


 2. 사용자 분석 

우리동네GS 앱의 주 사용자는 GS 편의점과 마트를 자주 이용하는 사람들

특히 간편 결제와 픽업 서비스, 배달 서비스, 나만의 냉장고, 택배 서비스 등 다양한 기능으로

젊은 층과 편리함을 추구하는 사람들에게 많이 사용된다.

사실 현재 GS25에서 알바를 하고 있는데 (이 앱을 자주 쓰는 이유도 이 때문)

젊은 층 말고도 5-60대의 중년 층도 사용하는 모습을 꽤 자주 보곤 한다.

https://www.asiae.co.kr/article/2024061307521165288 ← 이런 기사도 있다.

내 경험을 더하자면, 20대부터 50대까지 다양한 연령층이 사용하고 있는 것 같다.

 


 3. 개선점 

위에서부터 쭉 봤으면 알겠지만, 구성이 어딘가 난잡하고 정리가 안 된 느낌을 준다.

실제로 구글 플레이스토어 후기를 보면 UI에 대한 불편의 목소리가 많다.

앞서 말했듯이, 기존의 4개의 앱을 ALL-IN-ONE으로 결합시킨 서비스이기 때문에 이렇게 되지 않았나 하는 생각이다.

 

내가 사용하면서 불편을 느꼈던 것은, '그래서 이게 편의점에서 한다는 거야, 마트에서 한다는 거야?'였다.앱을 처음 사용했을 땐, 이벤트 배너가 편의점에 관련된 것인지, 마트에 관련된 것인지 파악하는 것이 어려웠다.하나의 화면에 편의점과 마트 관련 배너를 모두 보여주다 보니 이렇게 된 것 같다.

GS25, GS더프레시 등 다소 직관적이지 않은 이름 또한 단번에 인지하지 못하는 데에 한 몫 했던 것 같다.

그리고 홈 화면에 편의점, 마트 두 서비스 관련 콘텐츠들이 너무 빼곡해 있다.

 

물론 두 서비스 모두 잘 사용하는 사람들도 당연히 있을 것이고, 내 생각보다 많을 수도 있다.그런데 나의 입장에선, 편의점 관련 서비스밖에 이용하지 않는데 보이는 정보가 너무 많으니까 헷갈리게 되는 것이다.

 

모든 서비스를 골고루 이용하는 사람과, 나처럼 하나의 서비스만 자주 이용하는 사람 모두 만족시킬 수 있는개선사항을 생각해보았는데, 지난 주에 분석했던 트레블월렛의 홈 화면이 바로 생각났다.

 

트래블월렛의 메인페이지

 

 

트래블월렛을 레퍼런스 삼아서, 정말 간단하게나마 AS IS와 TO BE를 만들어보았다.

GS25와 GS더프레시 두 카테고리를 만들어서 복잡한 구성을 덜어냈다.

이렇게 하나의 서비스에만 집중할 수 있도록 하면

하위 페이지(픽업·배달 서비스, 재고확인, 쿠폰 등) 또한 더 심플한 구성으로 디자인할 수 있을 것이다.

 

그리고 GS25 선택 시 하늘색으로, GS더프레시 선택 시 민트색으로 표시해주어

어떤 서비스인지 보다 더 쉽게 인지할 수 있도록 디자인했다.

(원래 더 심플하게 '편의점' '마트'라는 이름으로 만들려다가, 원본의 전체적인 브랜딩을 고려해서 이름은 유지시켰다.)

728x90