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

In 2015 we launched the first public version of Avocode with a simple purpose to make it easier for developers to turn designs into code. It all started with just us trying to solve our own problems, and we never expected it to become a global product used and loved by thousands of companies.

I can't even express how grateful we're to have such a fantastic community of customers, users, supporters, and partners. We wouldn't be here today without you.

Thank you all. We love you! ❤️️

Today, we are excited to announce we are embarking on a new chapter in the pursuit of our mission to unlock design for everyone.

### Avocode is being acquired by [Ceros](http://ceros.com), a no-code content creation platform for interactive design.

## Why Ceros?

When I try to imagine a company where Avocode can continue its mission, Ceros is unquestionably the best team to join.

Not only do we share the same mission to unlock design for everyone, but our company values and culture are almost identical. That's why we're confident Ceros is the right company where our team can thrive.

<Image alt="avocode-x-ceros" src="https://cdn.marketing.avocode.com/pupushify-staging/avocode_x_ceros_73036a89f3.gif" external/>

We quickly realized this back in 2019 when we started working with Ceros on an integration allowing designers to save significant time by converting PSD, Illustrator, and Sketch design files into interactive online content inside the Ceros Studio.

With Ceros backing us, we're planning to accelerate the roadmap of [Open Design](https://opendesign.dev/), creating an open infrastructure that simply doesn’t exist today in the creative world.

With the Open Design API at the center of the Ceros universe, we will be moving towards a unified and universal file format for interactive experiences and removing barriers to unlock creative potential.

> We are insanely excited about the Avocode team and technology becoming part of the Ceros family. Our businesses and cultures could not be more aligned, and our shared vision of the future is palpable. The world at large undervalues the importance of design and creativity, Ceros is determined to change that. Avocode and their Open Design API means we are one step closer to a more connected, open, and impactful design space for businesses and creatives.

<Bio name="Simon Berg" role="CEO of Ceros" image="https://cdn.marketing.avocode.com/pupushify-staging/Simon_Berg_44b3ef1458.jpeg"/>

## What does this mean for the Avocode product?

Avocode product you know and love is not going anywhere right now. We will continue to support all our customers with the same passion that we are known for.

Ceros is retaining and expanding the Avocode team with the focus on leveraging the Open Design API to scale the Ceros Studio further and helping its users increase time-to-value and reduce time-to-market.

### [Learn more about the acquisition](http://r.avocode.com/ceros-x-avocode) 👉🏼

Ceros’ acquisition of Avocode promises to bring a unified and universal file format for interactive experiences and remove barriers to unlock creative potential.  

We're joining forces with Ceros

large_525a3850_min_ccc6a1b8c6.jpeg

medium_525a3850_min_ccc6a1b8c6.jpeg

small_525a3850_min_ccc6a1b8c6.jpeg

thumbnail_525a3850_min_ccc6a1b8c6.jpeg

525a3850_min_ccc6a1b8c6.jpeg

## Hi Marisa, tell us a little about yourself and what you do.

Hello! My name is Marisa and I'm currently a Product Designer at TikTok. Previously, I led design team at an early-stage startup through an acquisition. I also create short-form content about design, tech, and lifestyle on TikTok. 

When I'm not out on my paddleboard, I run Workology, an ergonomic lifestyle brand, and Mesh Times, a curated design merch store. 

After hours, I travel between the world of web3 and web2, creating NFTs and digital tokens for a good cause. 

## How did you get into Product Design?

Growing up, I watched my mom built a fashion label from scratch. She did everything from sketching, material sourcing, production, and QA. My understanding of the design process started from there. My allowance was spent mostly on art supplies. 

After an art boarding high school, I was naturally eased into fashion design and decided to major in apparel & textiles in college. My mom wanted me to take over her label after I graduated. 

Towards the end of my senior year, I found myself feeling uneasy about the process and how fashion was more about the expression, and users weren't really considered in the design process. Simply put, it was aesthetics over utility. This sparked my interest in human-centered design. 

While I was trying to familiarize myself with product design, I started a Kickstarter project called Mesh. It is a modular piece of fabric to allow people to invent their own fashion items and it's not just a regular fashion artifact but an item that grows with people's needs. Here, I learned how to transport user's needs into a product. 

<Image caption="A Kickstarter Project I raised 11K+ for grad school" alt="A Kickstarter Project I raised 11K+ for grad school" src="https://avocode-mailing.s3.eu-west-1.amazonaws.com/mailing-app/newsletter/mebuilding.gif" external/>

