back to projects

aniXmate

Match with your new favorite anime — a recommendation app that you interact with similarly to a dating app: type in a show you love and swipe through recommendations, right to save and left to skip.

Date
February 2023
Context
Hackathon — Hack at UCI 2023
Team
Simon Lee, Alex Espejo, James San (eng) + me (design)
My role
Sole UX & visual designer
Tools
Figma, Photoshop
view the Figma prototype ↗
aniXmate landing screen — the bubbly aniXmate logo over a dimmed grid of anime posters, with a search bar reading 'Search for an anime you liked'
The landing screen: type in a show you already love to get started.

Context

aniXmate recommends anime similarly to the way a dating app recommends people. Type in a show you already like, and it hands you recommendations one card at a time: swipe right to save, left to skip. The recs come from MyAnimeList's community recommendations for whatever title you enter.

To be perfectly honest, those recommendations already live on MAL, so you could get the same list by looking the show up and scrolling it yourself. aniXmate doesn't do anything smarter than that. What it does is make the list fun to get through: one card at a time, a quick yes or no, instead of a wall of thumbnails you skim and forget. For a weekend hackathon, making the boring part enjoyable seemed like a better use of our time than starting a real recommendation engine we'd never finish.

My role

I was the only designer on a team of three engineers, so I handled all of it: the user flow, the look-and-feel, the branding, and the prototype the team built and demoed from. The idea came in vague ("anime recs, but swiping"), and my job was to turn it into something concrete enough to build and show.

Process

The swipe interaction did a lot of work for free. Everyone already knows how to swipe left and right, so there was nothing to teach, and we could spend the time making the cards feel good instead of explaining how they worked.

Since I was the only designer and we were short on time, I built a small design system in Figma (type, colors, buttons, cards) so the screens stayed consistent as they grew and the engineers had one clear thing to build against.

aniXmate design system — Montserrat type scale (sizes XL through S) alongside a labeled color palette with hex values for backgrounds, accents, and text
A small Figma design system — one type scale and a set of color roles — so the screens stayed consistent as they grew.

I kept the color contrast accessible from the start. It's easy to handle early and a pain to fix later, so I'd rather just do it up front. I also designed the logo and branding so the thing looked like a real product in the demo instead of a wireframe.

Three contrast-checker cards pairing aniXmate's text and background colors, each passing with ratios of 4.6:1 and up
Checking each text-on-background pairing early, so nothing in the palette failed for legibility.
The aniXmate logo — a rounded, bubbly wordmark in teal and coral with a stylized X
The logo and wordmark — enough of a brand to make the demo read as a real product, not a wireframe.

Outcome

  • A reusable Figma design system (type, color, buttons, cards) with contrast handled.
  • A logo and brand that gave it a consistent identity.
  • A working interactive prototype the engineers built from and the judges could pick up and try.
aniXmate recommendation screen — a single anime (Gabriel DropOut) shown as a card with its poster, synopsis, and score, plus a coral skip button and a teal save button
The core loop: one recommendation at a time, with its synopsis and score — swipe right to save, left to skip.
aniXmate saved screen — a grid of the anime the user swiped right on, each with its title and a remove button
Saved matches: everything you swiped right on, collected in one place to pick from later.

What I'd build with more time. If I'd had longer than a weekend, aniXmate would be able to pull from and analyze your actual MAL watchlist and recommend based on what you've already watched and rated, instead of only being able to key off one title you typed in. And swiping right would add a show to your watchlist automatically, so you don't have to go do it yourself.

We left both out on purpose. They need real account login and a lot more backend than a weekend allows, so we cut, simplified, and shipped the version we could finish.

Reflection

What I actually took away from this: hackathons are full of people who can build, and few who want to figure out what to build or how it should feel. A lot of projects end up working fine and being hard to read and use.

Handling that side made a real difference to what we could show. I took a vague idea and gave it a shape, a look, and a demo people understood right away. That's around when I realized design was the part I actually wanted to do.