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

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.

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!

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.

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!

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.

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!

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.

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.

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.

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.

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.

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.