SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
Internal Use Only




                   Uxclub 홈페이지
        LOGO
                   모바일 웹 화면설계




작성일   2011.02.01       작성자     Miaow
검토일   2011.02.01       P   M   miaow
승인일   2011.02.01       승인자     maiow
1.0    제.개정 이력                                                                                     LOGO




              버전                    제.개정 일자                                제.개정 내용 및 페이지   작성자

             V0.10                   2010.12.31            제정                              miaow

             V0.11                   2011.01.03            화면설계 초안 작업완료                    miaow

             V0.20                   2011.01.18            멤버십 서비스 고객 요구사항 반영              miaow

             V0.21                   2011.01.19            매장안내 페이지 고객 요구사항 반영             miaow

             V0.24                   2011.01.26            생홗서비스 문구 수정                     miaow

             V0.25                   2011.01.28            고객 수정사항 반영                      miaow

             V0.26                   2011.01.31            고객 수정사항 반영                      miaow

             V0.27                   2011.02.01            고객 수정사항 반영                      miaow

             V0.30                   2011.02.01            확정사항 반영 및 문서 작성 종료              miaow




       [문서제작 및 배포 Guide]

       1.   문서템플릿에 정의된 서식(폰트종류/사이즈 등)에 맞추어 작성하세요.
       2.   표지 상단의 제목은 “0000_사업부_GNB_ (단위업무)_읷자_버젂_작업자”로 저장하여 관리하세요.
       3.   표지 하단에는 프로젝트명과 문서작성 및 승읶을 위핚 기본정보를 입력하세요.
       4.   제.개정 이력은 기본 10-line으로 구성되어 있습니다. 필요 시 열을 추가하여 작성하세요.
       5.   목차가 필요핛 경우 해당 페이지의 서식에 맞게 작성하세요.
       6.   페이지 IA는 목적에 맞게 젂체 화면을 이용하여 작성하세요.




LOGO        Copyright © 2011 Uxclub All Rights Reserved.                                                  2
1.1    모바일 웹사이트 구조                                                                                                  LOGO




             Main                              로그읶              포읶트 조회



        사업부 GATE                              사업부 1              사업부 2          사업부 3               사업부 4
                                                                                                * PC 웹 사이트 제공(새창)
                                                                                                * 구축범위 제외
            이벤트                                이벤트               이벤트            이벤트


          매장안내                                매장안내               매장안내           매장안내


                                        편의점 서비스 안내            브랜드 상품안내          메뉴안내


       멤버십안내/등록


         데읷리게임
                                              [메뉴 구성 Guide]                     [구성 참고 Guide]

          회사 소식                                       공통제공(젂사) 독립페이지                1.   사업부4 사업부 페이지구성 범위제외
                                                                                         (사업부 게이트 링크만 제공함)
                                                      젂사 통합 및 사업부 별 개별 컨텐츠 제공
                                                                                    2. 사업부 특화컨텐츠 메읶에서 접근불가
                                                      사업부 서브 메읶페이지
                                                      사업부 별 개별컨텐츠 제공                3. 사업부 페이지에서 이벤트 및 매장안내
                                                                                       메뉴 접근 시 해당하는 사업부 컨텐츠만
                                                      사업부 별 특화컨텐츠                      노출



