Dashboard Analytics For Logged-In Experience

EasyPost

EasyPost is a shipping logistics company that specializes in shipping label generation from 80+ different carriers. Traditionally API-driven, the company is expanding into non-technical audiences by creating a logged-in experience with UI features.

Dashboard analytics is a set of visual representations of data on the client-facing dashboard to help customers understand their business and shipping logistics.

The Problem

Currently, dashboard interaction is minimal due to the lack of features on the dashboard. Customers have no way of quickly accessing their data without downloading a series of CSV reports.

EasyPost is also losing business to competitors who are offering data insight and analytics to their customers.

The Goals

For this project, the objectives are: to improve the dashboard experience by offering customers intuitive data visualization and analytics; address customers’ pain point in having to download multiple CSV files to complete a task; stay competitive with other shipping logistics companies that offer analytics; and
retain customers who are considering third-party BI software for data and analytical reporting.

The Audience

The primary audience for this project is small to mid-size businesses that do not have resources for third-party analytical tools and can scale with the EasyPost platform. The secondary target is enterprise-level companies that need dashboard customizations on top of the initial features.

The Design Process

User Research

From speaking with 15 customers ranging from small to enterprise-level businesses, we learned:

  • 8 customers said they need total shipping cost in x time frame by carriers
  • 6 would like to know the transit statuses of parcels and heatmaps
  • 3 wants to see shipping label cancelations and refunds
  • 3 said they don’t access the dashboard due to a lack of valuable features
  • 1 wants to gain insight into customer orders (import orders function is in the future)

Competitor Research

We evaluated six different companies. While the project manager focused on the strengths and weaknesses of the features, I focused on UI features, user experience, and visual design. The companies we researched include SmartShyp, ShipRush, ShipStation, Shippo, Easyship, and Route.

Commonalities we found from their dashboards:

  • Packages by carrier insight
  • Shipment statuses charting
  • Total shipping spend charting and table
  • Breakdown of average costs charting

User Flows and Whiteboarding

User flow


Based on user research and product brief, I put together a series of user flows with short persona stories to illustrate how customers with different roles interact with dashboard analytics. This exercise helped us develop empathy and envision how each phase of feature development will appeal to customers.

White Boarding the Vision


Next, the product manager and I had a whiteboarding session to “brain dump” and align on concepts. The goal was to build a rough draft of the vision.

Wireframes

Here are samples of the wireframing process. At this stage, the team discovered functionality challenges such as the impact of global filtering on charting interactions and data range rendering limitations. We used tracking metrics to guide design decisions and solve edge cases while focusing on the most common scenarios.

After reviewing the wireframes, engineering completed a spike to evaluate charting libraries and chose Chart.js for this project.

They also started to research and explore the coding infrastructure and gave design advice on which components they needed first. Communicating openly and often helped us stay aligned and eliminate problems early on.

Low-fi Prototyping and Testing

Prototyping

In the next few design rounds, UI components were explored at a deeper level, such as:

  • Scalability of layout when we add more analytics
  • Date picker with the ability to input a date
  • Filter that allows users to modify their selections quickly
  • Set logic and rules for the number of carriers to display
  • Legend of charting needs to accommodate X number of carriers
  • Backend support of each KPI charting
  • Total overlay toggle for users to compare trends

Testing and Learnings

Our testing strategy was originally going to include customers we’ve interviewed during research and internal stakeholders. After strategizing, we decided it would be more valuable to gather feedback from internal analytical teams at this stage. It would be difficult for customers to envision their data in the prototype and predict if functionalities are valuable. We will be testing with them during our soft launch to collect better data and feedback.

Below, I will include both design updates and feedback from testing.






Mobile UX Strategy

Upon finalizing requirements for desktop, next is mobile strategy. Because most of our users operate on desktops, we prioritized mobile experience next. Of course, thoughts on mobile functionality were always there from the beginning.

Based on external and internal research, the consensus was users don’t typically analyze data on their mobile devices. When they do log on, they will be monitoring updates on the go. Mobile experience needs to offer concise data that is straightforward to scan so users can check in as they go about their day.

Mobile Interaction Challenges

The biggest challenge for mobile analytics is designing the interaction of the charts. Because most analytical tooling requires actual data, I had to find alternative ways to explore charting interactions. I reviewed a dozen of investment web and mobile apps for inspiration. They included TradingView, Yahoo Finance, Webull, Robinhood, and SoFi. Based on my discoveries, here are a few more explorations on charting interactions.



Hi-fidelity Designs

Currently, I’m finalizing design components and interactions to prepare for the Engineering handoff. Because of the early and constant communication between design and engineering, there will be no surprises with everyone onboard. We will discover more challenges as we build dashboard analytics into reality, and they’ll make our user experience even better!