podium_nam0422

오늘은 프레이머를 배워보았습니다!

렌더링 페이지를 디자인하고 바로 웹 페이지로 배포가 가능한 노코드 툴입니다!

첫날은 기본 인터페이스와 카드 UI 만들기, 버튼 컴포넌트를 만드는 방법을 배워 보았습니다.

1. 기본 인터페이스

1) 홈 화면

프레이머 입장시 보이는 가장 첫 화면입니다.

1. 개인 정보 및 시스템을 설정하고 업데이트를 할 수 있으며 프로젝트를 관리할 수 있는 창입니다. 작업을 하다 보면 프로젝트 관리 창을 많이 사용하게 되겠죠?

2. 작업중인 프로젝트 폴더 화면입니다. 

3. 새로운 프로젝트 파일을 만들거나 새로운 프레이머 사용자를 초대할 수 있는 기능입니다.

프레이머도 피그마 처럼 협업이 가능 하지만 프레이머는 협을 위해서는 결제를 해야 합니다!

2) 프로젝트 화면

연습장 프로젝트 화면에 들어왔습니다.
해당 화면에서는 주요 핵심 기능만을 다루어 보겠습니다.

1. 페이지와 레이어 에셋을 각각 클릭해 주어 작업 구성을 확인할 수 있습니다.

   - pages에서는 작업물을 페이지 별로 확인

  - Layers에서는 작업물을 오브젝트로 확인

  - Assets에서는 저장한 컴포넌트와 아이콘을 폴더별로 확인

2. 상단의 툴바에서 작업툴을 선택 후 영역에서 작업을 합니다.

 - insert : 프레이머 기본 프로그램에 있는 컴포넌트와 요소를 불어올 수 있습니다.

 - Layout : 여러 프레임과 이미지, 비디오 등을 불러올 수 있습니다.

 - Text : 텍스트를 입력합니다.

 - Vector : 도형 및 선 등 그림을 그리는 도구입니다.

3. 프리뷰 화면으로 볼 수 있는 창으로 넘어갑니다.

4. 작업 영역에서 레이아웃을 추가 후 여러 요소를 만들어 나갈 수 있습니다.

5. 속성 패널에서 여러 요소들을 수정하고 설정합니다.

스타벅스 앱 프로젝트 개선을 시작한 지 벌써 4일이 되었습니다...

시간이 하루하루 정말 빠르게 지나가는거 같아요 ㅜㅜ

특히 팀 프로젝트 시간만 하루 24시간이 아니라 12시간인 것 같아요...

오늘은 저번 시간 도출한 문제정의를 바탕으로 경쟁사 분석과 아이디어 도출을 진행해 보았습니다.

먼저 경쟁사 선정은

직접 경쟁사 : 투썸, 이디야, 메가커피

간접 경쟁사 : 구글 맵

저희 팀은 위 앱을 경쟁사로 설정하여 분석을 시작하였습니다

직접 경쟁사의 플로우를 분석하였습니다.

- 메가커피 인사이트

메가커피의 매장 이미지는 적은편, 있는 사진도 복붙한 사진이며 앱 사용 시각적인 매장 정보는 부족하다.
하지만 매장 위시리스트는 스벅과는 다른 기능
주문 후 취소가 안됨에도 불구하고 사용자가 매장을 확실히 골랐는가? 에 대한 백트레킹이 부족하다.
지도 서비스를 제공하면서 매장의 위치 파악이 스벅보다는 용이함

- 투썸 인사이트 
투썸의 상세 정보가 부족함에도 매장 오류 선택 방지를 효과적으로 하고 있고 이는 지도맵의 영향이 크다고 예상된다.
따라서, 스타벅스 앱은 단순 상세 정보들이 많다고 상세 페이지의 역할을 하고 있다고 판단할 수 없다는 비교 결론을 얻게 되었고
지도맵을 스타벅스 앱에 넣을 수 있는지에 대한 고려를 해볼 필요가 있다.

• 매장을 어떤식으로 보여주는가? (함축되어있는가? 함축된 내용은 무엇인가?)
현재 위치를 기준으로 가까운 순서대로 매장들이 카드 리스트 형태로 표시되며, 각 카드에는 매장명, 주소, 현재 위치로부터의 거리, 매장 대표 이미지, 상세 정보를 확인할 수 있는 링크가 포함되어 있다.