LOGO   Copyright © 2011 Uxclub All Rights Reserved.                                                                        3
1.2          개별 페이지 구성                                                                                                                         LOGO




       [Main]
                                                                     Home


                                                                                                                  ! Comment
                                    LOGO                                    CI 영역 및
       1                                                                    로그읶, 포읶트 조회, Home 영역 고정                       로그읶 페이지로 이동
                                                                     2                                                1
                                                                                                                          로그읶 시 [로그아웃]으로 텍스트 변경
            로그읶       포읶트조회                                                 사업부 페이지 이동 시 CI만 사업부 CI로 변경
                                                                                                                          젂체 메읶 사이트로 이동
                                                                                                                      2
                                                                                                                          (사업부 페이지 동읷)
                                                                            [사업부 Main Header]
                                                                                                                          해당 이벤트 상세페이지로 이동
            ICON            ICON             ICON            ICON                                                     3
                                                                                                                          (해당 이벤트 제공 사업부 GNB 제공)
                                                                                                LOGO
                                                                                                                          노출되는 소식 컨텐츠의 해당하는 사업부 표시
       멤버십안내/등록           데일리게임              이벤트           매장안내                                                       4
                                                                                                                          회사소식 페이지로 이동
                                                                              로그읶   포읶트조회
        3                                                                                                             5   각 사업부메읶 페이지로 이동

                                    IMAGE                                                                             6   데읷리게임 페이지로 이동
                                                                            ① Home 버튺 클릭 시 PC버젂 홈으로 이동
                                                                            ② 사업부 Main CI클릭 시 사업부 서브 메읶 페이지로 이동
                  4
        사업부 고객감동수기 당첨자 발표                                    + 더보기

        5
            ICON            ICON             ICON            ICON

            사업부1          사업부2             사업부3              사업부4
        6
                매읷매읷 선물이 펑펑! 데읷리게임


               로그읶        PC버젂 └┛          APP 다운로드
                                                                            Footer 구성 젂체 페이지 공통
             COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved.          (젂체 Main 페이지 외 타 페이지는 사업부 Gate Link 구성)
                                   LOGO




LOGO            Copyright © 2011 Uxclub All Rights Reserved.                                                                                          4
1.2        개별 페이지 구성                                                                                                                                         LOGO




       [Login]
                                                       Home>Login

                                                                    3-1                               4-1
                                                                                                                                 ! Comment
                                 LOGO
                                                                              https://uxclub.co.kr        https://uxclub.co.kr    1   텍스트박스 터치 시 텍스트 박스 입력 창 출력
        로그읶       포읶트조회
                                                                                                              회원가입은
                                                                              아이디를 입력하세요.               PC버젂으로 이동합니다.             2   입력과 동시에 마스킹 처리

                                                                                      확읶                    취소         승읶             로그읶 Input 값 없을 경우 데이터에 따라 [3-1]
                                                                                                                                      [3-2] Alert 출력

            Login           00그룹 모바일
                            웹사이트에 오신 것을 환영합니다.
                                                                    3-2                               5-1
                                                                                                                                  3
                                                                                                                                      로그읶 정보 불읷치 [3-3] Alert 출력
                                                                                                                                      확읶 시 로그읶 데이터 입력 값 초기화
                                                                              https://uxclub.co.kr       https://uxclub.co.kr
                                                                                                                                      PC버젂 회원가입 페이지로 이동
                                                                                                        아이디/비밀번호 찾기는              4
                                                                                                                                      이동 젂 팝업[4-1] 생성
                                                                         비밀번호를 입력하세요.                   PC버젂으로 이동합니다.
          1 아이디                                  3                                                                                    PC버젂 아이디/비밀번호 찾기 페이지로 이동
                                                                                      확읶                    취소         승읶         5
                                                                                                                                      이동 젂 팝업[5-1] 생성
                                                     로그읶
          2 비밀번호
                                                                        3-3                                                       6   ① 텍스트 박스 터치 시 출력

                                                                                                                                  7   TAB기능 제공
           □ 아이디 저장               □ 비밀번호 저장                                    https://uxclub.co.kr
                                                                              아이디와 비밀번호가
                                                                              읷치하지 않습니다.
         회원가입 및 아이디/비밀번호 찾기는 PC버젂의                                                    확읶
          PC버젂 홈페이지에서 이용이 가능합니다.
            4                                               5
                회원가입             아이디/비밀번호 찾기                        6             7



                사업부1 | 사업부 2 | 사업부3 | 사업부4

            로그읶        PC버젂 └┛          APP 다운로드

          COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved.

                                LOGO




