Share
Sign In
👩🏻‍💻

Work

오늘의 앱 디자인
콘셉트 정하기 먼저 아트워크 디자인 작업을 정하기 전에 콘셉트를 정해야 했어요. 닥터나우는 의사선생님과 비대면 진료를 할 수 있을 뿐 아니라 약을 배달 받을 수 있는 온라인 의료 솔루션인 만큼 당시 닥터나우 앱 소개는 '원격진료부터 약 배송까지'라고 되어있었습니다. 하지만 앱 카드는 하나이기 때문에 닥터나우가 사람들에게 전하는 메시지를 '비대면 진료'에 집중할 것인지 '약 배달'에 집중할 것인지 정해야 했었고 쉽고 빠른 약 배달을 메인 카피로 정해 약 배달에 집중하는 것으로 결정했습니다. 또한 오늘의 앱에 선정된 여러 가지 서비스를 둘러본 결과 아트의 형태가 일러스트형과 사진형으로 나뉘고 있었습니다. 닥터나우는 당시 브랜드 사진이 없었기에 일러스트형으로 제작하기로 했습니다. 1차 시안 그리기 3일 동안 러프하게 5가지의 시안을 만들고 팀원들에게 의견을 구했습니다. (러프안이었기 때문에 5번의 경우 자세히 그리지 않았습니다.) 의견을 취합한 결과 디자인의 방향성이 정해졌어요. 원격의료라는게 모르는 사람이 들었을 때 딱딱하고, 어렵고, 생소하기 때문에 처음보는 사람이 보아도 이해하기 쉬어야 한다. 편안하고 따뜻하게 다가갈 수 있도록 사람 이미지를 넣자. 배달이라는 느낌을 확실히 주자
  • Y
    yiseo
웹 최적화하기
yaer: 2024 at: tripbtoz role: Product Design teammate: 1 PM, 1 FE, 1 BE, 1 PD 1. 어떤 문제가 있었는가? 시즌별로 url 규칙을 갖고 있으나, 다른 시즌 정보를 확인하려면 url 주소를 변경해야됐기 때문에 지난 시즌에 대한 명단을 url 주소 변경 없이 확인하기는 어려운 지점이 있었습니다. 랭킹 운영 지역 및 호텔의 참여 정보는 운영 국가가 늘어날수록 많아지다보니 결과 발표 화면에서 한 번에 불러들이는 데이터가 많아 로딩이 오래 걸렸습니다. 모바일 화면에서 랭킹 참여 정보 확인 시, 글자 길이에 따라 지역명/호텔명 또는 닉네임이 잘려서 노출되는 문제점이 있었습니다. 2. 고려해야 할 상황은? 신규 기능 개발은 최대한 배제하는 방향으로 가야했습니다. web 작업으로 PC / 모바일 모두 대응 할 수 있도록 반응형으로 제작해야 했습니다. 심미성, 가독성 고려한 디자인 필요했습니다. 시즌별 정보, 리그별 정보, 호텔 정보등 대량의 정보를 어떻게 잘 보여줄 수 있을지 고민이 필요했습니다. 모바일 환경에서 닉네임 및 참여 지역과 호텔의 이름이 짤리지 않도록 노출하는 방법에 대해 고민이 필요했습니다. 3. 어떻게 해결했는가?
  • Y
    yiseo
