Hi! I’m Azeem.

During the day, I build foundations that are touchpoints for billions of working people.

On my evenings, I’m usually walking around with my camera or designing things that wayyyy-wayyy less people need (but might find fun!).

June 2023 - Now

Designing systems at Oracle

Redwood is Oracle's new in-house design system that is actively raising the bar for quality and cohesion for hundreds of business products. We're a small but mighty team—working with clients such as Red Bull Racing, United Healthcare, Pepsi, Uber, and many more!

As a full-time IxD and part-time VxD, I think really-really hard about the hidden foundations a product designer shouldn't have to worry about. Here are some of the components / system areas I own and manage.

All visuals have been rebuilt to a similar level of complexity to respect my NDA.

Interaction design Visual design Systems design

Reduce motion Pause preview and interface animation

Other Roles

Design Mentor and Captain of the Fun Team

If I’m not sharing design knowledge, I’m sharing the 30-slide presentation arguing why the office should go roller skating and eat cake for the 5th time that week.

Teammates gathered around a table at a Valentine's Day party, playing a game. — Guiding our team to victory (we lost)

Bingo at the office, with one player hiding their face in mock embarrassment. — Devastated by my bingo loss (joyful)

Teammates tying fleece blankets together. — Making blankets for Stanford Children's Hospital

A Config 2026 guest wall covered in notes and doodles, including "Hello Config 26! Oracle RDS Team". — Config

Potted desk plants lined up on an office window ledge after Planting Day. — Earth Day plantings and office pets

November 2025 - Present

Curating music at

earfruits.com is a music publication dedicated to discussing artistry in a fun, expressive, and intentional way. Anyone can write about music that impacts them—bridging the gap between casual listeners and critics.

I built this platform with the help of a fantastic and active community of music lovers! Right now we have about 20 active contributors and about 13,000 monthly viewers.

Publication design Editorial

los thuthanaka - los thuthanakaalbum2025
ravyn lenae - crushep2018
454 - 4 realalbum2021

Logo Guide

A hand-drawn crayon wordmark and a family of fruit marks, all drawn in the same loose waxy line.

Variable fruit marks

Pick a fruit, any fruit. These marks are marked (wink) by organic textures and loops.

Apple

Banana

Cherry

Mango

Wordmark

Rarely used, but always available for an elegant-not-so-elegant flair.

On white

On pulp plum

On suga blue

Lockups

Woah woah woah, do not fret by the fruit touching. You don’t like smoothies?

Horizontal leading

Horizontal, trailing

Don’t stack the mark above the wordmark

Don’t stack the mark below the wordmark

Applications

The fruit marks are to be drawn over anything colorful and potent to the musical season.

Gil Scott-Heron singing on stage, with the white apple mark drawn over the photo — Gil Scott-Heron speaking some truth, adding to a campaign of jazz and jazz fusion releases

A collage of Regina Spektor in a captain's hat among nesting dolls, with the white apple mark drawn over it — Regina Spektor staying hydrated, as she accompanies a string of indie releases

Waka Flocka Flame holding tomatoes and asparagus, with the white apple mark drawn over the photo — Waka Flocka Flame flexing his fruits (vegetables aren’t real), while southern trap music makes a resurgence

Don’t lose the mark in a low-contrast photo

Don’t layer the mark over black and white images. Extra no if it’s dreary.

Don’t color the mark; keep it black or white

Colors

Eight colors straight out of the crayon box, ready to leave a mark.

Juice red#EA4237
Suga blue#4388F2
Pulp plum#A92772
Crayon green#96B73B
Topics teal#54B595
Feelin’ orange#EB4F33
Cranium blue#1C05DA
Veggie green#5E922A

Typography

A bookish serif for the music and a plain grotesk for everything around it.

Nanum Myeongjo

my bloody valentine - loveless

Album titles, identifier labels, and the “got me feelin like” button

Switzer

reviews · request · write

Review text, navigation, forms, and comments

Tone

Written like a friend handing you their headphones, not a critic handing down a score.

lowercase, on purpose
Titles, navigation, and breadcrumbs stay lowercase, so nothing reads like a masthead.
everything, so far
Any voice counts
Prompts welcome a one-line take as warmly as a multipage essay.
any tone, any voice, any language.
Playful, never snobby
Jokes and slang lower the stakes of having an opinion about music.
Juicy!
Type like you talk
Emoticons, stretched words, and all the oddities allowed to keep it human.
do.. da.. di.. da… do.. da.. di.. da…. do.. da.. di.. da…
Nothing fufu
Say plainly what we will and won’t do, without the corporate gloss.
banner ads or anything fufu like that
Ask, don’t announce
Prompts invite readers in as contributors, not just an audience.
what should we listen to?

Little moments

Small rewards that make browsing feel like flipping through a zine.

Animated site markSits in the corner of every page
Fruit Party Animationooo get it ooo ooo get it
homeeverything, so farSpectrum highlightHighlights shimmer through the palette. Hover to try it.

A space to write about music

Make every new addition easy to size up for readers and inspiring to start as a writer.

Crayon cover for Fakemink’s Terrified — **Alternative Covers**Every submission gets an alternative redrawn/recolored cover.

Azeem sitting on a granite boulder by a lake, coloring the Terrified cover on a clipboard — **Always by Hand**No artificial intelligence is getting in-between me and my coloring time.

juice score : 75%
suga : were almost there, take me back, one day in your life
pulp : the jackson 5, stevie wonder, smokey robinson
usually listening while : doing something nostalgic
topics : growing up, love, transition

A dog with its eyes closed, basking in warm golden sunlight

Album identifiers

Every review opens with the same color-coded identifiers, so a reader can size up an album in seconds before committing to the full review.

juice score: How you’d rate it, as a percent or CLASSIC
suga: Three favorite songs
pulp: Three related musicians
usually listening while: The place, state, or activity it fits
topics: One to three words on what it’s about
got me feelin like: A clip or photo that captures the feeling

The submission form asks for the same fields, so a first review starts from prompts instead of a blank page.
Each identifier keeps its color on every review, so regular readers learn where to look.

Comment section

A compact comment section light enough that leaving a thought should feel just as casual as saying it out loud.

No accounts. A name is optional, and the message is the only thing you need.
Every control borrows a fruit-set icon in a palette color.
Comments start collapsed so the review stays the main event, while the cherry count shows a conversation is waiting.

