TODEM by Latent Culture

TODEM is a 100,000 x 50,000 pixel GIF created with Generative AI. This intricate piece is composed of images within images within images, and offers a map-style interface for in-depth exploration.
The artwork is divided into 1,000 'tiles', each purchasable as an NFT. The project's ambition necessitated an intuitive NFT minting experience, embedded directly on the site for user convenience.
MacBook mockup
Click below to check out the live project
View it Live

My Impact

Led end-to-end design process, created all components from scratch.
Defined and standardized a style guide, enhancing cross-platform usability and consistency.
Championed user feedback, leading to 25% increase in site engagement.
Created a streamlined purchase experience; reduced checkout times to increase user satisfaction.

🧩 Design Challenges

The biggest challenge was no one has done anything like this before. I found some adjacent projects for inspiration, but there wasn’t a playbook to follow.

Priority 1

Presenting the artwork in the best way possible. How do you present a 100,000 pixel image on a laptop??

Priority 1A

Presenting data used in the creation process alongside the final imagery.

Priority 2

Integrate NFT minting functionality directly on the site.

Splash Page and Initial Open

The entry point is a minimalist splash screen reminiscent of OG gaming interfaces.

Users have the choice of entering ‘web3 mode’ or ‘art mode.’ Entering the project via ‘art mode’ removes any reference to NFT things, for a cleaner and pared down user experience.

Upon selecting an entry mode, users are randomly dropped in to the artwork to encourage exploration.

Dashboard mockup

Sidebar and Tile/Subtile Elements

Artwork areas were divided into 1000 sections we dubbed ‘Tiles.’ All Tiles contain ‘Subtiles.’ Tiles are highlighted with a yellow border and Subtiles with light blue.

The sidebar on the righthand side of the window contains detailed information about a selected tile, and is also where users engage with the NFT minting process.

The box in the lower righthand corner of the screen displays the text prompt that was used to generate the Subtile’s imagery with Stable Diffusion.

Mousing over the artwork automatically changes the information in the sidebar.
Dashboard mockup

Sidebar Color State Changes

The sidebar's color reflects the tile's ownership status—gold for user-owned tiles, red for sold tiles, and dark purple for available ones.

This dynamic visual cue enhances the user's interaction during the minting process; the tile changes from purple to gold as the purchase occurs.
Dashboard mockup

Popout View

A popout feature offers an expanded view of individual tiles, maintaining the color-coding system for ownership and allowing users to focus on specific elements of the artwork.
Dashboard mockup

Grid Display

A grid overlay helps users understand the scope of purchasable areas within the artwork, with a pricing system based on pixel count.
Dashboard mockup

Search Function

A search feature enables users to locate tiles by a unique four-digit identifier or keyword, an essential function given the artwork's vastness.
Dashboard mockup

Listview

In response to user feedback during the beta launch, a list view function for all tiles was introduced to facilitate the discovery of smaller tiles, enhancing navigability and tracking of owned and available tiles.
Dashboard mockup

Mobile Experience

Translating the desktop experience to mobile required a focus on the individual tiles, incorporating a tap-in and tap-out interaction model and prominent controls for navigating between tiles.
Dashboard mockup