From that point on, I started a podcast, "Design Picnic" with a friend from middle school. Through countless recording sessions, I was able to meet so many design experts whom I called friends and mentors today. 

## How did you find your first Product Design job?

### Pivotal moment

Instead of cold applying, I was doing everything I could think of to get in front of hiring managers. After asking around, Twitter was where most senior designers and design leads hang out so I sent out a tweet saying something like:

<Image alt="Twitter" src="https://cdn.marketing.avocode.com/pupushify-production/Screen_Shot_2021_08_14_at_10_39_26_PM_8b02132d55.png" external/>

In addition to that — to each hiring manager, I also created a customized resume where I wrote a story of why I want to work there. The response was very positive and rewarding.

### The results

Not only did I get referrals, but people were also giving constructive feedback on my portfolio as well as connecting me to hiring managers. I landed over 10+ interviews with 3 offers at the end. 

### What did you learn

- Look for the side door when the front door shuts you out. Pivot when you need to.
- We as product designers iterate on design all the time but we often overlooked ourselves and our professional journey. If the current process doesn't work out for you → you need to pivot.
- Think about your target demographics. A resume will only get you through the recruiter but it's actually the hiring managers you want to impress.

## How did you get from there to joining TikTok?

I knew that I wanted to work at a startup but also somewhere big enough where there's a solid design community when I need to seek feedback. TikTok is growing rapidly and they happened to have a job opening at the time and I just applied with my TikTok and customized resume that I made specifically for them. 

<Image caption="A TikTok Resume I personalized for the job" alt="A TikTok Resume I personalized for the job" src="https://cdn.marketing.avocode.com/pupushify-production/tiktok_resume_3b0bd02ac0.png" external/>

## You joined TikTok not that long ago, can you tell us more about your Product Designer role there?

We’re at a pretty exciting time at Tiktok, the platform is growing like crazy and it’s been the most downloaded app for the 4th month in a row. It’s been super fun and inspiring to be in a hyper growth company like this. I’m currently working on multiple verticals from login & onboarding experience to the new AR initiatives.

As a product designer at TikTok, I work very closely with PMs, Engineers, UX writers, and Data. I create end-to-end user flows and provide multiple design solutions based on user needs, business goals, and technical constraints to get buy-ins from different stakeholders.

My day-to-day typically involves checking in with the team and making design changes as needed to the PRD, catching up with the engineers, heads down designing and also contributing to the team design system. Twice a week, we also run design critiques where designers on the team regularly give and receive feedback. Every quarter, I would have to present key learnings within the team and larger XFN groups as well.

> Twice a week, we run design critiques where designers on the team regularly give and receive feedback. 

Another thing that I really enjoy about working at TikTok is being surrounded by so many talented teammates. I’ve been learning from them more than I did back in design school! Every Monday during our stand-up, we each would share our favorite TikTok that we watched over the weekend. Most of the team is based in LA and our off-site ranges from beach picnics to online circus experience.

## How did I get into content creation?

I have always been camera shy but during the beginning of the pandemic, my friend told me to download TikTok. After browsing and poking around, I realized no one has tapped into Product Design content just yet. I took this as a sign and grabbed the @productdesign handle on TikTok without thinking twice. The account has been growing rapidly with 124K followers within one year.

<Image alt="TikTok" src="https://cdn.marketing.avocode.com/pupushify-staging/tiktok_8f0396293c.png" external/>

## Why did you choose to create your content for TikTok and not some other platform?

Through talking to Gen Zs who want to break into design and tech, I found out that Twitter can be quite an intimidating place for someone with no experience. While you can find a lot of educational design threads on Twitter, most designers on the platform are at senior, lead, executive levels making it hard for Gen Zs to connect with them. 

I saw an opportunity in a short-form content platform like Tiktok and took a stab at it. The results after one year have been very rewarding. I have helped over 2K high school students break into the design early and people from other professions transitioned into the design. 

> I have helped over 2K high school students break into the design early and people from other professions transitioned into the design. 

## What type of content do you make on TikTok?

I have been experimenting with many different types of content. But these are the most successful ones:

- How to transition from another profession to Product Design?
- How to begin your Product Design journey early even if your college doesn't have a Human-Centered Design major?
- Resources to improve your design skills
- How to present your design work internally and during interviews
- Design memes

## What would be your advice to someone who wants to start creating content?

### Create a brand for yourself

Start off by building your brands and identifying your personal value and key audiences. Remember that your 9-5 job title doesn't have to label who you are after hours or on the weekend. Even if you are a Product Designer with less than 1 year of experience, it doesn't mean that you can't create content around your post-grad journey. Trust me, so many people will be able to relate to your hardships and struggles rather than your shiny job offer. 

