ShipStation Insights & Reporting

reports & charts data visualization product design

I just want to see the results… jump to the Gallery!

Situation

ShipStation, a leading e-commerce shipping and logistics platform, needed to transition their insights analytics section from an old platform—loading via an iframe—to a newly developed platform. The Product Manager approached me to enhance the design within a tight deadline while retaining the existing section's structure and improving its utility for users.

Task

The primary task was to redesign the dashboard to make the data more accessible and meaningful while addressing users' confusion over its interpretation. The old design faced significant usability issues, including challenges for users with color vision deficiencies (CVD), leading to low engagement with most sections except the user-definable report downloads.

Action

  • Understanding the Core Problem: Collaborated with the data analyst to unpack usability issues, identify irrelevant metrics, and brainstorm better data representations.
  • Reimagining Data Visualization: Focused on creating purposeful, clear, and actionable visualizations. Revised misleading visual representations, for instance, changing a stacked bar chart to a line chart for clearer insights into order processing stages.
  • Crafting a Narrative: Every piece of data was tied back to the overarching theme of order throughput efficiency. Redesigned charts, such as expanding the histogram for order age, provided clarity about order fulfillment timelines and surfaced inefficiencies.
  • Ensuring Accessibility: Adopted IBM's Carbon design system for accessible color palettes and incorporated non-color differentiation techniques. Opted for data tables when they offered clearer, more user-friendly data interpretations.

Results

  • Despite technical setbacks and the need for descoping due to underestimated engineering efforts, the redesign successfully enhanced data accessibility and user engagement.
  • Delivered a more user-friendly and accessible reporting section, leading to increased customer engagement and higher CSAT scores.
  • Reflected on the value of tightly integrating engineering insights during design to foresee potential challenges and better align timelines and expectations.
An example of a line chart comparing new orders to orders shipped, with a bar chart showing a rolling backlog of unshipped orders.
An example of the line chart comparing new orders to orders shipped, with a bar chart showing a rolling backlog of unshipped orders over the defined period of time.
An example of stacked bar chart comparing new orders that were shipped vs those that were not shipped that day, over a period of time
An example of stacked bar chart comparing new orders that were shipped vs those that were not shipped that day, over a period of time

Takeaways

  • The project's initial scope could have been better defined by consulting engineers directly involved in implementation, not just management, to preempt technical hurdles.
  • A more thorough discovery phase focused on customer expectations for reporting functions would have allowed for a more targeted solution, potentially avoiding redundant feature development.
  • Emphasized the importance of agile approaches and phased rollouts to manage time constraints effectively without compromising quality.

Overview page with Shipped vs Unshipped stacked bar chart, data tables, and the Age histogram. Sales Trends Product specific metrics, including complex stacked bar chart. Operations metrics page Customer Overview page with US specific data visualization. Customer Overview page with EU specific data visualization. Customer Overview page with International data visualization. Customer Engagement metrics Running a custom report Color palette options provided by IBM Carbon.