Are you interested in product stories about design and code? Subscribe to our unique series The Grit where we interview top-notch designers and developers every week.

Avocode Blog - Customer stories and case studies

We've spent years building our flagship product Avocode to enable people to work with design files in the browser. To do that, we developed technology to transform each design format into a JSON-based design format (we call it Octopus 🐙), which enabled us to work only with a single design format (instead of five). We had to ask ourselves, could the Octopus and our design parsing power other apps besides Avocode? Short answer - it can.

In January 2020, we started working on a project with [Ceros](https://www.ceros.com/) to give them access to our Octopus format via an API to enable Ceros’ users to be able to import Sketch, Adobe Photoshop, and Adobe Illustrator design files and instantly turn them into production-ready websites.

After almost a year of close partnership, we’re excited to go public with this story. The Ceros dev team has successfully leveraged the Octopus format to work with design files in their web app and released the design file feature with their [Ceros Studio 7 update](https://www.businesswire.com/news/home/20201029005224/en/Ceros-Introduces-Release-7-a-New-Standard-for-Digital-Design). Ceros is now the third web app after [Avocode](https://avocode.com/) and our [Photoshop to Sketch Converter](https://avocode.com/convert-psd-to-sketch) that is able to work with third-party design file formats via an API.

As more companies and app teams requested access to this technology, we’re excited to announce that both our format Octopus and our API are now open to the public as the [Open Design API](https://opendesign.avocode.com/) - and yes, documentation is a part of it; check it out. 🎉

<Image src="75/1.png" caption="&nbsp;<a href='https://opendesign.avocode.com/' target='_blank'>Documentation of the Open Design API</a> for reading data in design files." />

To help you understand better the potential of the Open Design API and how it can help products out there, we sat down with the Ceros team to understand their new Ceros Studio 7 update and what role our API played in its development.

**Without further ado, let Molly O’Connell, Director of Partnerships at Ceros, introduce you to what is Ceros and why you should keep an eye out for it.**

Ceros is a cloud-based design platform that allows marketers and designers to create immersive content without writing a single line of code. It is a tool that can transform and liberate your digital presence across all touchpoints, and it’s backed up by a team of experts.

Our team has pivoted to be entirely remote-first in 2020. We are around 225 people, but the Avocode team worked with our Product, Engineering, Partnerships, and Design teams.

We're a group of people who are wildly passionate about changing the way content is created on the web. We believe content creation has been constrained by technology for too long, and creativity has taken a backseat. We exist to unlock creativity. Our platform empowers the world's leading brands to share their stories and engage their audiences.

## What value does the integration with Avocode bring to Ceros' users?

**Jack Dixon, Creative Director at Ceros:** Ceros’ partnership with Avocode empowers our customers to import Photoshop, Illustrator, and Sketch files into Ceros, instantaneously converting them to web-ready HTML5, without writing a single line of code. This cutting-edge file conversion technology integrated into Ceros’ cloud-based design studio offers unparalleled creative efficiency. Through this partnership, Ceros is now the world’s only design platform to offer this service.

Even prior to this integration, Ceros customers had a tremendous amount of flexibility in designing and building content within our design studio. But with this integration, we can now offer unparalleled design efficiency, giving our users more time to be creative.

<Image src="75/2.png" caption="The design file import feature inside the <a href='https://www.ceros.com/educate/help_center/ceros-import/' target='_blank'>Ceros Studio.</a>" />


## What business value does Open Design API bring to you?

**Jack Dixon, Creative Director at Ceros:** When I initially discovered Avocode in [an article I read](https://avocode.com/blog/sketch-xd-figma-graphics-engine-in-the-browser), I felt like I’d struck gold. This was something that had been on my mind for almost 6 years of my time at Ceros.

> Avocode’s Open Design API has essentially saved us years of development if we’d built this with our own product team.

Prior to finding Avocode, I wasn’t sure it was even physically possible to achieve this with the constraints of today’s web technologies. When I dug deeper and realized there was an API in development, I knew that this was a perfect fit for Ceros.

Avocode’s Open Design API has essentially saved us years of development if we’d built this with our own product team. We worked closely with Avocode’s technical team, ultimately developing and delivering a seamless experience for Ceros’ customers at break-neck speed.

**Alan Delong, Engineering Team Lead at Ceros,** puts it this way:

> Avocode has been one of our favorite partners to work with from our very first meeting. Their expertise is invaluable, and they have been consistently responsive to all of our requests. Collaborating with their team has often felt like they’re part of our own. They helped us build a killer feature, and it’s saved us both time and money - I wouldn’t hesitate for a second to work with them again in the future.

<Image src="75/3.png" caption="A Sketch design file being uploaded to the Ceros Studio." />

## What was your biggest struggle that you had before you started using Open Design API by Avocode?

**Jack Dixon, Creative Director at Ceros:** Ceros independently conducted several research and discovery projects with the goal of building our own file conversion engine, but ultimately struggled to make any meaningful progress due to the resources required to complete a feature of this scale.

>  With our latest offering, Ceros Release 7, our customers are now at the forefront of unmatched creative freedom, power, and efficiency. A part of that magic is powered by Avocode, and we are so excited to see what our users create with it.

While Ceros has made incredible progress in the way content is created for the web in the last 8 years, we knew that integrating with the existing tools designers and marketers already know and love would broaden our user base, and build more brand loyalty over time.

With our latest offering, Ceros Release 7, our customers are now at the forefront of unmatched creative freedom, power, and efficiency. A part of that magic is powered by Avocode, and we are so excited to see what our users create with it.

## How would you assess the cooperation between Avocode and Ceros engineering teams?

**Alan Delong, Engineering Team Lead at Ceros:** After the terms of the project were agreed upon; we involved our lead designer efficiency engineer, two developers, a product manager, and our Head of Product Design. They all collaborated closely with the Avocode team throughout the course of the implementation. We also set up a shared Slack channel between the Ceros and Avocode teams, and despite the time zone difference, the Avocode team always responded to us in a timely manner. 

## Would you recommend Open Design API to other companies? If yes, what would be the reason?

I don't know of any other offering in the market that can transform all these different design formats into a single universal design schema. If any company is looking to work with files from multiple design programs, the Open Design API is hands down the right choice.

> If any company is looking to work with files from multiple design programs, the Open Design API is hands down the right choice.

## How are you satisfied with Avocode backend infrastructure?

**Alan Delong, Engineering Team Lead at Ceros:** The Avocode team provided us with the results of a penetration test they commissioned and remediated the few vulnerabilities that were found in a timely manner. There were no major vulnerabilities discovered. Overall, we've had no problems with the infrastructure Avocode put in place for us. 

## Can you explain how is Ceros using Octopus - the Avocode open design format - to import Sketch, Adobe Photoshop, and Adobe Illustrator files?

**Alan Delong, Engineering Team Lead at Ceros:** Prior to our partnership with Avocode, designers that wanted to initially prototype their Ceros experiences in a visual design tool such as Photoshop or Sketch would need to manually upload, realign, and tweak all the assets from that design file into a blank Ceros experience.

Now, with Octopus, Ceros is able to automatically convert these designs into a Ceros experience, saving designers quite literally -hours- per experience. Without Avocode's expertise in proprietary design file formats, we would have spent an inordinate amount of time creating a conversion pipeline for every format. The Octopus design format allowed us to short-circuit that and write a straightforward translation from Octopus JSON into Ceros JSON.

## How helpful is the Octopus format to you, and why?

**Alan Delong, Engineering Team Lead at Ceros:** The Avocode team created examples of Octopus from our collection of testing design files at the beginning of our cooperations. These turned out to be invaluable to us when we were implementing our side of the design file conversion pipeline.

> Without Octopus, our Design File Import feature - one of the most game-changing things we've ever released - simply wouldn't exist. It's been immeasurably helpful.

We’re extremely happy to have helped with the design file import feature to Ceros. If you are tacking similar use cases, need to import design files to your product, convert file formats, sync design system tokens or automate some pipelines around design files, we’d be happy to help. 

The easiest way for you to verify if the [Open Design API](https://opendesign.avocode.com/) is good for you, is to simply [generate a token and trying it on your own](https://opendesign.avocode.com/docs/quickstart).

Do you need to enable users to import design files (like Sketch, Photoshop, or Illustrator) into your product? Ceros (a cloud-based design platform from the USA) faced the same challenge with their Ceros Studio no-code tool. We partnered with them to solve it thanks to our newly released Open Design API and our custom JSON-based design format Octopus.

 How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

Ceros Design Import - Powered by the Open Design API - Case Study

We sat down with Andrea Mancini (Head of UX/UI Design at Aruba.it) to better understand how he manages a wide range of projects with remote people and how 80 people at Aruba use Avocode.

## Hello Andrea, thank you for taking the time. To start with, can you introduce Aruba to us a bit?

Hey, of course! Well, [Aruba](https://www.aruba.it/) is an Italian company. To give you a few numbers, we manage 2.7 million domains, 8.6 million email accounts, 6.7 million certified email (PEC) accounts, 130,000 physical and virtual servers, and a total of around 5.4 million customers. We've been in the business for a long time - we started already in 1994. Today, we are without a doubt a market leader in Italy for IT, data center, cloud, web hosting, email, certified email (PEC), and domain registration services.

<Image src="68/1.jpg" caption="One of Aruba data centers." />

Since we develop all of our services in-house, we have a business unit dedicated solely to UX and UI development and also our own hardware and software departments.

I reckon you are mainly interested in the UX department, right? It is made of 20 designers and front-end developers. We have many offices all around Italy, so this team is distributed in Florence, Arezzo, Rome, and Bergamo. The UX team designs desktop, web, and mobile applications. Our mission is to simplify digital services. As we work for a mass-market composed of a wide range of user types, usability is key. I'm happy to say that most Italian people use some of our utilities. In other words, we can say that Aruba promotes the digitalization of Italy.

<Image src="68/2.jpg" caption="Aruba UX design team in a weekly design sync." />

## Wow, congratulazioni! Can you tell us a bit about which Aruba departments find Avocode most useful to deliver great usability to the Italian market?

Sure. Today, around 80 people use Avocode at Aruba. It's mostly Marketing, UX, DEV, and Product teams. It's a great tool to explain design specs, receive comments, trace the evolution of design projects, and share original files. I recommend Avocode, especially if you need to sync a lot of departments in a complex organization.

> I recommend Avocode, especially if you need to sync a lot of departments in a complex organization.

## What was your biggest struggle that you had before you started using Avocode?

As I said, Aruba has many branches, so we are used to interacting in a remote way with a lot of colleagues. We also needed an official repository for Sketch and Adobe XD master files. Then one day... I found Avocode!

> We also needed an official repository for Sketch and Adobe XD master files.

Avocode helps the collaboration between our designers with the versioning system. As a manager, I can reassign a task from Marco to Augusto, and I don't need to care about Sketch files. Augusto is going to download the latest revision from Avocode and start to design from where Marco stopped.

> As a manager, I can reassign a task from Marco to Augusto, and I don't need to care about Sketch files. Augusto is going to download the latest revision from Avocode and start to design from where Marco stopped.

<Image src="68/3.png" caption="Avocode version tracking helps Aruba designers pick up where others have left off." />

Avocode also enhances our collaboration with software development teams. In the past, wrong implementations happened because the developers didn't have access to original specs. They guessed color codes and fonts just by looking at images. Avocode solved this pain.

We also developed a Design System, and the original files are stored in Avocode as a backup and for reference. We have a mix of Sketch and Adobe XD prototypes and I'm glad that Avocode supports both. We sometimes need to take back from another era some old PSD files, and Avocode supports them flawlessly.

> The original files of our design system are stored in Avocode as a backup and for reference.

<Image src="68/4.png" caption="Aruba Design System?s source files are securely stored in Avocode." />

## Can you tell us a bit about some recent project you guys finished thanks to Avocode?

I can show you our most recent project, the Webmail Smart! This interface is designed and developed by Aruba. As a hosting and email market leader, this interface is an important part of our offer.

We started the design process three years ago. In the first stage, we asked for user feedback and benchmark competitors. We also got insights from data usage of our old webmail. With these data, we developed five User Personas. We also defined a set of UI specifications, and we finally started to design prototypes. All these steps were made in Italy, but the development team was in Paris! So we needed a tool to share the right and final interface. Avocode helped us - and not just with the remote part.

> All these steps were made in Italy, but the development team was in Paris! So we needed a tool to share the right and final interface. Avocode helped us - and not just with the remote part.

<Image src="68/5.png" caption="Aruba email client interface being coded with Avocode Inspect."/>

For the Webmail Smart, we designed over 500 screenshots and interactions. It's impossible to manage and share all this material without a specific tool.

Today the Webmail Smart is available for our 8.7 millions email users. We are now in a continuous improvement cycle, and we release new features and bugfix every month.

<Image src="68/6.png" caption="Webmail Smart client by Aruba was designed and developed with Avocode."/>

## Wow, that's quite a success! Before we wrap up, do you have any personal tips or lessons learned from your business you'd like to share?

As a manager, I can give you this advice: spend part of your time continuously improving tools and workflows for your team. Sometimes you need to close chats, turn off your cellphone, and just search for a tool like Avocode. You'll never regret this time.

> Sometimes you need to close chats, turn off your cellphone, and just search for a tool like Avocode. You'll never regret it.


## Thank you Andrea! We wish the whole Aruba a lot of luck on your next projects and the digitalization of Italy.

Would you like to share your workflow with Avocode? Please contact us as at [team@avocode.com](mailto:team@avocode.com).

Italian market leader for IT, data centers, cloud, web hosting, email, and domain registration services recommends Avocode as the official repository for Sketch and Adobe XD master design files - perfect for remote collaboration.

How Avocode serves Aruba as the official repository for designs during remote collaboration

Aruba.it Case Study - Avocode App

Eastside Co is an international web design and marketing agency, specialising in the Shopify and Shopify Plus platforms. They have designed and developed over 500 sites and have been using Avocode for the past 3 years. Their team, consisting of 50 in-house designers, developers, marketers and project managers works from their head office in Birmingham, UK, and satellite offices in Germany, New York and Dubai, out of which 18 people actively use Avocode.

<Image src="66/1.jpg" caption="Eastside Co team in their HQ office in Birmingham." />


We sat down with Emily York (Senior Front-End Developer at Eastside Co) to better understand their internal workflow and to dig into where Avocode delivers the most value.

## Hey Emily, thank you for taking the time. What makes you guys busy these days?
Hello! Well, we’re always working on multiple projects at any one time which is why our project and account managers are so vital: they help prioritise and allocate work amongst the designers, developers and marketers to ensure tasks are distributed and completed on time!

Our aim is to help our clients succeed in e-commerce, whether that’s through designing and building beautiful UX-driven websites, delivering strategic marketing, custom app development or creative content such as photography or videography.

## Exciting! How did you find out about Avocode?
Back in the day we used to use Photoshop until one of our designers heard about Avocode, we believe it was word of mouth or possibly something they discovered when browsing design articles online. We tried Avocode and never looked back!

> The key thing that helped us decide whether Avocode is a good fit, was that unlike in graphic editor, in Avocode we can’t accidentally move anything and mess up the design.

## Where does Avocode fit in your process and where does it bring the most value?
From the development team perspective, prior to using Avocode, we used to work straight from design files in programs such as Photoshop. Moving to Avocode meant so much time was saved by instantly being able to see distances between elements without having to manually measure the space.

<Image src="66/2.png" caption="Measuring element size and distances while coding a web project with Avocode." />

Being able to see all the CSS properties for every element on the page gives us no excuse for the websites we build not to match the designs perfectly!

> Moving to Avocode meant so much time was saved by instantly being able to see distances between elements without having to manually measure the space.

A really big part of creating a great website is making sure the page loads as fast as possible for users. Avocode allows us to export any asset in the format we want, including SVG. Being able to export icons as SVG is really helpful as they are much smaller files in comparison to .png or .jpg files which results in faster sites for us.

<Image src="66/3.png" caption="Multiple vector layers are being selected as one SVG from Avocode."/>

We’ve also found the Avocode SVG exporter always exports the SVGs completely compact and ready for the web in a much smaller file than you get with most SVG icons. It is also incredibly useful that we’re able to select any number of elements on the page and export them as a group if we need to - this has definitely saved us having to bug the designers for assets quite a few times!

> We’ve also found the Avocode SVG exporter always exports the SVGs completely compact and ready for the web in a much smaller file than you get with most SVG icons.

I feel the Avocode UX was really well considered, from simple things such as only needing to double click a text element to instantly copy the text, to being able to see an overview of all the colours and font sizes used on the page before anything has been clicked. This makes it really easy to set up style guides and identify all the main global title and body copy sizes that will be used throughout the website.

<Image src="66/4.png" caption="Working with colour palette overview in Avocode."/>

Overall Avocode saves us a huge amount of time by giving us instant access to all the CSS properties we need, helping us achieve the the most pixel perfect websites as well as full control over the type of assets we bring into our websites, helping us achieve optimal site speeds.

## I’m happy to hear that. Can you tell me who uses Avocode the most in your team?

Avocode is used by our designers, developers and QA testers.

Designs are first uploaded to Avocode by designers, then developers work from it, and finally our QA testers can make sure our work matches the design perfectly down to the pixel.

<Image src="66/5.png" caption="Eastside Co website project in Avocode."/>

## What was your biggest struggle before you started using Avocode?

Working with designs in the program they were created in. This meant having to look in a lot of different areas of the program in order to find out all the properties we needed, for example width, font size, colour etc.

Sometimes what we were looking for would be in a toolbar at the top; some properties would be in a toolbar on the side; some we would have to click and drag to be able to measure. A lot of effort for something that Avocode just gives us easily, all in one place.

We’ve found Avocode to be incredibly user-friendly which is what makes it so easy for anyone to use without needing much of a tutorial. It’s very clear as soon as you load up a design from the moment you begin moving your cursor that you can access any element and see the CSS properties. It’s so intuitive you don’t feel like you’re having to learn a brand new piece of software.

> It’s so intuitive you don’t feel like you’re having to learn a brand new piece of software.

## What was the "magic moment" when you realized Avocode brings you value?

The first time we ever used it and saw we had instant access to all the properties and measurements we needed with one simple click of a button. From that moment it was clear that this software was going to make our lives a lot simpler and save us a lot of time.

<Image src="66/6.png" caption="Developers inspecting & coding one of the eastsideco.com subpages with Avocode."/>

## Can you walk me through your current design-to-code process?

Design team works with the clients to create a design they love; once the design is signed off by the client it comes into the development team to be built.

The design team uses the software to allow the development team to build from their designs. The development team uses Avocode to work from those designs to create websites. Finally our QA team use it to check the websites match the designs perfectly.

<Image src="66/7.png" caption="(<a href='https://eastsideco.com' target='_blank'>eastsideco.com</a>) website coded with Avocode."/>

## What should we add so Avocode would be even more valuable for you?

It would be great if there was some form of user interaction functionality to it, e.g. being able to see what a button should look like when you hover on it, by actually hovering over the element in Avocode.

## Thank you Emily. We wish you and the rest of Eastside Co team a lot of success in the future.

Would you like to share your workflow with Avocode? Please contact us as at [team@avocode.com](mailto:team@avocode.com).

International web design and marketing agency, specialising in the Shopify and Shopify Plus platforms -  How is Eastside Co design, dev, and Q&A team saving time on working with design files and getting assets with Avocode.

How Avocode transformed Eastside Co coding workflow and saved them the worry of accidentally moving design elements

Eastside Co Case Study - Avocode App

[Index Studio](https://indexstudio.net/) comprises a small, yet talented team of designers and developers with a penchant to deliver and develop well thought out solutions to client ideas/briefs. They offer UX/UI Design and Strategy, Graphic Design and Branding services. We sat down with their designer **Swathi Kirthyvasan** to find out how their team’s workflow changed since they plugged in Avocode.

##Hey Swathi, can you describe us a bit how does your workflow look like?
Hi and thanks for having me! Well, our typical project flow goes something on these lines; initial client meetings where we understand the brief/idea/product, followed by a quick Q & A from us for a much better understanding of the idea. We then sit down and frame the requirements as per our understanding and share it with the clients.

Once we have the a GO signal, we begin our brainstorming session where we discuss ideas and solutions and ways we can solve the brief. Paper sketches, intense debates, and whiteboard drawings are how we go about it. We then prepare wireframes and make the story of how the user will go about using the idea/product.

<AdsBanner />

In some cases, we do work on clickable prototypes (as per client demands) or jump straight into design and then work on showing the clients how the app works. We design the visuals as well as come up with interactions throughout the whole product. We send over the final designs to the developers, by using Avocode or in some rare cases, explain the design face to face.

##What were the biggest problems you were facing before you started using Avocode?
Before we began using Avocode, we spent days explaining each and every design to the developers along with writing a lengthy specifications documentation.

We had to rework our graphics/visual assets as when the developers demanded it, which became an absolute nightmare.

Minor changes to the design resulted in explaining the changes to the developers; which affected the flow of development which in turn affected the final output which never came up to the mark.

>Iterations became a pain as every change became another round of explanations to the developers. Clients were sometimes out of sync with how things were progressing, what was happening and the time delays that came out of the situation.

##How does your workflow look nowadays?
Avocode came as a huge blessing to us. The tool saved us plenty of time when it came to explaining the design to the developers. In the middle of a deadline-oriented project, where things had to be sped up, we dropped all our designs to Avocode and shared the files with the developers and clients.

The developers easily able to obtain the code that they need; be it for Web, iOS, and Android. The project also went through multiple iterations; we had to change the designs for multiple screens. Avocode made it super easy for us; we just added a new version, shared it with the developers, and they worked it out that it was new design version.

>“No explanation, nothing at all.”

All the visual assets, positions, alignments were precise and the same reflected in the developed application. The client was also able to track the project, changes and dropped comments whenever it was needed. From design to a developed project, it was a breeze because we saved on plenty of time; time which we used for refining and working on other changes for the project.

<Image src="https://cdn-images-1.medium.com/max/2000/0*ZJm0U7JDsi_5GPCV.png" external small caption="A listing app project in Avocode, created by Index Studio." />

##How did your toolkit change over time?
Before Avocode came into our lives it looked somewhat like this: brainstorming and sketching with paper and pen, building wireframes, flows and storyboards using Moqups, Photoshop or Sketch for designing, prototyping using InVision and handing over the source files to the developers for development. And then sit on calls /in person explaining things to them.

We also tried using Zeplin, but it kind of didn’t work well with our clients and developers; we got reports that they were unable to extract the visual elements of the design and that the UI was not as straightforward as Avocode. Our developers got used to Avocode pretty easily after one exploration and it was an absolute breeze after that.

Nowadays, our process remains the same, with the addition of Avocode which effortlessly fits into. After the final prototyping step when the client is happy how the app works and how the app looks like, we drop the files into Avocode, inform our developers and they take over from there. We have also integrated Avocode with our Slack channel, and any updates, discussions, and queries are answered right there. Avocode has made ours, our clients and developers work super easy and reliable.

<Image src="https://cdn-images-1.medium.com/max/2000/0*9EdcImDkVnWvpax6.jpg" external small />

##How are different people and stakeholders at your company using Avocode?
As a team, we use Avocode to drop the final design files for developers to use. We even share these files with our clients who use the tool to track how the project is going, the changes that happen and also comment, discuss and solve any changes. Our developers use Avocode to download code, export the visual assets to help them quickly get done with development and have an application ready in no time.

##What’s the biggest value that Avocode brings to your team?
Time. We saved quite a lot of time. What used to take hours or even days to explain to developers to code, to write down specifications and creating visual assets; now takes us lesser or absolutely no time at all. In just a day we could pass on the files, make design changes and still get the job done quickly. The faster this happened, the quicker we delivered the project which resulted in happy clients.

##Would you recommend Avocode to others?
I would definitely recommend it to everyone. It’s been such a timesaver when it came to handing over design files for development. It’s user-friendly interface, easy import and export of files and assets and the ability to change and update the designs without affecting the flow of work are its major plus points.

Index Studio comprises a small, yet talented team of designers and developers with a penchant to deliver and develop well thought out solutions to client ideas/briefs.