Div
Div
Div
Div
Div
A generative AI web design tool that helps to tailor every design element of a website to specific audience
A generative AI web design tool that helps to tailor every design element of a website to specific audience
A generative AI web design tool that helps to tailor every design element of a website to specific audience
A generative AI web design tool that helps to tailor every design element of a website to specific audience
A generative AI web design tool that helps to tailor every design element of a website to specific audience
GenAI
GenAI
GenAI
GenAI
GenAI
Design Tool
Design Tool
Design Tool
Design Tool
Design Tool
Design System
Design System
Design System
Design System
Design System
Web App
Web App
Web App
Web App
Web App
Timeline
Timeline
Timeline
Timeline
May 2023 - Aug 2023
May 2023 - Aug 2023
May 2023 - Aug 2023
May 2023 - Aug 2023
May 2023 - Aug 2023
Team
Team
Team
Team
Effie Zhu / Isabel Li
Effie Zhu / Isabel Li
Effie Zhu / Isabel Li
Effie Zhu / Isabel Li
Effie Zhu / Isabel Li
Tool
Tool
Tool
Tool
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Role
Role
Role
Role
Researcher / UI/UX designer / Prototyper / Project manager
Researcher / UI/UX designer / Prototyper / Project manager
Researcher / UI/UX designer / Prototyper / Project manager
Researcher / UI/UX designer / Prototyper / Project manager
Researcher / UI/UX designer / Prototyper / Project manager
Background
Background
Background
Background
Background
Gen AI should not replace the design process from start to finish. Instead, it should serve as a co-pilot within the workflow, with designers maintaining complete control.
Gen AI should not replace the design process from start to finish. Instead, it should serve as a co-pilot within the workflow, with designers maintaining complete control.
Gen AI should not replace the design process from start to finish. Instead, it should serve as a co-pilot within the workflow, with designers maintaining complete control.
Gen AI should not replace the design process from start to finish. Instead, it should serve as a co-pilot within the workflow, with designers maintaining complete control.
Gen AI should not replace the design process from start to finish. Instead, it should serve as a co-pilot within the workflow, with designers maintaining complete control.
Challenge
Challenge
Challenge
Challenge
Challenge
How might we help creatives better align their web designs to diverse user needs and expectations to improve audience engagement?
How might we help creatives better align their web designs to diverse user needs and expectations to improve audience engagement?
How might we help creatives better align their web designs to diverse user needs and expectations to improve audience engagement?
How might we help creatives better align their web designs to diverse user needs and expectations to improve audience engagement?
How might we help creatives better align their web designs to diverse user needs and expectations to improve audience engagement?
Our Solution
Our Solution
Our Solution
Our Solution
Our Solution
We developed key features for the GenAI model to identify and cater to different audience groups, guided by human input. The system customizes the website for users by analyzing their cookies and IP address, ensuring a personalized experience that aligns with each user's knowledge and needs.
We developed key features for the GenAI model to identify and cater to different audience groups, guided by human input. The system customizes the website for users by analyzing their cookies and IP address, ensuring a personalized experience that aligns with each user's knowledge and needs.
We developed key features for the GenAI model to identify and cater to different audience groups, guided by human input. The system customizes the website for users by analyzing their cookies and IP address, ensuring a personalized experience that aligns with each user's knowledge and needs.
We developed key features for the GenAI model to identify and cater to different audience groups, guided by human input. The system customizes the website for users by analyzing their cookies and IP address, ensuring a personalized experience that aligns with each user's knowledge and needs.
We developed key features for the GenAI model to identify and cater to different audience groups, guided by human input. The system customizes the website for users by analyzing their cookies and IP address, ensuring a personalized experience that aligns with each user's knowledge and needs.
Tailored Audience
Tailored Audience
Tailored Audience
Tailored Audience
Tailored Audience
Generating audience profile for better tailored website
Generating audience profile for better tailored website
Generating audience profile for better tailored website
Generating audience profile for better tailored website
Generating audience profile for better tailored website
AI Assistant
AI Assistant
AI Assistant
AI Assistant
AI Assistant
Learning from your design needs and give edit suggestions
Learning from your design needs and give edit suggestions
Learning from your design needs and give edit suggestions
Learning from your design needs and give edit suggestions
Learning from your design needs and give edit suggestions
Checklist
Checklist
Checklist
Checklist
Checklist
Analyzing the website and generate a checklist to improve engagement for your audience
Prototypes
Prototypes
Prototypes
Prototypes
Prototypes
Userflow 1
Userflow 1
Userflow 1
Userflow 1
Userflow 1
Design Ecommerce Website Glamora
Design Ecommerce Website Glamora
Design Ecommerce Website Glamora
Design Ecommerce Website Glamora
Design Ecommerce Website Glamora
Userflow 2
Userflow 2
Userflow 2
Userflow 2
Userflow 2
Design
Personal Portfolio
Design
Personal Portfolio
Design
Personal Portfolio
Design
Personal Portfolio
Design
Personal Portfolio
Technology Centered Research
Technology Centered Research
Technology Centered Research
Technology Centered Research
Technology Centered Research
Initial Research
Initial Research
Initial Research
Initial Research
Initial Research
We did secondary research and a user survey around community of LLMs (Large Language Models), especially ChatGPT, which was defined as any human involved in the training of ChatGPT and any human impacted by the presence of ChatGPT.
We did secondary research and a user survey around community of LLMs (Large Language Models), especially ChatGPT, which was defined as any human involved in the training of ChatGPT and any human impacted by the presence of ChatGPT.
We did secondary research and a user survey around community of LLMs (Large Language Models), especially ChatGPT, which was defined as any human involved in the training of ChatGPT and any human impacted by the presence of ChatGPT.
We did secondary research and a user survey around community of LLMs (Large Language Models), especially ChatGPT, which was defined as any human involved in the training of ChatGPT and any human impacted by the presence of ChatGPT.
We did secondary research and a user survey around community of LLMs (Large Language Models), especially ChatGPT, which was defined as any human involved in the training of ChatGPT and any human impacted by the presence of ChatGPT.
Key Finding 1
Key Finding 1
Key Finding 1
Key Finding 1
LLMs have biased behaviors reflected by their trainers and assessors.
LLMs have biased behaviors reflected by their trainers and assessors.
LLMs have biased behaviors reflected by their trainers and assessors.
LLMs have biased behaviors reflected by their trainers and assessors.
LLMs have biased behaviors reflected by their trainers and assessors.
ChatGPT’s responses and content classifications, such as if a statement is hateful, show a liberal biases to certain topics even though it tells users it doesn’t have any political opinions.
ChatGPT’s responses and content classifications, such as if a statement is hateful, show a liberal biases to certain topics even though it tells users it doesn’t have any political opinions.
ChatGPT’s responses and content classifications, such as if a statement is hateful, show a liberal biases to certain topics even though it tells users it doesn’t have any political opinions.
ChatGPT’s responses and content classifications, such as if a statement is hateful, show a liberal biases to certain topics even though it tells users it doesn’t have any political opinions.
ChatGPT’s responses and content classifications, such as if a statement is hateful, show a liberal biases to certain topics even though it tells users it doesn’t have any political opinions.
Key Finding 2
Key Finding 2
Key Finding 2
Key Finding 2
People prefer ChatGPT’s work belongs to no one that belongs to everyone.
People prefer ChatGPT’s work belongs to no one that belongs to everyone.
People prefer ChatGPT’s work belongs to no one that belongs to everyone.
People prefer ChatGPT’s work belongs to no one that belongs to everyone.
People prefer ChatGPT’s work belongs to no one that belongs to everyone.
42.5% of the survey participants believed “the rights of the work of ChatGPT should belong to no one,” while only 29.3% responded “agree” to the statement “the content generated by ChatGPT belongs to all the users of ChatGPT.”
42.5% of the survey participants believed “the rights of the work of ChatGPT should belong to no one,” while only 29.3% responded “agree” to the statement “the content generated by ChatGPT belongs to all the users of ChatGPT.”
42.5% of the survey participants believed “the rights of the work of ChatGPT should belong to no one,” while only 29.3% responded “agree” to the statement “the content generated by ChatGPT belongs to all the users of ChatGPT.”
42.5% of the survey participants believed “the rights of the work of ChatGPT should belong to no one,” while only 29.3% responded “agree” to the statement “the content generated by ChatGPT belongs to all the users of ChatGPT.”
42.5% of the survey participants believed “the rights of the work of ChatGPT should belong to no one,” while only 29.3% responded “agree” to the statement “the content generated by ChatGPT belongs to all the users of ChatGPT.”
Key Finding 3
Key Finding 3
Key Finding 3
Key Finding 3
People don’t consider ChatGPT generated contents are of their own intellectual property.
People don’t consider ChatGPT generated contents are of their own intellectual property.
People don’t consider ChatGPT generated contents are of their own intellectual property.
People don’t consider ChatGPT generated contents are of their own intellectual property.
People don’t consider ChatGPT generated contents are of their own intellectual property.
Only 12.2% of the survey participants agreed that the contents they generate with ChatGPT are of my their intellectual property.
Only 12.2% of the survey participants agreed that the contents they generate with ChatGPT are of my their intellectual property.
Only 12.2% of the survey participants agreed that the contents they generate with ChatGPT are of my their intellectual property.
Only 12.2% of the survey participants agreed that the contents they generate with ChatGPT are of my their intellectual property.
Only 12.2% of the survey participants agreed that the contents they generate with ChatGPT are of my their intellectual property.
Primary Research
Primary Research
Primary Research
Primary Research
Primary Research
To understand how generative AI models work, we tried out existing models on RunwayML. During our explorations, we realized the model is not good at generating two-object combinations. We also learned that generative AI have pre-trained style. With the insights, we decided to train two models: one model of two people to see if the AI will recognize two people as individual human or as a whole, and the other model of an instagram artist’s style to see if the AI can recognize the specific style. We also tried Framer AI for website generation, but we realized its limitations in design and content.
To understand how generative AI models work, we tried out existing models on RunwayML. During our explorations, we realized the model is not good at generating two-object combinations. We also learned that generative AI have pre-trained style. With the insights, we decided to train two models: one model of two people to see if the AI will recognize two people as individual human or as a whole, and the other model of an instagram artist’s style to see if the AI can recognize the specific style. We also tried Framer AI for website generation, but we realized its limitations in design and content.
To understand how generative AI models work, we tried out existing models on RunwayML. During our explorations, we realized the model is not good at generating two-object combinations. We also learned that generative AI have pre-trained style. With the insights, we decided to train two models: one model of two people to see if the AI will recognize two people as individual human or as a whole, and the other model of an instagram artist’s style to see if the AI can recognize the specific style. We also tried Framer AI for website generation, but we realized its limitations in design and content.
To understand how generative AI models work, we tried out existing models on RunwayML. During our explorations, we realized the model is not good at generating two-object combinations. We also learned that generative AI have pre-trained style. With the insights, we decided to train two models: one model of two people to see if the AI will recognize two people as individual human or as a whole, and the other model of an instagram artist’s style to see if the AI can recognize the specific style. We also tried Framer AI for website generation, but we realized its limitations in design and content.
To understand how generative AI models work, we tried out existing models on RunwayML. During our explorations, we realized the model is not good at generating two-object combinations. We also learned that generative AI have pre-trained style. With the insights, we decided to train two models: one model of two people to see if the AI will recognize two people as individual human or as a whole, and the other model of an instagram artist’s style to see if the AI can recognize the specific style. We also tried Framer AI for website generation, but we realized its limitations in design and content.
Key Finding 1
Key Finding 1
Key Finding 1
Key Finding 1
The AI combined the features of two people from the input photos onto one person's face in the output.
The AI combined the features of two people from the input photos onto one person's face in the output.
The AI combined the features of two people from the input photos onto one person's face in the output.
The AI combined the features of two people from the input photos onto one person's face in the output.
The AI combined the features of two people from the input photos onto one person's face in the output.
Key Finding 2
Key Finding 2
Key Finding 2
Key Finding 2
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
Key Finding 3
Key Finding 3
Key Finding 3
Key Finding 3
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
Further Exploration
Further Exploration
Further Exploration
Further Exploration
Further Exploration
To further understand our findings, I found the facial recognition landmarks used by RunwayML in their Github. Opposite from my assumption, the nose has the least landmarks, which leads to my conclusion that nose is most accurate because it doesn’t move as much as other features. AI only recognize patterns repeated in the dataset instead of recognizing shapes as our eyes do.
To further understand our findings, I found the facial recognition landmarks used by RunwayML in their Github. Opposite from my assumption, the nose has the least landmarks, which leads to my conclusion that nose is most accurate because it doesn’t move as much as other features. AI only recognize patterns repeated in the dataset instead of recognizing shapes as our eyes do.
To further understand our findings, I found the facial recognition landmarks used by RunwayML in their Github. Opposite from my assumption, the nose has the least landmarks, which leads to my conclusion that nose is most accurate because it doesn’t move as much as other features. AI only recognize patterns repeated in the dataset instead of recognizing shapes as our eyes do.
To further understand our findings, I found the facial recognition landmarks used by RunwayML in their Github. Opposite from my assumption, the nose has the least landmarks, which leads to my conclusion that nose is most accurate because it doesn’t move as much as other features. AI only recognize patterns repeated in the dataset instead of recognizing shapes as our eyes do.
To further understand our findings, I found the facial recognition landmarks used by RunwayML in their Github. Opposite from my assumption, the nose has the least landmarks, which leads to my conclusion that nose is most accurate because it doesn’t move as much as other features. AI only recognize patterns repeated in the dataset instead of recognizing shapes as our eyes do.
Input
Input
Input
Input
Input
Output
Output
Output
Output
Output
Key Finding 1
Key Finding 1
Key Finding 1
Key Finding 1
The output photos only show a basic background and a few colors from the input photos' styles.
The output photos only show a basic background and a few colors from the input photos' styles.
The output photos only show a basic background and a few colors from the input photos' styles.
The output photos only show a basic background and a few colors from the input photos' styles.
The output photos only show a basic background and a few colors from the input photos' styles.
Key Finding 2
Key Finding 2
Key Finding 2
Key Finding 2
AI can only recognize repeated patterns from the input photos and apply them to the output.
AI can only recognize repeated patterns from the input photos and apply them to the output.
AI can only recognize repeated patterns from the input photos and apply them to the output.
AI can only recognize repeated patterns from the input photos and apply them to the output.
AI can only recognize repeated patterns from the input photos and apply them to the output.
Framer AI
Framer AI
Framer AI
Framer AI
Framer AI
Key Finding
Key Finding
Key Finding
Key Finding
The websites generated by Framer AI are limited in layouts and body copy content.
The websites generated by Framer AI are limited in layouts and body copy content.
The websites generated by Framer AI are limited in layouts and body copy content.
The websites generated by Framer AI are limited in layouts and body copy content.
The websites generated by Framer AI are limited in layouts and body copy content.
Design Brief
Design Brief
Design Brief
Design Brief
Design Brief
Based on our research and exploration, we wrote a design brief for our final project.
Based on our research and exploration, we wrote a design brief for our final project.
Based on our research and exploration, we wrote a design brief for our final project.
Based on our research and exploration, we wrote a design brief for our final project.
Based on our research and exploration, we wrote a design brief for our final project.
Ideation
Ideation
Ideation
Ideation
Ideation
We created low-fidelity wireframes for 5 use cases and did several variations for different use cases. The five use cases were around how GenAI might help the creatives in different stages of their design process, including research, visual design, prototyping, etc.
We created low-fidelity wireframes for 5 use cases and did several variations for different use cases. The five use cases were around how GenAI might help the creatives in different stages of their design process, including research, visual design, prototyping, etc.
We created low-fidelity wireframes for 5 use cases and did several variations for different use cases. The five use cases were around how GenAI might help the creatives in different stages of their design process, including research, visual design, prototyping, etc.
We created low-fidelity wireframes for 5 use cases and did several variations for different use cases. The five use cases were around how GenAI might help the creatives in different stages of their design process, including research, visual design, prototyping, etc.
We created low-fidelity wireframes for 5 use cases and did several variations for different use cases. The five use cases were around how GenAI might help the creatives in different stages of their design process, including research, visual design, prototyping, etc.
Proof of Concept
Proof of Concept
Proof of Concept
Proof of Concept
Proof of Concept
After ideation, we narrowed down our final design idea to using Gen AI to assist creatives in designing and editing websites more quickly and effortlessly. Therefore, it was crucial to confirm that this concept was feasible with generative AI technology. To validate our idea, we experimented with 8 Gen AI tools, testing whether they could be prompted to directly modify a website's code.
After ideation, we narrowed down our final design idea to using Gen AI to assist creatives in designing and editing websites more quickly and effortlessly. Therefore, it was crucial to confirm that this concept was feasible with generative AI technology. To validate our idea, we experimented with 8 Gen AI tools, testing whether they could be prompted to directly modify a website's code.
After ideation, we narrowed down our final design idea to using Gen AI to assist creatives in designing and editing websites more quickly and effortlessly. Therefore, it was crucial to confirm that this concept was feasible with generative AI technology. To validate our idea, we experimented with 8 Gen AI tools, testing whether they could be prompted to directly modify a website's code.
After ideation, we narrowed down our final design idea to using Gen AI to assist creatives in designing and editing websites more quickly and effortlessly. Therefore, it was crucial to confirm that this concept was feasible with generative AI technology. To validate our idea, we experimented with 8 Gen AI tools, testing whether they could be prompted to directly modify a website's code.
After ideation, we narrowed down our final design idea to using Gen AI to assist creatives in designing and editing websites more quickly and effortlessly. Therefore, it was crucial to confirm that this concept was feasible with generative AI technology. To validate our idea, we experimented with 8 Gen AI tools, testing whether they could be prompted to directly modify a website's code.
Proof of Concept Demo
Demo of the ChatGPT 4.0 reading and rewriting the .html code
Demo of the ChatGPT 4.0 reading and rewriting the .html code
Demo of the ChatGPT 4.0 reading and rewriting the .html code
Demo of the ChatGPT 4.0 reading and rewriting the .html code
Demo of the ChatGPT 4.0 reading and rewriting the .html code
UI Design
UI Design
UI Design
UI Design
UI Design
For the final user interface, we designed both light and dark mode for users to choose based on their preferences. We wanted our tool to look fluid, balanced, and muted, so it wouldn’t distract users’ attention and would keep the dynamic feeling of generative AI.
For the final user interface, we designed both light and dark mode for users to choose based on their preferences. We wanted our tool to look fluid, balanced, and muted, so it wouldn’t distract users’ attention and would keep the dynamic feeling of generative AI.
For the final user interface, we designed both light and dark mode for users to choose based on their preferences. We wanted our tool to look fluid, balanced, and muted, so it wouldn’t distract users’ attention and would keep the dynamic feeling of generative AI.
For the final user interface, we designed both light and dark mode for users to choose based on their preferences. We wanted our tool to look fluid, balanced, and muted, so it wouldn’t distract users’ attention and would keep the dynamic feeling of generative AI.
For the final user interface, we designed both light and dark mode for users to choose based on their preferences. We wanted our tool to look fluid, balanced, and muted, so it wouldn’t distract users’ attention and would keep the dynamic feeling of generative AI.
Light/Dark Mode Exploration
Light/Dark Mode Exploration
Light/Dark Mode Exploration
Light/Dark Mode Exploration
Light/Dark Mode Exploration
Style Guide
Style Guide
Style Guide
Style Guide
Style Guide
Iconography
Iconography
Colors
Colors
Colors
Colors
Font Family
Font Family
Font Family
Font Family
Varta
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
CTA Button
Heading 1
Heading 2
Body
Small
Semibold / 17
Light / 17
Regular / 15
Regular / 14
Regular / 12