👍🏻
1
푸시 알림 UX 라이팅
yaer: 2023 at: tripbtoz role: product design teammate: only one 1. 어떤 문제가 있었는가? 1) 트립비토즈 UX 라이팅이 적용되지 않았음 트립비토즈 UX 라이팅 가이드가 있었음에도 불구하고 제목은 딱딱한 문체, 내용은 부드러운 문체를 혼합하여 사용하고있었습니다. 2) 제목과 내용이 중복되는 지점이 존재 제목과 내용이 똩같은 말을 하고 있어 공간을 비효율적으로 사용하고 중복된 내용을 전달하고 있었습니다. 2. 어떻게 해결했는가? 경제적인 공간 활용과 친절한 안내 1차 버전으로는 동사형 제목과 명사형 제목 두 가진 버전을 만들었고 사용자들의 피로감을 덜어주기 위해제목과 내용이 중복되지 않도록 작성했습니다. 트립캐시 소멸 안내의 경우 단순히 소멸된다는 딱딱한 안내를 넘어 혜택을 사용해보라는 배려심 넘치는 문구로 작성했습니다. 사용자에게 요구하는 메시지인 경우 명령조가 아닌 부탁의 어조를 사용해서 부담스럽지 않게 다가가려고 했습니다.
  • Y
    yiseo
👍🏼
1
디자인 토큰 학습하기
yaer: 2023 at: tripbtoz role: platform design teammate: only one 온보딩때 디자이너분들에게 설명했던 자료 중 일부입니다. 피그마에는 디자인 토큰을 관리할 수 있는 플러그인으로 ‘토큰 스튜디오’가 있습니다. 영어버전은 이해하기 어려운 지점이 있기 때문에 피그마 토큰 스튜디오 커뮤니티 파일을 번역해 공유했습니다. 👉🏻 피그마 커뮤니티 링크
  • Y
    yiseo
👍🏼👍🏻
2
MVP 고도화하기
yaer: 2022 at: doctornow role: design lead, product design, QA teammate: 1 PO, 1 FE, 1 BE, 1 PD 전담 의사란? 온라인 상에서의 주치의 서비스로 내가 주로 가는 병원이 있는 것처럼 진료가 맘에 들었던 의사선생님을 저장하여 꾸준히 진료받을 수 있도록 한 서비스입니다. 1. 한 사람으로만 출발했던 전담의사 MVP 진료 경험이 좋았던 분에게 계속 진료 받고 싶은 마음을 공략해 나만의 주치의라는 개념을 도입해 전담의사 MVP를 출시했습니다. 주된 아이디어는 한 명의 전담의사를 등록할 수 있게 하고 홈 화면에서 바로 전담 의사에게 진료를 볼 수 있도록 하며 오픈채팅방을 만들어 전담의사와 상담할 수 있는 창구를 만들어 주는 것이었습니다. 2. 어떤 문제가 있었는가? 🏢 회사 🧑🏻 사용자
  • Y
    yiseo
👍🏼👍🏻
2
마이데이터로 새로운 길 모색하기
yaer: 2022 at: doctornow role: design lead, product design, QA teammate: 1 PO, 1 FE, 1 BE, 1 PD 1. 실행하게된 배경은? 4차 산업혁명위원회가 진행한 ‘마이데이터 대국민 인식조사’에서 실생활에 가장 도움이 될 마이데이터 분야로 ‘건강·의료 분야가 1순위로 뽑힐 만큼 건강·의료 분야의 데이터 활용에 대한 국민적 관심과 기대가 높았습니다. 만보기를 시작으로 닥터나우 안에서 비대면 진료 이외에 마이데이터 사업을 시작을 본격화했고 헬스케어 스쿼드가 꾸려졌습니다. 해당 스쿼드의 미션은 건강에 관심 있는 사람들이 매일 들어오는 앱 중 하나가 되는 것이고 목표는 의료와의 연계를 통해 시너지를 내고 리텐션을 높이는 것이었습니다. 건강검진 스크래핑은 마이데이터 사업 중 하나입니다. 건강검진 기록은 건강·의료 분야에서 중요한 마이데이터이고 이것으로 비대면 진료와 무료 상담을 연계하여 활성 고객을 많이 확보할 수 있지 않을까 하는 기대에서 출발했습니다. 2. 선행 조사 먼저 유저의 건강검진 관리에 대한 실태 조사를 하기 위해 전화 인터뷰를 진행했습니다. 과반수의 사람이 건강검진 내역을 관리하고 있지만 대부분 병원에서 주는 서류로 그대로 보관하고 있었습니다. 그렇다 보니 제대로 된 관리가 되지 않은 상황이었고 전체 내용을 다 보기보다는 위험한 데이터 위주로 관리하고 있었습니다. 건강검진 내역을 모아 볼 수 있는 서비스에 대해 이용해 볼 의향이 있냐는 질문에 과반수의 사람이 긍정적인 대답을 했고 관리하지 않은 사람도 이용하고 싶다는 답변을 받았습니다. 건강검진 내역을 볼 수 있다고 했을 때 변화를 시각적으로 잘 볼 수 있었으면 좋다는 의견이 있었습니다. 그 다음, 이 인터뷰를 바탕으로 페이크 테스트를 실험했습니다. 건강검진 10년 치 내역 조회로 40대 이상의 사용자를 3,000원 미만의 CPI로 데려올 수 있음이 검증됐고 건강검진 내역 조회가 내 건강 탭에서 유의미한 결과를 가져올 수 있을 거라고 기대했습니다. 3. 어떤 목표를 세웠는지? 인터뷰를 바탕으로 문제점을 도출하고 목표를 설정했습니다.
  • Y
    yiseo
