TAKANOBU SAITO / PORTFOLIO Back to the central hub ↗

PORTFOLIOSELECTED WORKS / UX · PRODUCT · AI

Untangle uncertainty and create
experiences that support decisions and
working systemsfrom start to finish.

7 sites / thought to working product

Turn ideas into
working products.

I led all seven featured projects from planning and concept development through visual and information design, implementation, and validation—turning ideas into experiences people can see and use.

Portfolio type 01 / concept sites

Turn intent into an experience people can use.

Seven concept websites built to explore the order of information and interaction, starting from culture, stories, everyday uncertainty, and personal interests.

2. FromSoftware Games and Merchandise Archive | FROM ITEM ARCHIVE

Case 02 / Fan archive concept site

Bring a world you loved
into your everyday life.

An unofficial fan archive of books, music, figures, and apparel related to FromSoftware games. Starting with memories of the games, I designed a path from exploring by title or category to understanding each product and visiting an external retailer. The concept, “Keep that world close,” became both an expression of the games’ atmosphere and an interactive website.

Visit the website

01 / Concept in practice

Bring a world you loved into your everyday life.

Starting from a personal interest in FromSoftware games, I built an unofficial fan archive for discovering related books, music, figures, and apparel.

  • The concept is “Keep that world close,” connecting memories of a game with objects to keep in everyday life.
  • Bring the atmosphere of the games, information categories, product details, and retailer links into one experience.
  • Led concept development, visual and information design, and implementation.
Visit the website

02 / World-building

Recall the world you loved before looking for a product.

Dark backgrounds, large serif typography, and title-specific imagery create an entry point into a world visitors remember.

  • Switch between imagery from ELDEN RING, DARK SOULS, Bloodborne, and other titles.
  • Separate custom atmospheric backgrounds from real product images on detail pages.
  • Provide controls to pause or resume the automatic rotation and stop page motion.
Explore the world-building

03 / Start with a game

Make a favorite game the first clue.

Visitors can discover items through a memorable game even when they do not know what product they want.

  • Start with one of five series: ELDEN RING, DARK SOULS, Bloodborne, ARMORED CORE, or SEKIRO.
  • Choose a direction through short descriptions and imagery for each series.
  • Browse books, music, models, and goods across all the listed series.
Browse by game

04 / Categories and meaning

Connect what to buy with how you want to enjoy it.

Alongside category names, explain how each item can be enjoyed: reading, listening, displaying, or using in everyday life.

  • Books and reference materials help visitors explore a game’s world and its details.
  • Music brings back a moment; figures and models keep a favorite character close.
  • Apparel and goods bring memories of a game into everyday life.
Browse by category

05 / Search and filtering

After entering the world, choose your own search criteria.

Help visitors who start with a game narrow down to specific items using keywords, categories, and sorting.

  • Search by product name or keyword, then filter by category.
  • Sort by newest or oldest release date, product name, and other options.
  • Show the result count and a clear control to reset filters.
Explore the searchable catalog

06 / Product information

Read product facts alongside their connection to the game.

For the Alexander mug, start with the idea of a moment to pause, then explain its materials, dimensions, and care restrictions.

  • Connect memories of a game or character to the time spent with an item.
  • Organize the maker, format, materials, dimensions, release and restock details, and JAN code.
  • Surface important details such as whether an item is microwave- or dishwasher-safe.
View a product detail

07 / Connecting to retailers

Learn about an item, verify the details, then visit a retailer.

After learning about a product in the archive, visitors can continue to Amazon, Rakuten, or Yahoo! Shopping.

  • Use the JAN code in retailer search links to help locate the same item.
  • Disclose affiliate links alongside the retailer options on the same screen.
  • Final checks on price, stock, and terms—and the purchase itself—take place on the external retailer’s site.
See the retailer links

08 / Editorial standards and trust

Turn enthusiasm into information people can verify.

Clearly identify the site as an unofficial fan archive, with separate standards for atmosphere and product verification.

  • Prioritize official manufacturer and publisher sources, and distinguish announcements, preorders, releases, and restocks.
  • AI assists with discovery and drafting; the operator reviews items before publication.
  • Do not invent first-hand reviews of unused products; keep items with insufficient information in draft.