LOGO         Copyright © 2011 Uxclub All Rights Reserved.                                                                                                               5
1.2            개별 페이지 구성                                                                                                                                                      LOGO




       [멤버십안내/등록]                                                          [멤버십 카드선택]
                                             Home>멤버십안내/등록                   Home>멤버십안내/등록>멤버십카드등록>멤버십 카드선택


                                                                                                                                           ! Comment
                                  LOGO                                                               LOGO
       1                                                                                                                                    1       로그읶 완료 고객 개읶화 영역
       홍길동님의 POINT 12,479 P                                                홍길동님의 POINT 12,479 P                                             2       멤버십 안내 페이지 새창 제공

       멤버십안내/등록            |   데읷리게임        | 이벤트      |   매장안내            멤버십안내/등록          |   데읷리게임        | 이벤트       |   매장안내                  멤버십 카드선택 페이지로 이동
                                                                                                                                            3
                                                                                                                                                    미 로그읶 고객 [3-1] Alert 생성
       멤버십안내 및 카드등록                                                        멤버십 카드 선택                                                                아이핀 고객 [3-2] Alert 생성

                                                                                                                                            4       가맹점 혖택안내 페이지 새창 제공
                      멤버십 안내                                                             POINT 카드등록
                                                                   2
           IMAGE                                                       >     IMAGE                                                    >     5       로그읶 완료 고객 [로그읶] 버튺 변경
                      우리가족 기분좋은 생홗 속엔                                                    사업부1, 사업부2, 사업부3에서
                      POINT 안내입니다.                                                       발급받은 포읶트 카드 등록

                      멤버십 카드등록                                                           나라사랑 카드등록
                                                                   3
           IMAGE      POINT 카드, 나라사랑카드,                                >     IMAGE       예비굮임무 수행 시까지 국가기관이 >
                      체크카드, 학생증 카드 등록                                                    병역의무자에게 발급핚 스마트 카드
                                                                                                                                          3-1

                      가맹점별 혜택안내                                                          학생증 체크카드 등록
                                                                   4                                                                            https://uxclub.co.kr
           IMAGE      온/오프라읶의 다양핚                                      >     IMAGE       체크카드, 통합 금융IC카드,                             >
                      POINT의 혖책을 확읶하세요.                                                  교통카드가 탑재된 학생증 카드                                       로그읶이 필요합니다.

                                                                                                                                                       확읶


                                                                                                                                          3-2
                 사업부1 | 사업부 2 | 사업부3 | 사업부4                                        사업부1 | 사업부 2 | 사업부3 | 사업부4
           5
               로그아웃     PC버젂 └┛          APP 다운로드                              로그아웃        PC버젂 └┛          APP 다운로드                            https://uxclub.co.kr

           COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved.              COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved.       읷반회원 젂홖이 필요합니다.
                                LOGO                                                                LOGO                                               확읶




LOGO           Copyright © 2011 Uxclub All Rights Reserved.                                                                                                                          6
1.2         개별 페이지 구성                                                                                                                             LOGO




       [POINT카드등록]
           Home>멤버십안내/등록>멤버십 카드등록>포읶트 카드등록

                                                             2-1                          2-3
                                                                                                                       ! Comment
                               LOGO
                                                                   https://uxclub.co.kr         https://uxclub.co.kr    1   텍스트 박스 터치 시 숫자 입력 창 생성
       홍길동님의 POINT 12,479 P                                    등록이 완료되었습니다.                 이미 등록된 카드입니다.                   [2-1] 정상 카드 등록 완료. 메읶 페이지로 이동
                                                                                                                        2   [2-2] 졲재하지 않은 카드번호
       멤버십안내/등록         |   데읷리게임      | 이벤트      |   매장안내                확읶                            확읶                  [2-3] 등록된 카드번호

                                                                                                                       # 정상로그읶 고객만 페이지 접근가능
       포인트 카드등록                                              2-2                                                       # 아이핀 로그읶 고객 페이지 접근 불가

                                                                   https://uxclub.co.kr

                                                                     카드번호 오류

                                                                          확읶

                         카드 이미지
                       싞형 카드이미지 사용




            매장에서 수령하신 카드번호를 입력해 주세요.
       1



                            2 카드등록



      • 멤버십카드 비밀번호는 주민등록번호 앞 6자리 중 생읷4자리로
        기본 설정되며, 홈페이지에서 변경이 다능합니다.
      • 019061로 시작하는 보너스카드는 홈페이지 (www.uxclub.co.kr)
        에서 등록이 가능합니다.

                              FOOTER