• 매장 상세 화면은 어떤 흐름과 방식으로 보여주는가? (매장의 확신을 어떻게 시켜주는가?)
매장 정보를 클릭하면 매장 내부 사진이 나열되어 있어 스와이프로 확인할 수 있으며, 지도 탭을 통해 현재 위치와의 거리나 방향을 직관적으로 파악할 수 있다.
그러나 '오시는 길', 전화번호, 추가 정보 등의 항목은 대부분 비어 있어 세부적인 정보를 얻기 어렵다.
이로 인해 ‘매장 정보’라는 별도의 카테고리가 존재함에도 불구하고, 사용자 입장에서 실질적인 활용 가치는 낮은 편이다.

솔루션 도출

매트릭스 기법을 사용하여 도출한 아이디어를 선정해 보는 시간을 가졌습니다.

다양한 아이디어가 나오기는 했지만... 

실현 가능성과 리소스가 낮은 아이디어로는 

픽업 방식 선택을 화면에 백그라운드로 클릭 버튼으로 인식하는 아이디어와

Quick Order를 홈화면에 상시로 표시해 주기,

매상 상세화면에서 화면 클릭 시 이미지가 커지며 케러셀로 넘길 수 있게 만들기

위 세 개의 아이디어가 채택이 되었습니다.

오늘은 이렇게 마무리가 되고 내일 이 아이디어들의 근거와 문제정의에 솔루션과 명확한지에 대한 대조를 해보아야겠습니다!

1. 문제정의

“2030 청년층은 사이렌 오더 주문 과정에서 매장 정보 부족으로 인해
외부 서비스를 반복적으로 검색하게 되며 매장 선택 과정에서 피로감을 느낀다.”

저희는 2030 세대 사용자를 주타겟층으로 설정하였습니다.

누구의 문제인가? → 20대 사회 초년생

어떤 행동에서 문제가 발생하는가? → 매장 방문 전, 매장 위치 및 사진 정보가 부족하여 외부 서비스를 통해 매장을 검색

이 문제로 인해 어떤 불편을 느끼는가? → 앱 내의 매장 정보에 대한 의심

이 문제로 인해 어떤 감정을 느끼는가? → 매장을 선택하는 과정에서 피로감을 느낌

지난 시간 배운 좋은 문제 정의의 예시를 배운 것을 토대로 문제정의를 해보았습니다.

20대의 사회초년생으로 선정한 이유 : 리서치 과정에서 20,30대의 앱 사용자들이 주문 관련 단계에서 UX 불편 사항들을 취합했기 때문입니다.

행동 선택 이유 : 스타벅스 매장의 분포도가 대부분 대도시 지역에 밀집되어 있습니다. 사용자는 스벅 매장을 선정할 때의 어려움이 앱에서 드러나기 때문입니다.

불편함 선택 이유 : 앱 사용시 주문 후 결제, 그리고 픽업까지 이어지는 플로우의 가장 첫 단계인 매장 선택에서 
사용자는 혼란스러운 상황을 겪는 경우를 인사이트로 도출하였습니다.

2. 유저 플로우

작성한 문제 정의에서 사용자들이 앱 사용시 어떤 화면에서 또는 어떤 행동에서 어떤 문제점을 느낄지 유저 플로우를 만들어 보았습니다.

오늘의 한 줄 요약

팀 프로젝트는 시간이 순삭이다...

1. 서비스 선정 이유

UX 개선 미니 프로젝트를 시작하며 서비스 선정에 특별한 앱/웹을 선택하는 이유는 없었습니다.

경쟁 업체를 쉽게 선정할 수 있는가?
개인적 흥미
사용자도 쉽게 찾을 수 있을 것 같다.
다운로드 사용자가 많은데 평점이 낮음.
유사 서비스를 팀원 사이에서 사용해 봄.

위와 같은 조건을 충족할 수 있는 어플 중에 저희는 '스타벅스' 앱을 선정하게 되었습니다.

스타벅스 앱의 경쟁사) 투썸, 이디야, 메가커피, 빽다방 등

팀원들의 흥미) yes

사용자 접근성) 시장 내 1위

다운로드 사용자가 많으면서 평점이 낮은가?) 1,000만 회 이상 다운/ 평점 2.9점(안드로이드 기준)

유사 서비스 사용 경험) 보통 투썸, 메가커피,빽다방 사용해 봄

스타벅스의 선정 이유는

스타벅스 앱은 대중적이고 접근성이 높은 반면 서비스의 만족도는 낮았습니다.

앱 조사 시 경쟁 앱과의 비교와 사용자 공감이 쉽기 때문에 개선 대상으로 접합함을 판단하였기에 

저희 팀은 스타벅스 앱의 UX 문제를 찾고 개선하기 위해 작업하기로 정하였습니다.

2. 사용자, 시장 조사

