The Iterative Rebranding of Saleor
The decade-long design journey of an e-commerce platform. See how Saleor has evolved from a small e-commerce library to the world's fastest-growing open source platform, and how our design team have reimagined the branding to reflect those changes.
We never really consider our design work to be completely done. Web design, particularly in open source projects, is always subject to future changes and iterations. However, the release of our Saleor 2.0 platform in November 2018 was a major landmark and is a great opportunity to take a look at the visual journey of the Saleor brand so far. It’s also a chance for us to recognize the great work of our design team… who have asked me to remind you that “It’s all still a work in progress (and always will be).”
Let’s start at the beginning…
2010–2017: Setting Sail
Saleor was the fastest growing open source e-commerce solution in the world in 2018, but it has taken time to get to that level. Way back in 2010, we built Satchless, a pure-Python library providing generic e-commerce interfaces. It was a building block used to provide features like checkouts and carts. Taking this as our cue, the Satchless branding motif we designed was — you guessed it — a fancy retro shopping cart, along with a traditional striped shop awning in the logo.
Satchless and our first iteration of Saleor side by side.
In 2012, we split off the Django-specific part of Satchless under a new brand, which we named Saleor [pronounced ˈseɪlə(r)] because we felt like it was something that floated along under the radar, and the name just flowed. We designed a mashup of viking longboat with a merchant ship, reworked the Django symbol as the figurehead, and kept some continuity with the Satchless design by changing our striped awning into the sail.
2017–2018: Into the E-commerce Ocean
Saleor gained so much traction that we knew it was time to push the solution and build our first complete branded website, for release in early 2017. As an e-commerce platform created by developers for developers, we focused on communicating with that target group in our first designs. We stuck with the familiar ocean theme but switched from vikings to pirates, because developers often identify with freebooters charging around in international waters. The style was cartoonish fun as most of the developers we know love animation — from the Cartoon Network to the utterly obscure.
The awning from Satchless design carried over into the second version of Saleor
The pirate (who has no official name, but I like to think of him as Salty) became a recognizable avatar among developers, but Saleor grew so quickly in 2017 that we soon realized we would have to take it beyond the dev community and out into the wider business world. The style we had created wasn’t one that would have a strong appeal for business decision-makers.
The original Saleor website and our developer-friendly corsair
Here is the interesting question: Did we get it wrong first time around? Was it all too cartoonish and light-hearted? After all, we started a major redesign only a year after the first version was launched. In reality, it is the perfect illustration (pun intended) of how design is always iterative. The code we were writing was good and we found, over time, that there was a market need that we could fulfill, for which we needed to take a wider perspective. Our initial design more than answered the brief. It attracted a community that helped us attain a level of success. The knock-on effect was that we had to move the branding on as our horizons changed.
Check out the full Behance overview of the first full design package for Saleor here: Saleor 1.0 brand overview
Safe travels, old friend
2018: A Path to the Stars
In early 2018, we made a fundamental technology decision to enhance Saleor with a GraphQL API. It signaled the major change that required us to re-brand Saleor. We wanted to reflect the modernity we were now bringing to e-commerce and refocus our developer-first image into a darker, more cyber-inspired tone, drawing on the fresh visual language of leading cryptocurrency websites.
Unveiling the new brand identity
We created the visual branding at the same time as we were building new page templates and architecture. This meant that everything was designed with a consideration for how it would look on the final page, and every small element of our brand identity had to be reconsidered. At times it felt like we were taking one step forward and two back, but the design began to take shape.
The Saleor 2.0 website (June 2019)
The Saleor 2.0 Design Process
We started by updating our brand profile to bridge the gap between our existing community of developers and business decision makers.
Mood boards and word maps directed our initial ideas
We made early decisions about aspects of the visual branding:
- We wanted a theme that would reflect the established brand name and also retain some consistency for our developer community.
- We liked the idea of using versatile geometric shapes, as knew we would have a huge number of assets to produce in the future and would need flexible design elements. We also felt that the isometric style was a great fit for Mirumee Labs and Saleor.
Early ideas for our key visual included a stylized anchor, a humble shipping container, and an iceberg (with the tip representing the work done by store owners and the underwater section being the stable base of Saleor). They all had merit but we wanted a find a link to the original branding that wasn’t tied too closely to shipping.
Sketching out our ideas to create the new design
Searching for something that felt new but was a nod to the past, we hit upon the idea of creating a modern, ‘cyber’ version of the parrot, which was a supporting character in the original branding images. We drew a bird with digital strands inspired by the inside of a microchip and by computer connectors. It was thus rooted firmly in the world of IT and was a strong, technical, even mathematical piece of design.
This really created the visual story we needed to tell. Saleor 2.0 was an evolution of the existing platform and our branding was able to reimagine one specific element of the original design and take it into the new identity in an exciting way.
Our bespoke colors with unique names
The New Saleor Logo
We wanted a logotype that was simple and elegant, and yet bold. We chose Heron Sans for the font, because it looked modern and technical. While working on a brand signature in the shape of a 3D shopping bag, with the letter S on the front, we came up with the idea of erasing the outline of the lower section to leave a suggestive, bold signature.
It was another lightbulb moment. The remaining element was also similar to the shipping container that had been at the start point of our design process — but one with the ends shaped like forward slashes used in coding:
// The mapping between latitude, longitude, and pixels is defined by the web // mercator projection.
It’s subtle but still bold and simple enough to be versatile. It is also open to small changes whenever we create related products or extensions of the Saleor brand.
The development sketches and the logo in use
The whole rebranding process was a time and resources challenge but a great opportunity to create a fresh and dynamic identity for a brand that we love. We also had a chance to learn new techniques for creating dynamic animations for the net, which the Lottie plugin allowed us to export directly.
Lottie animations bring our geometric designs to life
You can view the rebranding of Saleor 2.0 on Behance. Follow our page to see more of our design work.
Related articles: