Div
UI/UX Design
AI/ML
A generative AI web design tool that helps to tailor every design element of a website to specific audience.
Background
Generative AI is now a part of everyday life. While it's a powerful tool for designers, it shouldn't take over the entire design process. How might we use AI to speed up our workflow without giving up too much control?
challenge
As designers, we often communicate with audiences from diverse backgrounds and perspectives. To better connect with specific audience, we always need to tailor our work, which requires a lot of time and effort. How might we create a tool that helps designers efficiently align designs with audience needs and expectations to improve engagement?
Our Solution
Div is a web design co-pilot, allowing designers to efficiently tailor websites.
What can Div be used for?
Imagine you are designing an e-commerce website, and you need to tailor it so it can meet different customers’ needs.
Step 1: Importing Website
Step 2: Creating Audience Profile
Step 3: AI Pre-Editing
Step 4: Tailoring With AI Co-Pilot
Who impacts ChatGPT and Who is impacted?
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.
Does AI Understand Design?
To understand how generative AI models work, we tried out existing models on RunwayML. We learned that generative AI have pre-trained style. With the insights, we decided to train a model with an instagram artist’s style to see if the AI can recognize the specific style. We also tried the Framer AI for website generation, but we realized its limitations in design and content.
AI Model of “CarlHauser” Style
Input
Output
Framer AI-Generated Website
Prompt
A website for a fashion brand that has 40% off sale
A website for Tiffany jewelry
A UX portfolio case study of Pathfinder to apply internship
Output
How AI & Machine Learning Can Help?
Images from CarlHauser’s Instagram post
Ideation
By learning from the research, we developed a few concepts and use cases with mid-fidelity wireframes.
Can AI edit Website?
While exploring our concept, we wanted to further test the capability of AI in website design. Could current Gen AI change website design by directly editing the code? If so, we could create a web design tool with Gen AI to help designers tailor website in a efficient and fast way. To test if our idea was plausible, we prototyped with a variety of Gen AI tools.
Proof Of Concept
With the Python web scraper and ChatGPT 4.0, we developed a demo of Gen AI changing website design by directly editing the code.
Design Iteration
With the technical prototyping and the proof of concept, we developed our concept of creating a web design co-pilot through multiple iterations.
Visual Attributes
We defined the visual attributes of our product to be balanced, quiet, and fluid. With the seven design elements, we created a visual guideline for how we wanted our UI to look like.