View the editorial policy
01 / 08

3. A Japanese Craft Gift Finder for International Shoppers | Wish, Made in Japan.

Case 03 / Cultural concept site

Choose Japanese crafts
by what they mean.

An English-language concept site that helps international gift-givers choose Japanese crafts by occasion, intention, and budget. I paired Edo-inspired visuals with sourced cultural explanations and designed a demo experience that starts with meaning. I led concept development, visual design, English content, and implementation.

View the concept site

01 / Concept in practice

Build an interactive experience for choosing crafts through cultural meaning.

Built the Japanese craft gift experience for an international audience, from concept and English content through implementation.

  • Human: set the purpose, audience, visual world, and information priorities.
  • AI agents: assist with English drafts, comparisons, implementation, and iterations.
  • Human: review cultural meaning, UX, and presentation quality; make final decisions and implement approved changes.

02 / Cultural meaning

Turn motifs from decoration into a reason to give.

Explain in English how cranes connect to longevity, celebration, and harmony between partners, rather than presenting them as generic “Japanese style.”

  • Separate cultural context from the intentions a motif may express.
  • Include only details supported by makers or cultural references.
  • Provide context for a choice without promising good luck or outcomes.

03 / Core UX

Choose the intention first, then the craft.

Instead of starting with product categories, begin with the occasion and intended message, then surface crafts whose cultural meaning fits.

  • Choose an occasion: Wedding, New home, Milestone, Thank-you, or New baby.
  • Choose an intention for the recipient, such as Prosperity, Long life, or Peace.
  • Review budget and U.S. shipping requirements on the same results screen.

04 / Switching intentions

If it does not feel right, change the intention—not the product.

Compare gift options by changing the intended message while keeping the wedding occasion and budget the same.

  • Shippo suggests prosperity, cranes longevity, cherry blossoms new beginnings, and seigaiha peace.
  • Switch the decision criterion without returning to the product list.
  • Choose through English-language intentions without prior knowledge of Japanese culture.

05 / Information design

Make meaning an information asset that lasts beyond individual products.

Organized Musubi, Crane, Shippo, Seigaiha, and Sakura as a library of messages to convey, not just visual categories.

  • Document each motif’s meaning, suitable occasions, and important context.
  • Connect cultural explanations to related products.
  • Keep the meaning library intact as products change.

06 / Trust and evidence

Show evidence alongside meaning, products, and prices.

Keep cultural context separate from commercial details, and disclose sources, selection criteria, price-check dates, and how the project earns revenue.

  • Prioritize primary information from makers, product owners, and sellers.
  • Do not rank options based on affiliate commission.
  • Confirm price, stock, shipping, and returns with the seller.

07 / Occasion guide

Bring cultural context, budget, and shipping into one wedding-gift decision.

A guide explains wedding-appropriate intentions and crafts alongside cultural sources, price ranges, and U.S. shipping conditions.

  • Connect a pair of cranes with wishes for a harmonious and long life together.
  • Compare alternatives with different meanings, such as matching tea bowls and shippo patterns.
  • Go directly from the editorial guide to sellers offering the items.

08 / Roles for AI and people

Use AI to build faster; ground cultural judgments in people and sources.

AI speeds up English drafting, translation, and site production. It is not treated as evidence for cultural meaning or product details; a person reviews the quality of the demo.

  • An independent editorial and gift-discovery project based in Japan.
  • Purchases are completed with the linked seller.
  • Sales, conversion, and user impact remain to be evaluated.
01 / 08

7. A Fictional Government Interactive Experience | National Institute of Absolutely Nothing

Case 07 / Interactive concept site

Make something completely useless
compelling to the very end.

An interactive site built around a fictional, useless government and five pointless practical exams. I designed a sequence that builds humor, apprehension, and curiosity—and tested whether it makes people want to see the ending. I led concept development, visual design, and implementation.

View the concept site

01 / Concept in practice

Turn a useless fictional government into an experience people want to complete.