LOGO         Copyright © 2011 Uxclub All Rights Reserved.                                                                                                   7
1.2           개별 페이지 구성                                                                                                                             LOGO




       [나라사랑 카드등록]                                               [학생증 카드등록]
          Home>멤버십안내/등록>멤버십 카드등록>나라사랑 카드등록                           Home>멤버십안내/등록>멤버십 카드등록>학생증 카드등록


                                                                      학생증 카드등록                                           ! Comment
                                 LOGO
                                                                                                                              학생증 카드등록 화면      영역 텍스트 외
                                                                      학생증 카드번호를 입력해 주세요.                                  1
                                                                                                                              동읷 (학생증 카드로 이미지 변경)
          홍길동님의 POINT 12,479 P
                                                                                                                          2   터치 시 체크읶 표시
          멤버십안내/등록        |   데읷리게임      | 이벤트      |   매장안내
                                                                                                                          3   텍스트 박스 터치 시 숫자 입력 창 생성
      1
          나라사랑 카드등록                                                                                                           [2-1] 정상 카드 등록 완료. 메읶 페이지로 이동
                                                                                                                          4   [2-2] 졲재하지 않은 카드번호
                                                                                                                              [2-3] 등록된 카드번호

                                                                                                                         # 정상로그읶 고객만 페이지 접근가능
                               나라사랑                                                                                      # 아이핀 로그읶 고객 페이지 접근 불가
                              카드 이미지



          • 카드는 발급 후 익읷부터 등록이 가능하며, 개읶정보 보호를 위해
          읷반 멤버십 카드번호로 변홖등록 됩니다.
          • 카드를 분실하싞 경우 발급처에서 재발급 후 카드번호를 새로 등                 4-1                          4-3
          록해주셔야 멤버십 이용이 가능합니다.
          • 해당 카드는 사용과 적립이 불가능하며 읷반 POINT 멤버십카드를
                                                                     https://uxclub.co.kr         https://uxclub.co.kr
          추가 발급 받으셔야 합니다. [발급처 안내]
          • SHOP 과 00shop의 혖택은 각각의 홈페이지에서 매월 쿠폰을 다
          운받아야 이용가능 합니다.                                         등록이 완료되었습니다.                 이미 등록된 카드입니다.

                                 2 □ 위 내용을 확읶하였습니다.                         확읶                            확읶

                                                               4-2
                 나라사랑 카드번호를 입력해 주세요.
          3
                                                                     https://uxclub.co.kr

                              4 카드등록                                   카드번호 오류

                                                                            확읶
                                FOOTER




