Accelerating Design & Development Innovation with AI-driven Tools

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more

Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? In this talk, we will explore the integration of AI-driven tools and techniques to enhance design systems, fostering improved communication between cross-functional teams. By leveraging artificial intelligence, we can not only boost productivity and innovation but also create a more harmonious and efficient workflow for both designers and developers

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Cristobal Chao is a professional originally from Spain who moved to the United States in 2012. He started his career at an innovation lab called Hatchery Labs in San Francisco and later worked at Google. Cristobal is the founder of Torii Studio, a studio that works with startups and small to medium-sized companies to build scalable front-end applications.

Torii Studio aims to help startups and small to medium-sized companies elevate their products by building scalable and aesthetically pleasing front-end applications.

Cristobal Chao emphasizes the importance of solving the right problem with the right mindset, free from biases. He advocates for quick iterations in problem-solving to learn and adapt swiftly, rather than attempting to create a perfect solution in the first attempt.

The story of Paul McGrady, who innovatively solved the challenge of building a human-powered airplane by focusing on rapid rebuilding and testing, teaches the importance of quick iterations and learning from each step to progressively improve and solve a problem.

At Torii studio, innovation is defined as the continuous effort to improve product designs and functionalities through iterative development, ensuring that each version better meets the needs of users and the market.

Cristobal believes smaller teams innovate more effectively because they are less bogged down by the bureaucracy that typically slows down larger companies. Smaller teams can pivot and adapt more quickly, allowing them to explore new ideas and solutions with greater agility.

Design thinking is crucial as it involves empathizing with user needs, defining problems, ideating solutions, prototyping, and testing. This process helps innovators to thoroughly understand the problem and explore effective solutions systematically.

Developers and designers can improve innovation by collaborating from the initial stages of the product development process, sharing insights that lead to more holistic and innovative solutions, and using tools that bridge the gap between design and development.

Cristobal Chao
Cristobal Chao
21 min
12 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses the importance of innovation and quick iterations in solving problems. It emphasizes the benefits of blending designers and developers from the beginning and using React for component reusability. Figma's dev mode capabilities are mentioned as a tool for faster development, although it is still a work in progress.

1. Introduction to Innovation

Short description:

Hello, everyone. Very excited to speak with you about this topic today. A little bit of background about myself. Started working for an innovation lab called Hatchery Labs. Joined Google as part of the front end transformation. Started my own studio called Torii Studio. What is innovation? Are you solving the right problem?

Hello, everyone. Very excited to speak with you about this topic today. Innovation is something that really excites me. And when I see products out there that are innovating, or even people that have great ideas, this is something that really excites me. And this is definitely something that I am very excited to talk with all of you.

So let's start. And before starting, I want to give you a little bit of background about myself. My name is Cristobal Chao. I am from Spain originally, came to the United States 11 years ago in 2012. And when I arrived to San Francisco, I started working for an innovation lab called Hatchery Labs. And our goal was to build other startups. It was very exciting. I was the first engineer there, and I had a great time working with a lot of startups. Some of them didn't go very far, but some of them went to the next level. And one of them actually became a unicorn, which is very, very exciting. A year and a half later, I joined Google as part of the front end transformation. And I learned a lot, not only from an engineering perspective, also from a design UI and UX. And I work in great teams. I was part of material design version 1 and version 2, building the main component systems, as well as moving all these pieces across platforms like Google Maps and Search. It was very exciting and I had a great time there. And then a few years ago, actually at the end of 2019, so three and a half years ago, I started my own studio called Torii Studio and we work with startups and also small, medium sized companies to try to help them go to the next level by building great front-end applications. And what I mean by great is front-ends that can scale very well from an engineering perspective, as well as building products that look and feel great. This is very exciting to me and we have seen a few startups going to the next level using some of our systems, processes, and what is still learning. And we have a lot of things to learn every day that is something new. So I'm very excited to actually speak about innovation today, which is what we try to do with the companies that we work with at Torii Studio.

So what is innovation, right? A lot of people probably are innovating right now, the ones that you are hearing me today, maybe in the past or maybe you are thinking to do it in the future. But all of us have a different sense of what innovation is. In order for me to explain how I think about innovation, I ask you this question, are you solving the right problem? And your first reaction probably is for sure, I mean, that's the easy part understanding the problem. And I know it very well. However, my answer to you probably is you are not really aware about the whole perspective.

2. Challenging Perspectives and Quick Iterations

Short description:

You start building the best solution for that problem, but most products fail in the first iteration. Can an airplane fly powered only by the pilot's body power? Henry Cramer offered a large sum of money for companies to cross a canal with a flying bike. After years of costly experiments, Paul McGrady challenged the perspective and built a plane that could be rebuilt in hours, not months.

You are bringing your own reality, your own biases, and you think you know everything. So you start building the best solution for that problem. And that's the main reason why most products fail in the first iteration. I don't really know one product that was successful at the first try. And I challenge you to tell me if I'm wrong. I haven't seen one in my life.