Rather than a world-building document to read, this is an interactive concept site built around five pointless exams.

  • Send an unexpected summons to visitors who never applied, naming them candidates for the nation’s top office.
  • Use the first screen to draw visitors into a world that is 100% fictional and worth ¥0.
  • Build a coherent experience from planning and concept through an interactive demo.

02 / Emotional journey

Turn reading into a sequential experience that keeps pulling visitors forward.

Reveal five departments one at a time, using curiosity about the next pointless task to carry visitors to the end.

  • Opening the notice counts as passing the first round. To withdraw, visitors must close the page.
  • Unlock five examinations in order, from the Do Not Press Bureau to the final warning.
  • Show progress and locked stages to deliberately create a desire to finish something meaningless.

03 / Reversing the action

Keep saying “Do not press” until visitors want to press it.

Use an exaggerated warning, a ¥4.8 billion anti-press budget, and 312 employees to draw attention to a single button.

  • Enlarge the single primary action to focus attention and choice.
  • Use copy that leaves no escape: whether visitors press or leave, Human Resources records it.
  • Make breaking the rule a success condition for reaching the next test, not a failure.

04 / Visual and verbal rules

Turn an AI quirk into a satirical national campaign.

Invent an inspection against pointless rounded corners, then let each click make the interface more square.

  • Lean into neo-brutalism with heavy borders, primary colors, offset shadows, and oversized type.
  • Give each department its own color and visual language to create a new surprise.
  • Express the critique through interaction outcomes instead of explanatory copy.

05 / AI satire

Unable to take responsibility, but excellent at writing an apology.

Choose the severity of the mistake and the desired sincerity; the AI writes an apology before identifying the cause. The mismatch between convenience and accountability becomes the joke.

  • Pointless options include a 15-degree bow, a 90-degree prostration, and a 45-degree press-conference bow.
  • Show the generated apology and bow angle together on the results screen.
  • Complete the joke on one screen: “take responsibility” is not included, even in the top plan.

06 / Participation design

Make trivial choices feel serious through voting and elimination rounds.

With zero viewership, no audience, and no prize, visitors still make three choices and become accomplices in the pointlessness.

  • Use a red-versus-blue contest to draw visitors into a comparison that requires no thought.
  • Use rounds, suspense, and “under review” states to stage excitement around a competition that does not exist.
  • Celebrate the person who voted through to the end, not the pointless act itself.

07 / Exit and tension

The more the site urges visitors to leave, the more they want to continue.

Build tension toward the final button with escalating warnings: “There is no going back” and “You will gain nothing by continuing.”

  • Leave a way back, but make ignoring the warning a condition for progress.
  • Escalate the warning level to give the same action a different emotional weight.
  • Even the one sensible message—protecting the user’s time—becomes part of the game.

08 / Ending

Worth ¥0. The title lasts forever.

Close the story by confronting visitors with the time they spent and the value they created, then appointing them the first and lifetime Useless Prime Minister.

  • Bring back each of the five actions as a reason for the appointment.
  • The role comes with a ¥0 budget, zero staff, and 100% responsibility.
  • An experiment whose outcomes are surprise, laughter, and the memory of finishing—not practical results.
01 / 08

4. Pet Dental-Care UX

Case 04 / UX concept site & research

Address beginners’ uncertainty through the purchase journey.

A concept site for a fictional dog dental-care brand, created for the Google UX Design certificate project. Over eight weeks, I worked from user research through responsive screens, prototyping, and a small usability study.

View the project materials

01 / Certificate project and concept

Help first-time dog owners feel ready to start brushing their dog’s teeth.

Using a fictional brand, I brought problem discovery, experience sequencing, and validation together in one concept site.

  • The audience is people in their first year of dog ownership.
  • Address “Can I keep this up?” before “Can I buy it?”
  • A case submitted for the Google UX Design Professional Certificate.

02 / Project overview

A web experience that helps beginners learn how and choose a routine they can maintain.

