Speaker A
As a designer who may not have always felt like it had a strong connection to the core business strategy, or could really understand and interpret data, well, now the tools allow you to do that so easily. The core of what
Explore how designers at Shopify grow and adapt using new tools and processes in a rapidly changing design landscape.
Key Takeaways
- Designers must embrace new tools and coding skills to stay relevant and impactful in modern product development.
- Integration of design, product, and engineering roles leads to more effective and rapid product iteration.
- Real coded prototypes with live data are becoming the new standard for validating design concepts.
- Continuous learning and adaptation are essential for designers at all career levels in a fast-evolving industry.
- Collaborative tools and data access empower designers to contribute meaningfully to business strategy and product success.
What the video covers
- Designers now have unprecedented access to tools that connect design with business strategy and data interpretation.
- Shopify leads in integrating design deeply into product development, emphasizing rapid prototyping and real coded prototypes.
- The traditional roles in product development—design, product, and engineering—are collapsing into a more integrated process.
- Designers at all career stages, from new grads to experienced principals, are evolving their practices to keep pace with industry changes.
- Prototyping has shifted from static tools like Figma to interactive, real data-driven prototypes using Shop client components.
- Shopify designers use various coding tools and APIs to customize their development experience and improve collaboration with engineers.
- The product development process at Shopify is highly design-driven, with design playing a key role in desirability, feasibility, and viability.
- Sharing prototypes and design concepts has become more seamless, reducing reliance on static decks and increasing team engagement.
- Tools like the data portal empower designers to access real user data, enhancing their ability to create impactful designs.
- The video highlights specific examples of prototyping tools and workflows used at Shopify to accelerate design iteration and product delivery.
Chapters
- 00:00Introduction: Design and Business Strategy Connection
- 00:45Shopify's Leadership in Design Innovation
- 01:25Access to New Design Tools and Creative Expansion
- 02:24Changing Roles in Product Development
- 02:47Supporting Designer Growth Amid Rapid Change
- 03:15Prototyping Evolution: From Figma to Real Coded Prototypes
- 04:24Using Real Data and Shop Client Components
- 05:02Collaboration and Sharing in Design Process
- 08:04Design's Role in Desirability, Feasibility, and Viability
- 09:26Customizing Development Experience with Code and APIs
Full Transcript — Download SRT & Markdown
Speaker A
makes a designer super valuable is just being amplified by this moment.
Speaker A
been. [music] We've been given such unfettered access to every kind of tool possible and an unlimited [music] amount of tokens to use to really explore this space of what it means to be designing in the new era. And that's something
Speaker A
Hi, my name is Katarina Betina, and I lead design at Shopify. I think the thing that's really unique now is just how ahead of the curve Shopify has
Speaker A
been.
Speaker A
around [music] that product development process. One theme that's super top of mind for me is helping designers grow in this environment [music] of really rapid change. And that spans from new grads out of school who are coming into a
Speaker A
We've been given such unfettered access to every kind of tool possible and an unlimited
Speaker A
amount of tokens to use to really explore this space of what it means to be designing in the new era. And that's something
Speaker A
that we've really been embracing at Shopify. This idea that not only designers can be builders now, but what we're able to think about, our creativity
Speaker A
has just been wildly expanded. You almost used to think of those pieces of the process cut by
Speaker A
discipline.
Speaker A
after kind of still working on this idea a bit more and building out a pretty convincing prototype that can really show the possibility of us kind of rebuilding the store with all the components that we have.
Speaker A
Product is responsible for the proposal. Design is kind of responsible for the prototype and getting the
Speaker A
concept of what we want to build together. And build is largely an engineering pursuit. The disciplines have entirely collapsed
Speaker A
around
Speaker A
that product development process. One theme that's super top of mind for me is helping designers grow in this environment
Speaker A
of really rapid change. And that spans from new grads out of school who are coming into a
Speaker A
moment in the industry where the definition of the job is changing very quickly
Speaker A
to principal designers who are evolving their practice even though they've been at it for the last 10 to 15 years.
Speaker A
impact the business? You could easily split those three across the disciplines. You know design was responsible for making it desirable.
Speaker A
This is something I've been thinking about for a while, and I tried to approach it maybe about a year or so ago. Uh, and it was like rethinking how we build the store, merchant store and
Speaker A
shop. Originally I did in Figma. I made some prototypes. We looked at them. It felt very static and very not real.
Speaker A
[music] has historically been incredibly design driven. I think that's more so true [music] now than ever. Whereas before, you know, a Figma and a prototype was really our source of truth, now real coded prototypes are either our source of truth that then
Speaker A
Yeah. And then in an afternoon, I was able to build out this which pulls in real data.
Speaker A
It basically takes a look at the online store, and then I asked Claude to rebuild it given all of the shop client components that we have. I showed this to you. I think it was about four o'clock on a Friday, and this is
Speaker A
after kind of still working on this idea a bit more and building out a pretty convincing prototype that can really show the possibility of us kind of rebuilding the store with all the components that we have.
Speaker A
Hey, I'm Liam Fennel. I'm a product designer here at Shopify working on shop app and so I built a little tool that I'm going to show up today. We can create prototypes in React Native and Swift for an expo. Um and then you can
Speaker A
So much of what we do in Shopify is representing the brands of other merchants,
Speaker A
and real data is key here, right? There's so many assets.
Speaker A
It's so interesting to look at the interface here because you've basically built like a pretty beautiful piece of software. You're using this to illustrate a real product opportunity.
Speaker A
like preference to prototyping in shop client because everything's there and then we can just hand it straight to engineers um to start working.
Speaker A
Yeah, this is a vehicle to get the thing that's in my out and away.
Speaker A
And it's funny to think about even six months ago the amount of meetings, docs, assets we would have generated that would have
Speaker A
not at all illustrated.
Speaker A
It would have been a deck. It would have been some like deck that I have that has like really pretty couple of prototypes,
Speaker A
but it, that's it would have died there. And now that there's this link because we have, we use Quick obviously
Speaker A
to share this out. I can share this with the entire team, and it's just kind of a really fun time to be working on this stuff right now.
Speaker A
like product and data, right? Um, and we have something called the data portal, which is essentially an MCP that anyone in the company has access to. And that allows designers who are curious about how many active users are on their
Speaker A
There was this idea that the thing that made a great product was understanding what made a product desirable, feasible, and viable. Desire being do people want to use this? Feasible. Can it be built? And viable? Is it
Speaker A
going to
Speaker A
impact the business? You could easily split those three across the disciplines. You know, design was responsible for making it desirable.
Speaker A
Engineering was largely responsible for making it
Speaker A
feasible, and product, you know, is the thing viable. And I think what's most interesting about this moment and what I've always believed about
Speaker A
design is that design has an important role in making sure that
Speaker A
people want the thing in the first place or that it's actually solving a problem, but that all the other things, the feasibility
Speaker A
of it and the viability of it are really important inputs to making a well-designed product. Product development at Shopify
Speaker A
has historically been incredibly design driven. I think that's more so true
Speaker A
now than ever. Whereas before, you know, a Figma and a prototype was really our source of truth, now real coded prototypes are either our source of truth that then
Speaker A
inform the build or
Speaker A
at times are production ready. Obviously, getting close to the code is another important piece of the puzzle, but everybody has their own flavor, and it's kind of been cool to watch designers
Speaker A
design
Speaker A
their development experience. We have people using Codecs and a same amount of people using Cloud Code, but also then venturing into API and actually custom building
Speaker A
their own agent harnesses to really give themselves an opportunity to develop an agent-based
Speaker A
design experience that really suits their needs, the kind of product that they're designing for, and they're really able to
Speaker A
turn the knobs and dial in that experience, which is really cool to see.
Speaker A
100% manual. for example, like you know, we wanted to create this [music] little floating character on our project. And so you have this little floating character here, and [music] each time you click on him, his jacket gets crazier and crazier. You can [music]
Speaker A
Hey, I'm Liam Fennel. I'm a product designer here at Shopify working on the Shop app, and so I built a little tool that I'm going to show up today. We can create prototypes in React Native and Swift for an Expo. Um, and then you can
Speaker A
iterate on these versions with your co-workers. I'll start running this one. It uses a Shop prototype kit,
Speaker A
which is basically rebuilding Shop client in Swift.
Speaker A
You don't have to open your terminal at all. It's a little bit easier for maybe
Speaker A
less technical designers who don't want to get into the weeds of setting up dev every time doing all that. And then on the flip side of that, we can also spin up Shop client. Um, this is usually like
Speaker A
the heaviest to get going. You have to pull down changes from main every single time. Um, and it's just like
Speaker A
the hardest thing to spin up for someone that's not super technical. So, this just simplifies it into one click. We
Speaker A
like preference to prototyping in Shop client because everything's there, and then we can just hand it straight to engineers
Topics:design growthShopify designproduct developmentprototypingreal coded prototypesdesign toolsdesigner skillsdesign and datacollaborative designdesign innovation
![[YTP] Jordan Peterson: Rat King — Transcript](https://i.ytimg.com/vi/0qUoznGIe1M/maxresdefault.jpg)
![Nick & Charlie ‣ their story [+heartstopper forever] — Transcript](https://i.ytimg.com/vi/p4TiW1TZM3w/maxresdefault.jpg)