> Many people will be able to relate to your hardships and struggles rather than your shiny job offer. 

### Knowing what your audience wants

The most important thing is to identify who your main audience is and what niche you want to zero in on. Do you want to create content for UX researchers, design system designers, or designers going into management level? 

**Areas to consider:**

- Technical design skills (prototyping, roadmapping)
- Soft design skills (building your team, managing)
- Industry/vertical expertise (fintech, health tech, b2b)

The next thing that I found helpful was to create a quick and dirty research on your audience. I regularly post a "Ask me anything" on my instagram story. I start by noting down all the questions I get asked often. If there is a repetition, I will create a video for it.

### Platform 

Talking in front of a video camera is not for everyone. There are endless platforms you can leverage. For those who are camera-shy, you can create content that comes in the form of written, podcast, or audio content. For those who are more outgoing and don't like to take themselves seriously then maybe Instagram Reels or TikTok might be right for you. You can also sell online courses in bite-sized pieces that people can digest in their free time like Patreon. The lesson here is to learn which medium works best for you and just go for it!

<Image caption="Podcast/ Youtube I worked on with my fellow Product Designer friends." alt="Podcast/ Youtube I worked on with my fellow Product Designer friends." src="https://avocode-mailing.s3.eu-west-1.amazonaws.com/mailing-app/newsletter/designchallenge.gif" external/>

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

On a toast with smoked salmon and a pinch of salt and pepper 🥑

Marisa Chentakul is a Product Designer at TikTok by day and a content creator for the platform in her spare time. Marisa's focus is the design community, and her account featuring educational and valuable content grew rapidly to over 124,000 followers within a year. We asked her about her role at TikTok and for advice on creating your brand as a designer. 

Creating valuable Content for the Design Community with Marisa Chentakul from TikTok

large_Marisa  Chentakul.png

medium_Marisa  Chentakul.png

small_Marisa  Chentakul.png

thumbnail_Marisa  Chentakul.png

Marisa  Chentakul.png

The Grit - Marisa Chentakul, Product Designer at TikTok

A perfect design can be made possible with the help of effective collaboration.

To ensure that the result meets expectations, the entire team including designers, creative directors, developers, writers, and other team members have to join hands and perform work with utmost care and crystal clear communication.

This can help your end product to be highly functional and free from major errors.

The iterative design also requires a predictable flow mechanism while we build creative descriptions and obtain the inputs from the clients.

## What is design collaboration?

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture1_b209fc03b8.jpg" external/>

Design collaboration is a collective effort, where the inputs from different stakeholders are taken into consideration for the design approach.

The professional, innovative, and creative inputs from various researchers, coding experts, and other team members put together, create impressive and pleasing designs that evolve to produce the best output.

Perfect design collaboration isn't easy, but not difficult either. With best practices, an ideal approach, and perfect tools, you can build a good design collaboration mechanism.

The design collaboration project process involves a set of procedures that helps to move the design from a mere idea to the final product.

Let's have a look into the steps involved in the design collaboration workflow for a specific business.

## Steps of design collaboration workflow

### 1. The marketing team provides a brief

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture2_c3e4fa6c8e.jpg" external/>

To implement the design collaboration process, the design requirement and brief of the creative are put forward by the marketing department.

The brief consists of the details regarding the project, the timeline it covers, the important dates, the due dates, and the references.

Once this is completed, then they are compiled and sent across to the design team for further process.

### 2. The design team reviews the brief

Since the creative brief has been sent to the design team, now they have to work on it. It is essential to make sure that the project is viable and feasible. Also, doubts and questions will be raised from the team.

The marketing team takes care of those queries and doubts. Once both the teams are happy with the decision and it is well aligned, then the creative brief can be accepted and moved to the next stage. 

### 3. The UX and Information Architecture (IA) stage

In bigger projects, there will be a dedicated UX team itself which includes not just designers, but also developers and UX Analysts and headed by a UX Architect. There will be a defined process which includes UX research, user interviews, surveys and based on these an Information Architecture is created. The involvement of the design team with the back-end developers is vital in this stage as the Information Architecture also defines the menu, navigation flow, grouping of categories etc which all require inputs form the developers as these are connected to the database and structuring these in an optimal way is important for the smooth performance of the website or application.

Even though the output of the UX will be wireframes and prototypes, this stage actually defines how the front-end is connected to the back-end database of the website or application. The whole UX process is carried out so as to make the website intuitive and also to make the information available to customers in a minimal number of clicks.

