top of page

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

  1. Very small amount of people used the Design Cookbook Figma file during their work

  2. 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.

  3. Junior designers and product managers are more excited about the potential tool tool.


Decisions

  1. Target users are all Intuit designers.  

  2. 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

  1. The final product is a Figma plugin based on the technology audit result.

  2. 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:

  1. AI Similarity Search

  2. Generative AI


Decisions

  1. 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.


  1. 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.

  2. There are too many steps, and the homepage does not contain a lot of information.

  3. 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:

  1. Change the entry point as the all method page, so designers can quickly spot the design method they need.

  2. Get rid of the selection and put a text field instead.

  3. 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




bottom of page