And to illustrate you a little bit about this topic, I'm just going to share like a story that happened back in the 50s, 1959. So 70 years ago, the world was different than today. And Henry Cramer, he was a magnate and came with this question. Can an airplane fly powered only by the pilot's body power? So it's like ET, like flying a bike. Isn't that crazy? He offered over a hundred thousand pounds. Back then, it was a lot of money. Just think about that amount was around two and a half million dollars. So that was a lot of money.

And they were big companies because there was a huge sum there and a lot of reputation that they could build trying to solve the problem. He wanted for companies to actually cross a canal of two miles with this flying bike. So they had to build it. They had to do everything and then try to fly the canal. So big companies were there like NASA and also a bunch of individuals. So then years later, no one has figured that out yet. They were spending a lot of money, a lot of time into every single experiment. And it was very costly because any time that they had to put something, it will take them months and then it will break and they will need to rebuild and try again. So it was taking a lot of time, a lot of money.

18 years later, Paul McGrady as an individual challenged the perspective of things. So he came with this perspective, with a different one. How can you build a plane that you can rebuild in hours, not months? So with this perspective in mind where he was thinking about ways to create a system that allows him to learn more about the problem by making very quick iterations. So every quick iteration will help them, well, will help him understand more about the problem and try again from a learning that he got from the previous iteration and build on top of that. So in a few months, he was actually able to create a system that allowed him to rebuild the bike that he was building in a matter of hours. So in just one day, he was actually able to experiment twice or three times. And all the competitors were taking them months.

3. Importance of Quick Iterations

Short description:

He was able to cross the canal and win the prize by being ahead of everyone else. Quick iterations are important in understanding and finding solutions. Don't expect immediate success; it takes many iterations. Design thinking is a similar process used in building digital products. Learn from every iteration and keep trying. Albert Einstein emphasized the importance of experimentation.

So if you think about that, right, he was ahead of everyone else by just being able to do that. And in a matter of months after he created the system, he was actually able to cross the canal and win the prize.

The story is called You Are Solving the Grown Problem. This is from the Stanford University of Innovation. I would really encourage you to take a look. It's way better explained than I am explaining to you. So it's very, very interesting, this story. And it tells you, right, how important are quick iterations.

Every iteration is very important. Don't think about building the best solution. Just try to find a way to get there fast, and you will actually understand a lot. And don't think that you're going to get it right away. It's probably going to take you a lot of iterations.

So probably you are asking, OK, this is great. This is 1959. So the story now is different. We're building digital products. We use React. So who cares about building flying bikes? Stanford University comes with as well with this design thinking process. Some of you know, but it's a very similar idea.

You empathize with the problem. You define what problem is. You ideate a solution. Then you prototype and you test. And you want to do it many different times. And every iteration is a very, very interesting learning problem. So you want to learn from every iteration as much as you can and try again and again and again.

As Albert Einstein said, no amount of experimentation can ever prove me right. A single experiment can prove me wrong. He was able to achieve a lot of things by just making experiments.

4. Importance of Iterations and Feedback

Short description:

Every experiment is an iteration. Start with paper and draw your idea. Get feedback through different phases. Building the product takes the longest. Big companies struggle to innovate. Small teams innovate better with limited resources.

For us, it's the same idea. We want to make experiments. Every experiment is an iteration. So that's a very important concept for you to understand. Because that's the main reason why most startups are successful, whereas others are not.

When you are trying to innovate in a life cycle of a product, you're going to start with a paper and draw your idea to it and put it in front of people. And you're going to start asking about how does it feel. However, if you start with paper, you're probably not going to get a lot of great feedback. You're going to get some level feedback that will be useful, but it's not the reality. You can go through other phases like trying to go wireframes, low fidelity, high fidelity, fully functional or building the product, right? But until there, until you don't get to the product, you're not going to get the highest level feedback.

When you build the product, you put it in front of people, that is when you understand what's going on, but it's very painful, especially the first situation because that's when you get punched in the face. That's when you fail. Especially the first time. You're building something that is new, right? That you think is going to solve everything and it's not, right? And that's fine. But until you are there, you're not going to get the highest level feedback. And the second question you want to ask yourself in the life cycle of any product is, how fast can you get there? Drawing something in paper, very, very fast. You can do it right now. It takes a few seconds, minutes of your time, but building the product takes the longest.

So if we put this into perspective, how fast and how accurate are our assumptions depending on the life cycle of any product? You know that product takes the longest, but we want to also get there. And if you think about the size of the company, the product takes the longest, especially if you're in a big company. And that's a very important concept to understand. That's why most companies, when they are big, they have a hard time to innovate something new. If you look at Google in the last 10 years, we barely have seen any innovative products. However, they spent billions into AI. And a small company like OpenAI comes to play and creates just GPT. Think about that. That's the main reason why small teams can innovate way better than bigger companies. However, they have a much more limited resources, much more limited budget. But there's a very interesting concept for you to understand because at the end of the day, that's how the world operates. So, now, we, as developers, usually, most of the time, we're just building the product.