### 4. The design team submits the first draft 

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture3_66da210439.jpg" external/>

After the confirmation of the creative brief, then the design team can start working with them.

Now, the designers will create a brief design for onboard and work according to the timelines and specifications provided in the creative brief.

Now, the first draft is then sent post-completion to the marketing team to collect the feedback.

### 5. Feedback is sent by the Marketing team

After receiving the first draft, the marketing team will analyze it. Actionable and corrective feedback is provided by the marketing team in case of a difference of opinion.

The feedback should be clear and it should project the important points, avoid the chances of confusion and let the project move steadily.

### 6. The design team works to rectify the errors

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture4_6878b7c08f.jpg" external/>

After the marketing team sends brief feedback, the design team should make necessary modifications and adjustments in the work.

The design team will be required to work effectively and every change should be looked into, with care and need to be rectified.

### 7. The final design is provided

The above steps can be repetitive until the marketing team becomes satisfied with the work done by the design team. After this, the final draft is made, and these will be exported and delivered. The guidelines for this will be mentioned clearly in the creative brief.

## Why design collaboration?

When the abstract idea is developed and the concept is finalized, the teams put collective efforts to create and develop the final product. 

The design collaboration enables delegation of the whole process, where every step counts to evolve a huge design structure and finished product.

The designing process is complicated and has many faces. Many people with their efforts put together, help in enabling the design collaboration workflow.

Initially, the marketing team provides a project brief with all the details regarding the project. This includes the timelines, dimensions of the design, and other information. This is useful for the design team to easily review and accept or advise any modifications if required. 

The major advantage is that a design collaboration involves the right combination of ideas put together and a combination of their areas of expertise. 

It also involves the adoption of various practices to achieve a shared common goal. The design collaboration involved finding new solutions by evaluating the various perspectives and new possibilities.

The designs are meant to match the needs and requirements of the end-user. If it matches well, then the business can hit the target. Having a clear picture right from the beginning and creating awareness with everyone in the team will help to form a good design.

When several designers work on various projects by interacting efficiently with their peers and the stakeholders across various domains, it creates bonds and long-lasting relationships.

Every day is a learning and the new beginning can help you to collaborate and derive fruitful relationships with opportunities to learn and gain knowledge.

## Tips to enhance your design collaboration process

The procedure involved in design should be an end-product of innovation, collaboration, and networking. 

Also, everyone involved in the team should be aware of the roles being assigned to them.

This should be made through clear and open communication, accurate timelines, experience, and skills.

The following points can let you understand in detail the various methods you can use to enable the collaboration of the design teams.

### 1. Have an appropriate plan of action

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture5_cffa6f44ef.jpg" external/>

With an effective plan in place, the members will have a clear direction to move ahead.

They will be more clear about the goals to be achieved and the ways to achieve them. Also, the whole process can be subdivided into a roadmap for the achievement of the goal.

Now, the design plan should be detailed and also well-calculated.

While we consider the methods for audience targeting, initially you may create a concept for the design which is user-friendly. 

Also, look for the stages, requirements at each stage, the budget, and the scope of the project.

Also, consider the timelines for every project and the final delivery date.

Divide the whole tasks into subtasks with the delegation of tasks among the team, the work gets simpler and effective.

### 2. Give access to the accurate tools

Naturally, only the right, relevant and accurate tools can serve the deserved quality to your collaboration workflow.
Poor tools can affect the workflow and make it more complicated.

Also, the team members can find it undesirable to use a tool that builds problems instead of finding solutions.

