Revamping an order details page for transparency and clarity
Washmen Laundry, a leading on-demand laundry service in the UAE, faced a challenge: their existing order details page lacked transparency and failed to provide a clear timeline for users to track their orders. The goal was to revamp the order details page to enhance user experience, offering a comprehensive view of the order process and instilling confidence in users about the service's transparency, and to reduce customer service tickets about delivery ETAs.
Problems to solve
- lack of transparency resulting in too many avoidable customer support tickets
- obscure and unclear terminology resulting in user anxiety
- no clear timeline indicator
Key Objectives:
- Provide a clear history and indication of the next steps in the order process.
- Introduce collapsible sections for users to easily expand and view detailed information.
- Incorporate business transparency by showcasing photos taken during order collection, fulfillment, and delivery.
- Implement an intuitive user interface with clear icons, indicative color states, and information hierarchy, ensuring a user-friendly experience.
Before/after photos
Design Solutions:
1. Introduced a detailed status and timeline display: The old order details page only updated the order status without displaying a timeline, nor the steps before or after the current one. The new design incorporates a visually appealing and easy-to-understand timeline. Users can now track their orders seamlessly, with each stage clearly outlined, providing a sense of progress and anticipation.
2. Added interactivity to expand sections to show in depth detail: To streamline the user experience, we introduced an expandable area. Users can expand the section to view detailed information about each stage of the order process. If not, they will only see the active status and the next step. This feature ensures that users can access additional details if needed, without overwhelming them with too much information at once.
3. The new proofs feature transparently shows all our operational steps and creates trust and peace of mind for the user: Transparency is crucial for user trust. We integrated a photo feature that captures key moments during the order lifecycle. Users can now view images taken at their doorstep during order collection, order fulfillment, and order delivery. This not only enhances transparency but also adds a personal touch to the service.
4. Designed beautiful icons to convey the current status clearly and cleanly: To ensure the most critical elements are easily accessible, we revamped the user interface with clear icons and a streamlined design. Each order status is accompanied by a visually distinct icon, making it easy for users to identify and focus on the most important information on the page.
Results
The redesigned order details page has significantly improved the user experience on Washmen’s app. Customer feedback indicates a higher level of satisfaction, with users praising the newfound transparency and the intuitive design of the page. The incorporation of photos has added a human touch to the service, fostering a stronger connection between customers and the brand. The collapsible sections have streamlined the information flow, providing users with the flexibility to engage with additional details as per their preference.
