HERE AT SETKA, WE KNOW ALL ABOUT STARTUPS. Being one ourselves we know the challenges, the risks and of course the fantastic benefits. When we were approached by Alleywatch to make something about the development of NextGen Commerce startups, we jumped at the chance. The majority of NextGen Commerce (NGC) companies are now valued at over $100 million, but all started out within the last few decades.
Headed by Setka’s art director, Sergii Rodionov and with the help of infographic designer Polina Chemeris, we set out to create something interactive and visually striking to effectively tell the story of New York’s startup world.
Working with Alleywatch, Primary Venture Partners gave us over 150 New York startups in the ecommerce sector and a basic genealogy tree of their origins and founders. Our challenge was to present this in an interactive infographic that clearly showed the founding of companies across three generations of development: 1985-2005, 2006-10 and 2011-16.
Alleywatch suggested using the New York subway map as a theme for this infographic. Massimo Vignelli’s original design for the subway system clearly presents a sprawling metropolis in neat colorful lines turning at consistent angles. Like the city, New York’s startup world is equally sprawling, interconnected and ever developing. Adopting Vignelli’s simplistic design made sense both logically and thematically.
Infographics designer, Polina Chemeris brought her invaluable expertise and experience to the project. She tells us how she approaches such challenges: “First is the draft part, where the idea and style is established, developing the ‘skeleton’ of the infographic using the available data comes next, then the design and stylization. At the end, we proofread inline with the client’s comments.”
Moving along the lines from left to right, you can follow where and how the startups were founded
For this project, we had our skeleton- the original Subway design, and a lot of data, which needed to be successfully worked into the infographic. Companies became metro stations and their development was transformed into metro lines. Intersecting lines show how multiple startups evolved into a single company. “Moving along the lines from left to right, you can follow where and how the startups were founded,” explains Sergii Rodionov.
Accuracy with both the data and the design is something highlighted by Polina as the biggest challenge of the project. “Because of the chosen structure, any changes affected the whole map, and sometimes we had to redraw several lines again.” The position of the lines and companies was really important, especially as many companies share multiple branches, so any mistakes could ultimately lead to whole redesign changes.
Using Setka Editor
The grid system that Setka employs was important for maintaining the overall structure of the post. We used a 6 column grid (140 px each and 20 px gutters), to fix text to the centre of the page and a 940px width to optimise view and ensure readability and interactivity.
All the style elements for the text and features were made using Setka’s Style Manager. Fonts, text formats, color schemes and choice of icons and dividers were all derived from the Style Manager. Color and iconography were key features for the project due to the extensive number of branches and startup ‘stations’.
Setka’s micro-template feature, which allows you to save individual elements or sections as ‘snippets’ ready for future use, sped up the creation process. With over 150 companies to make profiles for, creating one company template and reusing it added efficiency to the process.
While creating both an infographic map and a company profile list made a very long post, adding internal links (anchors) from the map to each company, ensured easy navigation and enhanced the project’s interactivity. Anchors were also applied between companies of the same development line and to the line itself.
Of course, the ability to embed design created on other programmes was paramount for this project to work. Transferring artistic elements such as the map was easy with Setka’s embedding capabilities. We simply copied and pasted CSS into the editor.
Thanks to Setka Editor and our designers, we managed to create an interactive, informative and stylish feature that visually shows the development of startups in New York.
It was a pleasure to learn about the world of NGC and New York’s rich startup history thanks to our partnership with Alleywatch and PVP. We were also happy to hear that Alleywatch CEO and founder, Reza F. Chowdhury, was impressed with Setka’s capabilities: “Setka Editor allowed us to seamlessly integrate beautiful, native advertising functionality without any changes to existing infrastructure.”
Using Setka Editor was a test for us to see if highly technical design could be incorporated into our product, which it did excellently. Sergii highlights how the project showed us “the importance of using snippet and animation features” for content with large amounts of data. The tools that Setka provided were instrumental for efficiency and presentation. Time and effort could be invested into the complex design of this project because the layout process was taken care of.