Design Cookbook AI Search
Work Project
2023.5 - 2023.8
Context
“D4D IS OUR #1 SECRET WEAPON AT INTUIT. THERE IS NO #2.” – Scott Cook, co-Founder, Intuit Inc. Design for Delight (D4D) is a series of three principles which represent how Intuit designs and innovates. Intuit’s most successful teams apply Design for Delight to bold new ideas and continuously delight its end customers as a result.
Intuit's design Cookbook is a Figma file resource that lists various design methods to use in different design stages followed by the D4D process. However, it has very low adoption rate.
ROLE
Product Designer, Design Technologist, Project Manager
PROCESS
Customer interview, Technology audit, Visual Design, Interaction Design, Prototyping, Technical check
TEAM
Design Operations
Challenges
How to bring the Cookbook into designers’ day-to-day process by integrating and amplifying the tools that they currently use?
Project Roadmap
Following Intuit's Design for Delight (D4D) design guidance, this project has 3 stages: discover the problem, explore the solution and deliver the experience.
Project roadmap
Stage 1: Discover the Problem
Break-down
Goals, Ideal states, Customer problem statements, Target users, Learning plans, Success metrics
User research
20 internal customers ranging from designers and product managers.
Methods include observations, questionnaires and user interviews.
Document research result and record user interview sessions.
Takeways
Very small amount of people used the Design Cookbook Figma file during their work
People have different painpoints about the design process. For new designers, they have trouble getting immediate feedback and guidance during the process. For experienced designer, they have trouble finding templates.
Junior designers and product managers are more excited about the potential tool tool.
Decisions
Target users are all Intuit designers.
Consider both new designers and experienced designers.
Customer Problem Statements
Stage 2: Explore the Problem
Break-down
Brainstorming, Sketching, wireframing, Figma prototypes, Narrow down solutions, Design critiques, Content reviews, Visual reviews, iteration.
Go Broad, Go Narrow Process
Conducted a technology audit to determine the final shape of the product.
After 2 brainstorming sessions, came up with 10 ideas.
Narrow down solutions into 1, based on the impact, request frequency from customers and business preference.
Refine the visual by doing 1 content reviews and 2 content reviews.
Decisions
The final product is a Figma plugin based on the technology audit result.
Add the AI powered search feature based on the business preference.
Flow Diagram
Figma Prototype
Specifically, AI is used to provide design method recommendation. Users are able to indicate the project stage, project characteristics and special request, then the tool will recommend up to 3 top methods for users to use. They can also add more details in order to find more accurate results.
As the edge case, if users still cannot get satisfying design methods after adding more detail, this tool will not allow users to add details once again. Instead, it will direct users to the full design methods page. In this way, we can ease the disappointment of imprecise result while using AI recommendation.
How AI works with the Search
Stage 3: Deliver the Experience
Break-down
Code set up, learn new technologies, user testings and iterations
Tech Stacks
React.js, HTML, CSS/SCSS, JavaScript, Generative AI
Process
During this process, I turned the design into code and explore two different ways to achieve the AI search feature:
AI Similarity Search
Generative AI
Decisions
Move forward with the Generative AI method because it model can accommodate more complex user prompt.
User Testing and Iteration
After finishing the mid-fidelity prototypes, I started to run a series of user testing sessions. Based on the valuable feedback from target users. Below are the takeaways.
Users don't want to spend too much time on selecting project stages and characteristics. They prefer an intuitive way to get the help from AI.
There are too many steps, and the homepage does not contain a lot of information.
It is not easy to find resource if users already know which one they want to use.
Based on the feedback, I made the following changes:
Change the entry point as the all method page, so designers can quickly spot the design method they need.
Get rid of the selection and put a text field instead.
Add the auto-complete feature.
Screens Updates
High-Fidelity Prototypes
The first approach is to AI similarity search to find the best 3 top matches. The prototype was developed using React/CSS/JavaScript. I leveraged components from Intuit's design system and avoid the keyword features, because it is technically hard to achieve with the current resources.
AI Similarity Search Prototype
As it turned out, the model can only handle simple user prompts, and the accuracy is not very stable. Therefore, I tested another approach using GenStudio, Intuit's internal AI engine. The process of implementing it into product was rather complex, but it can cover more complex user prompts as showed below. Due to the approaching deadline, the UI is simplified in this prototype.
Generative AI Search Prototype
Launch and Impact
After finalizing the design and code, I handed the project off to another design technologist by August 2023. The plugin was successfully launched in early 2024 and is widely used by a lot of people. Below are some metrics provided by Figma plugin as of July 2024.
User Data