AfterShip Order Status Tracking Page and Emails
애프터쉽 택배 조회 서비스 페이지 및 이메일 기획
As we're all aware, shipment emails are eagerly anticipated following an online purchase. While MCM has been diligent in sending purchase confirmations, subsequent communications were limited to generic automatic confirmation emails. To make this experience more elevated and personalized, MCM decided to customize and make a branded solution to track emails and provide a status page with detailed information, leveraging the Aftership solution. Beyond simply improving user experience, this initiative has proven effective in reducing customer service inquiries and complaints related to shipping and returns.
New Design Development and Iterations
The first set of newly developed designs are AfterShip emails, which serve as vital communication channels for conveying important information to customers. These updated emails feature a header copy along with an iconography status bar, providing customers with clear updates on their shipping status. To ensure a seamless and consistent user experience while minimizing confusion, I designed the icons to harmonize with AfterShip's established design system.
Furthermore, each email prominently displays the estimated delivery date, complemented by a Tracking Page call-to-action (CTA) that directs users to a page containing more comprehensive information. This Tracking Page will grant users access to a detailed tracking history log as well as their purchase history through the Order Status Page.
새로 런칭하는 애프터쉽 이메일의 제일 중요한 요소들은 배송 상태 표시 바, 예상 도착 날짜, 운송 조회 CTA입니다. 애프터쉽 서비스는 이미 보급화 되어있어, 상태 표시 바의 UI를 어느정도 비슷하게 디자인해야 유저들이 헷갈리지 않을 것이라고 생각하였습니다. 아이콘 디자인과 레이아웃 배치에 MCM의 디자인 스타일을 첨가하는 동시에 애프터쉽과 비슷하게 만드는 것이 관건이였습니다. 이 요소들은 눈에 띄는 곳에 먼저 배치를 하고 그 후에 부가적인 내용을 포함 시키는 레이아웃 작업을 시작하였습니다. 운송 조회 페이지는 바로 그 밑 CTA를 통해 접속할 수 있고 이 페이지에서 배송 관련 부가적 정보와 운송 기록을 모두 조회할 수 있습니다. 유저들은 이메일에서 방대한 정보를 얻는 것은 지양하지 않기 때문에 페이지를 따로 제작하게 되었습니다.
To ensure the clearest delivery of information, we explored various iterations for the placement of the progress bar, dates, and track CTA. 다양한 스타일의 날짜 배치와 아이콘 디자인
The Order Status Page layout presents a comprehensive array of detailed information, which required a careful consideration to position all elements. What information the users want to see first, what information needs to be prioritized, and what the brand wants users to pay attention to had been considered while these iterations were explored. 여러 레이아웃의 주문 운송 조회 페이지
QA and Feedback
Working with 3rd partner development team, this project took about 6 months from initial briefing to launch. Using Jira as the main platform for project communication, weekly project update calls and QAs with the developers, project managers, and our design team had been initiated for any discussions and feedback rounds.
Jira를 주로 이용하여 개발자들과 서로 업데이트를 공유하였고 디자이너, 프로젝트 매니저, 개발자와 매주 미팅을 하며 원하는 디자인과 개발의 조율을 했습니다. 외부 개발자들과 함께 약 6개월 간 개발을 해왔고 곧 완성 제품이 출시 될 예정입니다. 위 이미지와 같이 QA 진행과 피드백도 자유롭게 주고 받아 협력하였습니다.
Final Designs
Status Icons
I developed and incorporated new icons into the Status bar to provide clear visual indicators of delivery progress. These icons are aligned with the established Aftership iconography to ensure consistency and prevent customer confusion, while also integrating the brand's distinctive styling. Additionally, these icons have been updated in our library for universal use across all shipping-related elements on the site.
새로운 아이콘을 그려 상태 표시 줄을 만들어 배송 진행 상황을 보여주고 있습니다. 이미 애프터쉽 상태 표시 줄이 전세계 적으로 이용되고 있어, 유저들에게 혼동을 주지 않기 위해 기존 디자인에서 많이 벗어나지 않게 기존과 MCM스타일의 균형을 잘 맞추는데 초점을 두었습니다. 검정색으로 아이콘을 채우는 것이 라인으로만 표현한 아이콘보다 상태를 구분하기 쉽다고 판단이 되어 Fill 한 아이콘과 outline된 아이콘으로 진행 상태를 표현하였습니다.
Emails
Emails were developed per shipment process for every possibility. The icon status bar was newly added for customers to understand shipment stages at a glance. For clarity, I made the decision to fill or empty the icons as a means to illustrate the finished and unfinished progress. Important information such as the estimated delivery date and CTA button are centered for easier legibility for both mobile and desktop.
배송 단계 별 이메일 이외에도 일부 발송, 일부 반품 등의 다른 모든 가능성의 이메일 레이아웃을 추가적으로 디자인하였습니다. 초기에는 단계 별 이메일만 디자인 하였으나 개발 단계에서 더 많은 상세한 가능성을 발견하게 되어 개발자들과 상의 후에 추가하게 되었습니다. 맨 위에 상태 표시 줄을 배치하여 배송 상태를 한눈에 알아보기 쉽게 끔 배치하였고 배송 예상 날짜와 CTA와 같은 중요한 정보는 중간 정렬을 하여 모바일 환경에서 더 쉽게 읽을 수 있도록 제작했습니다.
Order Status Page
When customers click Track Order CTA in the emails, they are directed to the Order/Return Status page where detailed information such as the history and product details can be found. From this page, users can also navigate to see the status of other shipments. A small “Continue Shopping” banner and “Recommendations” section beneath are customized from user navigation and purchase history to encourage customers to explore the site and eventually lead to another purchase.
이메일에서 CTA를 클릭하여 배송 조회 페이지로 넘어가면 배송 기록과 제품 정보와 같이 더 자세한 정보를 볼 수 있습니다. 왼쪽 탭을 이용하여 다른 소포의 배송 상태로도 쉽게 넘어가 조회할 수 있게 제작하였습니다. 하단의 “쇼핑 계속하기” 배너와 “추천 상품” 컴포넌트도 추가하여 유저들이 사이트에 계속 남아있을 수 있도록 유도하는 장치를 더했습니다.