The New Full-Stack Designer

The Evolving Design Process with AI [00:00:00]

• The core design process remains iterative, but tooling has shifted dramatically towards AI.
• Figma is now used as a scratchpad, with AI tools like Codex and CloudCode driving the workflow towards faster, testable outputs.

• "It's definitely more of a world now that includes tools like Codex and CloudCode and being in terminal a lot and just getting to an output that I can use and test on my phone or computer a lot faster."

Human Oversight in AI-Driven Design [00:01:00]

• Designers remain in the driving seat, using AI for heavy lifting but retaining quality control and decision-making.
• The focus shifts from the output itself to being selective about what to move forward with, making curation a key skill.

• "We're in the driving seat and we're actually more than ever now in a position where the output isn't the issue anymore. It's us being extremely selective about what we go forward with and what we work with."

The Role of the Editor [00:01:45]

• Designers are becoming editors, with AI speeding up tasks that previously required extensive handcrafted design.
• AI can execute complexity and technology beyond what a designer could hand-code, but lacks aesthetic judgment.

• "It can write code, but it doesn't know what looks good and what looks bad. And that's for me to decide and to steer AI into the right direction."

Shopify's Product Design Studio Mission [00:02:30]

• The studio focuses on redesigning and improving key Shopify surfaces like Sidekick (AI infrastructure) and the mobile app.
• They work with new AI infrastructure built by engineering teams, marking an exciting new era for the 20-year-old company.

• "We've quite recently have been working with a lot of new AI infrastructure that the engineering teams have built for us. And yeah, it's just been a really exciting, exciting last year."

Dual Focus: UI Redesign and AI Automation [00:03:45]

• The design team is split: one part redesigns the admin experience in Figma for the web, while the other focuses on automating interfaces via chat with Sidekick.
• This involves building beautiful new UI while also using AI to generate AI workflows, enhancing the mobile experience conversationally.

• "And that's like, they're basically two almost controversial, paradoxic sectors of the company, but they work really well together."

From Independent Studio to Shopify Impact [00:05:00]

• Previously ran Molly, a design studio in Brooklyn, for two years with clients like Collins, Apple, and Google.
• Focused on web design, product design, and content strategy, maintaining close client relationships.

• "It was honestly a broad mix of web design and product design and a lot of content strategy and hierarchy for clients as well when it came to their websites."

Molly Studio's Design Philosophy: Primal System [00:07:00]

• Developed the "Primal System" to digest and structure website content, making exploration feel natural.
• Emphasized progressive disclosure to avoid overwhelming users with too much information.

• "To us always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention."

Handcrafted Details and Collaboration at Molly [00:08:30]

• Projects like the Collins website featured meticulous details, such as handcrafted bounce animations for case studies.
• This level of craft demonstrated dedication and inspired client confidence.

• "I would lay something like this out in Figma and try to understand the spacing and the size and the colors and the rows and all of that. And then I would hand it off to someone like Jesper, who would then work on the bounce animation."

The Decision to Join Shopify [00:10:00]

• Shopify's CEO, Tobias Lütke, envisioned a new era needing design to shape the future.
• Design is now more central to Shopify's narrative, emphasizing craft and pride in their tooling.

• "Design is very much helping shape the narrative of where the company is going and the level of craft and pride we're taking towards the tooling and the software that we're building for our merchants."

Seeking Larger Impact at Shopify [00:11:00]

• The desire to have a larger impact on millions of users, compared to the smaller audience of independent studio projects.
• Testing interface paradigms on a massive scale presents different, exciting challenges.

• "We also wanted to have a larger impact and, and, and, and see if our strategy would hold up on interface paradigms with millions of users versus the few users, I guess, that would scroll around the Spencer website."

Integrating Design and Engineering with AI [00:12:00]

• The studio operates within Shopify's Sidekick AI infrastructure, working closely with the broader design organization.
• AI enables rapid prototyping, which is more effective than PRD documents for conveying ideas.

• "Upleveling the interface was easy for us because we have really talented designers who rebuild parts of the interface in Figma and then using AI, we're, we're able to port that over into very tangible prototypes extremely quickly."

Modernizing Shopify's Admin Experience [00:14:00]

• Showcasing a redesign of the admin experience with a new home design and overall facelift.
• Focus on merchant interaction with Sidekick, using AI suggestions to directly manipulate the store via chat.

• "The concept is more, can we bring UI to the user and into the, into, into context versus having, uh, the user click through, like through the interface at the end of the day."

Designers Building Prototypes [00:15:30]

• Designers are actively building and testing prototypes within a dedicated playground environment.
• This empowers them to visualize and iterate on ideas rapidly, bridging the gap between design and engineering.

