Stedi

Information

Stedi is rebuilding the technological backbone of the B2B economy. Each year, trillions of dollars flow through a global network of commerce via an archaic framework called EDI (Electronic Data Interchange), but there hasn’t been a major new EDI platform in over a decade.

The team at Stedi are developing a new platform that developers can use to architect their own EDI system that easily integrates with other applications. These customisable systems allow businesses to securely exchange transactions like purchase orders, invoices, and more with their trading partners around the world.

At Stedi, there’s a need to communicate what’s possible with EDI. For example, it can be translated into more human-readable formats such as JSON, then mapped between schemas, and converted into various other file formats via Stedi’s products.

ISA*00* *ZZ*STEDI *ZZ*ACME *210901*1234*U*00801*000000001*0*T*>~
GS*PO*SENDERGS*007326879*20210901
*1234*1*X*008020~
ST*850*000000001~
BEG*24*SP*PO-00001**20210901~
N1*2L*STEDI INC.~
REF*K6*A composable platform for building flexible EDI systems~
PER*SR**EA*team@stedi.com~
PO1**1*2P*0.0075*PE*GE*EDI Core~
PO1**1*C0*0.001*PE*GE*Mappings~
CTT*2~
SE*9*000000001~
GE*1*1~
IEA*1*000000001~
— Example EDI

Stedi’s primary audience is developers who are looking for a technical platform and products to make working with EDI easier. This required a design direction that is relatable to the audience and similar to the tools they’re familiar with. By using colour, illustrations, diagrams, patterns (affectionately called EDI-fetti), and typographic glyphs/characters (~ * + % $ } / = etc.) the elements pay homage to EDI and code as part of Stedi’s core visual language. The site is designed to help developers quickly understand whats possible with EDI and that Stedi specialises in “APIs for building EDI integrations”.

The illustrations abstract the products and show what each individual API is capable of, as well as highlighting what they can do when combined. With limited visual interfaces for the APIs, these illustrations, product icons, and individual colour treatments created a themeable system to help uniquely brand Stedi’s tools, while communicating what they do.

• Site design features:
• — Light and dark mode support
• — Code and SVG animations of Stedi’s APIs
• — System architecture diagrams and animations
• — Typographic patterns and font glyphs/characters as iconography
• — Pixel-inspired icons and illustrations (homage to the square in Stedi’s logo)
• — Individually coloured themed product landing pages and product icons
• — Configurable cards and panels to cross-promote and sell Stedi’s separate products

“Dan ran a really smooth homepage redesign / product page launch. I appreciate that he was able to execute and deliver on such a large project. Our priorities and expectations were set correctly, and we delivered on what felt like a good timeline. Any time a problem presented itself, we were able to take corrective actions (by reaching out to specific stakeholders or codeowners) to ensure the project kept on trucking.”
— Anonymous (360 Feedback)

Credits

• Dan Newman, Katherine Meng, Eden Halperin (Design)
• Ivan Miskovic, Neil Fenton (Development)
• David Kanter, Kasia Fojucik, Joost Ronkes Agerbeek (Content)

Awards / Recognition

• DINZ Best Awards: Bronze, Large Scale Websites (2022)