pi_top_image_v2.jpg

Paulson Institute Website Renewal

WHERE I WORK

Paulson Institute

DATE

2019

PARTICIPATION RATE

80%

MY ROLE

Research

Information architecture

Flow chart

Lo-Fi/Hi-Fi wireframe

A/B test

Prototype

OVERVIEW

폴슨연구소(Paulson Institute, PI)는 미국 시카고에 위치한 독립 민간 정책연구소입니다. 저는 책임 디자이너로서 연구소의 홈페이지를 개편하는 프로젝트를 담당했습니다.

PI는 2011년 헨리 폴슨 전 미국 재무장관이 창립한 미-중 관계 전문 정책연구소로, 미국 시카고에 본사를 두고 워싱턴 D.C. 및 중국 베이징에 사무소를 운영 중입니다. PI는 경제와 금융시장부터 환경정책 및 기후변화까지 다양한 분야에 대한 정책연구를 진행하고 있습니다. 크리에이티브팀의 책임 디자이너로, 저는 웹사이트 개편의 컨셉 도출부터 최종 출시 및 유지보수까지 전 과정을 담당했습니다. 팀원 및 크리에이티브 디렉터와 긴밀히 협력하여 사이트 구조를 개선하고 반응형 웹 디자인을 도입했습니다.

pi_overview.png
STAKEHOLDER INTERVIEW

인터뷰를 통하여 직관에 어긋나고 복잡한 네비게이션이 기존 웹사이트의 가장 큰 문제점이라는 사실을 파악했습니다.

여섯 명의 임직원들과 심층 인터뷰를 대면 및 가상으로 진행했습니다. 인터뷰에서 기존 웹사이트의 주요 문제점 3 가지를 파악할 수 있었습니다. 오래되어 진부한 디자인, 복잡한 메뉴 구조와 레이아웃, PI의 가치와 사명이 드러나지 않는 디자인이 핵심 이슈였습니다.

"For a lot of pages, I have to go through four or more steps to reach them, and it was hard to find and reach them again later. I feel the screens are small and tight. Maybe it is because it has been quite a while since the website was designed."

Annie, Associate Director

"It is hard to find the menu and it is too complicated. I would like to feel

a more eco-friendly atmosphere that goes well with what PI is advocating, such as Green Finance. The current website looks a bit dark and dull.

Some of the programs are not active anymore, but kept for archiving purpose, and they can be gathered in at one section."

Joy, Associate Director

"The layout is confusing, and the structure of the website is too complex. There are too many pages. Many of the menu items are old and not updated anymore. Sometimes it may look like the website is not updated regularly. I would like to see that the website is active and updated frequently."

Ben, Communications Manager

APPROACH

인터뷰에서 파악한 이슈를 바탕으로, 저는 디자인 개편 전략을 단순한 구조와 깔끔한 이미지에 초점을 맞추기로 했습니다.

연구소의 브랜딩 전략에 부합하도록 크리에이티브 디렉터와 협의를 통해 이번 프로젝트의 디자인 전략을 수립했습니다. 전략의 핵심을 메뉴 구조 개선, 깔끔한 반응형 디자인, 그리고 이미지를 활용한 PI의 가치 전달로 설정했습니다. 더이상 업데이트되지 않는 오래된 메뉴들은 아카이빙하고 검색가능하도록 했습니다. 사진 이미지를 넓고 크게 씀으로써 PI가 추구하는 가치가 더욱 잘 드러나게 되었습니다.

Problem1

복잡한 메뉴 구조
메뉴를 간소화하고
페이지 뎁스 (page depth)를 줄임

Problem 2

진부한 레이아웃과 디자인
깔끔한 반응형 디자인으로 업데이트

Problem 3

PI의 가치가 잘 드러나지 않음
 관련있는 이미지를
적극적으로 활용하여
가치와 이야기를 전달
TREE TESTING

여러 개의 분야가 복잡하게 엮여있는 네비게이션을 개선하기 위해, 크리에이티브 팀에서 트리 테스팅을 진행했습니다.

Optimal Workshop 이라는 온라인 사용자 리서치 플랫폼을 활용하여 트리 테스팅을 진행했습니다. 테스트는 두 번에 걸쳐 진행되었습니다. 첫번째 테스트에서는 기존 웹사이트에서 사용자가 원하는 토픽을 얼마나 용이하게 찾을 수 있는지 평가하여, 기존 네비게이션에서 어떤 부분이 특히 문제인지 확인했습니다. 메뉴 구조를 개선한 뒤 두번째 테스트를 통해 개선된 메뉴 가 잘 작동하는지 확인했습니다.

테스트는, 참여자들에게 특정 주제/기사/아이템을 찾으라는 질문과 함께 메뉴 구조를 제시하면, 각 질문마다 답이 있을 것으로 여겨지는 메뉴를 선택하는 형태로 진행했습니다. 정답률, 어떤 경로를 거쳐 결론에 다다르는지 등을 분석했습니다.

INFORMATION ARCHITECTURE

트리 테스트 결과와 컨텐츠 전략 방향에 따라 메뉴 구조를 재구성했습니다.

먼저, 연구소의 핵심 연구 담당자들과 함께 현재 진행 중인 프로젝트의 중요도 순서를 확인하고 이를 바탕으로 1st-depth 메뉴를 재정의하고, 그에 맞게 2nd-depth 내용을 재배치했습니다. 부차적이거나, 이미 종료된 프로젝트들은 중요도에 따라 삭제 혹은 아카이빙하여 검색 가능하게 했습니다. 또한 내용이나 주제가 겹치는 페이지들을 하나로 합쳐, 복잡한 구조를 단순화했습니다.

AS-IS
TO-BE
LO-FI WIREFRAME

전체 웹사이트의 50여개 페이지의 와이어프레임을 만들었습니다.

DESIGN SYSTEM
Thank you for watching :)

© 2020 Yeonkyung Kim