Tools used

January 2022 - February 2023

Building a museum at

Hause was a digital art and history museum that placed piece curation in the hands of the viewer. Through nominations, crowd-voting, and an in-house art market—the museum experience was enhanced for an ever-growing digital audience. We had to eventually shut down due to rising costs, but it was a really cool design challenge!

I designed and built this platform alongside Alex Hunter, our visual design lead, and Armond Schneider, our product design lead. As the UX & design systems lead, I designed our user experience methodology, visual/interactive patterns, and reusable assets across the platform.

Design system Brand identity Product design

Auction Bid on all scales of artists in all different mediums.
Rooms Visit large collections from other members of Hause.
Gallery Browse Hause’s full collection of artists and artwork.

Vision

A digital and physical art museum built for those that make the art.

MissionCreate and curate culture for the future.
Museums have only ever been semi-open to new art. Hause collects and shows the pieces its members vote in, right from their homes.
CommunityDiversity is excellence.
Members vote on new collections and museum rooms, then meet at virtual and in-person events.
CollectionArt is changing.
Digital art and three-dimensional worlds give viewers a whole new sense to experience it with.

Firmenzeichen

A faceted roof, half house and half arch, beside a wordmark drawn from scratch. Every visit starts at the front door.

From sketch to mark

Straight-line markups and an old German museum became five wordmarks and four roofs. The final mark splits the difference between the arch and the pitched roof.

Sketches

Inspiration

Mid-fidelity

The mark

Part house, part gallery doorway. It leads the wordmark and works as a brand recognizable frame.

Ink on white

On gallery green

On auction blue

On rooms pink

Wordmark

Set in the Hause typeface: straight strokes, soft corners, and one long swoop through the A.

On white

On open sky

On ink

Variable and adaptive

Every stroke keeps the same weight, so the wordmark stretches to fill any frame without getting thinner or bolder. The A’s bowl, the U, and the S widen in flat runs, and the bars run long. Try it.

Width Height

Lockups

When the two travel together, the mark leads, matches the letters’ height, and keeps a fixed gap to the H.

Leading mark

Don’t trail the mark

Don’t scale the mark apart

Colors

Three loud colors, one for each wing of the museum, hung on a quiet gallery wall.

Gallery green#14FF00
Auction blue#0047FF
Rooms pink#FF3065
Ink#111111
Gallery wall#F2F2F2
Graphite#A2A2A2
Open skyPhoto
AuroraGradient

Typography

A custom face for the name, and classic Inter for everything you gotta read.

Hause typeface Drawn in-house over four weeks of sketches, mid-fi, and reviews from all the friends. Reserved for the name.

Inter

Are you here to sell art?

Questions, prices, labels, and buttons. Headlines run big and tight, like a wall label you can read from across the room.

Tone

Talk like the friend who drags you to the gallery, not the placard on the wall.

One question at a time
Sign-up asks one thing per screen, in plain words, at headline size.
Are you here to sell art?
Big claims, said warmly
Headlines speak for the whole museum and aren’t shy about it.
We are curating our culture.
Everyone’s invited
Artists, enthusiasts, and visionaries are all addressed as members.
Art knows no borders, and neither do we.

Designing the museum

Research

Virtual museums were buying views and chasing hype. We wanted one its members actually ran.

What we found

The best-known virtual museum bought its views, and profit came before quality.
Its believers leaned toward crypto, NFTs, and video games.
Architects and big brands were curious, mostly about the buildings and the buzz.
Designs split two ways: round and easy to digest, or brutalist and hard to use on purpose.

Competitors to lean towards? or away from?

Mona Gallery
MOCA
Arkive closest
Gallery.so

Most made you walk an avatar through a 3D world. Hause would be run by its people instead: members curate the collection and shape the rooms, while we keep the brand strong.

Personas

The 3 people we dreamt up... from an unsplash search

Janine LinThe zine artist · 22, NYC
A freelance artist and part-time barista who sells her work to grow her name and brand.
Denzel JohnsonThe merch maker · 23, Chicago
A fashion influencer with 100k followers who paints on the side and wants a brand collaboration.
PearlThe museum regular · 25, Fresno
A sound engineer who wants to discover emerging artists, and invest in them, from her couch.

Process

Two frameworks, picked by how much was riding on the work.

Diagram of the QOF (Quality Only Framework): Empathize, Define, Research, Ideate, Prototype, Validate, Test, Implement, with pink loops from Validate and Test back to Ideate — **Quality Only Framework**For foundational work. Two loops of “iteration purgatory,” one after team validation and one after testing with real users, before anything ships.

Diagram of the OWF (Open Window Framework): Ideate, Prototype, and Test, then either straight to Implement or through Empathize and Refine first — **Open Window Framework**For the “wouldn’t it be cool if” ideas. Prototype and test first, and only circle back to empathize and refine if it doesn’t land.

A fifteen-week plan of deliverables, each tagged with pink, blue, or green squares for Armond (product design lead), Alex (visual design lead), and Azeem (UX and design system lead) — **Fifteen weeks, three leads**Research and moodboards, then the logo, icons, and typeface, then the auction platform and landing pages, then testing and launch. Each task wears its owners’ colors: pink for Armond, blue for Alex, and green for me.

Wireframes

Grayscale first, so we argued about layout before we could argue about why we should or shouldn’t have crypto (big no).

Discover
Search
Artwork
Profile

The app

Collecting, bidding, and visiting rooms, all from the floating bar at the bottom.

Browse

New acquisitions, featured artists, member rooms, and everything you follow.

Gallery
Switch feeds
Artist
Discover
Rooms
Notifications

Primary

ArtistLidis Irene

Sale byRichard Jenson

$180.0012h 15m 03sec

1 / 8 · Find a piece

Bid and buy

Bidding for some cool art should feel as easy as liking a post.

Track the price of pieces sold by Hause

Recent Hause sales

Wrestling Details 1Carroll Dunham$420↑31%
PrimaryLidis Irene$180↑12%
Pick Out PerfectionAmber Vitorra$96↓4%

Price history

Every piece sold through Hause keeps a public price history, so collecting reads a little like investing. Continue past the intro, then drag across the chart.

Each collected piece shows what you paid, when, and how it has grown since.
Annual growth sits beside the artist and all art for comparison.
The chart line is gallery green, so good news looks like the rest of the brand.

Tap the wall to hang cool guy

