With its first product launch underway, Stedi needed a brand to define itself to customers and a website to promote a suite of EDI products and integrations. Stedi's primary audience is developers who are looking for a technical product to simplify the EDI process. This required a design direction that's relatable to the audience. The team crafted a brand system inspired by Unicode blocks and typographic glyphs to pay homage to EDI and code as part of Stedi's visual language. This final product included a website, web templates, illustrations, animations, icons, patterns, and color themes.
The site accommodates both light and dark modes, with the mode automatically adjusted to your computer's settings. We've also included a toggle button in the footer for manual mode selection.
The hero animation follows five elements as they transform across different file formats with Stedi's APIs. I conceptualized and animated the prototype, while Ivan brought it to life through code. The coding part allowed us to sprinkle some interactive details, such that clicking on the product's name links to its page.
This animated diagram is an extension of the hero animation in a structured format for clarity. Most of Stedi’s products are APIs so we often use diagrams to visually convey information. Once again, I animated the prototype and Ivan skillfully coded it. Each product in the diagram is clickable.
We designed a template for the product pages and assigned a unique color theme for each prodcut. The colors are reflected in the icons, illustrations, gradients, and the bullet points.
OPEN GRAPH IMAGES
We designed a set of Open Graph images tailored for each product, with one dedicated to the product page and another for the announcement blog post.
The pattern is composed of Unicode block elements and typographic glyphs to pay homage to EDI and code as part of Stedi's visual language. Affectionately named "EDI-fetti," we playfully incorporated it across our designs.
Each product includes desktop and mobile illustrations for the hero and product card.
Each icon is designed within a 4x4 grid, offering limitless design variations to ensure that no two icon is alike.
There was an opportunity to add a bit more personality and splash to the site. So, I designed some spot icons for our CTA block and the careers page.
I created a library of blog headers, making it easy for the content team to quickly choose a header image for new blog posts.
Role - Design Lead
Credits - Dan Newman for design and Ivan Miskovic & Neil Fenton for front-end development