• "A lot of times designers are designing and they're not building, but uh, it's in, in Shopify and your team and you, you are building a lot of the stuff that you are designing so that you can test it so you can prototype it so you can see it on live, uh, live data, live experiences."

Figma as a Visual Scratchpad for AI [00:17:00]

• Figma serves as a playground for ideation, especially for complex interactions that are too costly to test in code initially.
• Visual representations in Figma help AI decompile and understand motion and interaction ideas more effectively than text alone.

• "I give those ideas to Codex. And I, and I use the scratchpad A because it's easier for me to, to decompile something, but also it's actually easy for Codex to decompile it. If it sees it visually, it interprets that image."

Recreating Grass Shaders with AI [00:18:30]

• Detailed process of using AI (Codex, ChatGPT) to recreate a realistic grass shader from video footage.
• Required breaking down the problem into subtasks, understanding light, shadows, and underlying terrain structure.

• "I fed the video into, into, into Codex for the first time and just explained it, my, the, the, the project and the process that I was, I wanted you to go through, take the video, turn this into a shader."

The Power of Dial Kit and Iteration [00:21:00]

• Tools like Dial Kit allow designers to easily create and tweak variables in prototypes, enabling perfect refinement.
• This iterative process, including exposing underlying structures and toggling parameters, helps visualize complex ideas.

• "Exposing the underlying structure would also show me where AI had made mistakes. The original version of the terrain map that it had implemented was completely wrong and skewed."

AI as an Infinitely Patient Collaborator [00:24:00]

• AI is viewed as a patient teammate that doesn't get frustrated with numerous iterations.
• Advice for designers and founders: tinker with tools, describe desires, and continuously shape the narrative with AI.

• "Codex won't get mad at me if I need 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out."

Website Review: Nstack [00:26:00]

• Visually immersive but lacks clear direction, overwhelming users with too many elements and unclear primary actions.
• Feedback suggests collapsing clutter, focusing on a clear headline, and providing a simple entry point to a demo.

• "I think what's nice about this is like, you're basically just in their product already and you're, and you're using their product. Yeah. I think I'm a little confused about what to use it for though."

Website Review: SkillSync [00:28:30]

• Clear company mission but dense information and small fonts make it hard to digest.
• Critique on using too many tabs, leading to hidden content users may never see; suggests a "three up" component approach.

• "The trap that a lot of people fall into a lot of times with tabs like these is people, users usually will not click on all of the tabs and explore them all."

Website Review: InstaPlay [00:31:00]

• Visually appealing with game examples but lacks clear primary call to action (create vs. explore).
• The sign-up requirement before experiencing the core value (creating a game) is a barrier.

• "The first thing that we did is we saw all the visual games, all the screenshots of them. And so we jumped right to that. And so we missed the fact that actually the primary purpose here is for us to be able to just create our own games on the fly."

Website Review: Mintlify [00:33:30]

• Praised for being clean, professional, and trustworthy with excellent use of color, typography, and spacing.
• Effective use of reductive design, prominent CTAs, and social proof through a logo wall.

• "It's a beautiful website. Yeah. This looks very professional. Yeah. It looks like something that is trustworthy. It's straightforward. It's very clean."

Website Review: Nullify [00:36:00]

• Headline with two changing placeholder elements is disorienting; the core message about video creation is buried.
• Critique on scroll-jacking and inefficient carousel interaction, suggesting a focus on showcasing video case studies more effectively.

• "The first thing that jumped out at me is the two placeholder elements in the headline. And I find that to be disorienting."

Website Review: Instinct [00:39:00]

• Strong visual introduction with a moon graphic, clearly communicating space technology focus.
• Suggestions include using 3D interactive elements and faster animations on hover for key actions like launch, cruise, land.

• "I think this, this is very well done because right off the bat, we knew exactly what this was. Yeah. And the animation here of like showing it in 3D, it could have just been a 2D, it could have been a photo."

Carousel Design and Homepage Structure [00:41:30]

• Critique on Instinct's non-draggable carousel, recommending a free, open-source "Blossom Carousel" kit.
• Advocacy for integrating key content like Technology, Company, News, and Careers directly into the homepage via "chapters" rather than relying solely on top navigation.

• "The primal strategy that Jay Tel and me like our school of thought on this would always be, you have technology, company, news, careers, merge."

Final Thoughts on Design Craft [00:43:00]

• Emphasis on the importance of curation and editing in design, making difficult decisions about what to include.
• Taking time and care, and reducing complexity, leads to more breathable and effective designs.

• "It's much harder to figure out what needs to be edited out. Because that conversation is just much harder to have with the team."