See it on your wall

Discover can drop a piece onto your own wall in AR before you commit to a bid. Tap the wall to hang it, drag it around, then tap it for its card.

The piece’s card follows it into the camera, so you never lose track of who made it.
The tab bar stays put, so leaving AR is one tap away.

Testing

We did heatmap tests on the gallery screens to check that eyes land on the art, the artist, and the tab bar, in that order.

Predicted attention heatmap over the Up UP gallery screen, hottest on the balloons, then the title and artist, beside the clean screen — 71%**Artwork page**Attention pools on the art, then the title and artist.

Focus map and predicted heatmap of the Featured Artist screen, hottest on Franz Schneider’s portrait and the blue name label — 85%**Featured artist**The blue name label pulls eyes straight from the portrait to the artist.

Website

Shortly after the app, we made a desktop version! More space to breathe.

The Hause landing page: “We are curating our culture.” with “culture” highlighted in pink, a gallery photo, room previews, price tracking, and the three wing cards — **Landing**We are curating our culture.

The exhibition page with featured artist Aiden Roof, featured auctions, rooms to explore, colorful medium tags, and a grid of gallery pieces — **Exhibitions**Featured artists, auctions, rooms, and the most popular mediums.

The About page: “We are catalysts for cultural transformation.” followed by team values and open positions — **About**What we’re tryna do!

High Tide, Heavy Armor by Calida Rawles: a painting looking down into rippling turquoise water, a young Black man waist-deep at the bottom, light dappling his shoulders — **Auction page**The piece, its countdown, and every advance, side by side. Place a bid and see who answers.

Tools used

July 2016 - June 2023

Creating at Radiant

Createradiant.com is a student-run creative agency that helps peers launch their passion projects. At the time, it was the #1 stop for creative outsourcing at UCF.

While I was there, we also provided various community initiatives, such as free software lessons and mentorship opportunities. After graduation, I passed it on to another creative freshman!

Brand identity Graphic design Photography UX design

Graphic Design: Covers, layouts, and logos for students putting out their own work, like the album cover and magazine in the reel.
Apparel: Graphics drawn for shirts and prepared for print, so a peer’s idea could become something people wear.
Photography: Studio portraits and product shots that gave a new project images of its own to launch with.
User Interfaces: Production-ready website and app designs, developed on WordPress.
Art Installation: Murals designed for the room they live in and painted by hand.
Software Classes: Free lessons in the design software we used ourselves, so peers could keep making things on their own.

My timeline

Founder July 2016 to June 2023.
Graphic designer Main focus from 2016 to 2019, now and then after.
Print designer Main focus from 2016 to 2019, now and then after.
Photographer Main focus from 2016 to 2019, now and then after.
UX designer Now and then from 2016 to 2019, main focus from 2019 to 2023.

Most of my time with Radiant was part-time, apart from the randomly busy season here or there. Interests shifted greatly in weight throughout the years, which determined the projects I personally chose to collaborate on.

Meet the core team

Designers, musicians, engineers, and all-around artists in love with our craft. Most of this group has disbanded towards our next career steps, but I’ll always appreciate our time :’)

The slogan was, and always will be: “Let’s Shine Together.”

Savanna Boatman Contemporary Art and Murals
David Philip Marketing aficionado
Vance Bowers Creative Graphic Designer
Amaran Subramanian Project Management
Emily Gifford Research and Outreach
Tre LaManna Audio Recording and Mixing Engineer
Nabil Issa Technical Sales
Azeem Barton Founder; Design and Photo

June 2020 - August 2020

Project spotlight: Wowrolling

Who they were

WOW Rolling, or Wonder On Wheels, was an Orlando roller skating business dedicated to creating custom skates, providing maintenance services, and hosting weekly meetups for the rollin’ community.

We were approached with the opportunity for a website redesign, but the business ran into some financial blocks before we could get to development.

I still love the project nonetheless. It taught me a lot of valuable prototyping skills, and solidified the kind of work I’d find myself seriously pursuing.

The problem

The greatest issue with WOW Rolling’s website was bad information architecture. There were a lot of excessive pages, which increases the cost of website maintenance and hosting. That can quickly become taxing for a small business.

It’s also poor UX, because more pages for an otherwise simple website can tire people quickly. The site felt half-baked by modern standards: plenty of pages, but nothing that would hold someone’s interest long enough to explore them.

Home
- Events
- Products
  - Skates
    - Customs
    - Pre-Built
    - Materials
  - Merch
- Roller Guide
- Other
  - Pop Up
  - Contact
  - About

Sitemap

My answer was to condense all the content into one robust, interactive page, so WOW Rolling could cut costs and stand out among the crowd of dated and homogeneous small business websites.

Sketches

I started on paper: what goes on each page, two versions of every section, and a few component ideas I wasn’t sure I could pull off.

Two wireframes of the home section, each with a side nav: one with a carousel of recent items, one with WOW ROLLING filling the page — Home

Two wireframes of the products section: one with Skates and Merch tiles, one with stacked rows for skates and swag — Products

Two wireframes of the events section: one with a month calendar, one with a list of classes and dates, joined by a note to include pop-up shop open dates — Events

Two wireframes of the about section: one opening with “Founded in 2019, Wonder on Wheels,” one with a few lines of text, both ending in a footer — About

Notebook page of component ideas: a return-to-top button, noted as maybe excessive given how close the header is, and a wheel-shaped cursor. Under “areas of growth”: learning scroll animations in Figma and experimenting with non-traditional headers — Component ideas and areas of growth

Notebook feedback notes: turn the header into a mobile taskbar, don’t be too literal and focus on interesting, and make it more community focused by emphasizing social — Feedback: focus on interesting, and emphasize the community

The desktop site

One page, four sections, and a nav that stays put.

Beginner’s Skills

Hour class that focuses on the basics
of skating, like forwards, transitions,
stopping, backwards, and crossovers.

Every Sunday 9:30am-10:30am

Roller Dance Drills

Hour class that introduces dance steps
and movements that can be helpful with
dance skating and keeping up at the rink.

Select Sundays 11am-12pm

Classes

Beginner’s SkillsSun 9:30am-10:30am: Class that focuses on the basics of roller skating.1828 Edgewater Drive Orlando, FL 32804
Roller Flow FitFri 11:30am-12:30pm: Learn how to exercise...on skates!1828 Edgewater Drive Orlando, FL 32804
Roller Dance DrillsSun 11:00am-12:00pm: We teach you some grooovy moves for that night out.1828 Edgewater Drive Orlando, FL 32804

