sihyun22 님의 블로그

Framer로 화면을 제작했다면, 더욱 실감나는 웹을 위해 다양한 인터렉션을 사용해볼 수 있다. 오늘은 Framer에서 구현할 수 있는 다양한 인터렉션들을 배워보았다. Top Button머티리얼 아이콘으로 Top Button을 제작하고 컴포넌트로 만들어준다. 컴포넌트에서 아이콘을 복사해주고 보이지 않는 하단에 배치, Hover 상태의 버튼을 하나 더 만들어 보이지 않는 상단에 배치해주면, 마우스 Hover 시 인터렉션이 생긴 것을 확인할 수 있다. 버튼을 클릭하면 페이지의 상단으로 이동할 수 있도록 Hero Section에 Scrool Section을 만들어주고, 버튼 컴포넌트에 Link To를 설정해주면, 잘 작동이 되는 것을 확인할 수 있다. 에셋 페널에서 버튼을 불러와주고 배치시켜준 뒤,..

Framer 배우기_Day3오늘은 Framer의 웹사이트 기본 세팅과 사용자 반응문자 지표 수집, CMS 활용에 대해 알아보았다. 사용자 데이터랜딩페이지 제작을 완료했다면, 실제 사용자 데이터를 받을 수 있는 기능이 있다. 랜딩페이지에 이메일을 작성하는 모듈을 제작하고, Form 레이어에 Send To → Google Sheets로 연결해주면, 이메일 입력시, 스프레드 시트에 이메일이 잘 모이는 것을 확인할 수 있다. 이 기능으로 메일을 수집하여, 서비스 런칭 시 연락을 돌리는 등의 사용자와의 연결이 가능하다. + 추가적으로 메일을 수집하려면, 메일 주소를 보낸 뒤, 성공적으로 주소가 보내졌다는 화면을 제작하여 사용자의 상황을 안내하는 것이 필수적으로 필요하다. 성공 화면을 먼저 제작해주고, 버튼..

Framer 배우기_Day2오늘은 어제 배운 기능들을 사용하여 랜딩페이지를 제작 실습을 진행하였다. 노션의 랜딩페이지를 클론해보고, 디스플레이에 맞춰 반응할 수 있도록 데스크탑, 타블렛, 모바일 화면을 제작하였다. Section먼저 랜딩페이지의 센션을 파악했다. 랜딩페이지는 여러개의 섹션들로 이루어져 있는데, 구성요소에 따라 어떤 네이밍으로 불리는지 알 수 있었다. Breakpoint디바이스에 맞게 반응하는 화면을 위해선 화면이 바뀌는 기준 사이즈가 필요한데, 이를 Breakpoint라고 한다. 일반적으로 모바일/타블렛/데스크탑 3단계로 나뉘며, 표준 Breakpoint가 있지만, Framer에서 제공하는 사이즈를 사용했다. 반응형 디자인Framer에선 데스크탑을 Primary로 사용하는 원리였으며..

Framer 배우기_Day1지금까지 여러 프로토타입들을 만들어보며 아쉬웠던 부분은 정말 실행되는 것 처럼 만들었지만, 사실은 실행되지 않는다는 점이었다. 개발 바로 직전까지만 닿을 수 있었는데, 이번 노코드 툴 학습을 통해 실제 구동하는 화면을 만들 수 있다는 게 기대가 된다. 일주일간 노코드 툴인 'Framer'를 통해 랜딩페이지 제작을 목표로 학습하는 것이 목표이다. Framer를 통해 개발 과정 없이 바로 실행할 수 있는 페이지를 만들 수 있다. Frame에서 웹사이트를 디자인하면 곧바로 사이트가 개설되는 것이다. 오늘은 이 Frame 툴을 처음 접해보려 한다. 랜딩페이지최종 목표인 랜딩페이지에 대해 알아보자. 랜딩페이지는 사용자가 처음 도달하는 페이지로 회원가입등과 같은 행동을 유도할 수 있으며..

[Temu 개선을 위한 UX 리서치 프로젝트]사용자 리뷰, 설문조사 분석 (완료)사용자 심층 인터뷰 (완료)사용자 시나리오 설계를 통한 개선 아이데이션 (완료)개선안 제작 아이디어 우선 순위를 바탕으로 개선 진행시간 관계 상 전부 개선을 진행하긴 어려워 선정된 아이디어들을 순서대로 진행하였다.결론적으로 4번 개선안까지 개선을 진행하게 되었다. ➀ 카테고리 개선안기존의 복잡한 카테고리를 직관적으로 정리하여 사용자가 혼란을 겪지 않고 빠르게 선택할 수 있도록 개선하였다. ➁ 상품 리스트 개선안기존의 쇼핑 흐름을 방해하는 할인 광고 팝업을 카드 형태로 상품 리스트 사이에 배치하여 흐름이 끊기지 않게 할인 광고를 확인할 수 있도록 개선하였으며, 상품 리스트 화면의 복잡도를 낮추고 주요 정보를 직관적으..

