출석체크 통합 애플리케이션
CHECK MOA

app_icon

“ 매일 번거로운 출석체크를 한 번에 모아서 쉽게 할 수는 없을까? ”

출석체크  +  모으다  =  체크모아  →  CHECK MOA

splash_mockup_image

CHECK MOA(체크 모아)

‘Check Moa(체크 모아)’는 출석체크와 모으다의 합성어로 사용자가 사용하는 APP들을 연동하여 매일 하는 출석체크를 간편하게 하나의 APP으로 통합해 쉽게 할 수 있도록 한 출석체크 통합 애플리케이션입니다.

PLANNING

plan_line
1

APP을 사용하는 목적은 무엇인가요?
사용자가 매일 각각의 APP에 접속해야 하는
출석 체크의 번거로움을 줄일 수 있습니다.

2

어떤 사용자를 위한 APP인가요?
매일 출석 체크를 하면서 자주 까먹거나 번거로움을 느끼고
시간 단축이 필요한 사람들을 위한 APP입니다.

3

APP을 사용함으로 무엇을 얻을 수 있나요?
출석 체크의 번거로움을 줄이면서 알림을 설정할 수 있어
사용자는 매일 잊지 않고 간편하게 출석 체크를 할 수 있습니다.

4

기존 서비스와의 차별점은 무엇인가요?
사용자는 그 날 한 출석 체크를 한 눈에 볼 수 있고
출석 체크를 통해 모인 포인트나 적립금, 쿠폰 등을
함께 확인 할 수 있습니다.

5

모바일에 알맞은 서비스인가요?
출퇴근 시간이나 잠자기 전 모바일을 자주 사용하는
바쁜 현대인들을 위해 번거로움을 줄이면서
시간을 단축할 수 있습니다.

DESIGN DIRECTION

POSITIONING

positioning_map_bg check-moa_icon
l-point syrup liiv h-point clip ok cjone happy-point coocha gs-point touching toss beauty every-webtoon webtoon coupon-moa wi-point home-shopping-moa

DESIGN GUIDE

TYPOGRAPHY

나눔고딕
Nanum Gothic

  • STYLE
    Large Title
    Sub Title
    Body
    Button
    Footer

  • WEIGHT
    Bold
    Regular
    Regular
    Regular
    Light

  • UNIT
    24px
    18px
    16px
    14px
    12px

COLOR


  • R 255
    G 255
    B 255

    #ffffff


  • R 221
    G 221
    B 221

    #dddddd


  • R 190
    G 190
    B 190

    #bebebe


  • R 80
    G 80
    B 80

    #505050


  • R 40
    G 40
    B 40

    #282828


  • R 192
    G 0
    B 0

    #c00000

ICON

icon_image

GUIDE LINE

안드로이드 기준 Mdpi 표준 가이드를 기반으로
디자인은 스마트폰 화면 해상도 비율 ‘xxhdpi(Ratio3)를 기준으로 제작되었습니다.
이미지 실 해상도 1080*1920으로 제작하였습니다. (단위는 dp입니다.)

guide_line_image

INTERACTION

interaction_guide_image

LAUNCHER ICON

체크 모아(Check Moa)

Launcher Icon은 ‘Check Moa’의 ‘C’와 (출석)체크 표시(V)를 합쳐서 제작하였다. 완성된 모습을 시계의 모양을 연상시키기도 하는데, 이는 시간 절약을 할 수 있는 이 앱의 가장 큰 특징이자 장점을 보여주기도 한다. 색상은 체크 표시를 할 때 가장 흔히 사용하는 ‘Red’ 컬러로 하였다.

app_store_gif

MOCK-UP

KEY SERVICE

search_mockup_image point_mockup_image point_exchange_mockup_image calendar_mockup_image coupon_mockup_image
alram_mockup_image

ALRAM SERVICE
사용자는 원하는 시간대에 원하는 APP의 알람 설정을 할 수 있어
매일 잊지 않고 출석 체크를 할 수 있습니다.

ON / OFF 스위치

alram_mockup_line

새로운 APP 추가

alram_mockup_line
alram_mockup_line

설정한 Alram 정보

alram_mockup_line

원하는 시간 설정

USABILITY TEST

개요 및 목적
평소 출석 체크 서비스를 이용하는 사용자들이 이 APP을 사용할 때 기존에 사용하는 방식으로 출석 체크 서비스를 이용하는 것보다 해당 APP을 사용하는 것이 더욱 간편하고 만족도가 높다고 느껴지는지, 그리고 APP에서 제공하는 기능(알람, APP 통합 정보 제공 및 관리 기능 등)을 통해 원하는 결과를 얻을 수 있었는지에 대한 이해를 위해 테스트를 진행했습니다.

PROFILE

