Stedi

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