Vans Colorblock

Description: These skates are ready to roll! With
hybrid/outdoor wheels, a comfy high top
weather proof sneaker and lightweight
plate, you’ll be flying on these! Size 7 :)
Build: Custom
Price: $400

Vans Checkered

Description: Fly with fiery style in these checkered
customs! Hybrid outdoor wheels, classic
black toe stopper, pearly laces! Size 8.
Build: Custom
Price: $325

Blue and yellow checkered Vans roller skates with green wheels on a skate ramp

Black high-top Vans roller skates with a red and green print and yellow wheels

Vans Colorblock
Build
Custom
Price
$400
Vans Checkered
Build
Custom
Price
$325
Iridescent Rollers
Build
Custom
Price
$250

WOW Trucker Hat
Type
Hat
Price
$25
WOW Wear Skate Socks
Type
Socks
Price
$11
Mini Mechanic Sticker
Type
Sticker
Price
$3

No materials listed right now.
Need a part?

WOW Rolling, or Wonder On Wheels, started in 2019 as a page to show
off my friends on wheels and my personal progress with roller skating.

My love for roller skating grew and our
Orlando roller scene grew even faster,
so I aimed to create a space for all things
eight wheels and community by hosting
meet ups, providing skate maintenance
services and building/mounting skates!

Whether you like to stack miles on a
trail, dance and flow at the rink, or
shred it up at the skatepark, I’m here
to help with your skate journey.

Three skaters sitting and stretching on a rink floor

WOW Rolling’s owner laughing, crouched low on roller skates with one leg out, holding her skate

Try it: the nav jumps between sections, the arrows flip through classes and skates, the two icons under each card switch its layout, and the plus adds a skate to the cart. Open the cart to review and check out; anything that would leave the site shows a toast instead.

Tools used

June 2025 - July 2025

New tunes on

Soundsame.com is a simple tool for finding new music based on similarities. Type a musician you love or describe a vibe to get recommended artists in that vein.

It was a tag-team effort between Alex and I, after we scarfed down our lattes, ate donuts, and tried searching for music that matched the shmood of the day. The brunt of the work here happened 3 hours after config 2k25, glued to our professions after feeling inspired.

Product design Interaction design Design sprint

Reduce motion

Try

Real searches

Four searches recorded in the browser on version 1.6, from typing to listening.

music that screams “I’m a designer”These recs are eerily accurate...

music like adrianne lenkerLime clouds while you type, a spinner, then Phoebe Bridgers.

music to eat ramen withKhruangbin, glowing a warm orange.

japanese sad girl winterYOASOBI’s cluster re-packs itself as the window narrows and widens.

One box, two ways in

Name a musician you already love, or just describe what you want to hear. Either way, you get one artist to start from and eight more that we hope you’ll enjoy.

**Radiohead** and eight more, like Portishead, Björk, and Sigur Rós.

**The Weeknd** and eight more, like Chromatics, Beach House, and M83.

Prompts that teach

On wide screens the empty box rotates through example vibes every five seconds, so it shows it takes more than names. On phones it shortens to “Enter a musician or vibe…”.

music for when you’re throwing up…
drunk as hell at brunch…
music for riding a dragon…
sad girl autumn…
music for a rainy day…

No number one

Recommendation lists rank. SoundSame floats.

1 + 8artists per search, with no order between the eight
18–96 px/sdrift speed, nudged by a little randomness every frame
0 px/sunder your cursor: a hovered artist holds still so you can catch it

Anatomy of an artist

Everything comes from the artist’s Spotify profile, so every bubble is one click from listening.

Photo from the artist’s Spotify profile, cropped to a circle.
A 2px lime ring around every artist; your pick’s photo is a size up.
The name in Instrument Sans: black for your pick, ash gray for the eight.
Two genres from Spotify, lowercase in IBM Plex Mono.
On hover the photo dims behind a link-out arrow. Click to open the artist on Spotify.

A color for every search

While you type, lime clouds gather behind the box. Each answer comes back with its own mood color, and the three clouds fade into it over two seconds, so the same white page reads slate for Radiohead and violet for a dragon ride.

Radiohead#3A4A6B
sad girl autumn#8C6A5D
late night drive in the rain#1A1F2E
music for riding a dragon#4A1E9E

Getting to SoundSame

It started as buap

The first concept had another name, asked you to “Enter a musician to get recommended some heat…”, and hung the answers off your pick on lines, like a family tree. We tried it dark and light, as a web, a row, and a tree, and with a bio and a “listen on spotify” button.

An early concept called buap in dark mode: Earl Sweatshirt in the middle, tied by pink lines to MAVI, MIKE, MF DOOM, and Curren$y, over a search box reading “Enter a musician to get recommended some heat…” — **A web, in the dark**Pink lines tie each recommendation to your pick.

The buap web in light mode, with lime lines and lime-ringed artists — **A web, in the light**Lime lines and lime rings.

buap with Earl Sweatshirt first and the recommendations in a single row joined by a line — **A row**Your pick first, then the rest in a line.

buap as a tree: Earl Sweatshirt above a row of recommendations, with a lime “listen on spotify” button — **A tree**With a “listen on spotify” button.

buap with a long biography of Earl Sweatshirt beside his photo, above the row of recommendations — **A bio**The artist’s story beside the picks.

Cutting the cords

In the last explorations the lines are gone and the header with them: just artists floating around your pick, over the search box. That’s where the live site landed.

Earl Sweatshirt with four artists floating around him and no lines, over the search box

Another floating arrangement of the same five artists

Finding the mark

We started from a list of words, then drew a page of marks: sound waves, rings, a racing “SS”, and a lot of melting circles.

Letter SSoundwavesVolumeConnectionsWebsNodes

Setting the name

Pink, blue, and black, roman and italic, tight and loose.

Or The Crates?

For a while it could have been The Crates, set in a sans and a serif.

A card reading “The Crates” in a lime sans, with “your home for finding new music, on your terms”, beside a band photo seen through the metaball pattern — In a sans

The same card with “The Crates” in a lime serif — In a serif

Notes in the margins

Left on the canvas between us, typos and all.

rn may be too close to spotify cuz of typeface

