Two design stories: comparing logistics routes and keeping supplier offers connected to their Pre-invoice.
AZ Provider connects products, companies, trade services and logistics. I led the UI/UX redesign, moving from evaluation and information architecture into detailed interface design.
Buyers need to compare routes and follow supplier responses without losing context.
Consistent route attributes and a Pre-invoice → offers → conversation structure.
Evaluated interface, architecture documents and detailed designs. User validation is the next step.
My heuristic review recorded problems in how product results communicated filters and selected states. These findings established a clarity principle for the redesign: a person should be able to understand their options and the effect of their choices.
Icon-only filters lacked clear text labels and selection feedback.
Design direction: name the control and make its state visible.
Active filters and sorting did not clearly explain the result set or support quick removal.
Design direction: expose selected conditions and a route back.
These findings concern the existing product-results page. The logistics work below shows how I applied the clarity principle to a separate designed flow.
The Impact/Effort matrix helped distinguish local clarity changes from structural work. I use two selected priorities here: clearer filter states and conversations linked to the business activity they belong to. Impact is a design estimate, not a measured improvement.
A local change to how a control explains itself and reflects a selection.
Design focus → comparison clarityA structural change: conversations need a relationship to the business activity they belong to.
Design focus → transaction continuityThe distinction is scope: clarifying a label or selected state affects a control; connecting an inbox requires consistent relationships, navigation and context across screens.
A shipment decision depends on cost, transit time, transport modes and included services. Once a buyer chooses a route, those details still matter when asking for a quote.
Use consistent route attributes, align the selected options in a comparison table and carry the chosen route into the provider conversation.
Price, transit time and included services follow a consistent order across the cards.
Transport icons and text labels identify road, sea and air segments along each route.
Selected cards and a route count explain what will appear in the comparison.
Read this screen: the example contrasts a lower-cost road-and-sea route with a faster road route. Each column has its own Request Quote action, so the next conversation has a specific route behind it.
Read this screen: the Tehran–Hamburg route, transport modes and transit estimate remain in the context panel. Messages can clarify cargo, customs and insurance while the comparison and shared document remain accessible.
Comparison adds another step and repeats route information. It gives the buyer a dedicated decision space; retaining a compact route summary in the conversation then avoids relying on memory during negotiation.
The buyer needs to inspect supplier responses without losing the product, quantity, destination and requirements that define the transaction.
I treated the Pre-invoice as the parent context. Its detail page leads into related offers. Conversations can start from the Pre-invoice or a specific offer, while retaining the parent context.
Read this screen: the requirement remains the main object; the offers count and “Review Offers” action sit alongside it.
Read this screen: the top summary carries the product, quantity and destination forward. Supplier rows expose their terms and lead to a conversation.
A conversation can begin around the published Pre-invoice or a supplier’s offer. Both views retain the parent Pre-invoice; the opening context explains why this discussion started.
The product and quantity remain visible through the Pre-invoice summary.
The opening context distinguishes a Pre-invoice discussion from follow-up on an existing offer.
Shared files and links to the offer or Pre-invoice support the next step in negotiation.
Keeping a compact summary on the offers page repeats information. That repetition preserves context at the moment the buyer compares responses and chooses whom to contact.
The design output makes route choices comparable and keeps supplier offers attached to their Pre-invoice. The evaluation, priority matrix, sitemap and six user flows connect the interface work to the decisions behind it.
Consistent comparison attributes, visible selection, a clear next action and transaction context carried between pages.
Test route selection and supplier follow-up as separate tasks, looking for completion without help, loss of context and recovery from a wrong choice.
The deliverable is a connected set of detailed designs: shortlist and compare routes, request a quote with route context, review supplier offers and continue the conversation from a Pre-invoice. Task success is the next validation step.
Task: Choose two routes for a shipment, compare them and request a quote for one route.
Observe: Unassisted completion, mistaken selections, whether the buyer can explain the route trade-off and whether the selected route remains clear in the conversation.
Task: Open a Pre-invoice, compare its offers and contact one supplier.
Observe: Whether the buyer reaches the intended conversation and retains the product and quantity context.
Explore the product screens and detailed interface work in Figma.
Open AZ Provider in Figma ↗