스타벅스 앱 사용자의 사용자 분포도를 데스크 리서치를 통해서 조사해 보았습니다.

스타벅스의 주요 사용자 층은 직장인이 압도적으로 높았으며 50대부터 40대, 30대, 20대 순으로 사용자 층이 다양했습니다.

반면, 스타벅스 앱 사용자는 30대, 20대, 40대 순으로 앱 사용률이 높았는데요.

2019년에 비해 2024년 사용자들은 20대와 30대의 사용자들은 줄었지만

40대 이상의 사용자들은 늘어난 모습입니다

경쟁 앱 조사

커피 제조업계의 어플 사용자는 역시 스타벅스 앱 사용자가 압도적으로 높았습니다.

하지만 그것과 비례해 좋지 못한 사용률을 보여주고 있지는 않습니다.

한편, 메가커피의 사용률은 41.6%로 스타벅스 앱과 약 5%가량 차이 나고 있습니다.

스타벅스 앱의 설치자 수는 많지만 어떤 이유에서 스타벅스 앱을 사용하지 않는가에 대한  VOC 조사를 다음 

기회에 해볼 생각입니다. ^^

UX 디자인 미니 프로젝트를 시작하게 되었습니다! 

새로운 과제 새로운 팀원들과 함께 미니 프로젝트를 시작하게 되었습니다~!

저번 과제의 실수를 피드백받아서 이번 프로젝트에는 더욱 완성도 높은 과제를 목표로 열심히 해보려고 합니다.

완성도 높은 과제를 위해서는 어떤 인사이트나 데이터든 근거가 있어야겠죠?

UX 디자인의 가장 어려운 점은 '문제 정의'라는 생각이 들어요 ㅠㅠ

사람마다 생각하는 게 비슷하다고는 하지만 디테일하게 들어가면 항상 다르거든요...

오늘은 과제에 들어가기에 앞서 사용자의 문제를 정의하는 방법에 대해서 배웠습니다!

그럼 간략하게 포스팅해보겠습니다!

1. 문제 정의의 목적

1) 해결 가능한 문제로 좁히기 위해

리서치를 하다 보면 많은 사용자들 가운데 하나의 문제를 짚기란 정말 어려운 작업이라고 생각합니다.

여러 데이터들 가운데 어떤 문제가 더 '문제'일까? 우선순위를 정하기 위한 이유입니다.

2) 사용자의 Pain Point 구체화 

솔루션 아이디어를 뚜렷하게 하기 위해서입니다,

3) 솔루션의 방향성 결정

팀원들과 동일한 목표를 위해서 문제 정의가 필요합니다.

2. 좋은 문제 정의의 특징

1) 사용자 중심 -> 누구의 문제인가?

2) 행동 기반 -> 어떤 행동에서?

3) 페인 포인트 -> 어떤 불편점이 있는가?

4) 감정 발견 -> 어떤 문제에서 어떤 감정을 느끼는가?

5) 솔루션이 없어야함 -> 솔루션이 자유로워야 함

좋은 문제 정의의란 위와 같은 내용이 좋은 문제 정의라고 할 수 있습니다!

여기서 특징은 페인 포인트(불편한 점)와 감정이 비슷한 느낌이라고 생각될 수 있는데요.

좋은 문제 정의에서도 문제와 감정이 자연스럽게 섞여 들어가도 좋습니다!

반드시 분리할 필요는 없습니다.

3. 좋은 문제 정의의 예시

30대 직장인 여성은 제품 구매 시 리뷰의 신뢰성을 반복적으로 의심하게 되어 구매 결정에 피로감을 느낀다.

위 문제 정의 문장을 앞서 살펴본 좋은 문제 정의의 예시로 내용을 분리해보겠습니다

누구의 문제 인가? : 30대 직장인 여성

어떤 행동에서? : 제품 구매 전 리뷰 10개 이상 반복 탐색

어떤 불편점이 있는가? : 리뷰 신뢰성에 대한 의심 증가

어떤 감정을 느끼는가? : 구매결정에 피로감을 느낌

솔루션이 자유로워야함 : 솔루션 없음

4. 문제 정의로 가는 과정

중요한 점은 인사이트 정리겠죠?

데이터를 추출하고 사용자, 행동, 페인, 감정 등으로 구분하여 그룹핑하는 것이 중요합니다.

또한 근본적인 원인 탐색을 위해 '왜?'라는 말을 사용하며 꼬리에 꼬리에 무는 질문도 합니다.

하지만 5why 같은 방법은 꼭 정답이 아닐 수 있습니다. 때에 따라서 '언제?'와 '어디서?'도 명확히 생각할 필요가 있습니다,.

