Becoming an AI-Native UXR: Field Notes 2 (Building a "UX Research Gallery" Portfolio Website)
A look at how a rough visual idea became an explicit build plan, and where my own judgment had to step in to create an interactive “UX Research Gallery” portfolio.
TL;DR of Field Notes 2: Becoming an AI-native UXR to me means learning how to work with AI as a builder and collaborator, not just as a productivity tool. This project taught me that the important skills are surprisingly familiar to research: define the audience and problem before building, make tradeoffs when tools hit their limits, set a quality bar early, ask/respond to clarifying questions instead of letting the model guess, and use your own judgment to decide what is actually good enough to ship. AI can accelerate execution dramatically, but the researcher still has to provide the framing, constraints, evaluation criteria, and taste that guide the final product.
I built a “UX Research Gallery” portfolio website in two days using Codex: https://yingchen-uxr-gallery.com/
This was all inspired by something that happened randomly last week: I came across a Japanese designer’s portfolio and couldn’t stop looking at it. See for yourself: https://portfolio.kaori-dododo.com/
KAORI presents her work as an elegant gallery, one you wander through rather than scroll, and she built the whole thing in two days using ChatGPT’s Codex with the new GPT-6 Astra model. I’m a longtime LEGO enthusiast and an art-museum regular, so the gallery sparked a lot of inspiration in me. It felt like the format I’d been waiting to use to build something for myself.
Back in April, I was still experimenting with plain 2D HTML pages to showcase my UX research work. By September, I was building a small 3D environment with a LEGO-style version of myself guiding visitors through it, complete with day and night modes. The speed to which AI tech has advanced is staggering. So I had to give the latest Astra model a try for myself.
What has to get decided before an AI model can build anything at all?
I had a clear story I wanted to tell using visual: I wanted a visitor to be able to browse my UX research case studies like a collection of art pieces shown in a gallery. However, a visual idea, even a vivid one, doesn’t arrive with an audience, a scope, or a set of tradeoffs already attached. It also does not help you choose the tools you want to use for building. I chose to use Codex within VS Code, and used the GPT-6 Astra model in High/Ultra modes for this. From my experience, the builder still has to define those criteria before they can watch the AI agents build their website.
A visual idea does not arrive with its audience or scope already decided
So, the first thing was to identify the audience and scope of the coding project. I went with “UX research professionals and managers”, and asked the AI to build me a “standalone portfolio website.” I wanted it to be a standalone piece from my original UX portfolio so that it could be its own little virtual world and have its own story.
Storytelling, as I see it, is one of the core ingredients — if not the most important ingredient — when it comes to building a website or portfolio piece. It is the story and organization of the contents around that story that lures users into the website, and makes them stay for longer. Without a good one, I feel l like their would be a bigger churn rate for the website or portfolio, simply because it isn’t eye-catching or engaging enough for today’s website users.
So, I wrote a simple prompt of clarifying the audience, scope, and the story of “take visitors through a gallery of my key UX research projects, in the style of LEGO”, and asked Codex to start building with GPT-6 Astra. I also gave it the link to my inspiration — the portfolio piece by KAORI — so the agent knew what I was aiming for.
Creating a 3D gallery does not come without tradeoffs
As with most AI agents nowadays, Codex had automatically clarified some questions with me before it started building: What kind of style do you want — minimalistic, fancy, or something else? What is the atmosphere you want for your gallery — warm? Cool? Or something else?
After selecting and setting up my gallery style, atmosphere and the general sections I wanted users to be able to scroll through when they visited the website, Codex got to work.
The first version of that Codex gave me was a 3D gallery space with 4 low resolution miniature stands for my key case studies, along with a 3D LEGO replica of the 2D LEGO character image of myself that I gave it. It looked like a low resolution video game setting from the 90’s, and I didn’t like that. Instead, I noticed the trade-offs:
(1) It was either I create a free-roaming and exploratory gallery space where the users could freely roam in the 3D space, or be more precise and create a structured (and thereby limited) hallway walkthrough sequence that my character would take the users through. I decided to go with the latter so I could focus its resources on building a higher quality gallery space without wasting too much compute on other areas.
(2) The 3D LEGO replica of a character also looked like it was from the 90’s, and not in the best looking way. I reverted to have Codex flesh out multiple angles of my 2D LEGO character image instead, and animate it. This way, Codex could focus on animating the 2D LEGO character, rather than on fleshing out details on a 3D character build. In hindsight, I feel like I could’ve tried using the GPT-6 Astra model within Blender to build a 3D LEGO character of myself; maybe next time!
After these iterations, I learned that testing out the limitations of the scope and models were important for the project. That way I could know where I would limit and focus my resources to.
Final polish took up more time than I had hoped
I hadn’t set a visual quality bar early on—texture, lighting, resolution, animation polish—and treated it as something to tune after the content and layout were already in place. That meant a second pass through nearly every exhibit (i.e., miniature stand resembling the case studies), once I’d finally figured out what “good enough” actually looked like. From my viewpoint, the difference between the two wasn’t only the standard of image quality itself, it was when I set it.
For instance, the texture of the 3D gallery space did not have details in the beginning, so I had to prompt Codex a few times to add wooden textures to the floors. The same went with the lighting — I had to specify adding some natural lighting for the Day mode, and exhibit lighting for the Night mode — for the agent to give it better lights. Some images had low resolution, so I also had to tell the agent to upscale it for higher resolution. LEGO me also had some animation issues in the beginning, which took a few back-and-forths with the agent to resolve. These steps took up more time and token than I had thought, so in hindsight I would definitely specify the level of detail and quality I wanted earlier in my building process to save time for later polish.
Asking a clarifying question beat guessing and building right away
What I found useful was the step-by-step process of interacting with Codex, instead of giving it one long prompt and asking it to build it right away. For some requests, Codex didn’t start building right away; it asked a clarifying question first, which meant I had to make a decision instead of discovering later that it had been guessing.
I also discovered that setting the effort mode turned out to be a decision I had to make in and of itself. ChatGPT introduced a series of effort modes, from low effort (e.g., Instant) to the highest (e.g., Ultra) for each model. I found throughout this process that High and Ultra modes (the two I used the most for this project) for the Astra model weren’t interchangeable: High was better when I wanted speed, moving quickly through early layout and content passes; Ultra was better when I actually needed quality, since the detail in the artwork and models it generated was noticeably sharper. So deciding what my goal was and then choosing the effort mode best suited for it was also someting I learned throughout.
Put together, creating this website turned out to be a lot closer to scoping a research plan: naming an audience before designing for them, and setting an accuracy bar before generating anything that claims to represent something real. Then, before research execution, remembering to polish the content so that it hits the quality bar for project launch.
So the real question was never whether AI could build a gallery, tt’s what has to get decided before it can, and that list turned out to be longer (and more familiar to a researcher) than I had expected. Underneath all of it, though, my goal was simple: I wanted something eye-catching and interesting to look at (not another static portfolio page), with enough personality that browsing it felt fun and engaging (rather than “yet another portfolio page).
I was pretty happy with the final website, and I added a Night mode to the Day mode (because who does not dream of visiting a gallery and appreciating the exhibits at night?) to make it even more fun.
If you feel like taking a stroll in my gallery, please feel free to do so: https://yingchen-uxr-gallery.com/
I hope any visitors to my gallery feels like they had some fun browsing too!
Notes: This gallery is a personal, non-commercial experiment, built over two days with ChatGPT’s Codex using the GPT-6 Astra model. It is not affiliated with the LEGO Group, but inspired deeply by the brand.
留言