context

highlights

feasibility

reflection

Editor DIV

AI Driven Web Editor that helps you
make web designs that are responsive to audience.

Just a tiny bit of Context

Stay with me

. OUR HYPOTHESIS

Currently, designers are frustrated when making their portfolio & applying for jobs because ...

. OUR SOLUTIONImagine having tailored portfolios 
for different audiences

So.. what the heck can it do for me?

Div suggests audience profiles by reading the contents on your website, then creates profiles by gathering insights from your responses when talking to the chatbot.
This allows designers to customize their website designs for specific audiences based on profiles.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Div will evaluate your website, then displays the generated goals in progress bars, to track satisfaction level as you work towards achieving them.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Div assists the design process by providing suggestion checklist to help you fill the gaps and improve.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Div generates job specific URLs for each profile, each URL will only display contents that are relevant to the audience group.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Imagine building your portfolio and applying for a job...

here's a short scenario to help with understanding

Proof of concept

Let's talk about Feasibility

.01

Ability to read full html code of a site

Testing GoogleBard, ChatGPT, and BingAI on HTML reading showed that only GoogleBard accesses and reads full HTML code, as the other two lack access to the internet.

.02

Ability to switch the order of elements

Being able to switch the order of different divs and sections proves the ability to reconstruct the Information Architecture and layout of a site.

.03

Using Github webscraper to extract assets and micro-interaction of a site

Github WebScraper has the ability to scrape every single element of a site, which proves the ability to read and download the elements on your portfolio website,

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

.04

ChatGPT can read the extracted code, image, and contents, then reconstruct a site

Being able to upload the extracted assets into ChatGPT and change the color of the background, proving that DIV has the ability to edit the layout and designs of websites.

My role & reflection

My Role

Designed User Interface in collaboration with my teammate, Effie Zhu.

Prototyped Individually for the above demonstrated usecase.

Conducted Technical Research on current AI language models.

Duration

June 2023 - August 2023

Challenges

Departed from the conventional User-Centric design approach and focused on Tech-Centered design approach.

Upcoming

Projects

Beacon

Enhance creative collaboration by amplifying sharing and communication within the automotive industry.

SenseWear

AR Ecosystem and smart PPE vest that enhance safety and productivity for warehouse workers. jksidluv

Heading