ai chat box

ai chat box from scratch designed on Figma

and coded with SolidJS with TypeScript and Ollama API

wireframes

creating the general layout of the website

designed on figma. i researched current AI chat boxes that are frequently used. getting a feel for what is intuitive for new users. i also made sure to keep in mind accessibility when designing.

zoom in/out and drag to explore my research and wireframes

mock ups

adding color and style to the approved wireframes

after going through the wireframes with the team, made adjustments and went to design the fine style of the web app. the color scheme and font choices still kept in mind accessibility and also UCLA branding guidelines.

zoom in/out and drag to explore my mockups