Detailed View Design

Clockwork Logistic Systems

Role: User Experience Designer

Industry: Supply Chain

Users: All Clockwork users

Programs Used: Figma & Zeplin

Problem Statement

We need a side pop-up that makes the shipment event timeline and documents more accessible. Currently, users have to navigate to the 'View More Info' screen in order to see this information.

Constraints

It should replace the current map as a side modal
It needs to be done in 1 sprint
Needs to include all available documents and events associated with the shipment

Expected Timeline:

Design starts in mid March and gets done by end of March (2 weeks)
Development in the test environment begins by end of March and implementation is TBD

Design Process

The product manager scheduled a meeting to go over the Jira ticket written, describing the details of the task, reason for the task, and other requirements.

"Detailed View: Design a pop-up which provides detailed information about the shipment selected. The pop-up should include basic information including status, location, event timeline, and documents collected with the option to download if need be.

Why: Maximize the real estate and increase the efficiency of the landing page

Timeframe: One Sprints / 2 weeks"

Start looking at what our competitors are doing for registration. Finding examples of industry standards for this type of interaction.

Present examples and inspiration to product team for feedback.

Start designing initial attempts at the pop-up.

Show the product team progress and move forward with the whole interaction.

Present designs for the entire ticket and get feedback/approval from product team, leadership team, and development team

Set up separate call with Frontend Developer to go over technical requirements for the screens

Final Wireframes