The problem
Shopify is a software as a service (SAAS) company that provides a suite of tools to entrepreneurs to create and manage their business. Within Shopify's order management system, merchants can fulfill orders made by their customers by shipping them their physical goods, or emailing them their digital goods. Fulfilling and shipping orders is a cornerstone experience of Shopify, without which merchants would not be able to send customers the products they purchase. In order to provide the most complete product experience on mobile, it is critical to offer the same fidelity of the shipping and fulfillment flow as is available on the web.
Role & ownership
I was responsible for designing the entire fulfillment and shipping experience for both Android and iOS; in order to successfully do this, I was constantly connecting with stakeholders from the Shipping team, the Fulfillment team, and the Mobile Shopify team. Gathering context from each team helped me gain a holistic understanding of the problem space. Each stakeholder's expertise in their specific area was invaluable in obtaining meaningful feedback on the proposed solution.
The solution
The final solution brings a high fidelity fulfillment and shipping experience to both the Android and iOS platforms. The overall design was implemented in accordance with the Polaris design system, with native design practices in mind for each platform.
Order items are now grouped based on their method of fulfillment, which better aligns with the merchant's mental model of their work flow. Once a merchant selects a group of items to fulfill, they have the option to specify the quantity of items they wish to fulfil and purchase a shipping label within Shopify.
In order to efficiently build the feature, portions of the Shopify Shipping flow were loaded within the native app as mobile web views. Since the entire Shopify ecosystem uses the same design system, the transition between native and native-web is indistinguishable; this also allows the feature to remain up to date with any changes made on the web admin without having to adjust anything within the native apps.
Fulfillment cards were designed specifically for the mobile shipping experience. These cards efficiently display the most relevant interactions and information to the user for their packaged orders before and after they have entered the mail stream.
While the Shopify fulfillment and shipping experiences are highly intricate, the solution designed for mobile offers a cohesive way to display all variants of information. Bringing order what could have been a chaotic experience on mobile will help Shopify merchants fulfill orders comfortably from their smartphone.
Validation
Fresh eyes design reviews were held frequently with stakeholders from the Shipping team, the Fulfillment team, and the Mobile team. In these design reviews, each team would have an opportunity to provide targeted feedback on the Invision prototypes to the areas of the feature they specialize in. Continually meeting with each of these teams was vital in the success of this project; it ensured buy in from each of the stakeholders, and ensured that all relevant factors were considered in the solution. The final iOS and Android prototypes can be seen below:
Android Prototype
iOS Prototype
Next steps
Once the feature is live in the production environment, I would recommend the user researcher on the team conduct contextual inquiry interviews to evaluate how the solution works within the merchant's workflow; this kind of data isn't easily obtained during the testing and validation phase of a project, as it requires some time for the user to get used to the new technology. Understanding how the feature compliment's the merchant's workflow will give insight into the strengths of the design, and will indicate opportunities for improvement.
Furthermore, in the pursuit of matching the native experience with the web admin, I recommend bringing more core web functionality to the mobile platforms. Matching the fidelity of the fulfillment and shipping experiences was a huge step forward for the mobile platform, and an exciting example of successful interaction between multiple teams at Shopify. I'm looking forward to seeing what the team tackles next.