✅ 랜딩 페이지(Landing Page)란?

랜딩 페이지는 사용자가 광고나 링크를 클릭했을 때 처음 도착하는 웹페이지를 말해요.
이 페이지는 특정 목적을 달성하기 위해 만들어진 1페이지짜리 집중형 웹페이지예요.

구글의 렌딩 페이지

https://workspace.google.com/intl/ko/products/calendar/

한 주 동안 구글 캘린더의 사용자들을 조사하면서 얻은 인사이트를 위주로

렌딩페이지 개선을 했습니다.

사용자 설문조사와 인터뷰를 하고

나온 인사이트로 페르소나까지 설정을 해주었는데요.

페르소나를 설정하면서 나온 아이디어를 렌딩페이지에 담아 보는 일을 해보았습니다.

Hero 섹션

구글 캘린더의 타 앱 들보다 강점은 다양한 플렛폼 과의 연동성,
실시간 동기화와 협업 기능이 강력한 점, 개인화된 일정 관리가
가능한 점입니다. 기존 히어로 섹션의 헤드라인이 온라인 캘린더를 임펙트 문구로 가져가기보다 ‘사용자의 하루를 개선하자’로 
사용자의 경험을 채워줄 수 있는 문구로 가져가보았습니다.

공감하기


구글 캘린더의 사용자들은 대부분 직장인이거나 사업자, 대부분 경제
활동을 하는 성인들이 대부분 이였습니다. 바쁜 일상에서 캘린더를 
확인할 수 없거나 빠르게 일정을 관리해야 할 경우 필요한 기능이라고
생각해서 아이디어로 채택해보았습니다.

솔루션


핵심 기능보다는 다른 캘린더 앱과 차별되는 기능을 추가해 보려
넣은 기능입니다.
캘린더 앱을 사용하는 사용자들은 대부분 개인 일정 관리에
집중하고 있는 것을 고려하여 일정 등록을 최대한 효율적으로
등록하고자 합니다.
기존 일정 등록에는 할 일을 등록하고자 할 때 불필요한 플로우,
키보드 시트의 화면 가림이 사용자에게 불편할 수 있겠다고 생각해서 위와 같은 방법으로 개선해보고자 합니다.
또한 AI 기능이 토스트 메세지로 사용자의 일정에 대한 가벼운 코멘트를 제시합니다.

CTA

렌딩 페이지를 읽고 있는 유저가 캘린더를 망설이고 있을 경우
중간에 CTA를 추가, 구글 캘린더는 구글 아이디만 있으면 바로
모바일 웹 화면에서도 캘린더를 사용할 수 있기 때문에 CTA가
중간에 추가되어도 좋겠다는 생각을 했습니다.
또 로그인 버튼보다는 ‘구글 캘린더 가기’ 등 다른 버튼 문구로 
대체하여 사용자의 부담을 줄여주었습니다.

기능 설명 1

일정 등록에 대한 기능 설명
일정을 등록 후 반복 일정 등록을 못 했다고
하더라도 홈 화면에서 간단하게 일정을 옮기거나 
수정할 수 있음

기능 설명 2


AI 비서 기능 추가, 일정을 등록 후 지난 일정 기록을 인식하여
라이프 스타일 관리 기능

기능 설명 3


캘린더 화면은 캘린더의 핵심입니다.
기존 캘린더의 화면은 직관적인 화면이라고 볼 수 없이 다소 난잡한 구조를 띄고 있습니다.(텍스트 색깔, 크기, 블록 등)
가독성을 해치는 구조보다 이모티콘 또는 이미지를 넣어 주면서 직관적인 일정 이해를 돕고자 합니다.

구글 켈린더의 프리미엄 기능을 제외 후 아이디어로 나온 UX를 추가해 주었습니다.

캘린더 앱에 프리미엄 기능이 필요할까?를 고민했을 때 프리미엄 구글 캘린더를 사용하는 사용자들이
소수라고 생각되어 제외해 주었습니다. 하지만 프리미엄 기능을 따로 소개하는 페이지를 만들어 준다면

좋을 것 같습니다.

또한 AI 비서 기능을 탑재하여 효율적인 일상관리에 집중해 주는 캘린더라는 이미지를 주고 싶어 렌딩페이지를 제작해 보게

되었습니다. (AI 비서 기능은 아이디어입니다)

지난번 인터뷰를 통해서 얻은 데이터로 어떤 공통점이 있는지 인사이트를 도출해보는 작업을 해보았습니다.

공통된점은

캘린더 화면이 시각적으로 보기 편해야함