i dont hate the serif version but id rather get a dummy modern sans serif if we’re changing it up
I agree
bangerrrrrrrrrrrr

i think this is the one bc of this
armond plsplsplspls we need u pls dev pls dev pls dev pls dev plsplsplspls

The mark

Alex and I met in the middle with heart hands and shouted, “Y2K! CDs AND VINYLS!”

The mark, as the favicon

The header pill, becoming the mark

The wordmark

The name stacked on two lines, Sound over Same, or run together on one.

Stacked

On one line

The lockup

The mark and the wordmark side by side, in black on white, lime on black, or black on lime.

On white

Lime on black

On lime

Colors

Lime and black carry the site.

API Luvr Lime#D0FF00
Black#0A0A0A
Secondary black (just gray)#6B7280
White#FFFFFF

Type

Instrument SansThe logo and artist names, in medium and semibold.

IBM Plex MonoGenre tags and the tagline, small and lowercase, like labels on a record crate.

Tools used

October 2024 - February 2025

Putting a runway on paper for biophilic continuum

biophilic continuum is a fashion show that unveiled the work of renowned bay area artists, models, designers, and musicians. I was given the opportunity to collaborate and lead the design of the show’s lookbook, along with the visual language of the program pamphlets and badges.

The show was put on by The Web, a San Francisco collective of artists. I worked alongside Ryan Dela Pena, the show’s media lead, and many awesome photographers and writers!

Editorial design Event identity Photography

The lookbook cover: “biophilic continuum” set three times, overlapping, beside a tall black-and-white photo of a glass tower and bare branches — **The lookbook, page by page**Turn them with the arrows, a click or a swipe on the page, or jump straight to an act.

The brief

Give a three-act fashion show one look in print, from the lookbook to the badges and the program.

The show: A fashion and art production by The Web, told through three acts: Abundance, Destruction, and Regrowth.
My part: Lead the design of the lookbook, and carry its visual language into the program and badges.
When and where: February 22, 2025, at the Firehouse, Fort Mason Center for Arts & Culture, San Francisco
Made: A 32-page lookbook, a bifold program, and Crew and VIP badges
Also: Four months photographing castings and the build, cut into a recap

The show

Three acts

The name connects humans, the wearers of clothes, with nature, the muse. As 2024 drew to a close, the show looked at the cycles that brought the world to where it is, and played them out in three acts. Each act had three designers, its own models, a musical performance, and a dance.

Act I

Abundance

“where time flows with ease.”

Designers
jawa tree, sandra szeliga, r&r trading co.

Music
walking hands

Dance
aires
Act II

Destruction

“then, silence.”

Designers
mana siyo, jerica rattana, culture denied x one off pavement

Music
roziht

Dance
senses
Act III

Regrowth

“until we thrive.”

Designers
kenta nagamine, streetwear bart simpson, narcisse

Music
walking hands, roziht

Dance
mindalyn

Identity

One name, three ways

Black and white, all lowercase, in a wide grotesque (Pragmatica Extended in the badges and program), with Nunito for reading. The photos bring all the color. The name does the decorating, and each piece stretches it differently.

Lookbook coverSet three times and overlapped, like an echo, beside a strip of black-and-white architecture.
BadgeSplit into six syllables, bio / phi / lic / con / tin / uum, and stacked to fill the card from edge to edge.
Program coverRepeated and overprinted until it turns into texture and runs off the page.

Lookbook

In print

Laid out in Canva and printed perfect bound at 5 × 7 in, with the name on the spine.

Size: 5 × 7 in, portrait
Pages: 32, with blank left-hand pages around the epigraph and the statement
Sections: Intro, three acts of five pages each, credits
Type: A wide grotesque for names and headers, a bold serif for the acts, Nunito for bios
Photography: Highlighting designer looks; b&w photography to emphasize the color.

Badges

Crew and VIP

Two badges with the same front. The back says who you are in one big word, over a strip of photos from the build, signed by The Web. They’re ID-card size with a slot punch for a lanyard, and went out in stacks tied with twine.

Front: The name in six syllables, stacked to fill the card, with the date in the corner
Back: “crew” or “vip” over a strip of build photos, and The Web’s signature
Size: 2⅛ × 3⅜ in, ID-card size, with a slot punch

Show night: guests watching a performance from the floor, badges circled on two of them, with close-ups of a VIP stack and a front stack tied with twine — On lanyards at the show

Program

A bifold program

A letter-size sheet folded to 5½ × 8½ in. The cover overprints the name until it bleeds off the page.

The program cover: The Web’s signature and 02 22 25 beside “biophilic continuum” repeated and overprinted until it becomes texture — **Open it up**The front, the inside spread, and the back, folded.

Show night: a model walks past guests, and a circled close-up shows a hand holding the program, its overprinted cover facing out — **At the show**Oops, looks like someone dropped theirs...

Documenting the build

Video recap

Looking back at an awesome 4 months of collaboration and creative liberty.

Length: 2:17, with sound
Style: Goofy but honest
In it: Castings outside and in the studio, fittings, the badge on screen, the Firehouse at dusk, the runway, and the dancers
Format: 4 × 5 vertical, collaged photos and clips

Tools used

April 2024 - May 2024

I needed Alboms

Alboms are a set of reusable cassette cases I designed because I got tired of loose untitled mixtapes rumbling in my car’s glove compartment.

The idea is that in the same nature of a mixtape’s music being highly personalized, an “Albom” can be created to visually match that level of personalization.

Packaging design Brand identity Illustration

The brief

A personal project: give a homemade mixtape a case that looks as personal as the music on it.

A finger pointing along a shelf of plain black, white, and clear cassette cases, none of them labeled — Which one was the road trip tape again?
Is this the breakup mix or the getting-over-the-breakup mix?
Was the Sade deep cuts the white case or the clear one?
Where is Gucci Mane?
Where’s the tape with that one song from the gas station radio?

Starting from the spec

Every Albom has to fit a standard cassette case, so the work started from a duplicator’s die-cut template: Amtech’s O-card spec at 2.544 × 0.4948 × 4.0313 inches, with a 1/8″ bleed around the printed side.

Amtech’s O-card die-cut template: the printed side split into head and front panels, dimensioned at 0.615, 0.4948, 2.544, 2.5028, 3.6962 and 4 1/32 inches, with a 1/8 inch bleed and a title block reading REF O’CARDS, size 2.544 × 0.4948 × 4.0313

