Enhancing the user experience of an e-commerce dashboard on the Shopify platform.
UX Designer
Sketch
Summer 2019
TryNow is an e-commerce app that provides Shopify brands a try-before-you-buy experience, allowing shoppers to checkout for free and only pay for what they keep. I was tasked with designing a custom analytics dashboard on Shopify as well as improving the functionality of the existing order detail page to modify it for TryNow items.
The first step was to understand how the TryNow product worked start to finish. The product lifecycle had many edge cases so it took a while to fully understand how the TryNow product worked and more importantly, understand the context for its existence. We did this by creating flowcharts online and using sticky notes to arrange (and rearrange) the TryNow order flow for a more tactile experience.
The need for a custom analytics dashboard came as a result of a growing pain TryNow was experiencing in their early stages as a SaaS (software as a service) company. As their client base grew, TryNow needed a way to streamline how it delivered weekly analytic reports to their merchants regarding the status and performance of TryNow items. Manually compiling reports and helping merchants interpret analytics was time-consuming and hindering the growth of the company.
Combining order status (item level) metrics and order details (high level) metrics wireframes and converting them to high fidelities
Final Design
Implementing a dynamic analytics dashboard on the Shopify web app solved this pain point as it provided a central place for merchants to track where their TryNow products were in the TryNow order lifecycle. Merchants could also easily analyze high level metrics for TryNow items directly below the flowchart.
As shown above, the dashboard is split into two segments: order status (item level metrics) and order details (high level metrics). With the order status section, it was important to have a design that represented a continuously moving flow to reflect the sequence of an order lifecycle. This was achieved by utilizing chevron arrows to convey that each phase flowed right into the next. Having tooltips that elaborated on its respective TryNow phase was important as we knew how important the language and terminology we used was for merchants understanding the TryNow order lifecycle.
The high level metrics of the order details, like total order volume and average order value, were presented in a card format to make it quick and easy for the merchant to identify.
The existing order detail page was missing certain functionalities that prevented merchants from knowing key pieces of information such as:
I addressed the questions by adding a section “Delivered On” with the tracking link and altering the language of “Auto Checkout Date” to “Charge Date” to make it clear when customers were being charged. Additionally, the page was augmented to include certain functionalities like:
The UX changes needed to be simple enough for development to take no more than five days to test and implement.
The analytics dashboard and order detail page presented its own set of challenges, but they both traced back to the importance of establishing a strong understanding of the product backwards and forwards. It helped to go over the TryNow timeline with a teammate to identify any gaps in my understanding, and from there, seeking answers and clarifications from the client.
Things quickly got overwhelming with the many use cases and moving parts of the TryNow order lifecycle, but tackling the problems one at a time, triaging user problems, and going back to the drawing board as needed was helpful in creating a better experience and product for TryNow.