Designed a responsive purchase experience for the fictional Petora/LUNARA brand over eight weeks, from June to August 2025.

  • Explain how to start brushing through simple actions, not dense technical copy.
  • Bring habit-building guidance and one-time versus subscription purchase choices into the same journey.
  • A design and validation case for a certificate project, not a commercial product.

03 / Understanding users

People understood why it mattered; they were unsure how to begin.

A fictional persona developed with AI from public-source research. No real personal data was used. The persona brings together product choice, a dog’s reaction, information overload, and limited time.

  • Wants to learn proper care and establish a routine early.
  • Gets stuck amid too much information and uncertainty about what to choose or how to start.
  • Frame the issue as not knowing the first action, rather than simply lacking knowledge.

04 / Experience structure

Locate uncertainty along the purchase journey.

Break the journey into six stages—concern, understanding, search, comparison, purchase decision, and delivery—and decide where support is needed.

  • Before search, the barrier is understanding why care matters; during comparison, it is product differences; before purchase, it is the terms.
  • Map emotional highs and lows alongside opportunities for improvement on the same journey.
  • Arrange content to answer the next question instead of simply adding more information.

05 / Paper wireframes

Compare five paper concepts and choose the one that reduces uncertainty for beginners.

Compare page structures on paper for a landing page that helps beginners start brushing with confidence and understand one-time and subscription options.

  • Aim to explain the value of one-time and subscription purchases on the same page.
  • Sketch and compare five options with different product visuals, brushing guides, and CTA placement.
  • Choose the simplest beginner-friendly concept based on clarity and reassurance.

06 / Landing-page wireframe

Understand, feel confident, compare, then act.

Build confidence in how to use the product before presenting a purchase choice, rather than jumping from product value straight to checkout.

  • Product value → three steps → customer stories → one-time/subscription options → persistent CTA.
  • Focus on one product and let visitors choose how to buy it, rather than compare products.
  • Prioritize confidence before the CTA over the number of times it is clicked.

07 / Beginner support

Turn “I understand” into “I can do this.”

Avoid repeating the same explanation; give video, quick tips, FAQs, and a saveable guide distinct roles.

  • Offer a how-to video for people who want to see the brushing technique.
  • Offer three quick tips and an FAQ for people who want an immediate answer.
  • Offer a downloadable PDF guide for people who want to revisit the information later.

08 / High-fidelity screens

Translate research findings into concrete UI.

Bring the three-step guide, customer quotes, video, and PDF into screens with a clear visual hierarchy.

  • Connect product understanding, usage guidance, and purchase choice on the home page.
  • Give the beginner page a separate space where users can choose how to learn.
  • Preserve the same decision sequence on desktop and mobile.

09 / Prototype and validation

Go beyond static screens and connect the flow through purchase review.

Treat the findings as a small, unmoderated remote study with five participants in Japan.

  • Four of five participants found the three-step flow easy to understand.
  • Three of five were unsure about subscription terms; three of five about final confirmation; and two of five about using the PDF.
  • Next changes: show terms closer to the choice, clarify confirmation status and button labels, and explain the PDF transition.
01 / 09

6. Career Transition Guide for Women in Their 40s and 50s

Case 06 / Career concept site

Bring emotion and practical realities together in one assessment.

A concept site that helps women in their 40s and 50s think through career uncertainty without relying only on fortune-telling or job listings. I connected assessment, articles, and analytics to test an experience that gives people space to reflect. I led concept, visual design, and implementation.

View the concept siteBuild notes

01 / Concept and Entry Point

Create an entry point for women in their 40s and 50s to pause and reflect.

A concept site, not a live service pressing for a decision, that tests how people can pause and sort through uncertainty they cannot yet name.

  • The primary audience is women in their 40s and 50s reconsidering how they work.
  • Prioritize space over a sales pitch and start with a question.
  • Show the actual screens of a demo connecting assessment, articles, and analytics.

02 / Three-step structure

Make the assessment easy to follow in three steps.

Date of birth, current situation, career hypotheses, and a next step. Show the sequence and destination upfront to make it easier to begin.

  • Enter a date of birth for the Four Pillars of Destiny calculation.
  • Review the current situation across six areas, including satisfaction, environment, and time.
  • Use the results to explore potential roles and choose a next step.