The O-card route

The first route wrapped the whole case: two spines, a front and back cover, and a glue flap, with the option to write track names on the back. The sample title was “songs for walking your lizard”.

A pencil sketch titled “O-Card Route (w/ option to write track names)”: “songs for walking your lizard” in bubble letters across spine 1, a big front cover and spine 2, then a back cover ruled into two columns for track names and a glue flap, each panel labeled with its height

Spine 111/16″ 0.688
Front cover2 47/64″ 2.734
Spine 211/16″ 0.688
Back cover2 47/64″ 2.734, ruled for track names
Glue flap21/32″ 0.649

Landing on the J-card

The finished Alboms are J-cards that fold inside the case: the cover shows through the front, the spine reads from the shelf, and the liner notes sit on the back flap, behind the tape. Each one carries the Alboms badge at the foot of its spine.

CoverThe title, big, in a type style picked for the tape, over a flat color or a photo texture
SpineThe title on one line, series, volume, and genre—plus the badge
Back flapA few lines of liner notes on who/what the tape is for

Logo sketches

Pencil passes at the name: bubble letters, a boxed sticker, widely spaced caps, a tall condensed cut, and a script in a frame.

The badge

The bubble letters won, set in a soft oblong cassette taking on four great sounding colors.

Black Star#333333
Red Red Wine#D35757
Kapitol Denim#5599BF
Brown Sugar#A67C52

Printed, cased, and racked

Alboms in the flesh (or, well, plastic). I also built a simple wooden stand for them.

A hand holding a pale wooden Alboms rack, the bubble-letter badge cut out of its top, stacked with a rainbow of J-card spines

Songs for my plant babies in a green-tinted case, held in front of a monstera

The back of the green case, showing the tape and the liner notes through it

’90s essentials vol 3 shoegaze in a red case, held up to the camera

The red shoegaze case from the back, with the red tape and liner notes showing

Music for hanging with your fav crypto-bro, hot pink, held in front of the monstera

The crypto-bro case turned on its side, showing the spine title and the Alboms badge

Tools used

February 2023 - May 2023

Building a WACK! game.

“that’s WACK!” is a game I created to help build connections across diverse areas of belief. Through polarizing subject matters, game design that promotes discussion, and a visual identity that feels almost deceptively juvenile, you’re bound to get to know someone in ways you would’ve never before.

I surveyed and interviewed 40+ people from various walks of life for the game’s content, so the cards actually echo real-life ideologies from real people.

No longer for sale. Contact me and I’ll send you the blueprints to build it yourself :)))

Game design Brand identity Packaging UX research

How to play

Each player gets 1 Vote Card and 2 WACK Cards. The rules fit on one card, front and back.

Fight over who gets to be the Card Czar.
After the fighting ends, the Card Czar picks a category and reads a prompt.
Everyone else then uses their Vote card to either agree or disagree with the prompt.
Moving clockwise, each player except for the Card Czar gives their measured take on why they agree or disagree in under 15 seconds.
After hearing everyone out, the Card Czar picks the player that they believe has the best take and gives them the Category Card. At this time, any player with a WACK Card can slam it down and swipe the win away.
The player to the left of the Card Czar is now the new Card Czar of a new round.

First player to own 5 Category Cards wins.

What’s in the box

85 cards across four kinds. There are 12 Vote Cards and 24 WACK Cards: one and two apiece for a full table of 12.

topicthe more desires you have, the less happy you will be 48 Category CardsA category on the front and a topic to argue on the back
24 WACK Cards“WACK!” on the front and a deadpan “WACK.” on the back
12 Vote CardsWhite for yeah (yes, yep, agreed, indeed), black for nah (nada, nay, nope, no)
1 Instructions cardSimple, intuitive, and (some would say) destructive hehe

Printed cards fanned on a table: black nah and white yeah Vote cards, the how to play card, and a spill of yellow WACK cards

A pile of printed WACK cards, “WACK!” on white star bursts over yellow

A pile of printed category cards up close: social norms, culture, american politics, and philosophy, fronts and topic backs

Printed category cards spread across a table, american politics and philosophy on top

Drawn from real people

I surveyed and interviewed 40+ people from various walks of life for the game’s content. This helped make sure the cards actually echoed real-life ideologies from real people. They sort into four categories, each with its own color and a doodle on a star burst.

philosophy“the more desires you have, the less happy you will be”— anonymous, 31, portland, or
social norms“politics should be brought up on the first date”— anonymous, 24, tampa, fl
culture“tipping culture has gotten out of hand”— anonymous, 42, houston, tx
american politics“the voting age should be lowered to 16”— anonymous, 15, brooklyn, ny

Identity

Logo

A spiky speech bubble to match the intensity of people’s spicy takes.

Badge, the primary logo

Wordmark

Short wordmark

“!” stars, for small spaces

Type and color

Three typefaces: Alata does the talking, Shrikhand does the yelling, and Alexandria labels things. Yellow leads, black backs it up, and every category gets its own color.

a party game built
Alata“that’s”, category names, topics, and every bit of copy
WACK!
ShrikhandThe logo, and words that need to be yelled
CATEGORY · TOPIC
AlexandriaSmall labels on the cards

WACK yellow#FFDA00
Black#000000
philosophy#9C74C4
social norms#7CBC84
culture#BC9C74
american politics#CC6464

Illustration style

Every drawing is a single black line with round ends, drawn loose and left a little wobbly, like something sketched in the margin of a notebook. No fills, no shading, no color of their own.

The topics are heavy, so the drawings stay light. A flag, a dollar bill, or a head full of questions looks a lot less like a fight when it’s a doodle, and that’s the point: it tells the table this is a game before anyone reads a card. Each category gets its own doodles, and they all pile up together on the box.

Designing the box

A tuck box covered in the category doodles, with the logo on the front and the pitch on the back: “a party game built to bring you together as it tears you apart.”

The dielineFront, back, sides, and tuck flaps, flat.

Printed and glued

The front, in all its terrible glory

The back of the box in yellow: “a party game built to bring you together as it tears you apart.” above the warning copy, a “!” star, and a barcode — The back, with the pitch and a warning

Poster and ad

Two older men mid-argument, then mid-hug, cut into jagged stars. The poster is “available in all digital and physical stores that have games except for gamestop. we don’t fw gamestop”; the Instagram ad says it’s “now available on all mobile appstores”.