Therefore, every team member must have an accurate [collaboration tool](https://acodez.in/client-collaboration-tools/), so that the entire process is streamlined.

If the project includes website design, then there should be appropriate access to the design software that has good social media integration, [SEO techniques](https://acowebs.com/ecommerce-seo-checklist/) and tools, HTML 5 support feature, and more.

You can also make use of apps such as Zoom to enable the video conferencing technique. This way, you can witness the streamlined process.

You may choose the tools as required and they should be able to help you build the process efficiency. Thereby, this enables perfect team collaboration and boosts the quality of design.

### 3. Monitor the progress 

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture6_bfe462fec3.jpg" external/>

If your goal is to get a perfect finished product, then it is essential to keep an eye on the progress of the project.

Do everything with a schedule set in place. Even when it is about providing the initial draft, collecting and implementing the feedback from the clients, making modifications, or any other project, there should be no compromise in the quality offered.

Have clear communications through email or any other channels to make sure that everything is aligned and on the right track.

Build a strategic approach, and get everyone involved in the communication. Derive meaningful information, feedback, and insights that can help in the long run decisions and the process in general.

### 4. Share the version control details

The design team finds it very difficult to search through several files and folders for reference. Here, the designing errors can be strictly avoided if the files chosen are up to date. 

Now, you can share the guidelines with the team. The version control guidelines must mention the important factors. You should also ensure that these guidelines adhere.

### 5. Have regular design huddles

Weekly or biweekly huddles can be very useful. These can make everything aligned and share a communication regarding the processes, trends, and other factors.

It is always better to have team discussions or collaboration for the discussion. Also, you can make the groups and also create a platform to raise issues and processes faced by every individual designer.

### 6. Have consistent updates 

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture7_05e9d0291f.jpg" external/>

The design collaboration process is a bit complicated. This is because there are many dependencies involved that make it appear more complex. 

For example, the work done by a researcher will have an impact on a designer, and the work done by a designer will have a similar impact on the developer.

Due to the dependencies involved, it is advised to have the team communicate regularly, share and communicate the updates.

There are daily updates and meetings often for major collaborative teams, where every single individual can share many ideas and simplify the tasks.

### 7. Outline the expectations effectively

It is to be noted that everyone has an independent viewpoint. Hence, it is necessary to create an outline of these expectations.

Also, convey the guidelines well with your team and ensure that the copy is being provided to all the team members without fail.

Keep the discussion in one place, and communicate everything with every member. 

Meanwhile, consider reviewing the plan and also outline the needs, expectations, and other factors to improve the project.

### 8. Design and develop rigorously

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture8_255ab39bbf.jpg" external/>

Develop the components with rigorous and strong design by working with a team of engineers.

Also, take care of getting rid of the friction in the best possible way. The non-design and design methods should collaborate well.

Remember to use a specific pattern for animation, interaction, or transition effects and patterns. Also, set the plan for every work process both the design part and non-design part.

Both together make a large system, and it can help you save time and effort. Also, the efforts will be streamlined and properly aligned.

### 9. Consider the terminology

The collaboration workflow of design is very complicated. Your team members will be required to check every then and there, you make sure that the collaboration is smooth.

The terminology and the language cannot be neglected. Once the project is under discussion, you must be able to confirm that the key terms of the project are familiar to everyone on the team.

Also, try to check the language and its simplicity. Ensure that the translation doesn't miss out on important things.

### 10. Review the process periodically

Facilitate feedback and reviews regularly. This way, you can get an idea about the work, and also, the work can be reviewed consistently.

Frequent review of the work done by the team members and communication about the flaws or areas of improvement can help to minimize the huge possible errors in the final product.

Also, get feedback from the members to ensure that every process falls on the right path.

### 11. Recognize even the small wins

<Image src="https://cdn.marketing.avocode.com/pupushify-staging/Picture9_d93b2aab25.jpg" external/>

Rewards, appreciation, and recognition can urge the team to work more on the project. In a project that involves design collaboration, there involves smart-work and innovative design ideas.

When you recognize and admire the creative and successful implementations done by the team, this can keep your team members inspired, and gives more energy for them to perform the best work and produce the best results. 

## Conclusion
To execute the design collaboration project workflow, the design team should take care of the best design strategies and use accurate and relevant tools and resources.

With effective close collaboration, the work becomes smooth and easier than expected. Otherwise, the entire process ends up becoming too complicated and inefficient.

## 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 [Comment tool](https://avocode.com/design-review-process) to review & discuss
design progress with transparency, explain your design thinking & share feedback, and track all the changes worthy of your attention.


**About the Author:**
Rithesh Raghavan is the Director at [Acodez](https://acodez.in/), a Digital Agency in India. Having a rich experience of 15+ years in Digital Marketing, Rithesh loves to write up his thoughts on the latest trends and developments in the world of IT and software development.

Design collaboration is essential when it comes to delivering great digital products. To ensure that the result meets expectations, the entire team including designers, creative directors, developers, writers, and other team members have to join hands and perform work with utmost care and crystal clear communication.

11 Ways to Improve Your Design Collaboration Workflow

large_design workflow-1 (1).png

medium_design workflow-1 (1).png

small_design workflow-1 (1).png

thumbnail_design workflow-1 (1).png

design workflow-1 (1).png

## 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!


Top product design news,
tips, and stories

We're joining forces with Ceros

Creating valuable Content for the Design Community with Marisa Chentakul from TikTok

11 Ways to Improve Your Design Collaboration Workflow

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

Top product design news, tips, and stories

Top product design news,
tips, and stories