Portfolio 04 · 세션그리드 스튜디오

세션그리드 스튜디오

목적과 경험을 고르면 알맞은 움직임 프로그램을 비교할 수 있는 웹사이트입니다.

Project
웰니스
프로그램 웹사이트
Scope
정보 구조
UI 디자인
프런트엔드 구축
Experience
4단계 선택
프로그램 비교
일정 연결
Design
그리드 중심 구성
활동적인 컬러 시스템
세션그리드 데스크톱 프로그램 선택 화면

The challenge

프로그램 이름보다 나에게 맞는 시작 방식을 먼저 보여주기

처음 방문한 사람에게는 프로그램 이름과 전문 용어보다 무엇을 원하는지, 어떤 경험이 있는지가 더 쉬운 출발점입니다.

목적, 경험, 장소와 시간대를 차례로 고르며 프로그램의 차이를 이해하도록 질문과 결과 영역을 한 화면에 배치했습니다.

The approach

질문과 결과가 동시에 움직이는 프로그램 탐색

01

4단계 플래너

한 번에 하나의 질문에 답하며 목적부터 시간대까지 선택합니다.

02

즉시 비교

선택이 바뀔 때마다 프로그램과 현재 조건을 같은 화면에서 확인합니다.

03

콘텐츠 연결

프로그램, 코치 역할, 장소와 일정 정보를 차례로 살펴봅니다.

Design focus

긴 설명 대신 선택하며 이해하는 웰니스 웹사이트

질문, 추천 결과와 프로그램 정보를 하나의 그리드 안에 묶어 첫 방문자도 자신의 기준으로 내용을 탐색할 수 있도록 구성했습니다.

명확한 질문한 단계에 한 가지 선택만 제시하는 진행 방식
즉시 반응선택과 프로그램 결과가 나란히 갱신되는 구조
콘텐츠 확장프로그램에서 역할과 일정 안내까지 이어지는 흐름

Start a project

서비스를 설명하는 대신 직접 선택하게 만듭니다

비슷한 프로젝트 상담하기 →