Stickers, tees, and totes

Stickers for the table talk (“i incredibly Disagree!” and “your opinion is Valuable!”), the doodles in each category’s color, and the yellow star on shirts and bags.

The sticker sheet: “i incredibly Disagree!”, “your opinion is Valuable!”, the badge, the “!” star, and four clusters of category doodles in yellow, green, purple, and red — Sticker sheet

The two quote stickers printed, on kraft paper — Printed stickers

Tees

Two tote bags: yellow with a black star, and black with a yellow star — Totes

The that’s LOVE! expansion

For the daring lovers

After the success of that’s WACK! with friends, I started thinking of expansion packs. that’s LOVE! adds 20 more cards in their own doodled box with a pink back. Covering topics around dating, intimacy, and nature vs. nurture — all topics again gathered through interviews with real people.

The expansion box dieline, pink and white — The dieline

The front

The back of the expansion box in pink: “this? this right here? this one’s for the daring lovers.” with the warning copy, a “!” star, and a barcode — The back

dating“once a cheater always a cheater”— anonymous, 27, miami, fl
intimacy“hugs > kisses. fight me”— anonymous, 22, austin, tx
nature vs. nurture“your parents are the blueprint for what you look for in a relationship”— anonymous, 35, atlanta, ga

Tools used

January 2021 - November 2021

Reacting on Spotify

Spotify React is a lean user-to-user feedback feature for Spotify’s desktop app, with mobile integration.

The idea came from a lot of asks on Spotify’s community forum for some way to communicate. Over three weeks, I did the research and prototyping work to bring it to life, then pitched it to Spotify through their public forums and got a bunch of support from the community!

Component design Interaction design UX research Market research

The brief

A self-initiated pitch: give social listeners more to do in Friend Activity, without asking Spotify to run a messenger.

Problem: Users seek more robust social features; Spotify does not want to adopt messaging
Goal: Build an engaging but constraint-respected experience that builds on the social aspect of “Friend Activity” without compromising the app’s core functionality
Deliverable: A lean user-to-user feedback feature for Spotify’s desktop app, with mobile integration
My role: Interaction design, research, music community enthusiast

Balancing functionality

Market research & competitive analysis

Spotify, one of the most popular apps worldwide, is actively teetering between music and audio streaming and some aspects of social networking.

Being part of the “listening trio” (Apple Music, Spotify, YouTube), I find the social side of group sessions, following others, and seeing a friend’s listening activity to be what truly sets it apart. For users like me, it seriously increased engagement and helped form or maintain a lot of valuable connections.

I believe amassing over 365 million listeners worldwide, while offering the same main function as its competitors, is the result of an innovative, user-centered approach that capitalizes on the social nature of music.

77Q2 2015
104Q2 2016
138Q2 2017Inbox removed in 2017
180Q2 2018
232Q2 2019
299Q2 2020
365Q2 2021

Users (by millions!!!)

Remember the inbox?

At one point, Spotify had in-app messaging that seriously built on its native social side. Users could message each other, and messages were saved to a personal inbox. People sent little personable messages, recommendations, or just talked about music. It was stellar for anyone passionate about connecting in a music-centered space, and even with minor UX errors (like no notifications for messages), it was a beloved part of the experience.

In 2017 it was removed for being too niche relative to the expense of its upkeep. That wasn’t exactly well received… Every single year, new requests open up about bringing back messaging.

In a way, I can empathize with the team and the circumstances the feature had to live in. Spotify is not a messaging app, and it’s quite taxing to try to be one when your main audience just wants to hear their jams.

Where I come in

With the power of UX and try-hard-fan-ness, I wanted to make the case that Spotify can appeal to both sides: a solution that fights a bit harder for the social user while, sustainably, not compromising or taking attention away from Spotify’s main function. The hope is more balance, and more fun, for an app already using some elements of a social network.

The seesaw level, with headphones and chat bubbles balanced

Diving deeper

Interviews

Talking with real-world people, I got to work on understanding exactly who we’re trying to benefit. Questions ranged from general usage to the age-old social feature: Spotify desktop’s Friend Activity.

40diverse Spotify users interviewed
1screening requirement: they use Spotify
10questions, each answer logged two ways

The interview guide

Under every question I wrote down the participant’s response and their emotional reaction or body language. Interview success weighed heavily on those reactions, so I could understand and empathize a little better.

Name
Age
Occupation
Favorite song

How long have you been using Spotify as your chosen music streaming platform? Why is this your chosen music streaming platform?
How frequently do you use the desktop app? What time of day are you typically using this app?
How frequently do you use the mobile app? What time of day are you typically using this app?
What is your preferred app experience (mobile or desktop) and why?
If applicable, how did you feel when Spotify took away the messaging function?
How frequently do you check up on your friend’s activity?
What do you like or dislike about the “friend activity” function?
How do you typically discover new music on Spotify?
What kind of impact does the “friend activity” function have on your life?
Have you ever reached out to a friend after seeing what they were listening to? If so, please describe this experience.

“Participant’s response”“Participant’s emotional reaction or body language”

Persona creation

An expected (but really crucial) insight: enjoying a friend’s listening correlated directly with overall desktop usage. Younger users also trended toward getting significant personal impact from Friend Activity, while wanting in-app messaging to go with it. I used this and the earlier market insights to land on three major personas.

Steven

Age
29

Occupation
Farm manager

Enjoys
Playing his favorite classics

Dislikes
Sharing his listening activity

“I mainly use this app to play music while watering crops or working out! I’m rarely at a computer and I really don’t find much use in talking about private things like music taste.”

Lovin’ On You · Luke Combs
Alexis

Age
25

Occupation
Yoga instructor

Enjoys
Discovering new music through the algorithm

Dislikes
It can be hard to navigate playlists on phone

“I’ve always liked Spotify for their curated playlists! I usually use the mobile app when driving around, but at home I tend to listen on my computer because it’s bigger, easier to use, and it’s nice to see my friends listening!”

Tadow · Masego
Layla

Age
21

Occupation
Game design student

Enjoys
Discovering new music through friend activity

Dislikes
Lack of user-to-user feedback

“I used to have Apple Music until a friend showed me the social experience of Spotify! Always working on my computer, seeing the listening of the people I follow provides a sense of community and fellowship.”

Just For Me · PinkPantheress

Steven
Alexis
Layla

Less likely to be on a computerAvidly using their computer