03 / Reassurance

Use the full assessment for free, without creating an account.

State the terms upfront so people can begin without worrying about personal-data registration or fees.

  • Core assessment results are free from start to finish.
  • No account or registration with legal name, address, phone number, or email is required.
  • External services are optional. Any advertising is labeled “Ad” or “PR.”

04 / Entry points by concern

Offer four entry points to make it easier to start with a concern.

Do not assume that the issue is changing jobs. Let people start with their current concern: work, relationships, changing jobs, or how they want to work in the future.

  • Choose a related theme even when the uncertainty is hard to put into words.
  • Start from the user’s concern before explaining the assessment.
  • Adapt the next question to the concern, even within the same service.

05 / Assessment logic

Make the Four Pillars of Destiny logic transparent.

Go beyond abstract personality descriptions; show what the reading is based on and how it connects to work conditions.

  • Show the year, month, and day pillars that can be derived from the birth date. Omit the hour pillar because the assessment does not collect a birth time.
  • Focus on the Day Master and Month Command rather than drawing conclusions from element counts alone.
  • Keep practical factors such as living costs, health, job openings, and workplace policies in a separate section.

06 / Results summary

Go beyond a conclusion to identify one step for today.

Move from describing the current situation to a small next action and possible roles.

  • Current situation → one step for today → roles to explore.
  • Keep the answers visible so people can trace the basis for the results.
  • Place detailed fortune-telling content at a lower level for those who want it.

07 / Roles and next steps

Connect role suggestions to experience and job requirements, not just job titles.

Go beyond role suggestions to show which experience or conditions may transfer and what to check in a job listing.

  • Compare options in tabs and review the rationale and requirements on the same screen.
  • Describe transferable experience instead of assuming “I have no experience, so it is impossible.”
  • Guide readers toward conditions they can verify in job listings.

08 / Two decision lenses

Bring emotion and practical realities together in one assessment.

Let people who begin with fortune-telling and those who begin with job requirements explore each other’s perspective on the results screen.

  • Present feelings, interests, and timing alongside jobs, market value, and working conditions.
  • Do not make either lens the “right” one; let people start where they are.
  • Prioritize useful input for the next decision over an entertaining quiz.
01 / 08

5. MTG Sealed Product Price Comparison Demo

Case 05 / Price-comparison concept site

Define what counts as the same product before comparing prices.

A concept site for comparing sealed Magic: The Gathering products under consistent sales conditions. The demo implements matching criteria for language, product type, sales unit, and availability before collecting search results. I led concept, visual design, and implementation.

View the concept siteBuild notes

01 / Build Demo

Build a comparison system, not just a list of product links.

A demo that takes visitors from searching for a sealed MTG product to comparing sellers on consistent terms.

  • Start with a clear, searchable entry point.
  • Explain what is being compared on the screen, not just the price.
  • Present the collection, product matching, history storage, and page generation pipeline as an interactive demo.

02 / Search and filters

Search consistently, even when product names are unclear.

Filter by keyword, set, product type, language, release and stock status, and price.

  • Search by product name, set name, or set code.
  • Select set, product type, language, and release or stock status separately.
  • Set minimum and maximum price and sorting order on the same screen.

03 / Comparison criteria

Define the same product before looking for the lowest price.

Even within the same set, treat English and Japanese editions, Play and Collector products, and boxes and individual packs as different products.

  • Normalize by set, language, product type, sales unit, quantity, and availability.
  • Exclude mismatched and out-of-stock items; label unknown prices as “No price information.”
  • Clarify that displayed prices cover the product only and exclude shipping, points, and coupons.

04 / Start with a set

Let visitors browse the product world instead of coming up with search terms.

Browse language and product-type variants, such as Japanese or English and Play or Collector, from a set-level view.

  • Discover products visually and open items within a set.
  • Review the product name, type, and release status on each card.
  • Bring search and set browsing to the same product detail page.

05 / Product details

Show the price and comparison criteria together.

