04
UX/UI
Zulzi
Timeline
1 month
Role
UX Designer
Team
UX partnership
Responsibilities
Research | Design development | User testing | Dev collaboration
As an online retailer, Zulzi's customer experience hinged primarily on the capacity to initiate an order and then monitor it in real-time throughout the delivery process. The complexity of this functionality was significantly underestimated, both from a business and a UX perspective. What initially began as a straightforward delivery screen evolved into a comprehensive end-to-end order tracker. This feature enables customers to not only view and track their orders but also edit them, all before the delivery driver arrives.
To understand this need, our initial step was to closely observe and map out the existing operational procedures. We then translated these procedures into distinct phases that would serve as the foundation for our order tracking system. We also leveraged the groundwork laid in the messaging taxonomy, identifying opportunities to integrate specific components as touchpoints for the user. This meant that at times, a user would encounter a straightforward automatic update on the screen, while in other instance, they might receive a combination of different feedback types, depending on the priority of the step.
Once we mapped out the processes, the next step was to translate all of this operational information into user flows, focussing on the various scenarios a user might encounter. Each scenario would entail different objectives and constraints, so it was crucial to ensure that our solution aligned not only with the operational model but also allowed users to accomplish their goals, regardless of the scenario they faced.
In this type of feature, the notification model plays a crucial role in providing users with ongoing feedback during a delivery. As we moved into the exploration phase, we recognised the need to establish a standardised communication framework. Initially, we set out to define this structure of the messaging component, ensuring that developers could effortlessly deploy it across various native frameworks. We then had to differentiate between different message types and notifications. Some messages carried critical notifications that directly impacted an active order, while others focused on billing to provide users with transparent transactional information. Additionally, there were standard chatroom-style messages for real-time support. This approach ensured a cohesive and effective communication flow for users.
The challenge was to establish a clear and organised framework for housing all these elements. This required careful consideration of how users would perceive and interact with each piece of functionality. Our approach involved assigning a specific position in the hierarchy to each element and using visual cues and interactions to guide users. Some components would appear automatically, while others could be dismissed. Each element was given a set of rules, allowing them to work together cohesively while keeping the user informed.
This project demanded more design, development, and business involvement than we initially anticipated. However, in the end, we successfully delivered a live product that operated exactly as we designed, thanks to the notable development work by our team. By prioritising operational requirements from the beginning, the handover process for the drivers, shoppers, and customer experience team was seamless.
To ensure that users are only presented with important feedback relevant to a specific step in the delivery process, we used a progressive disclosure approach. When a step is completed, it is folded into an accordion, and the next item automatically opens. Users who may not have the app open but still need visibility can choose to open previous steps and review timestamps and additional information. Additionally, we identified four key steps in the delivery process and displayed them on the homepage as a non-dismissible widget. This widget's status aligns with the statuses in the delivery accordion and becomes active once a specific step is automatically checked off.
Despite our efforts to anticipate all potential scenarios, certain variables remained unknown. One such scenario involved an item being out of stock in a shop, requiring the shopper to find a suitable replacement. In this case, the user would need to actively approve or decline the replacement. To address this, created a dedicated component to facilitate this interaction. Additionally, we needed to redesign the rest of the order to seamlessly accommodate such changes and ensure that the rest of the delivery process updated automatically.
Unfortunately, testing was not available during the period and scope of my involvement with the team. Nevertheless, evaluative testing was planed for a later phase. We did, however, establish a close collaboration with both the operations team and the business unit to gain a thorough understanding of the feature's complexities. This ensured that our solution seamlessly integrated into their existing procedures. Additionally, we conducted numerous workshops with development and tech leads to validate the feasibility of our proposal and its execution by the team. When necessary, we made adjustments and adjusted our designs to ensure alignment.
This project taught me the value of comprehending the entire end-to-end journey and really focussing on the touch points between different stages or phases. I discovered that during these handover periods, there are many opportunities to enhance the user experience by applying fundamental heuristic principles.
Additionally, it was interesting to consider a dual perspective of a journey, not just from the user's standpoint, but also from that of an internal colleague. They possess an equally important but distinct view of the same process, along with different tasks and objectives. As UX designers, we often prioritise the user's experience, but this project highlighted the importance of viewing users as more than just customers.