지희로고

  • Home
  • About me
  • Works
    •

    Works > 식물도감

    Contact
    컨텍 말주머니
    식물도감 메인 배너로 식물도감 로고와 식물도감 앱 검색이미지

    식물도감

    UXUI RENEWAL DESIGN

    식물도감은 산림청 국립수목원에서 데이터를 제공받아 식물자원의 항목별 정보 및 상세정보를 조회할 수 있는 앱입니다.

    식물도감은 좋은 컨텐츠를 갖추고 있음에도 사용자의 편의를 고려하지 않은 UXUI 디자인으로 사용도가 낮은 문제점을 발견하여

    이를 개선할 수 있도록 가시성과 편의성을 키워드로 선택하여 리뉴얼을 진행했습니다.

    • 담당업무
    • 팀리더
    • 캐릭터
    • 와이어프레임
    • 홈화면
    • 완료보고서 작성

    research

    background

    식물에 대한 관심 증가

    식집사, 식테크 등 신조어 등장
    식물 검색량 증가
    식물 판매량 증가
    식물 관련 컨텐츠 증가

    TARGET

    20대 이상 성인 남녀

    안드로이드 기준

    네이버 3개월간 ‘식물’ 검색량 평균
    20~40대: 65.58%
    50대 이상: 62.30%

    market research

    아이덴티티 뚜렷한 경쟁앱

    식물 관련 앱의 공통적인 강점
    픽토그램, 인포그래픽을 활용하여
    정보를 쉽게 전달

    사용자 니즈

    • 1

      식물에 대한 빠르고 정확한 검색

    • 2

      관심 식물 즐겨찾기

    • 3

      정확한 콘텐츠가 있는 한국어버전 앱

    식물도감 기존 UXUI

    식물도감 기존 UXUI
    • 검색방법 미흡
    • 가독성 떨어짐
    • 즐겨찾기 기능 없음

    Quality up

    검색기능 강화

    명확한 주제, 희귀식물 포함하여 사진을
    제공하고 있는 식물도감의 장점을
    살리기 위해 편리한 검색기능 추가 필요

    Brand renew

    식물도감 브랜딩

    사용자들의 선택을 받기위해서
    식물도감의 브랜딩이 필요하다고 판단

    image renew

    브랜드에 가치를 더하는 이미지

    새롭게 정립된 브랜드 이미지를
    사용자에게 알리고 타앱과의 차별성을
    위해 식물도감의 이미지 필요

    *식물도감 앱을 제작업체에 연락하여 브랜딩에 대한 허락을 받고 진행했습니다.

    UX vision

    누구나 쉽고 빠르게 식물을 찾는검색 서비스

    식물도감 uiux 리뉴얼 디자인 모습

    Style Guide

    밑줄

    Logo

    식물도감을 직관적으로 보여줄 수 있는 나뭇잎을 포인트로 깔끔하고 단아한 느낌으로 작업했습니다.

    식물도감 로고

    Character

    북마크 기능을 가진 식물에 대한 정보를 주는 식물도감을 직관적으로 보여주면서 누구나 쉽게 사용할 수 있는 앱을 표현하기 위해 모서리를 둥글게 처리하여 친근한 느낌으로 표현했습니다.

    mr.도감 캐릭터
    mr.도감이의 의미 3개

    캐릭터의 이름은 Mr. 도감입니다.
    책 + 말주머니 + 북마크의
    형태로 만들었습니다.

    Color Palette

    식물을 직관적으로 표현해주는 초록색상과 식물의 식물이 좋아하는 물을 대표하는 파랑색상을 포인트 컬러로 선택했습니다.

    식물도감 메인컬러와 포인트컬러

    Layout grid

    상단 상태 표시 24px / 상단 앱 바 56px 기존 하단 네비게이션바 : 48px에서 58px로 변경하여 편의성 확장

    식물도감 앱의 그리드

    4 Columns / Grid 8px
    Margin 16px / Gutter 16px

    Typography

    Montserrat

    Montserrat폰트

    Noto Sans

    noto 산스 폰트

    정보 구조도

    검색에 최적화된 앱의 컨셉에 맞춰 직관적인 홈화면 구성으로 간단한 몇번의터치로 검색할 수 있는 구조를 만들었습니다.

    식물도감 정보구조도

    workflow

    나는 친구집에 있는 이 식물의 이름이 궁금하다. 하지만 친구에게 물어보긴 싫어서 사진을 찍어 검색해보기로 했다.

    식물도감 사진촬영 워크플로우

    brand direction

    앱의 첫인상이 긍정적일 수 있도록 식물도감에 가치를 더해주는 브랜딩 작업을 통해 정체성을 확립하고, 인테페이스의 가시성과 편의성을 살리는 방향으로 리뉴얼 디자인을 진행했습니다.

    01.

    사용자 편의를 고려한설명과 버튼 사이즈

    식물도감 메인화면

    식물도감의 주요검색기능을 쉽게 인지할수 있도록 홈화면에 설명 배치

    다양한 연령층의 사용자 편의를 위해 안드로이드 기준 48px에서 58px로 변경

    쉽게 버튼을 누룰 수 있도록 버튼 사이즈 UP!! 82px

    버튼사이즈

    02.

    쉽고 빠르게 식물을 찾을수 있도록검색방법의 다양화

    키워드검색

    자동완성 기능 & 키워드 검색

    사진촬영 검색

    사진촬영 검색

    앨범 이미지 검색

    앨범 이미지 검색

    Project Results

    프로젝트 진행 초반 회의를 거듭하며 계획을 잘 수립했고, 계획에 맞게 진행되어 작업 예상시간보다 빨리 완료되었습니다.그 덕분에 디테일 작업에 시간을 소요할 수 있었고 완성도를 높일 수 있었습니다.

    리뉴얼 진행과정

    앱 선정 및 분석 > 타깃조사 > 경쟁사 분석 > UX 비전 > 정보구조도 > 와이어프레임 > 프로토타입

    Bad

    • x선

      포인트 컬러가 밝아 가시성이 떨어지는 점 발견! 포인트 색상 채도를 낮춰서 가시성을 높여줌.

    • x선

      충분히 대화하며 작업을 진행했다고 생각했지만 프로젝트에 대한 이해도가 서로 달랐음! 서로 이해한 부분이 다르다는걸 알게되어 팀원 모두 다같이 내용을 한번 더 확인하고 진행.

    Good

    • v선

      식물도감 타깃 연령층을 고려한 UX 디자인 톤앤매너에 맞는 UI 디자인

    • v선

      식물도감의 브랜딩을 함께 진행하여 식물도감 아이덴티티 확립

    • v선

      팀원들간 서로 배려하며 프로젝트 완료

    Review

    밑줄

    타깃에 맞는 UX 디자인은 고려할 사항이 많아 어렵게 느껴졌습니다. 작업 후, 충분히 확인하고 사용해보면서 수정사항을 찾아 불편한 점을 개선하고, 수정작업을 두려워하지 않으면 더 좋은 결과를 만들 수 있다는 것을 배웠습니다.

    제가 기존에 하던 디자인과 UXUI 디자인은 사용자에게 원하는 정보를 효율적으로 전달해야 한다는 점은 같았으나 사용자의 편의성을 고려한다는 점에서 차이를 느꼈습니다. 보여지기만 하는 것이 아닌 실재 사용성이 반영이 된다고 생각하니 더 흥미롭게 느껴집니다. 좀 더 심플하고, 가시성을 고려한 디자인에 대해 생각하게 되었고 앞으로의 작업에 영향을 줄 것이라 기대하고 있습니다.

    uxui renewal design

    식물도감

    누구나 식물을 쉽고 친숙하게, 내 손안의 식물 도감이란 슬로건으로 궁금한 식물을 검색할 수 있는 어플입니다. 20대부터 50대이상까지 다양한 연령층이 사용함에 따라 가시성과 편의성에 중점을 두고 리뉴얼 디자인을 진행했습니다.

    PROJECT팀 프로젝트

    작업일정2023.05.03 ~ 2023.05.31

    KEYWORD#가시성 #편의성

    식물도감 보러가기
    • Skills
    • figma 공동 작업 / 프로토타입 제작 / 와이어 프레임 제작
    • illustration / gif / Editing picture
    • Tools
      • figma 로고
      • 포토샵 로고
      • 일러스트 로고