#699f61
인스타 피드 밝은 초록. 흰 글자 대비가 3.1이라 띠 글자를 16 · 굵게 올렸어.
마이페이지 · 주문완료 시안 (6차)
폰 390폭으로 그렸고, 폰 틀 안을 스크롤하면 아래까지 보여요. 이름 · 숫자 · 날짜는 전부 예시예요. 실제로는 카페24가 주는 값(이름 · 등급 · 적립금 · 쿠폰 · 주문 단계 · 주문 목록)으로 채워져요.
· 「다시 담기」는 누르면 그 상품 구매 시트가 지난번 옵션이 골라진 채로 열리는 흐름이에요(카페24 기본엔 없는 기능이라 코드수정창이 만들어요).
· 주문완료의 「출고 예정일」은 상세에서 쓰는 출고일 계산을 그대로 가져와요.
· 색은 인스타 진한 초록(#036d31) · 세이지 · 크림, 글자는 14px 이상이에요.
· 주문완료의 「출고 예정일」은 상세에서 쓰는 출고일 계산을 그대로 가져와요.
· 색은 인스타 진한 초록(#036d31) · 세이지 · 크림, 글자는 14px 이상이에요.
마이페이지 · 주문완료 — 한 판씩
미주 10/1 16:12 피드백 + 은우 레퍼 18장 반영. 별로였던 후보는 다 지웠어.
주문 내역 카드를 다시 그렸고(다시 담기는 버튼 하나), 위쪽은 그대로야. 세 판은 등급 띠 색만 달라.
#367d45
인스타 피드 중간 초록. 흰 글자 대비 5.0.
#036d31
인스타 피드 진한 초록(지금 판). 흰 글자 대비 6.5.
주문 없는 회원 · 주문완료
빈 상태
막 가입한 회원 화면. 주문 내역 카드 자리에 「아직 주문이 없어요」와 첫 주문 혜택 한 줄, 「바질페스토 보러 가기」. 다시 담기 줄은 없음. 숫자는 웰컴 쿠폰 1장 기준 예시.
한 판 — Grazie! + 출고 예정
3번(Grazie) 바탕에 1번의 출고 예정일 · 적립 예정 · 다음 행동 아이콘 넷만 가져왔어. 막 주문한 화면이라 배송 단계 표시는 뺐어. 아래는 「받으면 이렇게 드세요」 레시피 두 칸.
참고한 레퍼런스
은우가 고른 18장 중 여섯 장(원본: 공유드라이브 2. 디자인/2. 이태리정미소/0. 자사몰/6. 자사몰_마이페이지) — 이번 판의 바탕이야.
쿠팡 (은우)프로필 + 와우 카드파란 카드에 혜택 · 캐시 두 숫자, 그 밑 꽉 찬 색 아이콘 다섯 개
쿠팡 (은우)주문 내역사진 카드에 상태 + 동그란 담기 버튼
쿠팡 (은우)다시 구매하세요사진마다 담기 버튼 · 자주 쓰는 메뉴는 글자 칩
컬리 (은우)아이콘 + 숫자주문내역 · 쿠폰 3 · 찜 0 · 후기 — 이름 옆에 숫자
신세계 (은우)큰 숫자 칸쿠폰 4장 · SSG MONEY 53,260원을 칸마다 크게
올리브영 (은우)포인트 줄CJ ONE · 올리브영 포인트 · 쿠폰 · 기프트카드 아이콘 줄
처음에 모은 레퍼런스
쿠팡 마이페이지는 공개된 UX 분석 글(위클리 UX/UI 챌린지)의 실제 화면, 나머지는 Mobbin 공개 화면이에요.
쿠팡마이쿠팡 위프로필 · 쿠페이 머니 · 숫자 네 칸(구매후기 · 찜 · 최근 본 · 자주 산 상품) · 배송 중 상품 사진 줄
쿠팡마이쿠팡 메뉴아이콘 + 글 한 줄 메뉴(주문목록 · 취소반품 · 리뷰 관리 · 정기배송 …)
쿠팡마이쿠팡 가운데주문한 상품 검색 · 광고 줄 — 메뉴까지 너무 멀다는 지적을 받은 자리
IKEA멤버십 · 최근 산 것「Your Latest」 최근 산 상품 카드 + 멤버십 혜택 줄
adidas멤버십 카드adiClub 레벨 카드 + 포인트, 아래 큰 네모 네 칸(주문 · 쿠폰 · 내 계정 · 주소록)
Temu숫자 + 아이콘 줄적립금 · 쿠폰 숫자 두 칸 + 아이콘 다섯 개 줄
Dollar Shave Club클럽 회원「Club member since 2018」 — 언제부터 회원인지 보여주기
Chipotle도착 시각을 제일 크게배달 확정 · 도착 예정 시각 7:06이 화면의 주인공
Shake ShackWe got your order, Alex!이름 부르는 큰 제목 · 픽업 정보 · 영수증 보기
Honest Greens영수증 타이포영수증을 그대로 디자인으로 · 「THANKS FOR YOUR ORDER」
Amazon다음에 살 것주문 완료 + 산 것 기준 추천 상품 줄
Blue Apron다음 배송까지첫 배송 일정 + 앞으로 올 배송 세 개
Instacart진행 단계 · 초대주문 확정 + 단계 막대 + 친구 초대