Amnesty Website Renewal



www.amnesty.or.kr


Overview

국제앰네스티는 모든 사람이 차별 없이 인권을 누릴 수 있는 세상을 위해 행동하는 세계 최대 국제인권단체입니다. 이전 웹사이트를 통해 초기 방문자들은 국제앰네스티가 어떤 단체인지, 무엇을 위해 활동하는지, 어떻게 활동하는지에 대한 원하는 정보를 찾기 힘든 구조였습니다. 이 문제점을 발견하고 방문자들이 각자가 원하는 정보를 더 쉽게 찾고 국제앰네스티를 더 잘 이해할 수 있게 되기를 바랐습니다. 이를 위해 웹사이트 방문자의 페르소나를 나누고 페르소나 별 목표달성을 위한 최적화된 경로와 콘텐츠를 구성했습니다. 더불어 디자인을 통해 국제앰네스티의 역동적이고 진취적인 분위기를 드러내어 방문자들이 국제앰네스티에 대해 더 쉽게 이해할 수 있도록 도왔습니다.








Infomation Achitecture

인포메이션 아키텍처는 효율적인 웹사이트를 어떻게 설계할 것인가, 정보 관리를 어떻게 체계적으로 구조화할 것인가, 사용자 경험과 비즈니스 방향을 충실히 반영한 정보 내비게이션을 어떻게 설계할 것인가 고민을 하는 중요한 단계입니다. 국제앰네스티는 각각의 목표가 다른 방문자들과 국제앰네스티 내부관계자들의 요구를 조사하고 분석하여 가장 필요한 메뉴들을 중점으로 설계하였습니다.

Wireframe

디자인 단계를 실행하기 전 IA 기반으로 콘텐츠의 구성과 위계를 정립하고 필요한 기능을 추가하여 와이어프레임 제작했습니다. 이를 통해 기획자와 국제앰네스티 내부관계자들의 피드백을 통해 수정이 필요하였고,  효율적으로 커뮤니케이션 하기 위해 코멘트 기능과 라이브 화상 회의, 시안 공유 기능이 담긴 ‘Invision’을 이용하였고 덕분에 빠르고 효과적인 방법으로 와이어프레임을 제작할 수 있었습니다.








Color
Typography

UI kit

UI Kit는 웹페이지 안에 존재하는 수많은 페이지를 동일한 룩앤필의 디자인을 효과적으로 적용하는 데 필요한 디자인 시스템입니다. 국제앰네스트의 브랜드 가이드 기반으로 심플하면서 명료한 디자인 컴포넌트를 제작하여 하나의 UI Kit를 제작하였습니다.

Color

국제앰네스티의 메인 컬러의 노란색은  인권을 지키기위한 중재를 의미합니다. 이를 기반으로 노란색과 강력한 대비를 보이는 블랙이 보조색으로 사용되며 , 컨텐츠 간의 공간의 여백을 역할을 해주기 위해 화이트가 사용됩니다. 회색은 웹과 모바일과 같은 디지털 환경에 보조적으로 사용할 수 있습니다.



























Mark