개인 이력

  • 이름
  • A
  • B
  • 나이
  • 19세
  • 23세
  • 컴퓨터 이해 정도
  • 주 사용 손
  • 오른손
  • 왼손
  • 학습 스타일
  • 직접적
  • 직접적
  • 최종 학력
  • 고졸
  • 대졸

컴퓨터 경험

  • 컴퓨터 사용 시간
  • 1-3시간
  • 1-3시간
  • 컴퓨터 사용 빈도
  • 매일
  • 매일
  • 사용 기종 및 장치
  • LG V20
  • iPhone XR
  • 사용 OS
  • Android
  • iOS

제품 경험

  • 비슷한 APP 사용 빈도
  • 일주일에 1회
  • 일주일에 3회
  • 수행한 과업 종류
  • 포인트 확인 및 이벤트 참여
  • 출석체크

직업 이력

  • 이전 직종
  • 없음
  • 쥬얼리 회사
  • 담당 업무
  • 학생
  • 사원

TASK

1. 사용자의 출석 체크 목록과 현황을 쉽게 확인할 수 있습니까?

task_bg
사용자 A
사용자 B

두 사용자 모두 한눈에 쉽게 확인할 수 있다고 답하였습니다.

2. 사용자가 원하는 다른 APP을 추가할 수 있습니까?

task_bg
사용자 A
사용자 B

두 사용자 모두 어렵지 않게 추가할 수 있다고 답하였습니다.

3. 화면 간의 이동이 간편합니까?

task_bg
사용자 A
사용자 B

두 사용자 모두 이동이 간편한 편이라고 답하였습니다.

4. 알람을 설정하고 편집할 수 있습니까?

task_bg
사용자 A
사용자 B

두 사용자 모두 알람 설정과 편집을 할 수 있다고 답하였습니다.

5. 마이페이지에서 사용자 정보를 확인 할 수 있습니까?

task_bg
사용자 A
사용자 B

두 사용자 모두 어렵지 않게 확인 할 수 있다고 답하였습니다.

prev_button next_button

HONEYCOMB

honeycomb_image
honeycomb_bg

Q1. 목적에 적합한
정보를 제공하는가?

Q2. 목적에 적합한
기능을 제공하는가?

honeycomb_bg

Q1. 사용법을 배울 필요
없이 사용하기 쉬운가?

Q2. 사용자의 실수를
줄이고 쉽게 극복하게
해주는가?

honeycomb_bg

Q1. 차별화된 경험을
주는가?

Q2. 감성적 측면에서
즐거움을 주는가?

honeycomb_bg

Q1. 단 한번에 쉽게
찾을 수 있는가?

Q2. 쉽게 찾을 수 있도록
가이드나 솔루션이
제공되는가?

honeycomb_bg

Q1. 움직임과 연동이
안정적인가?

Q2. 어떤 형태로든
에러가 없는가?

honeycomb_bg

Q1. 설정한 목표에
기여하고 있는가?

Q2. 브랜드, 아이덴티티의
가치가 포함되어 있는가

RESULT

  • Q1

  • Q2

result_image

사용자 A의 허니콤 차트 결과

“ 출석 체크가 필요한 APP을 한 번에 관리할 수 있는 부분이 매우 독창적이라고 생각하고 화면의 공간을 효율적으로 사용하였다. 하지만 쉽게 찾을 수 있도록 가이드나 솔루션이 제공되지 않는 점이 아쉽다. ”

result_image

사용자 B의 허니콤 차트 결과

“ 출석 체크와 알람 기능이 더해진 점이 다른 APP들과의 차별점이라고 생각한다. 또한 전체적인 레이아웃이 깔끔하고 컬러도 APP의 성격을 잘 보여주고 있다. ”

FINAL

테스트를 통해 ‘체크 모아(Check Moa)’는 ‘쉽게 찾을 수 있는가(Findable)’에 대한 부분에서 개선이 필요하다는 것을 알게 되었다. 따라서 개선 방향을 사용자가 쉽게 알 수 있도록 직관적인 아이콘이나 가이드를 제공하면서 확실한 표현을 하고 정보의 가독성과 전달성을 높이는 것으로 정하였다. 최종적으로 ‘체크 모아(Check Moa)’ 는 ‘APP 추가 페이지’와 쿠폰 페이지’, 그리고 ’포인트 페이지’와 ‘마이 페이지’의 사용성 개선을 위한 수정을 진행하였다.

1. 쉽게 알 수 있도록 직관적인 아이콘을 사용한다.

final_image
final_image
  • BEFORE
  • AFTER

2. 쉽게 알 수 있도록 명확하게 표현한다.

final_image
final_image
  • BEFORE
  • AFTER

3. 정보의 가독성을 높인다.

final_image
final_image
  • BEFORE
  • AFTER

4. 정보의 전달성을 높인다.

final_image
final_image
  • BEFORE
  • AFTER
prev_button next_button
show-case_mockup_image
app_icon

CHECK MOA
출석체크 통합 애플리케이션

KIM HA YOUNG

탑 버튼