Accelerating Design & Development Innovation with AI-driven Tools

Rate this content
Bookmark
Slides

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

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.

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
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
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
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
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
WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.
This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.
WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.
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
In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
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
Software Programming is naturally fun but making something physical, to interact with the world that you live in, is like magic. Is even funnier when you can reuse your knowledge and JavaScript to do it. This talk will present real use cases of automating a house using JavaScript, Instead of using C++ as usual, and Espruino as dev tools and Microcontrollers such as Arduino, ESP8266, RaspberryPI, and NodeRed to control lights, doors, lockers, and much more.