5. Blending Designers and Developers

Short description:

We're in the latest phase of innovation. But what if instead of just building what the designers hand to us, we blend the worlds of designers and developers from the beginning? The most critical part is the mindset, coming with a clear and open mindset, like a kid, ready to learn and experiment. By blending ourselves into the same reality with component systems, such as Figma and React, we can create reusable systems and focus on building the user experience. Starting with a minimal approach using HTML5, we can iterate and polish as we go without the need for a library.

We're in the latest phase of innovation. But innovation happens before than us, right? The designers usually go through paper, wireframes, low fidelity. Depending on the size of your team, you can go through all these different phases. But then, at the end, we're just building what the designers are handing to us. I want to question this perspective.

And I have a question for you. What if instead of doing that, we mix these two worlds together, we blend them in such a way that designers and developers are part of this innovation phase from the very beginning? The first question is how? And the first thing you need to understand is that the most important part, the most critical part, is the mindset. It's not the level of knowledge that you have, the experience that you have. It's the mindset. If you come with a very clear mindset, like a kid. When I mean a kid, is you want to go there without having any sort of ego. Nothing like tells you, oh, I know this way better than you. Keep your ego on the door. Just try to have the right mindset because that's very important. And you want to be learning from the very beginning. Even if you have been 20, 30 years in the space, you want to come with a very clear mindset and with no knowledge, no ego.

I mean, the knowledge is very important. Don't get me wrong. But you wanna come as very fresh person there trying to understand what's going on, try to learn. I think that every experiment is a learning for you. So as kids learn so fast because they don't care, they try a lot of things. That's why we want to also apply the same mentality. So how do we start? So we as developers and designers, we're actually blending ourselves into the same reality when we think about component systems. Designers usually use Figma, developers we use React. We can transform these design systems into systems that work very well and they are reusable in both sides. They are actually tools that allow you to go from Figma to React and the other way around, but this is a very interesting mindset that you want to have because you want to reuse as much as you can so you don't spend too much time into building the components. You are actually building the experience that you want to put in front of users. And with this idea of mine of iterations, you want to make a small iteration, try to get there, and as you go, you are polishing things. You kind of start when you have an idea with a very minimal way which is HTML5. You don't really need a library.

6. Benefits of Using React

Short description:

I encourage you to use React for its component reusability. Building in HTML may be fast, but it often results in an unattractive user experience. Users now expect better experiences due to their constant use of digital tools. Transitioning from HTML5 to bootstrap or material UI is not difficult.

I mean, I really encourage you using React because that really implies reusability of components that can actually get you to the next level way faster. So that's why I also encourage you other libraries, but before I jump into that, just think about this, building something in HTML, I mean, it's very fast, but also it's something very ugly. People don't really have a great time, especially users these days. These days, users have raised the bar to the next level. They expect a user experience way better than before. So right now, and the reason why they do it is because they use digital tools all the time. They are in their phones constantly and that actually leads to great user experiences. So if you give them something that looks ugly, they're going to just reject it from the get go. So that's something to keep in mind, but for you to go from HTML5 components to bootstrap or material UI is not actually that hard. You just need to create, I mean, if you never did it before, it's maybe going to take you a little bit, but it's not that hard.

7. Figma's Dev Mode Capabilities

Short description:

Figma's dev mode capabilities allow you to get components and tools for faster development. However, it's still not the best solution. Figma is iterating and trying to create something innovative, but they haven't reached a great solution for everyone.

I want to also share this concept, some of you know already, I guess most of you should know that Figma has these dev mode capabilities, which allows you to actually get components already from Figma and have certain tools that get you to the next level way faster. However, I have to say this was released a few months ago. I am not the biggest fan. I think the idea is great, but I think we're still far from being the best or something that I'm very proud of using. So just keep that in mind. I would love to know what you think about it, but this is a very interesting area. And I hope Figma does a better job as we go. They are actually iterating, right? They're trying to create something innovative and I think they are in the way, but they haven't reached a great solution for everyone.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Brain-controlled Interfaces in JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
Top Content
ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.
TensorFlow.js 101: ML in the Browser and Beyond
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
JSNation 2022JSNation 2022
22 min
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
Top Content
Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
How I've been Using JavaScript to Automate my House
JSNation 2022JSNation 2022
22 min
How I've been Using JavaScript to Automate my House
The Talk covers various experiments with JavaScript and C++, including controlling lights and creating a car control system. The speaker shares his experiences with home automation and the challenges of hiding wires. He explores using JavaScript with Esperino for face recognition and discusses the benefits and limitations of the platform. The Talk concludes with suggestions for using JavaScript in hardware projects and learning opportunities.