최소한으로 앱 삭제 개선하기
yaer: 2022 at: doctornow role: design lead, product design, QA teammate: 1 PO, 1 FE, 1 BE, 1 PD 1. 어떤 문제가 있었는가? 7월을 기점으로 안드로이드 사용자를 대상으로 구글 플레이 스토어 리뷰에서 ‘상단바에서 만보기를 끄고 싶다’, ’만보기 권한 어떻게 설정하나요.’ ‘걸음 수 끄는 옵션 만들어주세요.’ 등의 만보기 기능 개선에 대한 리뷰가 지속해서 올라왔습니다. 2. 그것이 왜 문제였는가? 부정적인 리뷰는 얼마든지 올라올 수 있습니다. 하지만 만보기 때문에 앱을 삭제한다는 리뷰가 간간히 올라왔고 리뷰를 남기는 사람 이외에 하루에 2천 명 정도씩 앱 삭제가 이루어지고 있었기 때문에 당시 굉장히 시급한 문제로 떠올랐습니다. 3. 이 문제를 지금 해결하는 것이 왜 중요한가? 이 당시 전사 목표는 MAU와 리텐션을 높이는 것이었습니다. 만보기로 추측되는 앱 삭제는 목표에 방해가 되기 때문에 시급히 처리해야 했습니다.
  • Y
    yiseo
시스템으로 디자인 통일성 지키기
year: 2022 at: doctornow role: platform design teammate: 4 PD 1. 시작하게 된 배경은? 제품 개선이 동시 다발적으로 이루어지고 주기가 빠르다보니 디자인 리소스를 자주 변경해야 하는 상황이었습니다. 표준 규칙이 존재하지 않아 매번 다른 요소가 생성되다 보니 UI의 일관성이 떨어졌습니다. 디자인 작업 만큼이나 싱크를 맞추는 데 상당한 시간이 허비되고 있었습니다. 앞서 제작된 그리고 제작한 UI 요소들의 관리가 제대로 이루어지고 있지 않다보니 관리하는데 어려움이 있었습니다. 이렇다 보니 개발자는 매번 새로운 코드를 생성하게 되어 비효율적으로 개발하고 있었습니다. 2. 시스템을 만들어야 하는 이유 디자인 시스템을 만들어놓았을 때의 이점은 상당합니다. 반복되는 컴포넌트 제작에 소비되는 시간을 아껴서 사용자에게 더 집중할 기회를 주고 제품의 일관성을 유지할 수 있도록 도와줍니다. 디자인 시스템은 그 명칭 때문에 디자이너들을 위한 시스템이라고 오해될 수 있지만 개발자 입장에서도 모든 UI 요소에 대한 완전한 참조 가이드를 제공받기 때문에 개발자에게 도움이 될 수 있습니다. 3. 우리의 목표는?
  • Y
    yiseo