Show language, type, sales unit, and check date alongside the price instead of highlighting a low number alone.

  • Compare only sellers whose listings pass product matching.
  • Rank by verified price, not commission.
  • Do not estimate unavailable prices; mark them as unknown.

06 / Price history

Show price changes using only data that was actually collected.

Build a repeatable update pipeline for retrieving API candidates, matching products, saving daily data, and regenerating the interface.

  • Do not fill gaps with previous-day or estimated prices.
  • Review price drops and the observation period on the product detail page.
  • Match Rakuten and Yahoo! Shopping candidates against the product master.

07 / New and upcoming releases

Keep the same page useful before and after release.

At the time of the demo, 150 products were split into 135 released and 15 upcoming, with preorders, releases, and price histories connected to the same URLs.

  • Before release, review preorder availability and the release date.
  • After release, collect available prices and history.
  • Clearly show when prices have not been collected or a product is not yet released.

08 / Beginner’s guide

Help beginners choose by understanding product types.

Create a guide that explains Collector Booster Boxes, how they differ from regular boxes, and how to choose—before taking visitors to products.

  • Organize features, intended audience, and pre-purchase checks in one article.
  • Connect learning, choosing, and comparing through links from the guide to related products.
  • The impact of the beginner guide and what additional explanations are needed remain untested.
01 / 08

1. Personal Notes | AI-assisted editorial and publishing system

Case 01 / Editorial concept site

Connect conversation to
publication in one system.

A personal archive built through spoken direction and collaboration with AI, spanning planning, information and visual design, implementation, and operations. Articles begin in conversations with ChatGPT; Codex, GitHub, and Cloudflare connect the work through publication.

Visit the websiteArticle index

01 / From spoken direction to implementation

Turn a spoken idea into a working website.

Collaborate with AI from spoken direction and review through planning, information and visual design, implementation, and operations.

  • People set the purpose, priorities, creative direction, and final decisions.
  • Shape the interface and system through dialogue with AI, then improve them by checking the actual display and interactions.
  • Operate articles, tools, and a portfolio together on one public website.
Visit the website

02 / Profile visual

Show the links between professional disciplines in motion.

The profile opens with a three-dimensional orbital visual connecting marketing, UX, AI, systems, implementation, and operations design.

  • Visualize connections between disciplines instead of listing titles.
  • Switch states through automatic playback or by selecting the center and labels.
  • Communicate the range of my work through both copy and motion.
View the profile

03 / Visualizing the site’s philosophy

Turn “preserving ideas” into an interactive structure.

The About page uses a six-stage transformation to show how practice becomes components, structures, decision criteria, an archive, and input for future work.

  • Make the abstract site philosophy tangible through changes at each stage.
  • Let visitors follow at their own pace through autoplay, pause, or stage selection.
  • Place meaningful interaction within a restrained typographic system.
View the site overview

04 / AI-assisted article production

Turn conversations with ChatGPT into article ideas and drafts.

Extract decisions, experience, and failures from everyday conversations and organize them into candidate articles. Preserve the chosen idea’s argument as it moves into the article and publishable HTML.

  • Extract insights from conversations and classify them under AI, UX, marketing, implementation, and other topics.
  • Check for overlap with existing articles and generate ideas; a person chooses which topic to pursue.
  • After selection, generate the full draft and carry it through HTML, SEO, and index updates.

05 / Technical setup and publishing

Connect a request to publish to a GitHub and Cloudflare deployment flow.

Codex implements and validates static HTML. Updates to GitHub main trigger deployment to Cloudflare. The current working estimate is about five minutes per article.

  • Codex updates the article, indexes, SEO, sitemap, and images in one change set.
  • Review the working branch, then push to GitHub and update main.
  • Cloudflare detects changes to main and deploys automatically; then verify the production URL.

06 / Knowledge archive

Organize knowledge by domain and reconnect it for future decisions.

Categories are not silos; they are an index that lets AI reuse prior decision criteria and production history.

  • Maintain six domains: AI, UX, marketing, implementation, work, and notes.
  • Use design, SEO, Git diffs, and production QA as pre-publication quality gates.
  • Feed published insights into future discussions, implementation, and portfolio work.
01 / 06