Div
A generative AI web design tool that helps to tailor every design element of a website to specific audience
GenAI
Design Tool
Design System
Web App
Timeline
May 2023 - Aug 2023
Team
Effie Zhu / Isabel Li
Tool
Figma / RunwayML / ChatGPT / BroseAI / RelevanceAI
Role
Researcher / UI/UX designer / Prototyper / Project manager
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.
Challenge
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.
Centralized Directory
Easy and comprehensive access to products, stores, and events information
Smart Navigation
Using users' input and advanced algorithms to provide the most efficient navigation
Personalized Assistant
Using real-time data to anticipate users' needs to provide recommendations
Prototypes
Userflow 1
Design Ecommerce Website Glamora
Userflow 2
Design
Personal Portfolio
Technology Centered 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.
Key Finding 1
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.
Key Finding 2
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.”
Key Finding 3
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.
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.
Key Finding 1
The AI combined the features of two people from the input photos onto one person's face in the output.
Key Finding 2
The output pictures displayed features of other asian people from the pre-trained datasets, not just from our input.
Key Finding 3
In the output pictures, the nose is the facial feature that most closely resembles the one in the input photos.
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.
Input
Output
Key Finding 1
The output photos only show a basic background and a few colors from the input photos' styles.
Key Finding 2
AI can only recognize repeated patterns from the input photos and apply them to the output.
Framer AI
Key Finding
The websites generated by Framer AI are limited in layouts and body copy content.
Design Brief
Based on our research and exploration, we wrote a design brief for our final project.
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.
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.
Proof of Concept Demo
Demo of the ChatGPT 4.0 reading and rewriting the .html code
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.
Light/Dark Mode Exploration
Style Guide
Colors
Font Family
Varta
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
CTA Button
Heading 1
Heading 2
Body
Small
Semibold / 17
Light / 17
Regular / 15
Regular / 14
Regular / 12