TryNow Shopify Dashboard

Enhancing the user experience of an e-commerce dashboard on the Shopify platform.

Role

UX Designer

Tools

Sketch

Date

Summer 2019

The Opportunity

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.

Defining the Product

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.

Project 1: Updating the Analytics Dashboard

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.

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.

Project 2: Order Detail Page

The existing order detail page was missing certain functionalities that prevented merchants from knowing key pieces of information such as:

  1. When was the package delivered?
  2. When does the trial end?
  3. When will the shopper be charged?
  4. Which is a TryNow item and which is a BuyNow item?

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:

  1. Mark order as delivered (only if the package was not yet delivered)
  2. Extend the trial (aka charge date)
  3. Charge and close out an order
  4. Which is a TryNow item and which is a BuyNow item?

The UX changes needed to be simple enough for development to take no more than five days to test and implement.

Results & Impact

  1. Improved decision-making for merchants by surfacing clearer insights on order trends, try-before-you-buy conversion rates, and customer behavior directly in the analytics dashboard
  2. Reduced support inquiries by clarifying the order detail page layout and messaging, enabling merchants to independently resolve common questions about trial periods, returns, and payment timelines
  3. Increased engagement with the dashboard, as reflected by longer session durations and higher interaction rates with filters and reporting tools (based on internal analytics)
  4. Streamlined onboarding experience for new merchants, who reported better understanding of TryNow’s platform capabilities through a more intuitive UI
  5. Enhanced internal team efficiency by introducing scalable design patterns that simplified future iterations and engineering handoff

Conclusion

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.