Ascent PEAK Dashboard. The goal of this project was to create an interactive and customizable dashboard web application for Ascent’s customers.
The application’s focus is supply management and logistics solutions to aid our customers’ logistics needs. It had to include features such as live tracking, quoting, bid boards, advanced analytics, order management, billing, trending and routing, vendor management, and many other supply chain functionalities. I worked as the sole designer on this solution.
Below are screenshots of Ascent’s legacy system before I arrived. These were the initial solutions that Ascent’s customers were using. They were designed by developers and did not include any design thinking. Many of the legacy products comprised broken architecture, poor navigation, inconsistent design systems, and unnecessarily complex user flows to complete certain actions. There was also an ask to revamp the visuals of the legacy systems and bring the applications up to a modern, sleek design.
After receiving the design brief, I immediately began talking to our customers. I set up short interviews with a variety of participants to gain a better understanding of how they used the legacy systems. I wanted to find out what they liked and disliked about their current workflows and which sections needed to be improved. The process was a combination of introducing new features, as well as fixing old ones.
I decided to use Notion to house all of my user research. Each study got its own page with an executive summary, interview scripts and notes, links to the designs and the main takeaways, open to our developers and stakeholders so leadership could hear what customers were saying first-hand. It became the standard for every study our team ran afterwards.
After talking with the participants, user needs, pains, and wants were formed:
Next, it was important to define the interface and information hierarchy at a basic level. This was done first through quick sketches, and finally by creating low-fidelity wireframes of key pages. They laid the foundation for widget placement and the shipment detail page, before any visual design. Each decision traces back to what customers told us.
01The dashboard
Customers wanted better visibility into where their shipments are, so the map takes the largest tile.
Smaller tiles answer the next questions at a glance, like where shipments are headed.
Each tile is a widget, so customers choose which data they see. Every customer needs something different.
An edit mode lets each customer set how much the page shows, to suit their role.
02Shipment detail
A milestone bar shows where the shipment is before anything else, for full visibility into its status.
Origin, destination and the order reference sit beside a map, so the key facts never scroll away.
Shipping details, invoices, containers, tracking, communications and documents each open on demand, so the page never overwhelms.
Five walkthroughs rebuilt from the PEAK 4.0 prototype, with the motion taken further than Figma could: the map, edit mode, incoming shipments, the financial view and dashboard tabs. Each plays as it scrolls into view.
Where every shipment is, grouped into clusters by area. Spin the globe or flatten it to a 2D map, click into a region, then take the map full screen and open a cluster for its shipments.
Edit mode opens a drawer holding every widget. Take off the ones you don’t use, add the ones you do, and save. Each customer ends up with a dashboard built around their role.
Each destination is a bubble sized by the shipments headed its way. Open one and its delivery addresses turn in beside it; close it to get back to the whole picture.
Year-to-date volumes by mode, on-time performance against the average cost per shipment, and a tree map that sizes every premium code by what it costs. The prototype’s charts were static, so I added hover states: a month’s mix of modes, and both values for any day.
Tabs hold as many dashboards as a customer needs. Open a new one, browse the saved layouts as a grid or a list, or start from scratch: name it and drag widgets onto it.
The dashboard shipped, and it’s still growing. Getting there meant making the case for research and bringing developers onto a design system.
Challenge 01
Challenge 02
Where it landed
The dashboard has been through many changes and still gets new widgets today.
Data decided which widgets users needed most, and how to show it in small, digestible pieces.
It became a primary tool for the sales team when pitching potential customers.
Users get a fresh, personalized and customizable view of their day-to-day work in PEAK.