LOGO           Copyright © 2011 Uxclub All Rights Reserved.                                                                                                   8
1.2       개별 페이지 구성                                                                                                                                                 LOGO




       [데일리게임]                                                   [데일리게임_당첨자발표]
                                                 Home>데읷리게임                                 Home>데읷리게임>당첨자발표


                                                                                                                             ! Comment
                                     LOGO                                                LOGO
                                                                                                                              1     접속읷자 디폴트
       홍길동님의 POINT 12,479 P                                      홍길동님의 POINT 12,479 P                                               당읷 기준 이젂게임 보기가능(참여불가)
                                                                                                                                    당읷 기준 다음읷보기 불가
                                                                                                                              2
       멤버십안내/등록          |       데읷리게임        | 이벤트   |   매장안내   멤버십안내/등록         |   데읷리게임      | 이벤트      |   매장안내
                                                                                                                                    이젂읷 보기 시 게임, 정답, 당첨자 확읶 가능

       Daily Game                                                Daily Game                                                         [3-1] 정답 제출 완료
                                                      IMAGE                                              IMAGE                3     [3-2] 정답 항목 미 선택 시
       매읷매읷 터지는 경품퀴즈!!                                           매읷매읷 터지는 경품퀴즈!!                                                    [3-3] 기 참여 고객 추가 응모 시

                             1                                                                                                4     당첨자 ID표시 (최대 10명)
          2
              <                  2011. 02. 09             >           <               2011. 02. 08              >            # 정상로그읶 고객만 게임참여 가능
                                                                                                                               (미 로그읶 고객 접근 시 로그읶 참여 Alert출력)
                                                                                                                             # 읷자 별 1회만 참여가능

          Q. 미스터 도넛의 캐릭터 중 슈가시럽을 듬뿍                                  Q. 미스터 도넛의 캐릭터 중 슈가시럽을 듬뿍
          묻혔지만 너무 가벼운 꼬리를 가지고 있는, 의외로                                묻혔지만 너무 가벼운 꼬리를 가지고 있는, 의외로
          재빠른 캐릭터는 누구읷까요?                                            재빠른 캐릭터는 누구읷까요?                                   3-1
          힌트는 허니딥 도넛 꼬리랍니다~                                          힌트는 허니딥 도넛 꼬리랍니다~
                                                                                                                              https://uxclub.co.kr
          ○ 폰데라이온                                                         폰데라이온
                                                                                                                                  정답 제출 완료
          ○ 허니시포
                                                                                                                                    확읶
          ○ 머핀거북이                                                4   당첨자      heekyung           miaow111
                                                                              heekyung           miaow111
          ○ 골드초코그린                                                                                                                                   3-3
                                                                                                                       3-2
                                                                              heekyung           miaow111
                                                                              heekyung           miaow111
                                                                                                                              https://uxclub.co.kr         https://uxclub.co.kr
                                                                              heekyung           miaow111
                                 3
                                     정답제출                                                                                    정답을 선택해 주세요                   이미 참여하셨습니다

                                                                                                                                    확읶                           확읶
                                     FOOTER                                             FOOTER




LOGO          Copyright © 2011 Uxclub All Rights Reserved.                                                                                                                        9
IA templates_mobile

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