Brainstorming

Coining Spotify React

Spending a couple of hours at my favorite cafe, I brainstormed solutions with Spotify’s design principles in mind. My favorite: an engaging but limited element of user-to-user feedback, mainly for desktop with mobile integrations. Nested in Friend Activity, friends communicate through temporary emotes that can only be sent during live listening. I coined it “Spotify React.”

A quick highlight of the awesome community idea exchange: shoutout to MiyazEhsan, lachlan_rw, DJ-Mastaj, and Elerre on the Spotify forum for helping me develop this idea!

Live onlyReactions can only be sent to someone listening right now.
One at a timeA single emote per send, but spamming is allowed.
Gone on closeReactions are deleted forever when Spotify closes.
Opt outOne setting turns it all off.

Journey map

Fun for the community and lean for the team. The main goal of this journey is to maximize user-to-user engagement while minimizing the workload needed to upkeep it.

User opens Spotify Desktop
Sees Friend Activity
Clicks a track seen in Friend Activity
Chooses a reaction to the track
Notification sent to the other user
Read via push notification on phoneRead within Spotify
Notification erased forever when Spotify is closed

Low-fidelity wireframes

Pen first: the hover, the drop-down, the bell, and the phone.

Sketch of two Friend Activity cards: on the first, scrolling over the username lights it up white; on the second it lights up green, #1DB954, with the note that the currently listening state is adjusted to be eligible for emote feedback, if allowed. A note cites Nielsen’s first heuristic, visibility of system status. — **Receptive at a glance**Usernames light up white, or Spotify green when they take reactions: Nielsen’s first heuristic, visibility of system status.

Sketch: after clicking the track name, a row of emotes (question mark, heart, exclamation point) appears under it between arrows, white and gray and lighting up when hovered. A flow below: selection, information sent to user and system, notification, information deleted. — **Click the track**A row of emotes opens under it. Pick one, it’s sent, it lands as a notification, then it’s deleted.

Sketch of the desktop playback bar with a notification bell next to the queue and devices icons, opening a Notifications panel that reads “someone reacted to your listening of song name”. Notes: the bell appears if Spotify notifications are enabled, works like the devices window, and notifications stay for the listening session, erased when the app closes. — **A bell in the playback bar**It appears when Spotify notifications are on and works like the devices window. Reactions last as long as the listening session.

Sketch of a Spotify push notification, “Username here: username reacted emote to your listening of song name”, above a phone playback screen with a bell at the bottom, beside the queue icon. Note: in-app notifications erased when closed. — **On the phone**A push notification, and a bell on the playback screen. In-app notifications are erased when closed.

Mid-fidelity mockups & prototype

Four pieces, still in Spotify gray. These are the original mid-fi recordings.

Reaction receptivityUsernames in Friend Activity hover green rather than white to show a friend is open to sending and receiving reactions, so a new feature nested in the (mostly unchanged) Friend Activity causes less confusion. In settings, anyone can opt out.

Reaction drop-downClicking the track name releases a drop-down of emotes, and scrolling reveals 3–5 more: progressive disclosure, to keep the cognitive load of options down. Only one emote goes at a time, but spamming is allowed, since reactions are temporary.

Desktop notificationReactions sent to you wait under a bell in the playback bar, so they never distract from or clutter the main screen. They’re deleted forever when the app closes, with an option to delete them by hand.

Mobile notificationsSpecific or vague push notifications say a reaction came in. The bell moves to the playback screen and bar to put the emphasis on live listening. Until now it sat at the top with rarely a reason to tap it; with friends inside, the bell has a use!

Evaluation

User feedback & further research

Next, I asked some users for aesthetic and usability feedback. Here are some interesting insights.

Reactions are not mirroring real life

I’d believed mirroring the design of Spotify’s native elements was the way to go, but almost every other user helped me understand the importance of mirroring real life. On multiple occasions, people said everything looks consistent, but they’d enjoy more options to represent a complex or personable reaction. That, along with watching Tina Le’s talk at Design Driven, sparked reflection on a better route toward inclusivity and a more humanistic design.

More options that reflect native emojis. Rather than Spotify gray, reactions will be colorful, diverse, and a better representation of how a specific user may feel amidst the vast community.
Scrolling > clicking

Clicking for horizontal progression in the desktop drop-down and notification panel got a lot of pushback. Completely understandable: most of the desktop app scrolls vertically. Someone also noticed the desktop notifications didn’t match mobile (“Notifications” vs. “What’s New”).

Everything becomes scrollable, and both platforms say What’s New.
The mobile bell is not useful on the playback bar

Really, it feels useless everywhere when there’s no mystery as to what’s in it. The more users I talked to, the clearer it got: you can scroll down the home screen for the same information. The bell is more engaging when it’s filled with interactions from others, but there was pushback on having it front-and-center when you open the app, since it still repeats what’s on the front page.

Nest the bell only in the playback screen. That frees up the playback bar, gives the home header room to breathe, echoes that reactions are specific to a listening session, and lets the home screen excel at what it’s good at: showcasing audio. With push notifications holding some information back, there’s an actual incentive to check the bell.
The mobile notification screen looks a little weird

Blue and green subheading colors are very inconsistent, and they mess with the visual hierarchy. I also neglected timestamps on reaction notifications, for mobile and desktop. That matters given how late people may check them while Spotify is still open. Within the same hour may be optimal, but what if someone puts it off a week without ever closing the app? They’d be as confused as I am picturing the RAM of that computer…

One subheading color, and a timestamp on every reaction.

Revision

High-fidelity mockups & prototype

Approximately 2 coffees later…… ok, maybe it was 4.

**The mobile prototype, rebuilt from its Figma frames**

Green hover & reaction drop-down

With a multitude of options, users can send limited but personable reactions to their friends.

Vertical scrolling; emoji options native to each system.
Desktop notification panel

Consistent and familiar, for quick onboarding of social desktop users.

Vertical scrolling; enlarged to give text space to breathe; timestamps on hover.
Mobile push notification

Designed to spark curiosity.

Friend-specific notifications removed to incite mystery and give people a reason to open the bell.
Mobile notification screen

Showcases reactions from friends while you’re out and about.

Timestamps added; improved visual hierarchy; reached from the playback screen.
Social settings

It’s all up to you.

One simple switch: all in or all out, to avoid possible harassment or extra complications. It applies to both platforms.