프로젝트 개요 - Plan Your Trip

웹디자인

English        中文

Overview

‘이 관광지에 가볼만 하나?’, ‘하루에 이 5개 관광지를 모두 구경할 수 있을까?’ 라는 질문들을 낯선 나라에 여행가기 전에 다들 한 번쯤 궁금한 것 같습니다. 한국에 처음으로 오는 관광객들도 마찬가집니다. 웹시아트 ‘Plan Your Trip (PYT)’ 가 바로 이런 궁금증을 풀어주려는 목표로 진행한 프로젝트이었습니다.

DATE

Oct 2015 – May 2016

PLATFORM

Desktop / Mobile Website

MY ROLES

UX Design
UI Design
Illustration
Branding

TEAM

1 PM
1 Designer
2 Marketers
2 Developers (Outsourced)

The Problem

2015년 저희 한국 여행정보 웹사이트 “韓國遊” 를 리뉴얼작업을 기획할 당시, 프로젝트 매니저가 서울 여행 첫 방문자를 위한 새로운 기능을 추가 제의를 했습니다. 우리가 만약 처음으로 다른 나라를 여행갈 때 과연 무슨 정보를 더 필요할지 생각하면서 복잡하지 않으면서 신선한 기능을 만들어내야 하는 과제이었습니다.

Discuss the Vision

우선 프로젝트의 목표를 새우고 잠재적인 여러 가지 리스크와 제한점들을 나열해봤습니다.

Understand Our Target Users

이 다음 단계에서 팀원 각자의 경험과 전문 분야을 바탕으로 목표 사용자에 대한 생각을 나누어봤습니다. 잠재 사용자 몇 명을 대상으로 인터뷰와 관찰을 통해 이들의 특징을 파악하는데 도움이 되었습니다.

Visualize Our Ideas and Findings

연구의 결과에 따라 flowchart 를 만들어 디자인 핵심 문제를 가시화되었습니다. 그 다음에 프로젝트 매니저가 flowchart 에서 과정의 포커스와 방향을 표시하여 정했습니다.

페르소나는 아이디어와 토론 결과를 가시화하는 방식중 하나입니다. 주로 프로젝트의 목표 사용자와 그들을 위해 무엇을 제공해야 할지를 명시하기로 사용되었습니다.

GOAL

서울에 처음 방문하는 FIT 관광객들이 기본적인 여행계획을 편하게 짜는데 도와주기

RISKS & CONSTRAINTS

관광객들이 우리 서비스를 유용하다고 생각할지?
상세 여행정보를 제공하는 수많은 경쟁 서비스들이 있습니다.
개발자 인력 지원 부족

Look at Inspiring Solutions

집중해야 할 디자인 목표를 정한 후, 창의적인 해결책을 찾기 위해 여러 서비스와 제품을 살펴봤습니다. 앞서 나열했던 제한점을 고려하여 우리 서비스에 맞는 해결책을 고민해봤습니다.

Konest 의 ‘가는법’ 설명 방식이 이해하기 좋음

Mafengwo 의 여행후기가 외부링크로 상세한 여행정보를 필요한 사요자에게 제공하기

‘The happy forecast’ 란 웹사이트에서 본 Dynamic 3D 맵은 인상적이었으나 긴 로딩시간이 문제점이었음

Rough Ideas

이 단계에서 팀원 각자가 떠오르는 아이디어를 스케치로 적었습니다.

Solution Sketches

스케치를 통해 홈페이지와 검색결과 페이지의 레이아웃을 정했습니다. 그 다음에 앞서 완성된 UX 및 디자인 전략에 따라 홈페이지 내 정보구조(IA) 를 만들고 웹사이트 콘텐츠 구조를 정했습니다.

Draw the Storyboard

이 단계에서 사용자가 우리 웹사이트를 사용해 서울방문을 기획하는 과정을 제시하는 스토리보드를 만들었습니다. 스토리보드는 프로토타입을 제작 시 중요한 내용을 빼놓지 않기 위해 만든 작업물이었습니다.

Create Prototypes

레이아웃 디자인을 완성 후 Muse 로 우리의 솔루션 스케치를 higher fidelity 프로토타입으로 전환시켰습니다. 작업 과정 중 항상 사용자 테스트할 Task 를 명심하고 디자인 작업을 했습니다.

Task Script Example

다음 주에 서울여행 첨으로 가신다고 가정하면 명동과 남산타워 2군데 가는데 시간 얼마정도 필요할지 어떻게 빨리 알아낼 생각이세요?

질문

·웹사이트의 첫 인상이 뭔가요?
·첫 화면을 통해 이 사이트는 어떤 것에 대한 사이트인지 추측하실 수 있으세요?
·처음으로 볼 때 이 3D 지도를 어떻게 사용할 생각이세요?

관찰

·사용자가 어디를 주목하는지? 얼마 오래 주목하는지?
·사용자가 지도를 어떤 방식으로 클릭하는지?
·사용자의 표정이 어떤지?

Find Errors in Front-end Coding

시안 원본 파일과 설명 문서를 전달한 후 외주 개발자하고 긴밀하게 소통했습니다. 이를 통해 디자인 시안을 개발 시 좀 더 정확하게 보증할 수 있었습니다.