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 - Curated design & code stories worth reading

## Hey Ramon, let's start with you telling us a little about yourself. 

Hey, thanks for having me, it's truly an honor to be featured in this series, as some of the folks that have been interviewed here have, directly or indirectly, helped me so much during my career.

I am Ramon Gilabert, an interaction designer from Tàrrega, a small town close to Barcelona. I am currently designing [Lobe](https://lobe.ai ) at Microsoft, and I have worked for companies such as Red Bull, Intersport, IKEA, and Domino's in the past.

<Image caption="Lobe" alt="Lobe" src="https://cdn.marketing.avocode.com/pupushify-staging/Final_597d33fcaf.jpeg" external/>

My background is a bit non-traditional, since even though my passion for computers was clear since I was 10 - tinkering with the inside of my black Pentium IV, changing computer parts, or building my first websites for (or about) Greenpeace - I ended up studying Electronic Engineering, something that was not related pretty much at all to the things I liked.

I pretty much detested my degree until the very end, but with some money I had made during a couple of summer jobs, I bought my first Mac, installed Photoshop, Sketch 1, TacoHTML, and Xcode, and that changed my life forever.

> I bought my first Mac, installed Photoshop, Sketch 1, TacoHTML, and Xcode, and that changed my life forever.

## Let's hear more about this. Tell us about your path to becoming a designer.
I was born in a nation that values sports more than anything else, and I clearly remember seeing my first football pitch when I was 8. "Mom, I want to play here, too". Like everybody else around me, becoming a soccer star was one of those early dreams you have, but something that changed quite radically as soon as I saw my first website in our Pentium IV at home.

I remember being 10 and discovering Google.com, going to Hotmail.com and creating my Messenger account, and going to Apple.com and configuring the dream computer I truly wanted. Above all, though, I remember reading about Greenpeace and wanting to give back to it in a way a 10-year-old could give back… so I created a website in a drag and drop service that allowed you to do read-only sites. My mom, fearing what Greenpeace would do to me, made me take it down, but the train never stopped from that point on, and the next stop, was to download Photoshop.

Online games had started to come out back then -it was around 2004 -and each game had an online forum attached to it, so you could post battles and meet people with the same interests as you had. I didn't know much English so I'd use my English to Catalan dictionary to translate the words that people used to type. I discovered a section in one of those forums that said "Signatures" - in it, people would compete head to head to see who had the most beautiful signature, and I wanted to be part of that, so I downloaded Photoshop, and I started doing signatures for online games, taking part in competitions, reading about Photoshop tutorials, asking people for their tricks, and downloading lots of renders from DeviantArt to blend in my creations.

Design at that point for me was art - and the only thing I had - was the drive to do something beautiful in the world I had just discovered online.

After a while, the iPhone was announced, and I remember seeing videos on this new website called YouTube about the camera animation, the keyboard recognition, and the overall interface that some folks at Apple had created. It was clear to me at that point that I wanted to create something for it - so I started reading about Objective C, much later Swift, Photoshop, and much later Sketch, and then, the whole world of design, from prototyping to interaction, visual and graphic design.

## That's quite a story. Where did it lead you? What are you doing now? 
I am currently working at Microsoft designing Lobe, a free, easy-to-use tool that lets you train custom machine learning models that you can later use in your app. Lobe makes machine learning accessible to everyone, not just a small group of experts with deep knowledge of data science and code.

What's interesting is that machine learning has often been thought of as a technology, but in reality, it's just a tool that has been sitting around in a dusty corner of scientists offices for the past 30 years, and, though the potential of that technology can, and will define the direction our world takes in the coming years, it has mostly been left out to just a small group of people. 

With Lobe, we wanted to empower anybody to incorporate machine learning into their apps, so we made it universal, free and private.

Beyond Lobe, I try to regularly launch and support small side projects, such as a weekly podcast in Catalan called Safareig (safareig.fm) or a website to see the current state of fully vaccinated people in the world called [Vacunat](https://vacun.at).

## Can you describe your role at Lobe in more detail? 
Machine learning will be in every pipeline and in every piece of software we create in the future, not only assisting and automating parts of it, but maybe creating the software itself. GitHub launched Copilot not long ago.

At Lobe, we are striving to empower more individuals to use machine learning, first with vision and images, and later by working on supporting more problem types and reducing the friction to get started with those. Lobe makes collecting data, labeling, training and using your model seamless, the same way shooting and editing a movie feels seamless with the iPhone.

Not too long ago, we partnered with [Adafruit](https://www.lobe.ai/blog/machine-learning-kit-with-adafruit ) to launch a Raspberry Pi kit, so makers around the world could prototype their ideas using a Raspberry Pi. [This March](https://www.lobe.ai/blog/introducing-new-ways-to-use-your-model), we also launched a redesigned export page and the ability to select multiple camera sources, so data collection becomes even easier in your computer.

I am currently the lead designer for everything that has to do with Lobe at Microsoft, though Microsoft is a big company and priorities keep changing around.

## How did you get to be the Lead Designer? I bet it was an exciting journey. 
I started my journey in formal tech at [Hyper](https://www.hyperredink.no), a small digital agency in the heart of Oslo focused on building products for companies such as Intersport, Varner, and IKEA. A friend called Elvis spotted some of the work I was posting on GitHub and on Dribbble, and reached out to do an interview. 

After a couple of talks and a home exercise, I was moving my whole life to Norway to get started as an iOS engineer there. I spent two years in that new country, learning everything I could from the super talented people that worked there… Chris, Vadym, Markus, Johannes, Ola, Silje, Thuy, and many, many more. And though I started working as an engineer there, I quickly transitioned into interaction and visual design.

After my two-year stint in Norway, I flew back to Barcelona to start freelancing again, until Red Bull called because they needed help on their Red Bull TV and Red Bull.COM platforms.

<Image caption="Red Bull TV" alt="Red Bull TV" src="https://cdn.marketing.avocode.com/pupushify-staging/Mobile_3_8b3bae7fcd.jpeg" external/>

The mission at Red Bull was to inspire people to do more through the content that Red Bull itself produced, and it was an amazing job, because the mission aligned really well with my values of inspiring people through beautiful content.

<Image caption="Red Bull Cards" alt="Red Bull Cards" src="https://cdn.marketing.avocode.com/pupushify-staging/Cards_850719c07e.jpeg" external/>

At Red Bull, we came up with many concepts like live channels, the player as the control center for consumption and discovery, engaging cards that would appear contextually as you'd read certain stories, and more. My time with Esa, David, Philipp, Flo and the folks at Dayy was awesome, but after a couple of years working remotely for Red Bull, I wanted to be closer to tech again, so I started working at [Netlify](https://netlify.com) with Rafa on two projects that saw the light of day: Netlify Docs, and private, server side Netlify Analytics. After a while at Netlify, I moved on to work on Lobe, the project I've been working on for the past two and a half years of my life.

## I know you also host a podcast about how technology is changing the society around us, and it's exclusively in Catalan. What's the story behind it? 

I like to think of the concept of a fly on a wall in the middle of a conversation when I think about podcasts, and in fact, I spent many years listening to podcasts and learning on the internet, so when the opportunity came about, I couldn't let it go, Marc proposed to start a podcast, and we called it [Safareig](https://safareig.fm).

<Image caption="Safareig Team" alt="Safareig Team" src="https://cdn.marketing.avocode.com/pupushify-staging/Imatge_2_40914c3744.jpeg" external/>

Safareig is a very Catalan word that means both "laundry room" but also, the act of going to a place to gossip about ideas. This second definition comes from the days when people would go to a place to wash their clothes and they'd talk to others while they were cleaning them.

<Image caption="Safareig Podcast" alt="Safareig Podcast" src="https://cdn.marketing.avocode.com/pupushify-staging/Header_df324fb5a3.jpeg" external/>

All in all, Safareig is a podcast about technology, culture and our society- the Catalan society - as it evolves with the constant reinvention of technology. Born out of the COVID-19 pandemic, Safareig tries to answer the questions that people may have around up and coming concepts such as privacy, job seeking, mobility, design or machine learning, and historical events such as the Macintosh introduction, the iPhone event, or the organizational history of companies.

Safareig is in Catalan because we would be lying to ourselves otherwise. Catalan is a very minor language in the grand scheme of things, and technology, always going with the big first, is alienating a language that for many of us, is the first language that we used when we were born, and still use to this day. With this podcast, we try to bring two realities together, the reality of this minor, unprotected language and the reality of technology changing worlds and lives.

## It sounds like you have good time-management skills to do all these things. Do you have some routine by now? 
My partner's alarm goes off at around 7:15 AM, which means that my alarm is starting to warm up to tick at 7:50 AM. I wake up to a Catalan radio station that plays music, so I start the day with good vibes in my body. After I've woken up, I quickly lay down in the sofa for another 30 minutes again.

Every couple of days, I go on a 10 to 12km run in Collserola, the mountain that we have, limiting Barcelona on the west. I always feel fortunate to live close to nature, even if it's nature that's been prepared to be merged in the city. Barcelona doesn't have many green spots, but Collserola is one of the most beautiful ones I've seen.

After my run, I usually take a shower, have breakfast, record a podcast if it's Thursday, and then go to my home-office-space - I'll spend the majority of my day there. I usually start work around 11 or 12 PM and go on until 9 PM. Lobe is based pretty much entirely on the west coast, both in Seattle and San Francisco, so having as much overlap as possible is important to ensure a tight collaboration between designers, engineers, and other partners in the team.

<Image caption="Ramon's Studio" alt="Ramon's Studio" src="https://cdn.marketing.avocode.com/pupushify-staging/DSC_02677_10742ca7fc.jpeg" external/>

Meetings are over at 9 or 10 PM, and my partner just gets home. We cook a nice dinner, talk about our day, watch the Barcelona game, or just enjoy a bit of silence together. At 11:30 PM it's reading time, and at 12 PM lights are off.

## How is remote work treating you? 
I've been working remotely for the past 5 years, first in my studio in Barcelona, then in a co-working space, and finally in my apartments later on. Remote has been hard, especially at a time when nobody was doing remote life, and though it became easier once we were all remote for COVID, the circumstances sucked to a point where motivation was really low for all.

Remote work is both a curse and a blessing, though, for one, you can work from anywhere - you just need an internet connection, your computer, and motivation to do the work - you don't need to commute, you are closer to your family, you can meet people all around the world, and you can focus a lot more most of the time. 

On the other hand, though, collaboration is harder, lack of motivation to achieve goals is present everywhere, work and life balance gets often broken, schedules get shifted, limited space makes it harder to pull work off, and inspiration is harder to find. 

I believe that many innovations are happening for remote work as we speak, but nobody has been able to crack the beauty of seeing one another every day, of collaborating together, of coming up with ideas in impromptu brainstorm sessions, or on learning about your team's work whenever you are just wandering around the office.

> I believe that many innovations are happening for remote work as we speak. 

As things open up again soon, I am hopeful remote work will stay, so many people that couldn't move countries, that had to help relatives around their houses, that had disabilities, or that simply needed or wanted to stay at home with their families, will still be able to work, but I, for one, I am excited to be able to go back to the office, at least every once in a while, to enjoy people's warmth again.

## With such a tight schedule, do you still have time for hobbies? 
Not all is work here, and it's been clear to me over the years, that, even though I had a rough period with them, sports have always been there when I needed them the most - not only as a consumer of sports, or as a creator of platforms for them at Red Bull - but also taking an active role in them. Three years ago, I started running regularly and that was one of the best decisions so far. In the past, I played football for 10 years and did rock climbing for 2. 

Beyond enjoying the competitiveness of sports, the team-building experience, and the greatness of athletes such as Leo Messi, LeBron James, Eliud Kipchoge, Aitana Bonmatí or Simone Biles, I enjoy nature, traveling around, looking at architecture, reading books, watching good movies, and listening to good music. As of late, I've been also building my record collection—re-discovering classics such as Bob Dylan and Supertramp, and mixing them with the great Catalans like Manel or Els Amics de les Arts.

<Image caption="Gaudi architecture" alt="Gaudi architecture" src="https://cdn.marketing.avocode.com/pupushify-staging/Gaudi_3_3523b8e631.jpeg" external/>

## Do you have some tips on how you educate yourself? 
Being self-thought is not easy, especially in a new area such as design - you are constantly questioning every decision you make, and you are constantly faking it, so it looks like you know more than what you actually know. Impostor syndrome is real, in the best, and in the worst weeks, and so, the little voice of the little guy in your head telling you "you are not good enough" is always present.

I am going to paraphrase Giannis Antetokounmpo here - a couple of weeks ago, he explained how he got past his ego, saying that when he focuses on the past, that's his ego talking, but when he focuses on the future, that's his pride. He finished by saying that he tries to focus on the moment, in the present. That's humility, he says, that's being humble. In a weird way, and without being as accomplished as Giannis, thinking about this framework makes sense, not in an achievement kind of way, but in an impostor syndrome kind of way. The truth of the matter is, everyone is trying to figure things out as they go, so read, learn, keep being curious, and be in the moment; nobody will fire you, or will fault you for wanting to learn more and wanting to push yourself harder, if anything, people will praise you for it.

> Read, learn, keep being curious, and be in the moment - nobody will fire you or fault you for wanting to learn more and wanting to push yourself harder; if anything, people will praise you for it.

As of myself, I'm always trying to look for opportunities to learn, new courses, new books, new talks, new people to meet, and I always try to stay curious. I recently finished my masters in Interaction Design as well, which helped me stay on track for a while, but as new things come on, as new opportunities come forward, that voice gets activated again, and you just need to push it aside, and try to push forward.

## Last but very important question. What inspires you in your work and life to grow and better yourself?
Keep growing, keep pushing, keep building and above all, keep learning. 
The knowledge you can potentially learn is and will always be greater than the time you'll ever be alive, but regardless, learning shouldn't stop when you stop going to school, or when you are outside of your job. Life is for the curious, and curiosity is always a skill that I try to nurture.

> Life is for the curious, and curiosity is always a skill that I try to nurture.

<Image alt="Inspiration" src="https://cdn.marketing.avocode.com/pupushify-staging/Island_4_636a7801bb.jpeg" external/>

As I did in my interview with Interface Lovers, I'd love to end with a quote attributed to Ira Glass:

"Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it's just not that good. It's trying to be good, it has potential, but it's not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn't have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you got to know its normal and the most important thing you can do is do a lot of work. Put yourself on a deadline so that every week you will finish one story. It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions. And I took longer to figure out how to do this than anyone I've ever met. It's going to take a while. It's normal to take a while. You've just got to fight your way through."

Ramon Gilabert is the Lead Designer at Lobe for Microsoft. His background may be a bit non-traditional, but buying a Mac, installing Photoshop, Sketch, TacoHTML, and Xcode changed his life forever one day. Ever since, he's been designing for companies like Red Bull, Intersport, IKEA, and Domino's. We asked him about his journey and his advice for other designers to grow and do their best work. 

How to grow as a designer and always be curious with Ramon Gilabert from Microsoft

large_Ramon Gilabert_The Grit.png

medium_Ramon Gilabert_The Grit.png

small_Ramon Gilabert_The Grit.png

thumbnail_Ramon Gilabert_The Grit.png

Ramon Gilabert_The Grit.png

The Grit - Ramon Gilabert, Lead Designer at Lobe for Microsoft

Designing a product that people love is hard. You might think you know what your users want, but you probably don’t. You can spend weeks creating a product you believe to be perfect, only to find out that it’s the wrong solution from the customer’s point of view.

User testing provides you with valuable qualitative data and helps you build better products faster by validating your assumptions before you waste time and money building something nobody wants. It helps you find out what works and what doesn’t, uncovering hidden insights and vastly improving your chances of success.

## What is user testing?

User testing is one of the main stages of the development cycle and an essential part of the [design process](https://avocode.com/design-hand-off). It can help you understand your customers' needs more effectively, identify usability problems, and finally, improve your product. 

<Image caption="source: UX Collective " alt="User testing" src="https://cdn.marketing.avocode.com/pupushify-staging/user_testing_flow_11a0d29518.png" external/>

It's cost-effective and enables you to make more informed decisions by exploring and analyzing your target audience’s behavior when interacting with your product. You’ll test prototypes of specific flows or features with many users, set tasks for them, then record and analyze the results - which can then direct the iterations you need to make to design a better solution.

If you’re using an online tool for [user testing](https://www.playbookux.com/), you’ll have access to users that are locals or live around the world, so you'll be able to get a more accurate and objective view of your target audience.

## User testing is your secret weapon

The goal of the user testing is to determine if a product is going to be successful in the market. It can also help you find the best practices in design and architecture and implement these into your product. 

It allows you to get a sense of how your users will react to your product while:

- Showing how users understand your product.
- Revealing where the user pain points are and how you can address them.
- Discovering new or more intuitive design solutions.
- Helping you identify and fix problems faster.
- Testing usability in the context of the whole experience.
- Developing smarter UI and UX in general.
- Creating an eye-catching product design.
- Generating more interest and engagement from users.
- Giving your product team valuable insight into user behavior.

## Why investing in user testing is worth it

> Research shows that, on average, every $1 invested in UX brings $100 in return. That's an ROI of a whopping 9,900%. Forrester. 

The primary benefit is that it allows you to improve your products iteratively and rapidly. With user testing, you can move forward quickly, test faster, and learn faster, making it a significant part of the user experience design process and [coding tests](https://devskiller.com/coding-tests/), helping you optimize your [MVP strategies](https://rebeldot.com/minimum-viable-product-strategy/). 

With understanding your audience, you can create an interface they can use easily and intuitively while eliminating pitfalls along the way. As a result, you’ll be able to create high-quality products that sell well, establish higher brand awareness and have a positive impact on your business. You can:

- Test many customer personas. 
- Support innovation. 
- Help product managers develop customer-centric products. 
- Enhance user happiness and satisfaction. 
- Develop more effective products by removing the guesswork from the process. 
- Develop better teams by improving collaboration and communication. 
- Prioritize tasks quickly and deliver the best possible product. 
- Consolidate your research on user needs and behavior into one place. 
- Lead to quicker product development and releases.

## Simplifying the user testing process

### How does it work?

- Create a feature, prototype, or product.
- Choose a testing method.
- Find users to complete the test.
- Define how you'll be testing users.
- Define test duration.
- Send the test.
- Analyze results.

There are several tasks you need to perform before you start with the user testing process. These include deciding on the test topic, scope, and purpose, choosing the stakeholders, deciding on a medium of interaction, and assembling a list of participants.

When choosing your test topics, think about the users’ goals, values, and constraints when interacting with your product. 

Set up a focus group consisting of users who are likely to respond similarly to the intended audience that you want to study. Respondents to user testing can be existing customers, users recruited from usability testing tools, business people, consumers, social media users, community members, etc. Depending on your product, you can look for participants who know your industry, belong to a certain demographic, etc. 

After that, you will typically send out an email to the user base asking for a set of participants. The subject line should contain the words “Testing” or “Prospective Participant.”

Also, you need to create a user testing consent form that gives your users information about the project, goals, rules and tasks for your session. People are more likely to be comfortable sharing their experiences and giving you feedback if you provide them with a safe environment. Users need to know that you respect their privacy and that you’ll use their feedback and personal information only to improve your product. 

Once testing sessions are conducted, you need to maintain thorough documentation on tasks, outputs, comments, and the participants.

### How to find out what your users want?

Before embarking on any new user testing endeavor, remember to clearly define the goals you want to accomplish. Only then can you determine the best usability testing method for your needs.

**1. Questionnaire**
Getting a few random participants to write down their thoughts about the value of your product is a good way to test ideas for the website or application. Questionnaires are a great, simple, and fast way to collect the information you need. They provide you with precise results in very little time. 
What’s more, they’re very affordable. Questionnaire testing works great for those who are looking for basic information or an answer to specific questions. Think of these types of tests as quick yet thorough customer research sessions.

**2. Video Testing**
The most straightforward testing method is to conduct videos in which a subject (or people, in some cases) can use your product in real-time, with no manual testing. 

In these videos, you set the date and time, instruct participants to test a predefined app feature, and capture their feedback on video. Once you choose a small test group, you can watch the videos to understand how the subject or participants react to the test. 

The alternative is to let your participants create a video with [video editing](https://clipchamp.com/en/video-editor/) software, and send you the video recording when they finish with your tasks. This will give them more time to think and go through things at their own pace.

**3. Card Sorting**
Card sorting is a great way to ask questions related to your product and receive answers from your participants. Usually, they can think of better ways to improve your product and solve problems presented in the test. 

Card sorting tests only the performance of simple actions. Testing these aspects of your product may provide a quick overview of where the app works and where it needs improvement. 

**4. Interviews**
If you have multiple users, interviewing them to observe their behavior on site before launching the product can give you the information you need to tweak the product. This is particularly effective for small to mid-size businesses, which can be better at quickly fielding testers with smaller team sizes. 
Once you have a group of volunteers, offer them a limited amount of functionality. Let them try things out for a few days to see how they respond to the product. If the feedback is consistent with the desired change, then implement that change. If not, revisit the problem area.

**5. A/B Split testing**
All users are different, so testing a single user may yield much useful information about a particular product. But what if you have a few users who are representatives of a wider target audience? That’s where split testing comes in. 

Split testing allows you to create groups of users and administer two different user testing methods to each group — with no cross-over — to determine which methods work best. You can then adjust your testing options based on which method produced the highest percentage of conversions. 

## Learn from your users

At the end of the usability testing process, you should create a final report that shares your findings with the rest of your team. A usability testing report produces a checklist of the problems encountered during the test and identifies those features that work well.

<Image caption="source: PosiRank " alt="User experience" src="https://cdn.marketing.avocode.com/pupushify-staging/User_experience_diagram_04f722bfaf.png" external/>

This report is an essential tool for product design teams when they need to identify areas for improvement, prioritize these issues, and plan future design iterations to improve user experience.

## Say goodbye to product failures
User testing helps you communicate your brand value to users and helps you strengthen your idea. It’s important to do it early in the process before you launch your product. 

It helps you understand what is most important to users, helps you make better decisions about their experience, and, ultimately, helps you create a better solution for your customers. It’s worth your time and effort to invest in user testing for your product.


## How can Avocode help you in this process?

At Avocode, we help teams build great digital products. We have the best Inspect tool on the market. You can work with Figma, Sketch, Adobe XD, PSD, and Illustrator files to quickly export assets in multiple resolutions and formats, generate and copy code in 10+ languages, get the text from your designs in two clicks, keep track and download design versions, leave contextual comments on top of the designs, and, of course, share, store, organize, collaborate, you name it. 

And you can use our [Pixel Checker](https://avocode.com/pixel-checker) tool to place your design on top of the coded layout to visually compare styles & positions of design elements, note any differences, and achieve a perfect match. 

Check it out. [We have a free trial](https://avocode.com/login?signup).

**About the Author:**
Lindsey Allard is the CEO of [PlaybookUX](https://www.playbookux.com/?ref=avocode), a video-based user feedback software. After seeing how time-consuming and expensive gathering feedback was, Lindsey made it her goal to create a solution to streamline the user feedback process.

User testing provides you with valuable qualitative data and helps you build better products faster by validating your assumptions before you waste time and money building something nobody wants. It helps you find out what works and what doesn’t, uncovering hidden insights and vastly improving your chances of success.

How to Improve Your Product With User Testing

large_user-testing.png

medium_user-testing.png

small_user-testing.png

thumbnail_user-testing.png

user-testing.png

We asked 4 freelance developers with decades of experience about their workflows, what problems they face, how they solve them, and what techniques they employ to do their best work fast and efficiently. 

Read their full answers below or scroll down for the conclusion to see the list of 18 essential frontend development tools, skills, and practices. 👇

<Bio name="Tomas Livora" role="Freelance Software Developer" image="https://cdn.marketing.avocode.com/pupushify-staging/livora_01473c239a.jpeg" />

### Tomas is a full-stack developer with 15 years of experience in coding. Recently, he has been working remotely as a contractor for various companies worldwide. He specializes in building single-page applications (SPAs) and enjoys transforming beautiful designs into smoothly-working products used by many people.

### Describe your typical workflow for us, Tomas. 

I usually work on web applications built using one of the leading JavaScript frameworks - Angular, React or Vue. They are often complex products where a deep understanding of a given framework is needed in order to deliver a result that is both easily maintainable and doesn’t suffer from any performance issues.

Typically, I start by analyzing the work handed off to me by a designer. I study the requirements, identify the most complex parts of the implementation, and communicate my findings back to the designer so they can modify the design. I find that communication with your designer is especially important at this stage when working on projects with really tight budgets.

We usually collaborate using one of the work tools that allow me to quickly inspect various design elements, measure distances between them, and see the corresponding CSS code. But I never copy this code. I take it just as a guideline. Instead, I try to deliver the same result with the least amount of CSS code possible. I create global SCSS variables for colors, repeating dimensions, etc. to make my code clean. This way, it's also easy to apply design changes later on as you only need to change it in one place in the code and it will get propagated everywhere. 

>I create global variables for colors, repeating dimensions, etc.

### What’s the number one problem you face in your work, and how do you solve it?

I often receive the desktop version of a given application, implement it, and later get the mobile version with a completely different UX. It introduces a lot of unnecessary rework, and it's super time-consuming to implement something like that and then make the app switch between desktop and mobile versions seamlessly when resizing the browser window. 

> I always ask for both the desktop and mobile design versions before I start on the implementation. 

So now, I always ask for both the desktop and mobile design versions before I start on the implementation. And I try to use the same components for desktop and mobile as much as possible. I only apply different styles to them based on the screen size, otherwise developing and maintaining the application becomes really hard. 

### What’s your tool stack, and what do you like about it most?
I use [Storybook](https://storybook.js.org/) in almost every project where a designer is involved. It allows me to develop reusable UI components in isolation outside of the actual application and then share them with designers to get their feedback. 

It is especially useful when developing a UI library since it also serves as a testing ground and documentation base for components. Having your components used outside of an application also forces you to make them truly reusable and avoid unnecessary dependencies on other parts of the app.

And when it comes to coding, the single tool that saves me the most time is [WebStorm](https://www.jetbrains.com/webstorm/). The way this IDE (Integrated Development Environment) can handle JavaScript, TypeScript, Angular, and Vue.js code refactorings and move code pieces around is just astonishing. 

I take WebStorm for granted now. But when I try to use Visual Studio Code from time to time, I'm always surprised how far behind it is in this area, even with all available plugins. I don't get why most developers prefer VS Code. Especially when I see them typing JS imports manually while doing a live demo on a tech talk. It doesn't sound like the 21st century.

### What tips can you give for faster and easier frontend development?

> Take your time to analyze the screens you get from designers and think about what is the best way to structure your application and how you would split it into components. 

I would advise front-end developers not to rush into implementation but take your time to analyze the screens you get from designers and think about what is the best way to structure your application and how you would split it into components.

> Make sure your components are as small as possible - no more than three HTML elements.

Make sure your components are as small as possible - no more than three HTML elements. Making them super-small will force you to come up with the most logical component structure with a lot of reused parts which will make the application much easier to maintain. This may sound like basics, but I've seen so many apps with huge components.

And when it comes to learning resources, I think the best way to start with something new is an online course (e.g. on [Udemy](https://www.udemy.com/)). But then, to go deeper, you need to read the documentation and a lot of articles.

In my opinion, the best way to find such articles is via email newsletters which will also help you stay up to date. For me, [JavaScript Weekly](https://javascriptweekly.com/) is the single best resource since it combines articles and news from the whole ecosystem. [Frontend Focus](https://frontendfoc.us/) is also a good one, but there were too many things fighting for my attention, so I had to unsubscribe from this one.

<Bio name="Daniel Strelec" role="Frontend Developer since 1997" image="https://cdn.marketing.avocode.com/pupushify-staging/Daniel_Strelec_2dcb1f4c8a.jpeg" />

### Daniel is a frontend developer with over 20 years of experience and hundreds of commercial and non-profit projects under his belt. He is passionate about web optimization, speed, and accessibility. He is an active member of a front-end community [Frontendisti.cz](https://frontendisti.cz/) and gives occasional talks on coding and web performance. 

### Describe your typical workflow for us, Daniel. 
I always start by uploading designs to Avocode. I create variables for design colors, export icons in SVG, and set up typography. Doing this preparation work allows me to start coding without losing focus. Again, I use Avocode at this stage to generate code, quickly copy text, and export images as I go.

<Image caption="How Daniel exports icons in SVG" alt="Avocode Export" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_3_1f95f54c2a.png" external/>

### What’s the number one problem you face in your work, and how do you solve it?
As a developer, I often find that some designers forget to think about the implementation of their work. They don’t think about how their design and responsive elements will show in ultrawide or medium (in-between desktop and mobile) resolutions. Having the option to communicate with a designer directly and with context is helpful, but I try to prevent such issues from the start and always ask in advance for design format and specs.

>Always ask in advance for design format and specs.

### What’s your tool stack, and what do you like about it most?
I use Visual Studio Code, various extensions, [Browserstack](https://www.browserstack.com/), [Fork](https://git-fork.com/), and Avocode, of course. I’ve been using Avocode for 3 years now, and I can’t imagine how I worked without it.

>I’ve been using Avocode for 3 years now, and I can’t imagine how I worked without it.

I can run Avocode on any OS, and I don’t even have to install the [desktop app](https://avocode.com/download) if I am working on a different computer. Instead, I can open the web app and pick up my work from there.
Avocode allows me to work with all design formats without paying for design tools. I can even open Sketch files on Windows. I can copy design text in one click, export images in various formats and resolutions, define variables, and get object properties and sizes.

<Image caption="How Daniel defines variables in Avocode to customize his code" alt="Avocode Variables" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_5_b20d6a220f.png" width="50%" external/>

I use Avocode to display the grid and guidelines on top of my designs, set the right design scale and units. Being able to select different code output and adjust the order of declarations for my needs is great. And having properties for various elements like shadows and transitions generated for me is a huge time saver.

<Image caption="How Daniel sets the grid and guidelines in Avocode to speedup coding " alt="Avocode Grit" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_6_2624b5a049.png" external/>

I think one of the most powerful tools in Avocode is the [Pixel Checker](https://avocode.com/pixel-checker). I cannot imagine coding without it.
<Image caption="How Daniel uses Pixel Checker in Avocode to deliver pixel perfect development " alt="Avocode Pixel Checker" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_1_468dd18347.png" external/>

Simply put, if you code HTML/CSS websites - you must try Avocode, and after customizing the app to your needs - I guarantee you will realize what a huge timesaver it is.

>Simply put, if you code HTML/CSS websites - you must try Avocode, and after customizing the app to your needs - I guarantee you will realize what a huge timesaver it is.

### What tips can you give for faster and easier frontend development?
I always try to automate routine tasks. How? Configure your code editor to fit your needs, use Emmet, snippets, boilerplate templates, create your own simple grid.
I have my CSS/JS declarations sorted and linted directly in devstack. I use automatic deploy after pushing the project into the right branch. I have set up processes and auxiliary scripts.

If you are bothered by routine operations that can be automated - try to find a tool like Avocode to solve this problem for you. For example, I can just copy the font-size and line-height from Avocode. I prefer to specify the font size in PX to better imagine the size when coding, and the conversion to REM can be done automatically.

> Write the code so that you are familiar with it in a few years. 

In general, I recommend using the KISS principle to all developers. Write the code so that you are familiar with it in a few years, and passing the project on to another developer is simple.

<Bio name="Lukas Bartak" role="Frontend Developer since 2008" image="https://cdn.marketing.avocode.com/pupushify-staging/lukasbartak_23ece8361e.jpeg" />

### Lukáš has been coding websites for over 12 years now. He is passionate about bleeding-edge technologies, accessibility, UX, gorgeous design, automatization, open-source communities, and not so happy with coding newsletters. 😀

### Describe your typical workflow for us, Lukáš. 
I mainly work with JavaScript, whether it is front-end frameworks, hybrid mobile applications, Node.js, lambda functions, or server-side rendering.
I have participated in various global projects that have a daily traffic of hundreds of thousands of visitors. I am particularly glad that I can bring new ideas to projects I work on and make a difference.

### What’s the number one problem you face in your work, and how do you solve it?
When I cooperate with designers on a project, I always make an effort to structure our work. I find that thinking in atomic building blocks, working with grid layouts, and keeping principles of reusability makes the process much easier.

> I’m glad we’ve come a long way since the days of designing UI in Photoshop and estimating values from rasterized images.

I’m glad we’ve come a long way since the days of designing UI in Photoshop and estimating values from rasterized images. Fortunately, the market for UI design tools is way more competitive these days, and I see more designers increasingly using them!

### What’s your tool stack, and what do you like about it most?
Recently, I have been working mainly with Adobe XD, Sketch, and Figma. I used Photoshop, Adobe AI, and Zeplin before. Each of these tools has its advantages and disadvantages, of course, but I’m excited that Avocode is trying to bring all tools into one and do it with passion.

### What tips can you give for faster and easier frontend development?
I often come across people spending their efforts on repetitive tasks without realizing that they are not the only ones solving the problem. Most likely, someone has already thought about it, and there may be a way to automate “the process”. Look for a solution that solves your problem and focus on more important and fun things in your life and job instead. 

>I often come across people spending their efforts on repetitive tasks. Look for a solution that solves this problem.

<Bio name="David Tyemnyak" role="Frontend Developer since 2011" image="https://cdn.marketing.avocode.com/pupushify-staging/davidtyemnyak_de6f58d1b9.jpeg" />

### David is an advanced front-end developer with over 9 years of intense experience in making web and mobile apps and 5 years in UI design.

### Describe your typical workflow for us, David. 
I start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently and setting up specific things for my projects, such as colors, fonts, and basic components. After that’s done, I move on to more complex structures, pages, and the whole app skeleton.

>The best way to communicate with your designer is directly in the handoff tool.

### What’s the number one problem you face in your work, and how do you solve it?
Most often, I face problems with incomplete tasks and flow specifications from a design perspective. How do I solve this? [Communication](https://avocode.com/design-review-process) for sure. The best way to communicate with your designer is directly in the handoff tool like Avocode or InVision, but using a chat app or comments in Figma can work too. 

<center><video width="100%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/digest/avocode_comment.mp4" type="video/mp4"></video></center>
<Image caption="How to collaborate on your design-to-code projects in Avocode">

### What’s your tool stack, and what do you like about it most?
My favorite tools are VS Code, terminal, and Figma. Oh, and also a web browser. I use Google Chrome most of the time. I like how easy these tools are to adopt, and how Figma, in particular, handles multiple people working on the same project.

<Image caption="How to inspect designs side by side inside VS Code with Avocode" alt="Avocode Visual Studio Code Integration" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/digest/avocode_vccode.gif" external/>

### What tips can you give for faster and easier frontend development?
First, look around for the code or style of other developers. Open up the source code of your beloved framework or package and study it. It is not so hard, and you can learn a lot. 

>Open up the source code of your beloved framework or package and study it.

And secondly, set up a workflow with your designer to make your cooperation easy and efficient. I personally worked out such a flow. I don’t need all the screens designed in detail to start my work. Instead, I need the designer to hand off all necessary components like buttons, inputs, headings, states, and a basic structure first. This flow saves both a designer and a developer a lot of time. And remember that good communication and constructive feedback is the best way to avoid any problems in your cooperation.


## 🧐 Conclusion

Here is the list of 18 recommendations and best practices to improve your development process and save time on coding. 

### How to efficiently collaborate with a designer on a project?

1. Set up a workflow with your designer to make your cooperation easy and efficient.
2. Study the design and tell your designer about the rabbit holes you find before starting on the implementation. This way, your designer can make changes based on your feedback and save time and money on the project. 
3. Use your handoff tool to communicate with your designer with context. 
4. Ask in advance for design format, specs, and task specifications. 
5. Ask in advance for desktop and mobile versions of the design to make your application truly responsive and avoid the time-consuming process of reworking your code later. 
6. If the final design is not done yet - start by coding your components first, and then move on to more complex structures.

### How to work smart, write your best code, and save time on repetitive tasks? 
1. Start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently. 
2. Configure your code editor to fit your needs, use [Emmet](https://emmet.io/), snippets (if you like), and boilerplate templates.
3. Use a tool like Avocode to export assets in SVG or a different format and resolution, inspect various elements, and measure distances between them. 
4. Make your components as small as possible - no more than three HTML elements - to force yourself to develop the most logical component structure with many reusable parts and make your application much easier to maintain.
5. Create global variables for colors, repeating dimensions, etc., to make your code clean and easy to change globally.
6. Automate routine and repetitive tasks.
7. Look for a solution that solves your problem and focus on more important things instead.
8. Use a good code editor like Visual Studio Code, WebStorm, tools like Figma, Avocode, Adobe XD, Browserstack, [Pixel Checker](https://avocode.com/pixel-checker), Google Chrome, and various browser extensions for a quick, precise, and efficient workflow. 
9. Use the KISS principle - write your code in a way that you’ll be familiar with it in a few years and can easily pass the project over to another developer. 

### How to educate yourself and stay updated on the latest trends and practices in the space?

1. Open up the source code of your beloved framework or package and study it. 
2. Take an online course to start learning something new and improve your skills. 
3. Subscribe to newsletters such as [JavaScript Weekly](https://javascriptweekly.com/) and [Frontend Focus](https://frontendfoc.us/) to find helpful articles, get into the details, and stay updated on the most recent developments in the space. 


🔗 Bonus tip from our friends at Toptal.com: [How to Hire a Front-end Developer](https://www.toptal.com/front-end#hiring-guide?ref=avocode)

Do you find these recommendations useful? Join the discussion on [Twitter](https://twitter.com/avocode) to let us know what you think.

We asked 4 freelance developers with decades of experience about their workflows, what problems they face, how they solve them, and what techniques and practices they employ to do their best work fast and efficiently. 

18 tips on how to do frontend best & improve design-to-code collaboration

large_frontend.png

medium_frontend.png

small_frontend.png

thumbnail_frontend.png

frontend.png

18 tips on how to do frontend best & improve design-to-code collaboration 

## Hi Christina. Thanks for taking the time. To break the ice, as a content designer, what do you enjoy doing in your free time?

Hello! Thanks for having me. These days with a toddler, my free time is pretty limited, but I always manage to make time to play word games on my phone. I’m obsessed! Scrabble is one of my favorites, but there are many others like Boggle and Bananagrams. I also enjoy crossword puzzles. Hit me up on Boggle or Words With Friends (@hellochristina). I’m always looking for people to play with.

## Very cool. Can you introduce yourself a bit and tell us what makes you busy these days?

I work at Facebook with the newly minted title of Content Designer (formerly Content Strategist). More on that later. I’m a San Francisco Bay Area native. Growing up, my parents didn’t pressure me to get top grades or pursue a career in medicine or computers, even though they themselves worked in those fields. I felt like I had a lot of leeway in whatever path I chose. This was a huge relief since I was absolutely terrible at science and math. The one thing I had was a love of reading and writing, which was bolstered by a kind and encouraging English teacher I had in high school.

After graduating college with an English degree, I worked various temp jobs while looking for something permanent and happened to get placed at a small advertising agency doing administrative tasks. I loved the energy of the place, particularly the creative department where the art directors, designers, and copywriters were gathered. The owner’s 74-year-old mother worked in the proofreading department. After learning that I was looking for a job, she talked with her son, who then hired me as a proofreader. Over time, I was given a few copywriting projects to work on by the creative director, and that’s where my career started. I’m forever grateful for the people in my life who have taken a chance on me, and that’s why I try to pay it back by helping others where I can, whether it’s by making connections, giving them feedback on their portfolio or offering career guidance for people interested in working in content design.

Fast forward a few jobs, and I eventually made the switch to Product Content Design. In some ways, it’s flexing the same muscles, and in many other ways, it’s building many new skills that, to this day, I feel I’m still learning and will continue to do so.

## Tell us about what you do at Facebook.

Content designers at Facebook are embedded in product teams and work on things like naming, interface writing, information architecture, and planning content to scale across the massive system that is Facebook. I spent a couple of years working on the Profile team, and for the last few years have been on a team that focuses on people in emerging markets. Most teams at Facebook take a global approach to build products, and my team is unique in that we focus on addressing barriers that certain populations face in using Facebook.

> Content designers at Facebook are embedded on product teams and work on things like naming, interface writing, information architecture, and planning content to scale across the massive system that is Facebook.

This minority approach is actually a majority stake for Facebook. More users are in emerging markets than in developing countries. This means many people either use Facebook in a language other than English or use Facebook in English but may have varying comprehension levels. I was intrigued with the challenge of how to scale the English language so it’s understood by every type of user - from a fluent American to someone who may barely be able to make out a few words here and there. For example, in India, nearly everyone is using Facebook in English, but the level of comprehension varies wildly in the country.

> For example, in India, nearly everyone is using Facebook in English, but the level of comprehension varies wildly in the country.

One of my favorite examples of how English isn’t a one-size-fits-all is the phrase “What’s on your mind?” It’s one of the first things you see when you open Facebook, prompting you to create a post. The data showed that posting was low in India, and after digging into why this could be, we learned that people in India didn’t understand what the phrase meant and didn’t realize what they were supposed to do. After rounds of testing different content dimensions, the winning variant was “Write something here.” Being direct and instructional clarified the action we wanted people to take as well as where to take it. This is now what everyone in India sees.

<Image caption="How Facebook localizes the 'Create Post' component" alt="Creating a post in Facebook" src="https://cdn.marketing.avocode.com/pupushify-staging/post_cccc0f56f8.png" external/>

## The Content Design team at Facebook recently changed its name from Content Strategy. What are your thoughts on that?

My personal opinion is that the Content Strategist title has been going through somewhat of an identity crisis over the years. The title has grown to mean a lot of different roles and responsibilities. The word “strategist” is so broad and can be applied to many content practices. I love that we’re better defining our function and aligning it with our closest counterpart, product design. We design experiences for people using words. We partner with product designers on how best to visualize these experiences in a way that is clear and straightforward.

> We design experiences for people using words.

## You have a journalism degree. What pushed you toward copywriting and eventually content design?

I went to graduate school with no idea of what I wanted to do after. I just felt that journalism was a nice base to work off to pursue some kind of career in writing. My motivations for grad school are a little murky as I was drawn to the opportunity to live in London. It turned out to be an unforgettable year, both academically and personally. When I came back to California, I ended up back in the same industry I was in before I left advertising. I worked as a copywriter for companies like Gap and Williams-Sonoma before landing at Hotwire, a travel company owned by Expedia. It was there that I first heard about the UX practice and UX writing. By then, I was feeling burnt out with trying to write catchy headlines and was intrigued with the challenge of solving people and business problems. I had a few roles at Hotwire and the last one was on a product team, helping to set up a new CMS. While it wasn’t UX work, it was a step in the right direction.

## What are the main differences in responsibilities and tasks of a Copywriter vs. a Content Designer?

The goals and the ways the roles function are the primary differences. As a Copywriter, you’re writing with the intent of getting people to want to buy something. You tend to use subjective adjectives and can be abstract, playful and clever in communicating the benefits of the product. You’re usually working off of a brief, with many decisions already made for you. Communication with the client or stakeholder is more disconnected than a content designer, who’s usually embedded on a product team.

> As a copywriter, you’re usually working off of a brief, with many decisions already made for you.

As a Content Designer, you usually have a stake in deciding what products to build and how they will be built. You define frameworks to guide the content direction as part of a system, accounting for scalability in size and locales. Your words are simple and straightforward with the goal of getting the user through a flow with as little friction as possible. In both roles, you consider the audience, choose your words wisely and follow established voice and tone guidelines.

> As a Content Designer, you usually have a stake in deciding what products to build and how they will be built.

## As a Content Strategist at Facebook, you are talking to a global audience, but how do you approach the issue of localization?

Content designers at Facebook create content in English first, and the content is then translated into all of the languages we support. While we work at scale, we’re thoughtful about localization and ensuring that the content not only translates well but meets the needs of each locale. We make sure that terminology is well-defined and that translations carry the same tone as was intended in English. Our voice is simple, straightforward, and human, so we can be sure we always sound like Facebook, no matter the language. Content Designers work closely with the localization team in all phases of our work.

> While we work at scale, we’re thoughtful about localization and ensuring that the content not only translates well but meets the needs of each locale.

<Image caption="Creating a Story with the Facebook app. Source: facebookblueprint.com" alt="Creating a Story with the Facebook app" src="https://cdn.marketing.avocode.com/pupushify-staging/facebook_story_1056704418.gif" width="35%" external/>

## When somebody in the room says “people don’t read”, how do you react?

I hear this phrase in meetings from time to time, and it’s like nails on a chalkboard. On the one hand, I know what people mean to say, that yes, not everyone reads every word on a screen or wants to parse through paragraphs of text. People tend to scan. But it can come across as dismissive and inconsiderate of the needs of our users. Of course, people read. If an app had no text and was full of empty boxes, how would people know what to do? Every word matters. And every word should be there for a reason. Content Designers have run countless A/B test results that show changing the content - whether it’s the tone, value proposition, or even the verb choice - can make or break an experience.

> Of course, people read. If an app had no text and was full of empty boxes, how would people know what to do? Every word matters. And every word should be there for a reason.

## The chicken or the egg conundrum. What comes first - content or design?

I’d say it depends on the situation. A content- vs. a design-led initiative seems self-explanatory but when it’s not as clear cut, I would say either could come first. The Content Designer may have more on their plate and is unable to start a project as early as the product designer, and vice versa. I don’t think it matters so much as the importance of collaboration and early sharing of work between the two roles.

## What is your best practice regarding the collaboration between content and design?

Design and content work very closely at Facebook. Oftentimes, we’re literally sitting next to each other (when we were actually in the office). If the partnership is working at its best, we are each other’s right-hand person. We make decisions together. Run ideas by each other. Create principles and frameworks. We run brainstorms together and use data to inform what we should work on. We gain alignment and make sure our work tells a cohesive story before presenting it to the team.

## What problems are you facing when it comes to the collaboration between design and content?

One of the biggest challenges I’ve faced is being outnumbered by the number of product designers I support. When a Product Designer is able to dedicate 100% of their time to one product or pillar, they’re able to work at a deeper level, and produce work that shows depth and breadth. This makes it easier to build subject matter expertise and be seen as a key player. A Content Designer can only be so effective when they’re splitting their time between two, three or more workstreams.

On a more tactical level, collaboration in asynchronous design tools like Sketch is a challenge for content designers. We either have to rely on the Product Designer to make content updates, or we have to figure out some type of process of taking turns updating the Sketch file. Figma solves this big problem, and I’m so glad that teams are moving in this direction.

## Where is the best place for people to connect with you online?**

You can find me on [LinkedIn](https://www.linkedin.com/in/hellochristinawu/). If you like word games, find me @hellochristina on Boggle or Words With Friends.

**Bonus Question: What’s your favorite way to eat avocado?**

Can I start with my least favorite way to eat avocado? I love avocado, and I love sushi, but the two do not go together! I’m a sushi purist and feel it’s wrong to include avocado in a roll. Now my favorite way to eat avocado, and this is going to make me sound so Californian, is avocado toast. Toasted sliced sourdough with avocado, then sliced tomato and topped with a fried egg. Drizzle a little salt and pepper. Perfection.

Christina Wu leads the Content Design Team at Facebook. She is an expert at how to design experiences for a global audience using words, clearly visualize them, and remove friction. Now she reveals her approach to effectively pairing content and design for The Grit by Avocode.

On how to effectively pair content and design with Christina Wu from Facebook

large_Christina-Wu_for-the-Grit-Avocode.png

medium_Christina-Wu_for-the-Grit-Avocode.png

small_Christina-Wu_for-the-Grit-Avocode.png

thumbnail_Christina-Wu_for-the-Grit-Avocode.png

Christina-Wu_for-the-Grit-Avocode.png

The Grit - Christina Wu, Content Design Manager at Facebook 

Hey, at Avocode, we use Shape Up methodology to manage our product and deliver updates faster and in better quality. Errhh, hold on, what's Shape Up? Good question! In this blogpost, I, Josef Kettner, the Product Manager at Avocode, would like to walk you through what Shape Up means and give you 👉🏽 [the tools](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8) and practices we used to implement it in our 30+ member team!

## How we worked

Before we start, let's jump back to 2019 real quick.

At that time, we realized that we had a couple of weak links in our process, which looked something like this:

<Image caption="Our teams working in silos" alt="Our teams working in silos" src="https://cdn.marketing.avocode.com/pupushify-production/flow_25a7402969.png" external/>

**Here are the problems we had:**

- **Know when to stop:** We didn't have any mechanics to stop the development of the features. In reality, it meant that we developed everything till the very end, which often took 2x longer than we originally planned. But, hey, at least it's out, right...
- **Focus on your priorities**: Our developers were out of focus. Often, another team would send a request for some ad-hoc task, which meant that instead of focusing on the ongoing project during the week, devs had only about 2.5 days of uninterrupted development time.
- **Feature creep is real**: It often happened that ideas came after something was already in the final stages of development. So we decided to add it to the scope anyways. Yet, we quickly found it was the most expensive form of iteration.
- **You can't delegate what you don't know**: Yeah, the tasks, feature descriptions.. let's be honest. There were serious holes in them. We didn't spend enough time to think things through because we were always busy with something else, and the devs needed to do something.

*You probably didn't encounter any of these, right? 😛*

Back in those days, we tried to use the so-called Scrum-like workflow (coz agile was cool, so everyone was doing agile, and we were too). The truth is it wasn't Scrum at all. We took some parts from Scrum and adjusted them to our needs. But as our team grew and updates became more complex, the workflow somehow stopped working. So we tried to tweak it a bit:

- Pair programming
- Estimations
- More meetings and discussions
- *Yelling, arguing, crying... (at home in the shower)*

![https://media.giphy.com/media/hmE2rlinFM7fi/giphy.gif](https://media.giphy.com/media/hmE2rlinFM7fi/giphy.gif)

Guess what, it didn't work. It made me feel that we should consider a complete switch rather than keep patching and tweaking the existing workflow.

Around that time, one of my devs sent me Shape Up book written by Basecamp's Ryan Singer. Coincidentally, I had plans to take a short vacation. So here I was, in the back of my car looking after my kid and reading the book.

My first impression of it was - this sounds like the answer to all of our problems. Yet, I was a bit hesitant because every management book makes the same promise.

> My first impression of it was - this sounds like the answer to all of our problems. Yet, I was a bit hesitant because every management book makes the same promise.

But there was something else about this one. I liked Basecamp's take on work and life, in general. So I decided to run it by my direct manager and one of the co-founders of Avocode, who got equally excited about it. In fact, we believed in the concept so much that within a month, we managed to fully implement Shape Up at Avocode. 

## So what is Shape Up?

With respect, I'll borrow this from Tom Hombergs

> Shape Up covers the process from "shaping" raw ideas into low-risk, time-boxed projects to finally implementing the solution in small teams within 6-week cycles. It also discusses how to fight scope creep and monitor progress during a cycle.

The key takeaways are well summarized in his [book review](https://reflectoring.io/book-review-shape-up/)

## How to implement Shape Up?**

Follow this guide to find out how you too can easily implement Shape Up in your team.

👉🏽 [Shape Up - template by Avocode](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)

### 1. **Documentation**

We started by documenting the method according to its main parts -
Shaping, Betting, Design & Development, and Cool-down - to make sure everyone at Avocode can quickly get on board with it.

Luckily, all the documentation is available for you in the template. And I get that every company is different, but I promise, it's a great place to start and change things as you see fit. 

**Documentation templates**

- 🔄 [Shape Up lifecycle - template](https://www.notion.so/avocode/Shape-Up-lifecycle-template-8dec9be5cbbb4346acfa44c7e80463ec)
- 🙇 [To Shape - template](https://www.notion.so/avocode/To-Shape-template-484290584877478988decb193f856c57)
- 💎 [Shaping - template](https://www.notion.so/avocode/Shaping-template-102e082d09be4d7e8c4e93b92f8f115f)
- 💰 [Betting table - template](https://www.notion.so/avocode/Betting-table-template-2e0b86bff21b4294b3463b06178f9f99)
- 👨‍🎨 [Design - template](https://www.notion.so/avocode/Design-template-e395794ebbb2492982b3bd2bec289393)
- 👨‍💻 [Development - template](https://www.notion.so/avocode/Development-template-2ebd82d14a3c4b16889f86fd07188f81)
- ⛄ [Cool-down - template](https://www.notion.so/avocode/Cool-down-template-5b501e49e30f4d5ea421efb457b06e6c)

### **2. Shaping & dev cycles**

The second part of our preparation journey was to set up the process, i.e., create one source of truth for tracking shaping and development cycles.

We start every new cycle by creating a Pitch for every idea we picked at the To Shape meeting.

**Pitch templates**

- 📝 [Pitch - template](https://www.notion.so/avocode/Pitch-template-40c3cf223f974f93ad392ca4dcd21904)
- 📝 [R&D Pitch - template](https://www.notion.so/avocode/R-D-Pitch-template-5c37f6b2c1744d8c9fb7bdbe76281834)

<Image caption="Pitch table" alt="Pitch table" src="https://cdn.marketing.avocode.com/pupushify-production/shapping_bd30893dd0.png" external/>

For this, we've developed two different Pitch template with several checkboxes, i.e., things you don't want to forget about while writing your pitch.

<Image caption="Pitch template" alt="Pitch template" src="https://cdn.marketing.avocode.com/pupushify-production/pitch_82979bec71.png" external/>

You don't have to check all of them every time, but here is a couple we find most valuable to us:

- **Expectations from stakeholders**: It helps shapers align their thinking with the stakeholders and avoid misunderstandings at the betting table.
- **Onboarding**: Onboarding is crucial if you want your users to adopt the features you release. So we have a dedicated person who comes up with a plan for it.
- **Consultation with devs:** Our process is inclusive. Before assigning tasks to our dev team, we consult with them on the implementation mechanics.

After the checklist comes the central part of the pitch, which pretty much reflects the structure from the book:

- Identifying the Problem
- Shaping the Solution
- Identifying the Rabbit holes
- Watch out for No-gos
- Outlining the Release plan

**Development cycles**

After we finish shaping and betting on the new ideas, we pass them on to the development cycle table, set due dates, and assign team leads and members. At this stage, we try to reduce overhead and make our devs their own managers as much as possible.

<Image caption="Development cycles" alt="Development cycles" src="https://cdn.marketing.avocode.com/pupushify-production/projects_824b4bcca2.png" external/>

### **3. Company-wide implementation**

All in all, it took us about a month to get everything ready (and we're happy to save you time with our 👉🏽 [template](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)).
Now we had to assign shapers and introduce the process to the whole company.
Initially, we thought that all team leads could double as shapers. But we quickly realized that 1. good shaping takes time and 2. some people are better equipped to deal with particular issues. Eventually, we decided to involve a group of people best qualified for the job, i.e., our VP of Product, Product manager, CPO, and CTO.

What we did right from the very beginning was the way we introduced the team to Shape Up. We held two separate workshops: one for everyone in the company and the other for the devs, each with a particular focus/goal in mind.

> What we did right from the very beginning was the way we introduced the team to Shape Up.

## **What we learned from the first Shape Up cycle?**

The first cycle was the beginning of a new era at Avocode. Here is what we learned from it:

- **The Shaping:** Shaping can be a full-time job. We were too ambitious about how many projects we can deliver. But, we learned how to prioritize!
- **Betting table:** Make sure to prepare for the meeting. Get familiar with the pitches beforehand, invite the shapers, establish a way to assign capacities efficiently, and do check your devs' vacation plans in advance.

<Image caption="Assigning developers offline vs. online" alt="Assigning developers offline vs. online" src="https://cdn.marketing.avocode.com/pupushify-production/capacities_8f393bf194.png" external/>

- **Development**: You need to work with your devs and help them grow, make decisions as you go when things are missing in the pitch, and extend some projects into the cool-down if necessary. Don't expect everyone to get used to the flow from day one and become a team lead, but the ability to fully focus on the project at hand delivers great results.
- **Cool-down:** To give your devs some real cool-down time and avoid burnout, allocate at least one developer outside of Shape Up to work on smaller tasks. And do run retrospectives to identify problems and adjust your flow for the next time. 

All in all, since we implemented Shape Up, we had no regrets! I hope this guide and our template can help your workflow as well. Let me know on [Twitter](https://twitter.com/Crashmajstr). Cheers.

### **Resources**

- [Shape Up template by Avocode](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)
- [Original Shape Up book](https://basecamp.com/shapeup)
- [Shape Up community forum](https://discourse.learnshapeup.com/)
- [Shape Up meetup community](https://www.meetup.com/shapeup-practitioners)
- [Rework podcast from the authors of the Shape Up](https://rework.fm/shape-up/) 
- [Shape Up book review by Tom Hombergs](https://reflectoring.io/book-review-shape-up/)

**P.S.** If you are unsure about what we actually do at [Avocode](https://avocode.com/), we help teams build great digital products. We have the best Inspect tool on the market. You can work with Figma, Sketch, Adobe XD, PSD, and Illustrator files to quickly export assets in multiple resolutions and formats, generate and copy code in 10+ languages, get the text from your designs in two clicks, keep track and download design versions, leave contextual comments on top of the designs, and, of course, share, store, organize, collaborate, you name it. Check it out. We have a [free trial](https://avocode.com/login?signup).

At Avocode, we use Shape Up to speed up our development process and deliver quality product updates. Here is a complete guide on how we implemented Shape Up, how it improved our process, and how you can benefit from it using the documentation we prepared. 

How Avocode Improved Development Process 10x with Shape Up (+ Workbook)

large_shape-up-avocode.png

medium_shape-up-avocode.png

small_shape-up-avocode.png

thumbnail_shape-up-avocode.png

shape-up-avocode.png

How Avocode Improved Development Process 10x with Shape Up

Do you know what design trends to expect in design in 2021? See the trends predictions from 13 top designers for the year, and get tips and techniques to put them into practice for your brand.

Design Trends Predictions for 2021 From Top Designers

large_2021_design_trends.png

medium_2021_design_trends.png

small_2021_design_trends.png

thumbnail_2021_design_trends.png

2021_design_trends.png

Design Trends Predictions for 2021

What a year! What a year indeed for all of us. We all had to make sacrifices in 2020. We all struggled in different ways dealing with the new reality, and the challenges 2020 threw at us. We can only hope that you, too, were able to cope, make sense of it, and come out stronger on the other side.

And how did we do at Avocode? Did we stay focused on our mission **helping teams to build great digital products by making the design process inclusive for everyone?** It was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you! 

## Avocode 2020 in Numbers

- Can you believe it’s been 5 years since we first launched Avocode? We want to thank our users for being with us all this time and helping to improve Avocode. 🎉
- Our Product team [shipped 29 new features and 39 product improvements](https://avocode.com/changelog) requested by our community.
- We have improved our design file processing performance for large files (2x), design view performance (2x), and app performance by significantly decreasing its CPU usage. 
- Our API uptime and processing uptime were at 99.99%.
- We redesigned our [website](https://avocode.com/), improved the menu for easy navigation, added lots of playful illustrations and screencasts showcasing Avocode, and received almost 1 million unique visitors.
- Our Marketing team released [30 articles](https://avocode.com/blog) featuring inspiring stories, best practices, & community news.
- We published [6 helpful ebooks](https://avocode.com/books) full of tips, data, and useful insights designers and developers would undoubtedly love.
- We successfully launched [The Grit 2](https://www.producthunt.com/posts/the-grit-season-2) and [Avocode Write](https://www.producthunt.com/posts/avocode-write) on Product Hunt. 
- Our Customer Success team answered over 14,000 of your questions and comments, with a 94% satisfaction rate.
- Last but not least. We developed new and cemented existing partnerships with [Ceros](https://avocode.com/blog/case-studies-open-design-api-ceros), [Adobe XD](https://blog.adobe.com/en/publish/2020/09/14/avocode-write-plugin-adobe-xd.html), [Figma](https://www.figma.com/community/plugin/821674268995163810/Avocode), and [Sketch](https://us17.campaign-archive.com/?u=d0d26003e4fc2a50827731b93&id=80d4b273f9). They've been tremendously great partners, we really enjoyed working with them. Cheers! and thank you for your help! 

## Top 6 Releases in 2020

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/odapi.png" alt="Open Design API" width="18" style="margin-right: 10px;">Open Design API

It is hard to underestimate the value of the technology behind Avocode. We always knew its enormous potential. But year, we are excited and proud to launch [Open Design API](https://opendesign.avocode.com/).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/opendesign-api.png" alt="Open Design API"></center> 

👉🏽 [How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode](https://avocode.com/blog/case-studies-open-design-api-ceros)

As developers in the design space ourselves, we understand the struggle of accessing data from design files.

- Even a simple square has a very different code representation in Sketch, Figma, Photoshop, Illustrator, and Adobe XD file formats.
- To work with each format, devs need to study new APIs, write new parsers, and maintain them against constantly evolving design tools - which is a costly activity that also defocuses product teams from building user-centric products.
- Design teams in larger organizations work with different design tools, and design systems cannot be auto-synced due to incompatibility issues.

We’re here to change that. We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

> We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

With the Open Design API, developers can easily access design data and use it to sync design systems, different file versions, enable the import of design files into their product, and much more.

Would you like to solve some of your internal design workflows with our API? [Let us know](mailto:team@avocode.com).

##Avocode Tools

The multiartboard design rendering in the browser enables us to build various features on top of it - to support workflows like copywriting, user flows, or better design review. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-write.png" alt="Write" width="16" style="margin-right: 10px;">Avocode Write Beta

Good copy is essential to driving engagement and conversions. So we’re happy to built Avocode Write, our new tool for crafting and editing copy online directly from Adobe XD, Sketch & Figma files.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/images/homepage/product/design-copywriting/screencast.mp4" type="video/mp4"></video></center> 

Upload your design, click on text in any artboard, and start rewriting it. Avocode Write will count your characters & indicate if the new copy is not overlapping text layer bounds.

Every copy iteration is recorded on a timeline so you can pick the best one during the final review and pull the text changes back to the design file.

We hope you will enjoy using Avocode Write to run more copy experiments in 2021 and grow your business. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-flow.png" alt="Flow" width="15" style="margin-right: 10px;">Avocode Flow Beta

It is essential to understand the logic among various screens in your new app or website. The same goes for presenting, coding, and testing its functionality. Avocode Flow solves this problem.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/videos/flow-demo.mp4" type="video/mp4"></video></center> 

Finally, you can easily create & share screen flows from Adobe XD, Figma & Sketch design files and play them on both desktop and mobile devices. Simply sync your design, edit screen connections, create new ones, and click through the flow.

Now everyone on your team will understand the user flow and have the opportunity to provide feedback and discover potential UX fails early in the process. So you can save valuable time to focus on making your product better. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-comment.png" alt="Comment" width="15" style="margin-right: 10px;">Avocode Comment Beta

We redesigned the way commenting works in Avocode. Based on our users’ feedback, we have been working hard on bringing you this new feature. 

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avocode-comment.png" alt="Avocode Comment "></center> 

With [Avocode Comment](https://help.avocode.com/en/articles/4480205-commenting-in-avocode), you can comment and review UX changes on multiple artboards from one view, filter and preview the most relevant comments, and get notifications when someone mentions your name. 

We hope it will help you to explain your design thinking & share feedback in a seamless way. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/Avocode+Private+Cloud.png" alt="Cloud" width="18" style="margin-right: 10px;">Private Cloud & SSO

At Avocode, we are driven by two fundamental principles in our approach to [security](https://avocode.com/security): transparency and defense-in-depth. This year we made significant strides to bolster the safety of our users and their data.

That’s why apart from being compliant with the most notable industry-standard certifications, like SOC 2, we took an extra step to establish trust with our Enterprise customers and added an extra layer to our defenses - [Avocode Private Cloud](https://avocode.com/books/private-cloud).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/campaigns/private-cloud/private-cloud.png" alt="Private Cloud & SSO"></center> 

Avocode Private Cloud provides isolation at the infrastructure level as opposed to just the application level, thus eliminating entire classes of security issues like cross-tenant privilege escalation, so your most sensitive data can be safe with us.

And you can further secure your teams by requiring users to authenticate with [Single Sign-On](https://help.avocode.com/en/articles/3720329-how-to-use-single-sign-on-sso-to-log-into-avocode) (SSO). 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/img/logo_black.png" alt="Custom Avatars" width="16" style="margin-right: 10px;">Custom Avatars

Avocode is a collaboration platform. So for this holiday season, we prepared a little gift 🎁 for you! You can now make your Avocode team even more personal by setting your own custom avatar or selecting one from our gallery of cute Avocode characters.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avotars-avo.mp4" type="video/mp4"></video></center> 

And the good news is - you don't have to worry about the file size of your custom image or its format. Just pick a photo or image you love, and Avocode will do the rest. Go to your [profile settings](https://app.avocode.com/personal-account/profile/) to add your avatar. 

## **Remote work & new teammates**

We stayed focused. This year a number of new talented people joined our team. We created new meeting spaces and started ordering healthier snacks for our kitchen. Yet, overnight, we found ourselves working remotely and connecting via Zoom calls. And it worked!

<center><img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-hoffice.gif" alt="Avocode Home Office"></center> 

We were lucky to go into this new work mode without any issues. Sure, we still miss seeing one another in the office, but we make it work by having an occasional virtual drink or playing an online game together during lunchtime. Turns out, one can even stay in shape, challenging your teammates to do a set of push-up every day at 11 am.

## **What’s next?**

It was a challenging year, but we also learned a lot on the way. And we won’t stop making Avocode even better in 2021, so you can build your products faster and grow your business.

To see what’s next feature-wise, keep checking our [product roadmap](https://avocode.com/product-roadmap). But, to give you a little sneak-peek about the Open Design API:

- We will be adding rendering endpoints to the API to enable developers to preview sharp designs and export assets at scale.
- We will be improving design file format support, especially for Figma and Adobe XD.
- We will be releasing more design file converters, starting with Figma to Sketch.

Sign up for our [newsletter](https://avocode.com/blog) to stay up to date on the latest product updates, trends, best design stories & tips. And join us on social media to become a part of the community.

**Cheers to the new year and all the great things to come! 🥳**

An annual review of our favorite updates and stats from the past year. 2020 was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you!


How we elevated the design to code workflows in 2020

large_2020-review.png

medium_2020-review.png

small_2020-review.png

thumbnail_2020-review.png

2020-review.png

How Avocode elevated the design to code workflows in 2020

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

Are you planning to build a Sketch, Figma, or Adobe XD plugin? This is a complete guide to building your first plugin, including our personal experience from developing design tool plugins and working with design formats for 5 years.

How to quickly develop Sketch, Figma, and Adobe XD design tool plugins

Guide to Developing Plugins for Sketch, Figma, and Adobe XD

## Hi Ilona. Thanks for taking the time. Let's start with who you are and what you do?

Happy to be here! I’m Ilona and I head up the Content Team at AppSumo. Truth to be told, I’ve been a bit of a word nerd for as long as I can remember. This probably has to do with the fact that English is my second language (Russian is my first), so I’ve been a little bit obsessed with getting it right.

I grew up in New York, found my love for tech and startups in Seattle, and decided that there is such a thing as too much rain so I packed a U-Haul and drove to Austin, sight unseen. In what can only be described as kismet, AppSumo was the first job I applied to when I arrived. I was instantly drawn in by the punchy, irreverent copy in the job description and knew it was the place for me.

In my current role as Head of Content, I oversee our copy, design, video, email, and content marketing teams. If you’re looking at something on our site, chances are, the incredible people I work with had a hand in it.

## Tell us a bit about what AppSumo does and what is the (success) story behind it?
[AppSumo](https://appsumo.com) gives everyday entrepreneurs the tools they need to grow their business. That means deals on client-management software, social media tools, design apps — you name it. There shouldn’t be a barrier to entry when it comes to starting your side hustle (or main hustle, for that matter!) so really, our audience is anyone looking to start, grow, or streamline their business.

Here’s our backstory: Once upon a time in 2010, Noah Kagan had the idea to bundle and discount software products that he, himself, wanted to use. Turns out, a lot of people use software and not a lot of people want to pay monthly subscriptions for it. We partner with startups and match our audience of digitally savvy folks with insanely discounted access to cutting edge tools. In exchange, our audience offers founders really valuable user feedback, social proof, and capital to flesh out their roadmap or build their team.

<Image src="73/1.png" caption="" />

## You are an expert on outreach and outbound marketing. How do you keep your messaging natural, engaging, and not spammy?

Great question! I think the key is letting your personality shine through. Everyone has received an email that they know is just a mail-merge tag of their name and website. Frankly, those are easy to ignore. But when you take time to really understand who you’re speaking to, what their pain point is, and how you can fix it for them — that’s the kind of message you want to respond to.

Thankfully, AppSumo has always had a really distinct and funny voice. So when I took over our copy, I definitely had big shoes to fill, but I was also able to sound like me. The advice that I received was to write copy like I was speaking to a friend, and to make the conversation about them — not whatever I was selling. For instance, you could say ‘this software is intended for collaboration’ or you could say ‘never deal with miscommunication again.’ One of these focuses on the feature — the other focuses on the person and the problem you’re solving for them.

> The advice that I received was to write copy like I was speaking to a friend, and to make the conversation about them — not whatever I was selling.

Emails sound spammy when they’re over-optimized. Instead of trying to fit in as many CTA buttons as you can, or using the word FREE in capital letters — focus on relating to your audience and solving a problem for them.

> Instead of trying to fit in as many CTA buttons as you can, or using the word FREE in capital letters — focus on relating to your audience and solving a problem for them.

## How do you work with target audiences, segmenting, and buyer personas?

There are a few ways to answer this question! At AppSumo, I think of our target audience in terms of their stage along the entrepreneurial journey: you have your wantrepreneurs (people that view starting their own business as aspirational), your side-hustlers, your full-timers, and your I’m-growing-my-own-business-and-hiring-ers (we should probably come up with a better name for them, huh?). These stages come to play when we’re thinking of how to effectively message to people, and what kind of content we want them to resonate with.

We also segment customers based on their stage in the purchaser funnel: casual buyers, super buyers, referrers, and affiliates. Identifying levers to get a customer from one bucket into the next increases our lifetime with that customer, and helps get new customers through the door. For example, celebrating milestones (e.g. a first purchase) with an incentive to repeat that action (say, offering a discount) positively reinforces the behavior amongst your audience.

When it comes to email, you should also segment based on activity. Having an active segment and inactive segment allows you to know who to send to more frequently, who you need to re-engage, and how to measure the overall health of your list. I use the size of the active segment as a pulse-check on how the rest of the list is doing, and how effective our retention tactics are.

## Content is not just words, but also design. How do you make sure the marriage between the two works in your content strategy?

Design is an incredibly powerful and important part of the content umbrella, namely because:

- 1. people learn and process information differently,
- 2. visual media compels emotion.

I’ll use the AppSumo content strategy as an example. For a while, our design was cartoony. Our brand is informal and jokey — not to mention, software tends to be abstract (there are only so many ways you can showcase spreadsheets). But as we started to delve deeper into the AppSumo brand promises and values, we realized that at its core, our ethos was about **serving and honoring the entrepreneur**. Our cartoon-like images did not adequately capture the feelings we wanted to evoke. This led to our decision to tell more customer stories and partner case studies. With that comes a stronger emphasis on human-centric imagery and design.

<Image src="73/2.png" caption="" />

## As a content strategist, you need to worry not just about the textual message, but also how it looks. How does your content department work with the design team?

We’re blessed to work with some of the best designers in the game, who can visually translate even the most complex concepts. That said, designers aren’t mind-readers, so it’s important to have clear examples of what we’re looking for. Recently, we got into the habit of creating mood-boards via Pinterest and [Really Good Emails](https://reallygoodemails.com/) to draw inspiration and be able to accurately communicate what we want.

<Image src="73/3.png" caption="Really Good Emails’ Collection feature has been a game-changer when it comes to categorizing and sharing inspiration for new campaigns and designs!" />

This might sound really basic, but one thing we’ve only recently started doing is creating a strong visual style guide, both for internal and external use. Keeping an up-to-date repository of our colors, logos, fonts, etc. has allowed us to become more streamlined and consistent. And this goes without saying but as a team grows, documentation is everything!

<Image src="73/4.png" caption="AppSumo design system." />

At AppSumo, the design team is an integral part of the content team — and we work closely on just about every project. Jeir, our amazing Creative Director, sets the tone and direction for a campaign. For example, we’re cooking up something. 🔥

for our Black Friday event this year. Jeir and I met to discuss potential themes and landed on a visual identity we were excited about. From there, his team works with the video, ads, and affiliate teams to create assets that match for each channel. Our copy team then brings it over the finish line with choice words that match the look we’re going for.

<Image src="73/5.png?v1" caption="AppSumo Black Friday campaign last year (2019) — a 1990’s throwback theme, reinforced with copy" />

The start-off point is important here: for a campaign like Black Friday, we led with design. Other campaigns, like say, a Back-to-School Giveaway, start with an idea or a feeling expressed by copy. Then it’s the design team’s job to translate that into a visual. Collaboration is key here. Having a team that feeds on each other’s energy and wants to supplement and improve what’s already there is the missing ingredient between good and great.

## Many people nowadays think that humanity has stopped reading and that the average attention span is shortening. What do you think? Do you think people don’t read online?

People definitely don’t read as much as you want them to, but I also don’t think the situation is as dire as it seems. We actually polled our audience about this last year and the results were about what you’d expect (picture on the left). While there were many "skimmers", we did have some customers tell us that the copy is an integral part of the experience for them (picture on the right).

<Image src="73/6.png?v1" caption="" />

> People definitely don’t read as much as you want them to, but I also don’t think the situation is as dire as it seems.

But we did have some customers tell us that the copy is an integral part of the experience for them:

Words definitely matter — that’s why newsletters like Morning Brew have seen a resurgence recently! Ultimately, there are many different kinds of people, all with their own preferences and proclivities. So my answer is: **repurpose the same kind of content in every medium so each visitor can choose their own adventure**. We have fun, engaging copy if you care to read it; a high-energy video if you prefer to watch; and screenshots and GIFs sprinkled throughout the page for those that need to visualize. Instead of lamenting that audiences have shorter attention spans, ask yourself: How do I get a piece of that attention pie?

> Repurpose the same kind of content in every medium so each visitor can choose their own adventure.

## I’m sure that at AppSumo, you are often talking to various audiences. What’s your take on localisation?

Lucky for us, entrepreneurship exists worldwide. Add the secondary layer that we sell software tools to grow online businesses, and our target market is the entire world. (No big deal, right?)

That being said, we are definitely experimenting with localization. For example, we created a task force to translate one of our deal pages into Spanish — including copy, video, and a webinar. We then ran ads exclusively to a Spanish-speaking audience. Our main learning from this experience is that it is not easy to do!

There are tools that can help, however! We recently featured [Alugha](https://alugha.com/) on AppSumo, which allows you to translate video content into the language of your viewer.

I would recommend using insights from tools like this to better understand who your audience is, and what opportunities are your biggest levers before making massive time/resource investments.

## You are very passionate about e-mail marketing. To make sure you send the most compelling e-mails with good frequency and timing, you need to have some sort of framework or calendar. What do you use?

You’re so right, I AM very passionate about e-mail marketing! This is a tough question to answer because it really depends on who your audience is, what product you’re marketing to them, and how frequently you’ve been sending emails in the past. We started by sending two emails per week. Then, as our deal calendar grew, we experimented by slowly adding more emails to the week and monitoring how our audience responded to them. Now, we send closer to five emails per week — many of them digest-style featuring multiple tools in one.

I don’t think there’s a magic cadence, but I would keep this framework in mind:

1. Provide value every time by being entertaining, giving something away for free, or solving a problem

2. Don’t send an email just to send an email (see point #1)

3. Monitor how your audience is reacting to what you’re sending them. A/B test length, copy, subject lines, etc. Keep your lists smaller but more engaged. Know your key metrics, like unsubscribe rate, and course correct when your leading indicators tell you to.

## What’s your take on simply textual vs visual templates? Which works best and when?

I love a plain-text template! Our Chief Sumo, Noah Kagan, sends mainly text-based emails for his [YouTube channel](https://youtube.com/okdork?sub_confirmation=1) and they have great engagement!

<Image src="73/7.png?v1" caption="" />

Plain text emails make more sense when they’re coming from a person, rather than a company. Visual emails really let your brand shine!

I also think that if your product is visual, then that should be conveyed in your emails. An important call-out for visual emails is accessibility. Make sure that you leverage alt-text where your images are in the event that someone is visually impaired and leans on apps to translate your messages, or even if someone has the HTML turned off on their ESP. The last thing you want to do is send an email that’s basically null because you didn’t consider accessibility!

## How do you test the quality of design and code in your emails and generally your content strategy?

When I first started at AppSumo, I introduced a completely new email layout. In order to effectively do this, I rolled it out in stages to make sure that I didn’t completely confuse and alienate our audience. That’s why I started with A/B testing to our newest customers, and when I saw that my variation was equal to or better, I moved on to the rest of the list.

For example here is the progress of one of our emails:

1. Added our logo and a nav bar so it’s clear that we are the brand behind the email;
2. Added a live timer to capitalize on the FOMO component of the time sensitive deal;
3. Shortened up our copy considerably with more focus on a call-to-action

<Row col="2"><Image src="73/8.png?v1" caption="AppSumo email template in 2017" /><Image src="73/9.png?v1" caption="AppSumo email template today (2020)" /></Row>

## Social media apps. We all use them. They steal our time and we can’t help it. As a content strategist, which are the best social media channels to deliver your message?

So full disclosure: I’m terrible at Instagram—at least when it comes to my personal page. No one’s made me a brand ambassador yet (holler at your girl, @Madewell). But when it comes to content strategy, I think IG is still king for visual brands.

For a company like ours, YouTube is probably the channel I have the most faith in. Its algorithm is scary-good, and it’s free to host! We’ve seen a lot of success when we started taking it seriously — more so than on any other platform. (If you want to give our channel a follow, you can [find us here.](https://youtube.com/appsumo?sub_confirmation=1))

I also wouldn’t underestimate the value of a Facebook group — doing the grunt work upfront to find relevant groups that have high engagement can seriously pay off! I would recommend doing your research and putting time into crafting a post ([here’s](https://growgetters.substack.com/p/posting-to-facebook-groups-100s-of) how I recommend you do that).

## Every successful design or tech driven company ends up with building a sales team. What’s your take on cold e-mailing and generally outbound marketing? How can you do it to break the ice, build relationships instead of bothering people?

Ok, so here’s the thing: no one likes receiving emails from a robot. And while I’m sure a lot of people will tell you it’s a numbers game, I say it’s always better to start with your warmest leads (aka your personal and secondary network) and write real messages, even if it takes longer. I would also definitely recommend my friends over at [lemlist](https://www.lemlist.com/), whose software is killing the personalized outreach game.

Here are some fast and loose tips for outreach:

1. Act like you know the person! Say something like, "I see you’re based in Austin! I love the al pastor tacos at Veracruz!" (Related side note: Make sure you don’t spell someone’s name wrong! This happens to me all the time and it’s an instant dealbreaker.)
2. Don’t say generic things like: "I hope this email finds you well during these unprecedented times." (And if you do, make a joke acknowledging how generic that is.)
3. Follow up! I often respond to the second or third email. But please, don’t make your follow-ups sound like a lyric from Eminem’s “Stan.” Instead, give people a kind way out. Say "Hey I’m a big fan and I’d love to collaborate with you - but no pressure." The relationship shouldn’t feel contingent on them taking your preferred action. Who knows? Maybe there will be a door open in the future if isn’t right now.

If this topic really gets you going (I respect that, you weirdo), I’d also recommend checking out this [Outreach 101 blog series](https://blog.appsumo.com/defining-your-buyer-persona/) we put together!

## Can you share your favorite resources?

- [https://reallygoodemails.com](https://reallygoodemails.com/)&nbsp;-&nbsp;The best place to find inspo for an email campaign! They just came out with an SMS version of this and it’s also awesome. Plus, their emails are…really good.
- [https://www.figma.com/community](https://www.figma.com/community)&nbsp;-&nbsp;I’ve been loving Figma as a collaborator and am really impressed with the community posts!
- [https://open.spotify.com/playlist](https://open.spotify.com/playlist/6MURYpgRMJbdnmXUJQ4aJ3?si=4GNtyOKoSgCdl3FOMrOzFA)&nbsp;(Yes, I made this playlist. No, I’m not embarrassed. [#FallOutBoy4Ever](https://paper.dropbox.com/?q=%23FallOutBoy4Ever))
- [https://www.nytimes.com/crossword](https://www.nytimes.com/crossword)&nbsp;-&nbsp;Best yearly subscription money can buy! Helps with writers block, word association, and cultural references.

## What’s your greatest worry when it comes to the content strategy as a profession in 2020?

I’m always concerned with balancing SEO-led content with strong, community-driven stories. Ultimately, I think you need both: a way for new people to find you, and high-quality content to keep them engaged and subscribed. Marketing of any kind is always easier when you’re selling a good product, so creating read/watch/shareworthy content will always be priority #1.

## Where is the best place for people to connect with you online?

Hit me up on [LinkedIn](https://www.linkedin.com/in/ilona-abramova/)! I’ll be quizzing you on your outreach skills. 😂

---

## Bonus Question: What's your favorite way to eat avocado?

On toasted sourdough, with EVOO and Za’atar.


Ilona Abramova leads the Content Team at AppSumo. After years working in community management, copywriting and content strategy, she has learned many tricks on outbound messaging, a/b testing, and UX writing in the design process. Now she reveals them for The Grit by Avocode.

How to design and build great digital products?

How to grow as a designer and always be curious with Ramon Gilabert from Microsoft

How to Improve Your Product With User Testing

18 tips on how to do frontend best & improve design-to-code collaboration

On how to effectively pair content and design with Christina Wu from Facebook

How Avocode Improved Development Process 10x with Shape Up (+ Workbook)

Design Trends Predictions for 2021 From Top Designers

How we elevated the design to code workflows in 2020

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

How to quickly develop Sketch, Figma, and Adobe XD design tool plugins

Why words matter not just in marketing but also in design with Ilona Abramova, Head of Content at AppSumo