Sociomantic Design system
Project date: 2017
Who was Sociomantic?
Founded in 2009, Sociomantic rapidly grew to become a leader in the advertising and personalization industry. By 2015, they already had 16 offices worldwide and generated over a hundred million in revenue. They were very well positioned with top European brands selling them creative advertising services as well as a B2B platform to run programmatic display advertising campaigns.
I joined Sociomantic precisely during this hypergrowth phase in 2015. Being such a young company, they kept a start-up mentality, which allowed me to learn many different things and be exposed to large projects.
All I could see for a bit were banners
Sociomantic was the first company where I worked with a really successful and large B2B product, before I had experience in the Design industry, but mainly working for agencies.
The sociomantic model was simple and effective.
Creative agency + Demand-Side Platform (DSP):
1.You define and create the campaign assets with our creative team.
2.You launch the campaign through our platform.
My first year, I was on the creative team. Another way to say I did a lot of banners… and then transitioned into a more technical role as a Web Developer, taking care of the company’s design system.
My contribution developing Sociomantics design system
Because of my previous experience developing websites and having a good grasp on UX design principles, I started to work in the Web Styling team that took care of the Sociomanic design system. I developed many of the components of the system itself and worked closely with the UX team. We developed a system that was the building cornerstone of our B2B platform interfaces.
This was the first larger project I contributed to in my career. It gave me a deep understanding of design systems that I applied across my whole career. It was really a privilege to be part of creating the Sociomantic DSP platform, which drove the revenue of the company and helped it to succeed across 70 markets.
Milestones and impact
We created a fully fledged design system together with the UI/UX team. In early 2017, we launched the first version of Nessie ( the React.js design library ) internally, and later in the year made it public. I participated in the definition of its basic components & structure, developing many of its basic components myself.
We launched Lochness, a visualization user interface for React.js design systems, very similar to what Storybook came to be later, but developed in-house. It had a lot of very useful features, including visualization of components and a drag-and-drop builder.
• Component Library Base & Usage
• Design System / Theming & Style Support
• Icon / SVG Sprite Map Support
• Page Layout & Structural Components
• Form & Interactive Components
• Accessibility & Focus Management
• Test Coverage & Quality Assurance
• Documentation & Demo Site / Example Playground
Overall, in the web styling team we contributed greatly to the operations of the company:
• Kept our product user interface consistent and aligned across products and markets.
• Facilitated faster development cycles across engineering and design, due to the modularity, good documentation, and ease of use of the system.
• Achieved better scalability and maintainability of the user interface of our main B2B product.
Special thanks to Josh Wilson, Conor Cafferkey, Damian Rodriguez, and Wolfgang Niederhoffer.
