Twin Shadows
One useful interface. Five different worlds.
Twin Shadows brought together two interests: making game data useful and giving software a strong sense of place. I wanted summoner lookup, match analysis and team planning to feel at home in the world of League of Legends.
Visit Twin Shadows
Give the data a world to belong to.
The product needed the clarity of a stats tool and the character of a game. Early reviews covered both: awkward match layouts, clipped player names, slow search and an unsettled visual direction. I used established game interfaces as references, then pushed for an identity drawn from the game’s regions.
“Forget low quality SVG's and go for telling the story and vibe of that region, through the UI.”
Art direction became a system.
I led the AI-assisted development of the web interface and the regional theme work. The source contains five themes (Hextech, Ionia, Noxus, Demacia and Shurima) built around shared surfaces and design tokens. A region can change typography, materials, shapes and atmosphere while the same screens keep their structure.
- 01Look up a summoner
- 02Explore match data
- 03Plan a team
How the work evolved.
- July 2026 / Exploration
Compare directions before committing.
I commissioned regional studies from several AI tools, compared them and chose what best expressed each place. When separate regional logos weakened the identity, I moved to one shared mark. The review covered composition and coherence as well as colour.
- July 2026 / Integration
Carry the design into the real screens.
The polished studies still had gaps against the real application, so I had those gaps mapped before integration. The resulting theme contract separates decorative surfaces from dense data: win and loss colours stay consistent, while maps, tables and video avoid decorative clipping.
- July 2026 / Use
Keep testing after the visual approval.
After the direction landed I kept reporting stuttering, flaky summoner search and a janky theme selector, and pushed team planning toward role selection and an easier search flow. Visual ambition added work to performance and interaction review.
A visual idea has to survive the whole application.
This taught me to turn art direction into rules other screens can use. The difficult part was carrying a strong identity through data, forms, loading states and repeated components. Comparing studies helped find the direction; integrating and testing them made it a software problem.
The part I owned.
Product direction, reference research, choosing and critiquing visual directions, interaction feedback, and leading AI-assisted implementation and review. The project uses Riot game data and artwork; I do not claim authorship of the underlying game assets.
About these images
The development conversations document the July 2026 design and integration work. The five-theme contract and implementation were inspected on 1 October. The public homepage and team-builder interface rendered on 30 September; the cover is a capture of that homepage.
Status and scope
Development is paused. A populated match-result journey and the full VOD-analysis pipeline were not tested for this case study. AI Coach remains in development; there is no ongoing support promise attached to this portfolio link.
Technical foundations
Next.js · React · TypeScript · Python · Riot API. The stack reflects the project’s web or desktop workflow and its integration needs.
For a product that needs its own visual language across several screens, this shows how I take a design direction into a reusable interface.
Let’s discuss itLeaf Edge