From Rain Delays to Global Connections: The Story Behind 27Signatures

It all started with a cancelled baseball game in New York City. Instead of catching a fly ball, I found myself capturing something far more unique: signatures. Not just any signatures, but those of everyday New Yorkers, each one a snapshot of connection in the city's magnificent chaos. New York, a place I'd dreamt of for years, truly came alive through these interactions – from the comic book vendor to the MoMA security guard. Each mark on that baseball tells a story, a vibrant reflection of the city's raw, unfiltered spirit.

Fast forward a couple years later to October 2024 and I'm going on a trip to Japan with a group of friends for the first time. We're all into photography and I remembered Baseball is huge in Japan so I thought it'd be fun to take my project there. I made the decision to only do this in Tokyo despite travelling across the country to be symmetric with the NYC project. Although I met a bunch of amazing people in Tokyo some of my favourite interactions were from other cities! I guess those memories will just be for me. I knew there would be a language barrier so I rushed to get a website up and running which I wanted to build for ages but didn't have time until the advent of LLMs. This along with a friendly smile and broken Japanese helped bridge any gaps. The signatures I collected in Tokyo beautifully capture the diverse spirit of its residents.

One thing I found really interesting was in the US most people signed their own name, many Japanese participants proudly represented their businesses. I think this shows the difference in American individualism and Japanese collectivism.

Every signature I've collected, whether in the bustling streets of New York or the vibrant avenues of Tokyo, represents a meaningful cultural exchange. They're more than just names; they're stories of the amazing people I've met.

Want to see these unique signatures and read more about the people behind them? Head over to 27signatures.com to explore the full project! You can find out more about the signatures and each person I met.

I also started posting TikToks about the project you can find here. Unfortunately life got in the way and I stopped posting. I'm hoping to finish by the end of the year.

The second part of this blog will delve into how I built the website. It's pretty interesting how it all came together. At least I think so.

New York City Tokyo

Building the website

The key thing I wanted the website to have was a 3D baseball you could interact with. I wanted you to be able to spin the ball, see the signatures, click on them and learn more about it (also see the associated photo). I did take Computer Graphics at university which did help me understand the basics of Three.js. I also made heavy use of Cursor throughout the process to help me build the website. It allowed me to focus on the actual content and not the boilerplate code.

The first thing I had to do was create a 3d model of a baseball. Since I'm unfamiliar on interacting with 3d models I stuck to using a sphere since luckily baseballs are spheres :D.

The next thing to do was to apply a texture to the sphere. I found a baseball texture online that mostly fit my needs. I then used AI to upscale the texture and loaded the assets I needed in Photoshop to make it look like a Mets/Tokyo Swallows baseball. This was tricky since the textures had to be distorted a bit. I think it was using polar coordinates, I couldn't figure out what the actual mapping was and I had a bit of a deadline on this so I ended up using trial and error to understand the mapping and get a reasonable approximation.

Texture

Once that was sorted I had to figure out how the hell I was going to get the signatures on the sphere. There were a hell of a lot of them and trial and error was not cutting it, neither was mapping it from x,y to polar coordinates. I ended up using Blender to create a Sphere, load my texture on top of it and then using my iPad in sidecar mode so I could draw on it with my Apple Pencil! Insane workaround but it got the job done. I then exported the texture back to an image and applied it to the sphere.

So at this point I had a sphere, with a good texture on it. The next hurdle was mapping a clicklable circle on the sphere above each signature. I really tried to use coordinates and understand this but I got so confused. After a few errors I ended up understanding the mapping and was able to place the circles on the sphere (again with more trial and error then I'd like to admit).

After that was done the rest was pretty straightforward. Make it work for mobile, add the gallery, add descriptions about each signature/photo and also use GenAI to translate the descriptions into Japanese.

There's still a bunch of work to be done to the website to optimize its SEO. I really want it to be more discoverable because I think this is a really cool project and I want to share it with more people.

To come up with a plan I ended up meta-prompting Gemini to give me a prompt to optimize my website. It ended up giving me the following prompt:

Project: Optimizing "27 Signatures" - A 3D Interactive Art Project
Website: 27signatures.com
Project Goal: To significantly enhance the online visibility of "27 Signatures" in both Google search results and recommendations from Large Language Models (LLMs). The secondary goal is to drive targeted traffic from relevant art, technology, and travel communities.

Core Project Description:
"27 Signatures" is a unique digital art project that presents a collection of signatures obtained during trips to New York City (2022) and Tokyo (2024). The centerpiece of the website is an interactive 3D rendering of a baseball adorned with these signatures. Each signature is linked to a personal memory, story, or recording from the time of its collection, creating a narrative-rich, interactive experience. The project merges 3D technology with personal storytelling, transforming a physical memento into a digital exploration of memory. A gallery section provides a more static and detailed view of each signature and its accompanying story. I am seeking your expertise in SEO and web design for art and photography showcase websites to audit "27 Signatures" and provide a comprehensive, actionable strategy to achieve our visibility and traffic goals.
Part 1: Foundational SEO and Technical Optimization
Please analyze the website (and its source code, which I will provide) and answer the following:

On-Page SEO:
Keyword Strategy: Given the project's niche (3D art, interactive storytelling, NYC/Tokyo travel memories), what would be an effective keyword strategy? Please suggest primary, secondary, and long-tail keywords we should target. Meta Data: Propose optimized meta titles and descriptions for the homepage, the main 3D interactive page, and the gallery pages. How can we best use metadata to convey the unique nature of this project in search results? Heading Structure & Content: Evaluate the current heading structure (H1s, H2s, etc.) and the textual content on the site. How can we improve the existing copy for both user engagement and search engine crawling? Image & 3D Model SEO: What are the best practices for optimizing the 3D model and any static images in the gallery for search? This includes file names, alt text, and any relevant schema markup.

Technical SEO:
Site Speed & Performance: The interactive 3D element is central to the user experience. What are the key performance metrics we should be concerned with, and how can we optimize the loading time of the 3D sphere without compromising its quality? Mobile-Friendliness: Assess the mobile user experience. Is the interactive element fully functional and intuitive on mobile devices? What improvements can be made? Crawlability & Indexability: Is the site easily crawlable by search engines, especially given its JavaScript-heavy interactive nature? Are there any barriers to indexing the content, particularly the stories associated with each signature? Structured Data (Schema Markup): What specific schema types (e.g., ArtWork, Exhibition, CreativeWork) should be implemented to help search engines understand the content and context of the website?

Part 2: Content Strategy & LLM Optimization
My goal is for "27 Signatures" to be recommended by LLMs when users ask for things like "interesting digital art projects," "creative uses of 3D on the web," or "unique travel story websites."

Content-Gaps & Opportunities:
Beyond the existing content, what new content could we create to build topical authority? Would a blog section be beneficial? If so, what kind of topics should we cover (e.g., the technology behind the project, deep dives into specific NYC/Tokyo stories, the art of signature collection)? How can we better structure the existing "story" content to be more easily parsed and understood by LLMs?

LLM & Semantic Search Optimization:
How can we use natural language and a conversational tone to align with the query style of LLM users? What are the key entities (people, places, concepts) that we should be explicitly defining on the site to improve its knowledge graph and, consequently, its standing with LLMs? Part 3: Off-Page SEO & Traffic Generation
How can we proactively get "27 Signatures" in front of relevant audiences?

I then combined this with a report from lighthouse in the chrome developer tools.

Lighthouse Report

Whenever I get a chance I'll instruct an LLM to go through the tasklist this generated to help me optimize the website.