자동화 기능과 알림 기능이 AI 비서 같은 역할이 되어 주었으면 좋겠음

일정 블록을 여러 개를 만들때 불편한 점

이렇게 정보를 추려서 페르소나를 만들어보는 일을 해보았습니다.

위 정보를 가지고 4명의 페르소나를 만들었습니다.

네명의 인물 모두 일정 입력시 불편한 점과 직관적인 UI화면을 보고 싶어하는 니즈를 가지고 있습니다.

인물들의 예상 시나리오를 설정하고 아이디어를 도출해 보는 작업까지 해보았는데요. 

어느 상황에서 어떤 문제점을 만들어볼 수 있을까?를 정말 한참 고민했네요...

참고 아티클 링크

많은 분들이 오늘의집에서 믿을 수 있는 인테리어 시공 업체를 탐색하고, 상담부터 계약, 시공까지 진행하고 있습니다. 이번 포스팅에서는 지난 1년간 고객 인터뷰를 통해 고객 페르소나를 설정하고, 프로덕트팀이 문제 해결 속도를 어떻게 높였는지 이야기해 보려 합니다.

인테리어는 한 번에 큰 결정을 내려야 하는 ‘고관여 상품’입니다. 고객마다 예산, 취향, 가족 구성, 주거 형태가 달라 고객을 단일하게 정의하기 어려웠어요. 팀원 각자의 인테리어 경험 유무에 따라 고객을 바라보는 시각도 제각각이었죠.

이처럼 뿔뿔이 흩어진 고객 이미지로는 의사결정이 느려지고, 팀의 우선순위 정립도 어려워지는 문제가 있었습니다. 그렇다면, 모두가 같은 고객을 상상하게 된다면?
→ 문제 정의와 해결 속도는 훨씬 빨라질 수 있습니다!

오늘의 집 프로덕트 팀은 1년 동안 20여 명의 고객을 인터뷰하여 다음과 같은 공통된 니즈를 파악하였습니다.

1. 고객 인터뷰 인사이트 정리하기

• 자신만의 스타일이 명확하고 이를 구현하고 싶어 하는 고객
• 시공 업체의 신뢰성과 실력을 중시하는 고객

이를 바탕으로 두 그룹으로 분류.

고객 A

원하는 스타일 명확

자재·디자인 관심 많음

이상적인 공간 실현 원함

고객 B

스타일보다 신뢰성 중시

같은 구조 시공 경험 중시

실용적이고 깔끔한 시공 기대

2. 집중할 고객 페르소나 선택

한정된 리소스로 더 많은 고객에게 의미 있는 변화를 만들기 위해 아래 기준을 세웠어요:

1️⃣ 더 많은 고객에게 가치를 주려면 누구의 문제를 풀어야 할까?
2️⃣ 빠르게 해결할 수 있는 고객 니즈는 무엇일까?

이 기준에 따라 최종 설정한 페르소나는 바로 고객 B

“우리 집과 같은 구조를 시공한 경험이 있는, 믿을 수 있는 업체를 찾고 싶은 고객”

3. 고객 여정을 따라 문제점 진단하기

고객 B의 시나리오를 기반으로 세 가지 질문을 중심으로 문제를 점검했습니다:

• 우리 집과 유사한 시공 경험이 있는 업체를 쉽게 찾을 수 있을까?
• 방문하기 좋은 업체는 어떻게 찾을까?
• 친절하고 마감이 좋은 업체를 한눈에 확인할 수 있을까?

페르소나 설정 이후 달라진 점

1️⃣ 빠른 의사결정과 정돈된 우선순위

• 팀 내부 고객 이해도가 일관되면서 문제 정의 속도가 빨라졌고,
• 엔지니어링팀에서도 과업 맥락을 빠르게 파악하며 효율적인 개발 가능

2️⃣ 실행력 높은 액션 아이템 도출

• 고객의 니즈를 바탕으로 다양한 솔루션이 빠르게 제안됨
• 실제 개선 작업까지 단 5일 이내로 완료
• 2025년 연간 계획에도 주요 액션이 반영됨

나의 생각

이번 프로젝트를 통해 인상 깊었던 점은, 막연했던 고객의 니즈를 '페르소나'라는 구체적인 이미지로 정리하자 문제 정의가 명확해졌고, 팀이 자연스럽게 같은 방향을 바라보며 솔루션까지 도출할 수 있었다는 점입니다. 단순히 고객을 이해하는 것을 넘어, 고객 중심 사고가 실제 실행력 있는 결과로 이어지는 과정을 경험하며, 사용자 중심 디자인의 힘을 다시 한번 실감할 수 있었던 여정이었습니다.