Work
Process
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)