Generative AI, once a technology of the future, has rapidly become integrated into our present. The exponential pace of its development and distribution, however, inevitably results in a huge disparity between the rates of its use (high) and of its understanding (low). In order to combat this, the Center for Applied AI aimed to develop a webpage that could increase public understanding of generative AI and how it works. As a UX/UI research assistant, I directed user research efforts to optimize our content, constructed wireframes, and illustrated accompanying graphics to teach concepts around vector embeddings.
Tools: Prolific, Figma, Adobe Photoshop
UI/UX Design & Vector Illustration
Google "generative AI" and there's a hundred thousand webpages summarizing different combinations of content in a hundred thousand ways. Although CAAI, through its affiliation with the University of Chicago, has a built-in audience of professional academics, we aimed to make this webpage for any everyday person -- from the complete novice, to the hobbyist ChatGPT user, to the skeptic concerned with generative AI's implications.
Originally tasked with developing personas with which we could structure the content of the webpage, I quickly realized that I lacked the information to establish what people already know, what they want to know, and what would be most helpful (depending on how they might already use generative AI) for them to know. Although I had some nice data points from Pew Research Group, which told me the demographics of those fluent in generative AI and how the ways in which they use it, I needed more! I suggested running our own poll. Using other studies as a guide, I found that Prolific was a commonly used platform for collecting survey participants, and started drafting up the questions.
Learning About Our Audience
Wireframes & Visual Presence
After the survey helped us structure our content, we quickly realized that we would have a lot of information to organize. Taking inspiration from webpages like Wikipedia, search engines, and online textbooks, I threw together 9 different options we could choose from in order to ensure that the information we sought to provide was approachable and easy to navigate. Because of the range of questions, preexisting knowledge, and experience that our responders had with generative AI, a way to quickly target specific topics (like a search bar, table of contents, or tab system) was critical to prioritize.
Once we refined how many chapters our webpage would include (which ended up being 9, rather than the 4 we had originally brainstormed), we decided that a classic table of contents sidebar would be the optimal format to accommodate the increase. I started to establish a visual theme for the webpage by mocking up the landing page, establishing visual motifs (for example, utilizing the "/" that can be already be found on CAAI's parent website), as well as creating design assets, like editing background images for various sections of the webpage. While creating these, I made sure to work within pre-established design guidelines for font, logo treatment, and color.
We ultimately decided it would be ideal to have the table of contents collapse as the user scrolled past the overview section, so that there would be more space for text and graphics. When I left the project (due to my graduation from college!), the body of the website would appear as follows:
Overall webpage design and content structuring aside, I had a lot of fun struggling to develop an interactive graphic to teach the concept of vector embeddings! To put it simply, this refers to the conversion of words and sentences into vectors (which take on different values to describe their position and magnitude through any number of dimensions) that can capture their relationships to one another. Because vectors can be graphically plotted, where like words cluster together, algorithms can easily train on this quantified, once-semantic data.
I remember hopelessly sitting in my bedroom, wondering how I was possibly going to illustrate this concept, before slowly realizing that like words with like contexts were already physically grouped together -- like my bed, pillow, and blanket. By illustrating a room similar to mine (via vector shapes, created directly in Figma!), I could show how the position of objects, their associated words, and related words with different use cases, could be graphically related to each other in a 3D space! When each object in the starting room is clicked, an overlay appears that displays how other words could branch off from it. (Note that the vectors can have properties in thousands of dimensions, but for the purposes of our limited understanding, I think three dimensions work just fine.)
Vector Illustrations
After that head-scratcher, I was able to wind down with a simple vector illustration (also made directly in Figma!) as the banner for our section on "What's next for generative AI?".