[Temu 개선을 위한 UX 리서치 프로젝트]사용자 리뷰, 설문조사 분석 (완료)사용자 심층 인터뷰 (완료)사용자 시나리오 설계를 통한 개선 아이데이션 인터뷰 인사이트 최종 도출심층 인터뷰를 통해 발견한 키워드 인사이트를 기반으로 대표 사용자의 특성을 정립하고, 가장 큰 문제점과 그 문제에 대한 원인들을 도출하였다.'사용자가 상품 탐색에 시간이 길어져 지치고, 결국 구매를 포기하게 되는 점'이 3명의 인터뷰 참여자에게 반복되고, 어플 이탈에 도달하는 것이기 때문에 가장 큰 문제점으로 설정하였다. 페르소나대표 사용자 특성을 바탕으로 페르소나의 특성을 설정하고, 주요 불편함에 대한 시나리오 설계로 페인포인트와 니즈를 도출했다. 사용자 여정 지도페르소나의 테무 쇼핑 과정을 시각화하여 탐색 과정에서 주요..

[Temu 개선을 위한 UX 리서치 프로젝트]사용자 리뷰, 설문조사 분석 (완료)사용자 심층 인터뷰 인터뷰 목적 설정사용자 리뷰를 통해 설정한 가설 확인과 설문조사를 통해 발견한 불편함들의 원인을 파악하기 위해 심층 인터뷰를 진행하기로 하였다. 인터뷰 질문 작성인터뷰 질문은 탐색하고자 하는 주제별로 작성을 하였고, 관련 주제들 끼리 묶어 자연스러운 흐름을 만들고자 하였다."테무에서 가장 많이 하는 행동은 무엇인가요?" 라고 첫 질문을 시작했다면 왜 그 행동을 했는지, 그 때의 불편함은 없었는지, 가장 중요하게 고려하는 것은 무엇인지 등 꼬리질문을 계속해서 이어가는 방식으로 구성했다. 인터뷰 진행인터뷰는 총 3명을 진행했으며, 테무를 사용해본 사용자를 대상으로 진행하였다.인터뷰는 녹음을 진행해 클로..

[Temu 개선을 위한 UX 리서치 프로젝트]사용자 리뷰, 설문조사 분석 Temu 사용자 흐름 관찰리서치에 앞서 테무 어플을 직접 사용해보며 사용자 관점으로 흐름을 파악하였다. 사용자 리뷰 분석Play Store와 App Store의 사용자 리뷰를 분석하였다.불편함에 대한 내용이 담긴 리뷰를 선별하여 정리하고, 왜 불편했을지에 대한 가설을 세워보았다. 설문조사사용자 리뷰와 더불어 테무 사용자의 이용 패턴과 주요 불편사항을 수집하기 위해 설문조사를 진행하였다.질문은 목적에 따라 의도를 설정한 뒤 작성하였고, 총 11명의 응답을 받았다.이후 설문조사 결과를 분석하며 인사이트를 정리하였다. 사용자 리뷰 & 설문조사 인사이트 취합사용자 리뷰를 분석하여 도출한 가설과 설문조사를 통해 도출한 인사이트를 취..

[11/11_To Do]UX/UI 기획 및 리서치 강의 Chepter 3. 어피니티 다이어그램과 유저 페르소나UX/UI 기획 및 리서치 강의 Chepter 4. UX 기획과 고객 여정 지도UX/UI 기획 및 리서치 강의 Chepter 5. 사용성 테스트 3-1. 리서치 결과 정리 정리 예시) 3-2. 어피니티 다이어그램어피니티 다이어그램의 장점→ 방대한 데이터 사이의 규칙과 연관성을 발견→ 발견한 내용을 토대로 인사이트를 도출할 수 있음 어피니티 다이어그램 수행 단계 어피니티 다이어그램 노트- 리서치를 통해 발견한 사실, 정보, 인사이트 등을 노트에 한 문장 단위로 적는다.- 중복, 잘못된 정보는 제외시킨다. 그룹핑하고 헤더 이름 붙이기- 연관성, 유사성에 따라 그룹핑하면서 헤어 이름을 붙인다.- ..

[11/11_To Do]UX/UI 기획 및 리서치 강의 Chepter 1. UX/UI 디자인 프로세스UX/UI 기획 및 리서치 강의 Chepter 2. 유저 리서치 1-3. UX/UI 디자인 프로세스더블 다이아몬드 모형 1. 발견(Discover) 단계무엇이 문제인지 발견, 이해하는 단계유저 리서치( 데스크 리서치, 필드 리서치)2. 정의(Define) 단계집중할 문제가 무엇인지 정의하는 단계어피니티 다이어그램, 유저 페르소나 3. 발전(Develop) 단계문제 해결을 위한 아이데이션 진행 단계정보구조도, 와이어프레임4. 전달(Deliver) 단계디자인을 구현하여 유저에게 제공하는 단계프로토타입, 사용성 테스트 더블 다이아몬드 모형의 4가지 핵심 원칙 1-4. Lean UX와 MVPLean ..