stedi.com

EDI. X12. EDIFACT. Integrations. Developers. JSON. Diagrams. APIs. Illustrations. Animations. Colours. Themes. Patterns. Icons. Glyphs.

Client Stedi
Project Redesign
Years 2021—2022
Location Remote
Role Design Lead
Agency Internal
Category Startup
Format Digital, Brand
Fonts Inter, SF Mono, Recursive Mono
URL stedi.com

Work

Stedi Homepage Montage

Montage of the stedi.com homepage.

Stedi Homepage (Top)

Stedi homepage featuring an architecture diagram, EDI tools, and customer testimonials.

Stedi Homepage (Bottom)

Stedi homepage featuring the latest EDI products, tools, getting started resources, and footer.


EDI Core Components

EDI Core (Components)

EDI Core OpenGraph Image

EDI Core (OpenGraph Image)

Converter Components

Converter (Components)

Converter OpenGraph Image

Converter (OpenGraph Image)

Product Menu

Product Dropdown Menu

Product Icons

Product Icons

Stedi Careers

Careers Map & Benefits

Stedi Customers

Customer Cards (WIP)

Stedi Pricing

Pricing

Stedi Landing Pages (Light)

Landing Pages (Light Mode)

Stedi Landing Pages (Dark)

Landing Pages (Dark Mode)

Stedi Mappings

Mappings (Landing Page)

Stedi Components

Stedi Components


Process

EDI Animation

Homepage animation tests.
Produced by Katherine Meng & Ivan Miskovic.

Homepage Wireframes

Wireframes of early homepage designs.

Illustration Process

Early diagram and illustration experiments.

Grids

Exploring grid systems based on the Stedi logo.

Email Mockups

Mockups of email templates.

Typopgraphy Tests

Testing alternative type treatments.
Söhne and Söhne Mono by Klim Type Foundry.

Alternative Logo

WIP alternative logo design.

Poster Mockups

Alternative product icons mocked up on posters.

Content Wireframes

Wireframes of content outlining the product benefits.

Pricing Research

Pricing and SaaS landing page research.

Design Iterations

Early design explorations and alternative icons.

OpenGraph Image

Alternative OpenGraph image.

Pets Of Stedi

Pets of Stedi. Featuring: 34 dogs, 17 cats, and 2 bunnies.

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 is developing a new platform composed of individual building blocks 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. There’s finally an alternative to black-box solutions and expensive licences. Stedi is 100% pay-per-use, with no upfront fees, and no user licenses.

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 (an open standard file format), then mapped between JSON schemas, and converted into various other file formats via their APIs and 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 themes help uniquely brand Stedi’s tools, while communicating what they do. The goal was to continually iterate and refine a site that has a unique aesthetic in the startup ecosystem, defined by Stedi’s playful and technical EDI-fetti.

  • 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: Finalist, Large Scale Websites (2022)