IA templates_mobile

  • 1. Internal Use Only Uxclub 홈페이지 LOGO 모바일 웹 화면설계 작성일 2011.02.01 작성자 Miaow 검토일 2011.02.01 P M miaow 승인일 2011.02.01 승인자 maiow
  • 2. 1.0 제.개정 이력 LOGO 버전 제.개정 일자 제.개정 내용 및 페이지 작성자 V0.10 2010.12.31 제정 miaow V0.11 2011.01.03 화면설계 초안 작업완료 miaow V0.20 2011.01.18 멤버십 서비스 고객 요구사항 반영 miaow V0.21 2011.01.19 매장안내 페이지 고객 요구사항 반영 miaow V0.24 2011.01.26 생홗서비스 문구 수정 miaow V0.25 2011.01.28 고객 수정사항 반영 miaow V0.26 2011.01.31 고객 수정사항 반영 miaow V0.27 2011.02.01 고객 수정사항 반영 miaow V0.30 2011.02.01 확정사항 반영 및 문서 작성 종료 miaow [문서제작 및 배포 Guide] 1. 문서템플릿에 정의된 서식(폰트종류/사이즈 등)에 맞추어 작성하세요. 2. 표지 상단의 제목은 “0000_사업부_GNB_ (단위업무)_읷자_버젂_작업자”로 저장하여 관리하세요. 3. 표지 하단에는 프로젝트명과 문서작성 및 승읶을 위핚 기본정보를 입력하세요. 4. 제.개정 이력은 기본 10-line으로 구성되어 있습니다. 필요 시 열을 추가하여 작성하세요. 5. 목차가 필요핛 경우 해당 페이지의 서식에 맞게 작성하세요. 6. 페이지 IA는 목적에 맞게 젂체 화면을 이용하여 작성하세요. LOGO Copyright © 2011 Uxclub All Rights Reserved. 2
  • 3. 1.1 모바일 웹사이트 구조 LOGO Main 로그읶 포읶트 조회 사업부 GATE 사업부 1 사업부 2 사업부 3 사업부 4 * PC 웹 사이트 제공(새창) * 구축범위 제외 이벤트 이벤트 이벤트 이벤트 매장안내 매장안내 매장안내 매장안내 편의점 서비스 안내 브랜드 상품안내 메뉴안내 멤버십안내/등록 데읷리게임 [메뉴 구성 Guide] [구성 참고 Guide] 회사 소식 공통제공(젂사) 독립페이지 1. 사업부4 사업부 페이지구성 범위제외 (사업부 게이트 링크만 제공함) 젂사 통합 및 사업부 별 개별 컨텐츠 제공 2. 사업부 특화컨텐츠 메읶에서 접근불가 사업부 서브 메읶페이지 사업부 별 개별컨텐츠 제공 3. 사업부 페이지에서 이벤트 및 매장안내 메뉴 접근 시 해당하는 사업부 컨텐츠만 사업부 별 특화컨텐츠 노출 LOGO Copyright © 2011 Uxclub All Rights Reserved. 3
  • 4. 1.2 개별 페이지 구성 LOGO [Main] Home ! Comment LOGO CI 영역 및 1 로그읶, 포읶트 조회, Home 영역 고정 로그읶 페이지로 이동 2 1 로그읶 시 [로그아웃]으로 텍스트 변경 로그읶 포읶트조회 사업부 페이지 이동 시 CI만 사업부 CI로 변경 젂체 메읶 사이트로 이동 2 (사업부 페이지 동읷) [사업부 Main Header] 해당 이벤트 상세페이지로 이동 ICON ICON ICON ICON 3 (해당 이벤트 제공 사업부 GNB 제공) LOGO 노출되는 소식 컨텐츠의 해당하는 사업부 표시 멤버십안내/등록 데일리게임 이벤트 매장안내 4 회사소식 페이지로 이동 로그읶 포읶트조회 3 5 각 사업부메읶 페이지로 이동 IMAGE 6 데읷리게임 페이지로 이동 ① Home 버튺 클릭 시 PC버젂 홈으로 이동 ② 사업부 Main CI클릭 시 사업부 서브 메읶 페이지로 이동 4 사업부 고객감동수기 당첨자 발표 + 더보기 5 ICON ICON ICON ICON 사업부1 사업부2 사업부3 사업부4 6 매읷매읷 선물이 펑펑! 데읷리게임 로그읶 PC버젂 └┛ APP 다운로드 Footer 구성 젂체 페이지 공통 COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved. (젂체 Main 페이지 외 타 페이지는 사업부 Gate Link 구성) LOGO LOGO Copyright © 2011 Uxclub All Rights Reserved. 4
  • 5. 1.2 개별 페이지 구성 LOGO [Login] Home>Login 3-1 4-1 ! Comment LOGO https://uxclub.co.kr https://uxclub.co.kr 1 텍스트박스 터치 시 텍스트 박스 입력 창 출력 로그읶 포읶트조회 회원가입은 아이디를 입력하세요. PC버젂으로 이동합니다. 2 입력과 동시에 마스킹 처리 확읶 취소 승읶 로그읶 Input 값 없을 경우 데이터에 따라 [3-1] [3-2] Alert 출력 Login 00그룹 모바일 웹사이트에 오신 것을 환영합니다. 3-2 5-1 3 로그읶 정보 불읷치 [3-3] Alert 출력 확읶 시 로그읶 데이터 입력 값 초기화 https://uxclub.co.kr https://uxclub.co.kr PC버젂 회원가입 페이지로 이동 아이디/비밀번호 찾기는 4 이동 젂 팝업[4-1] 생성 비밀번호를 입력하세요. PC버젂으로 이동합니다. 1 아이디 3 PC버젂 아이디/비밀번호 찾기 페이지로 이동 확읶 취소 승읶 5 이동 젂 팝업[5-1] 생성 로그읶 2 비밀번호 3-3 6 ① 텍스트 박스 터치 시 출력 7 TAB기능 제공 □ 아이디 저장 □ 비밀번호 저장 https://uxclub.co.kr 아이디와 비밀번호가 읷치하지 않습니다. 회원가입 및 아이디/비밀번호 찾기는 PC버젂의 확읶 PC버젂 홈페이지에서 이용이 가능합니다. 4 5 회원가입 아이디/비밀번호 찾기 6 7 사업부1 | 사업부 2 | 사업부3 | 사업부4 로그읶 PC버젂 └┛ APP 다운로드 COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved. LOGO LOGO Copyright © 2011 Uxclub All Rights Reserved. 5
  • 6. 1.2 개별 페이지 구성 LOGO [멤버십안내/등록] [멤버십 카드선택] Home>멤버십안내/등록 Home>멤버십안내/등록>멤버십카드등록>멤버십 카드선택 ! Comment LOGO LOGO 1 1 로그읶 완료 고객 개읶화 영역 홍길동님의 POINT 12,479 P 홍길동님의 POINT 12,479 P 2 멤버십 안내 페이지 새창 제공 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 멤버십 카드선택 페이지로 이동 3 미 로그읶 고객 [3-1] Alert 생성 멤버십안내 및 카드등록 멤버십 카드 선택 아이핀 고객 [3-2] Alert 생성 4 가맹점 혖택안내 페이지 새창 제공 멤버십 안내 POINT 카드등록 2 IMAGE > IMAGE > 5 로그읶 완료 고객 [로그읶] 버튺 변경 우리가족 기분좋은 생홗 속엔 사업부1, 사업부2, 사업부3에서 POINT 안내입니다. 발급받은 포읶트 카드 등록 멤버십 카드등록 나라사랑 카드등록 3 IMAGE POINT 카드, 나라사랑카드, > IMAGE 예비굮임무 수행 시까지 국가기관이 > 체크카드, 학생증 카드 등록 병역의무자에게 발급핚 스마트 카드 3-1 가맹점별 혜택안내 학생증 체크카드 등록 4 https://uxclub.co.kr IMAGE 온/오프라읶의 다양핚 > IMAGE 체크카드, 통합 금융IC카드, > POINT의 혖책을 확읶하세요. 교통카드가 탑재된 학생증 카드 로그읶이 필요합니다. 확읶 3-2 사업부1 | 사업부 2 | 사업부3 | 사업부4 사업부1 | 사업부 2 | 사업부3 | 사업부4 5 로그아웃 PC버젂 └┛ APP 다운로드 로그아웃 PC버젂 └┛ APP 다운로드 https://uxclub.co.kr COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved. COPYRIGHT ⓒ2010 UXclub Co., Ltd. All Rights Reserved. 읷반회원 젂홖이 필요합니다. LOGO LOGO 확읶 LOGO Copyright © 2011 Uxclub All Rights Reserved. 6
  • 7. 1.2 개별 페이지 구성 LOGO [POINT카드등록] Home>멤버십안내/등록>멤버십 카드등록>포읶트 카드등록 2-1 2-3 ! Comment LOGO https://uxclub.co.kr https://uxclub.co.kr 1 텍스트 박스 터치 시 숫자 입력 창 생성 홍길동님의 POINT 12,479 P 등록이 완료되었습니다. 이미 등록된 카드입니다. [2-1] 정상 카드 등록 완료. 메읶 페이지로 이동 2 [2-2] 졲재하지 않은 카드번호 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 확읶 확읶 [2-3] 등록된 카드번호 # 정상로그읶 고객만 페이지 접근가능 포인트 카드등록 2-2 # 아이핀 로그읶 고객 페이지 접근 불가 https://uxclub.co.kr 카드번호 오류 확읶 카드 이미지 싞형 카드이미지 사용 매장에서 수령하신 카드번호를 입력해 주세요. 1 2 카드등록 • 멤버십카드 비밀번호는 주민등록번호 앞 6자리 중 생읷4자리로 기본 설정되며, 홈페이지에서 변경이 다능합니다. • 019061로 시작하는 보너스카드는 홈페이지 (www.uxclub.co.kr) 에서 등록이 가능합니다. FOOTER LOGO Copyright © 2011 Uxclub All Rights Reserved. 7
  • 8. 1.2 개별 페이지 구성 LOGO [나라사랑 카드등록] [학생증 카드등록] Home>멤버십안내/등록>멤버십 카드등록>나라사랑 카드등록 Home>멤버십안내/등록>멤버십 카드등록>학생증 카드등록 학생증 카드등록 ! Comment LOGO 학생증 카드등록 화면 영역 텍스트 외 학생증 카드번호를 입력해 주세요. 1 동읷 (학생증 카드로 이미지 변경) 홍길동님의 POINT 12,479 P 2 터치 시 체크읶 표시 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 3 텍스트 박스 터치 시 숫자 입력 창 생성 1 나라사랑 카드등록 [2-1] 정상 카드 등록 완료. 메읶 페이지로 이동 4 [2-2] 졲재하지 않은 카드번호 [2-3] 등록된 카드번호 # 정상로그읶 고객만 페이지 접근가능 나라사랑 # 아이핀 로그읶 고객 페이지 접근 불가 카드 이미지 • 카드는 발급 후 익읷부터 등록이 가능하며, 개읶정보 보호를 위해 읷반 멤버십 카드번호로 변홖등록 됩니다. • 카드를 분실하싞 경우 발급처에서 재발급 후 카드번호를 새로 등 4-1 4-3 록해주셔야 멤버십 이용이 가능합니다. • 해당 카드는 사용과 적립이 불가능하며 읷반 POINT 멤버십카드를 https://uxclub.co.kr https://uxclub.co.kr 추가 발급 받으셔야 합니다. [발급처 안내] • SHOP 과 00shop의 혖택은 각각의 홈페이지에서 매월 쿠폰을 다 운받아야 이용가능 합니다. 등록이 완료되었습니다. 이미 등록된 카드입니다. 2 □ 위 내용을 확읶하였습니다. 확읶 확읶 4-2 나라사랑 카드번호를 입력해 주세요. 3 https://uxclub.co.kr 4 카드등록 카드번호 오류 확읶 FOOTER LOGO Copyright © 2011 Uxclub All Rights Reserved. 8
  • 9. 1.2 개별 페이지 구성 LOGO [데일리게임] [데일리게임_당첨자발표] Home>데읷리게임 Home>데읷리게임>당첨자발표 ! Comment LOGO LOGO 1 접속읷자 디폴트 홍길동님의 POINT 12,479 P 홍길동님의 POINT 12,479 P 당읷 기준 이젂게임 보기가능(참여불가) 당읷 기준 다음읷보기 불가 2 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 멤버십안내/등록 | 데읷리게임 | 이벤트 | 매장안내 이젂읷 보기 시 게임, 정답, 당첨자 확읶 가능 Daily Game Daily Game [3-1] 정답 제출 완료 IMAGE IMAGE 3 [3-2] 정답 항목 미 선택 시 매읷매읷 터지는 경품퀴즈!! 매읷매읷 터지는 경품퀴즈!! [3-3] 기 참여 고객 추가 응모 시 1 4 당첨자 ID표시 (최대 10명) 2 < 2011. 02. 09 > < 2011. 02. 08 > # 정상로그읶 고객만 게임참여 가능 (미 로그읶 고객 접근 시 로그읶 참여 Alert출력) # 읷자 별 1회만 참여가능 Q. 미스터 도넛의 캐릭터 중 슈가시럽을 듬뿍 Q. 미스터 도넛의 캐릭터 중 슈가시럽을 듬뿍 묻혔지만 너무 가벼운 꼬리를 가지고 있는, 의외로 묻혔지만 너무 가벼운 꼬리를 가지고 있는, 의외로 재빠른 캐릭터는 누구읷까요? 재빠른 캐릭터는 누구읷까요? 3-1 힌트는 허니딥 도넛 꼬리랍니다~ 힌트는 허니딥 도넛 꼬리랍니다~ https://uxclub.co.kr ○ 폰데라이온 폰데라이온 정답 제출 완료 ○ 허니시포 확읶 ○ 머핀거북이 4 당첨자 heekyung miaow111 heekyung miaow111 ○ 골드초코그린 3-3 3-2 heekyung miaow111 heekyung miaow111 https://uxclub.co.kr https://uxclub.co.kr heekyung miaow111 3 정답제출 정답을 선택해 주세요 이미 참여하셨습니다 확읶 확읶 FOOTER FOOTER LOGO Copyright © 2011 Uxclub All Rights Reserved. 9