닥터나우 보이스앤톤 가이드
year: 2022 at: doctornow role: design lead, platform design, project lead teammate: pnly one 1. 실행하게된 배경은? 닥터나우의 앱과 웹 모든 곳에서 일관되지 않은 보이스앤톤이 사용자에게 전달되고 있었습니다. 또한 제품을 만들 때마나 글쓰기에 관한 규칙이 없다보니 고민하는 시간에 리소스가 많이 들어갔습니다. 2. 그것이 왜 문제였는지? 언어적 요소와 비언어적 요소가 일관되고 상호보완적일 때, 사용자는 서비스의 성격에 대한 일관된 그림을 그릴 수 있기 때문에 인터페이스가 똑똑하고 재미있으며 설득력 있다고 느낍니다. 또한, 서비스의 메시지를 더 잘 이해하고신뢰하며 서비스가 요구하는 행동을 하게 됩니다. 하지만 앞선 배경에서 볼 수 있듯이 닥터나우는 유저에게 격식을 차릴 때도 있고 그렇지 않을 때도 있습니다. 또한 한 메시지 안에서도 불협화음이 일어나고 있었습니다. 이처럼 닥터나우에서는 보이스앤톤과 UX writing에 대한 명확한 기준이 없었고 문구를 작성할 때 개인의 기준에 맞춰 작성하다 보니 일관성이 떨어졌습니다. 사람의 건강을 책임지는 헬스케어 플랫폼에서의 신뢰감을 주는 것은 기본자세입니다. 일관된 문구의 명문화를 통해 고객 만족도를 높일 필요가 있었습니다. 3. 목표는 무엇이었는지? 모든 프로젝트를 진행할 때 목표가 가장 중요하다고 생각합니다. 명확히 설정한 목표를 통해 프로젝트의 방향을 정해 나아가고, 선택이 필요한 순간에 빠른 판단을 할 수 있기 때문입니다. 아래와 같이 다음과 같은 목표를 정했습니다. 일관된 마이크로카피를 작성할 수 있도록 해주는 보이스앤톤 디자인을 정의한다. 이를 통해 모든 채널에서 유저에게 일관된 메시지와 브랜드 경험을 제공한다.
  • Y
    yiseo
예약솔루션 디자인 템플릿
year: 2021 at: tablemanager role: project lead, platform design teammate: only one 1. 어떤 문제가 있었는가? 테이블매니저는 자사의 예약 솔루션을 여러 파트너사와 제휴하여 서비스하고 있었습니다. 하지만 → 뚜렷한 기준이 없었기에 매 번 새로운 디자인 결과물 도출 → 원본을 각자의 해석으로 개발하여 효율성 하락 이라는 문제점을 가지고 있었고, 코어 가이드의 부채와 커뮤니케이션 비용이 떨어지지 않아 물 빠진 독에 한정된 리소스만 들이붓는 상황이었습니다. 따라서 디자인 가이드를 정립하여 개발 및 디자인 리소스를 줄이고 일관성있는 UI를 전달하고자 했습니다. 2. 어떤 방법을 사용했는가? 가이드 체계는 Material Guidelines, Adobe International design을 참고했으며, 예약 시스템 UI의 모든 요소들을 해부하여 아래 이미지와 같은 구조도로 표현할 수 있었습니다. 화면의 가장 작은 단위를 foundation, 각기 다른 foundation이 모아진 Elements, 하나 이상의 Elements로 이루어진 Modules을 합쳐component로 규정하였습니다. 3. 어떻게 해결했는가? ① 아토믹 시스템으로 체계화하기 foundation : Color & Typography 다수의 파트너사와 연동하기 때문에 이를 돕기 위해 미리 제작된 UI와 컬러 팔레트가 필요합니다.
  • Y
    yiseo