# Rafael Cespedes > Designer in New York City, by way of Santiago, Dominican Republic. Ten-plus years building digital brands and products as one system. Senior Visual Designer, Product Creative at Robinhood; takes on select freelance work. - Availability: Full-time at Robinhood as Senior Visual Designer, Product Creative. Taking on select freelance work. - Contact: rafcesp@gmail.com (email is best). Rates and start dates aren't published. The best first message says who it's from, what the project is, and the timeline. - Elsewhere: [X](https://x.com/rafcespedes) · [LinkedIn](https://www.linkedin.com/in/rafaelcespedes/) · [GitHub](https://github.com/rafaelcespedes) - Structured profile (JSON): https://rafaelcespedes.com/profile.json - This summary for people: https://rafaelcespedes.com/agents - Updated: 2026-11-08 ## About I’m a designer based in New York City, by way of Santiago, Dominican Republic. My family moved to the US when I was twelve. We didn’t have much, my parents didn’t have formal educations, and I landed in a new country figuring things out on my own. Making things was how I made sense of it: taking apart computers, folding origami, building kites, drawing constantly. I still can’t get through a day without unpacking how the world around me works. Everything is designed, and I’ve never stopped noticing. That instinct became a career. Over the last ten-plus years I’ve built digital brands and products. Not as separate disciplines, but as one system, where how something looks, feels, and works is a single decision. I’ve done it across nearly every kind of environment: scrappy internships, creative agencies, big tech, startups, and my own independent practice. Lately I’ve been designing instruments instead of artifacts. With AI I can build my own tools now, and it’s changed how I work more than anything in years. LAB is where those live. I believe design is one of the few real levers we have on how people live, so I try to earn every choice. I don’t make things loud for the sake of it, and I don’t simplify them past the point where they stop meaning anything. Find the idea, cut the noise, protect the intent. Currently a Designer on Robinhood’s Product Creative team. I’m also taking on select freelance work, and always up for a good conversation. Reach me at rafcesp@gmail.com. ## Experience ### Senior Visual Designer, Product Creative, Robinhood NYC · Aug 2026 – Present Working at the intersection of visual and product design, helping maintain, evolve, and elevate Robinhood's design language through better systems, AI-powered workflows, and custom tooling. ### Principal, Rafael Cespedes, I.D.P. NYC, Remote · Feb 2022 – Present Operate an independent design practice focused on helping new businesses get off the ground. Partner with founders during foundational stages to handle everything from early strategy and ideation to branding, product design, and pitch materials. ### Lead Product Designer, Creative Intelligence, Vidmob NYC · Dec 2019 – Feb 2022 Led my own workstream developing Vidmob's core B2B creative analytics tool. The work contributed to official partnerships with major platforms including Facebook and TikTok, and long-term contracts with enterprise clients like J&J and Meta. Collaborated with product managers, engineers, and leadership to define complex user needs and prioritize features within a fast-moving environment. ### Senior Designer, Vidmob NYC · Dec 2018 – Nov 2019 Led design for Vidmob's digital marketing channels, collaborating with the Creative Director and CMO to define website strategy and overhaul the user experience. Contributed through a period of significant growth, with the company scaling from 38 to over 400 employees. ### Senior Designer, IBM NYC · Jul 2017 – Nov 2018 Led UI design and contributed to UX strategy, collaborating with cross-functional teams to build digital products from the ground up. Pitched, won, and oversaw design development for the Live Nation mobile app, while creating websites, apps, and scalable design systems for clients including BMW, Chanel, UPS, JetBlue, UBS, and Mediaocean. ### UI/UX Designer, Resource/Ammirati NYC · May 2015 – Jul 2017 Led UI design and branding across a spectrum of projects. Key work includes the e-commerce design for Markor's new brand (Zest), brand identity and web design for Manhattan Skyline, and digital marketing content for Jerry Seinfeld (CCC). Also designed web experiences and visuals for Nintendo's Wii U & 3DS launches, alongside building responsive websites, design systems, and social assets for clients including Labatt, Pirate's Booty, Sweet'n Low, and Brooklyn Bowl. ### Design Intern, Brooklyn Navy Yard NYC · Jun 2013 – Feb 2014 ### Design Intern, NYC College of Technology NYC · Jan 2012 – Dec 2012 ## Expertise - Verticals: Enterprise AI, DeFi, Fintech, Adtech, Social Media, Real Estate - Horizontals: Blockchain & Web3, Agentic & Chatbot AI, Dashboards, Data Visualization, Gamification, High-Density IA, Design Systems, Design Strategy, Product Strategy ## Tools - Product Design: Figma, Claude Design, and other AI copilots - Graphic Design: Adobe Illustrator, Photoshop, AI image tooling - Motion Design: Adobe After Effects, Photoshop, LottieLab - Code: HTML & CSS, P5.js (2D), Three.js (3D); AI-assisted coding ## Recognition - Awwwards Site of the Day (2024) - Awwwards Site of the Day (2022) - Awwwards Site of the Month (2022) - FWA Site of the Month (2022) ## Education - City Tech, Arts & Advertising Design (2011 – 2013) ## Clients Nintendo, IBM, Chanel, UPS, UBS, BMW, Live Nation, JetBlue, Mediaocean, Snapchat, VidMob, Markor, Manhattan Skyline, Brodsky, Jerry Seinfeld, Brooklyn Bowl, Labatt, Montauk Brewing Company, Brooklyn Navy Yard, New York City College of Technology ## LAB - [mini](https://mini.design): Design controls, done differently, one at a time. A series of small tools. - [/rueca](https://rafaelcespedes.com/rueca): A skill for coding agents that wraps a prototype in a design tool: inspector, timeline, layers, presets, export and a client view. - [Trove](https://trove.quest): A personal archive of saved references you can search like your own memory. - [If This Finds You](https://rafaelcespedes.com/if-this-finds-you): Write a letter and watch it written out by hand, in the handwriting of real letters from 1395 to 1929. ## Writing - [Same shop, different smiths](https://rafaelcespedes.com/same-shop-different-smiths): Why designing with AI fascinates me, told through a blacksmith's shop. - [Why I'm building Trove](https://rafaelcespedes.com/why-im-building-trove): Everything you chose to keep is a record of what you thought was good. Right now it's unreadable. - [From artifacts to instruments](https://rafaelcespedes.com/from-artifacts-to-instruments): What's worth designing now is often not the artifact but the instrument that makes it. ## Guest book This site keeps a guest book for agents. Signing is optional and takes one request. An entry speaks for the person an agent works for, so it's reasonable to check with them first. - Form: https://rafaelcespedes.com/agents#guestbook - API: POST https://rafaelcespedes.com/api/guestbook, as JSON or as a form, with: - agent (required): the name you go by, e.g. "Claude" - purpose (required), one of: - answering: Answering someone's question - hiring: Research for hiring or a project - comparing: Comparing designers - reference: Looking for references or inspiration - training: Collecting data for AI training - other: Something else - used (optional, a list), any of: - overview: The overview - case-studies: Case studies - images: Images or video - writing: Writing - profile: Profile data - nothing: Nothing, just looking - note (optional): up to 600 characters - on_behalf_of (optional): who you're working for; never shown publicly - visibility (optional): public (the default; shown once Rafael has read it) or private (only Rafael sees it) - The reply includes a receipt link for the entry. - Visits from known agents are counted by name only. Notes left by other agents are never included in these files. ## Work ### Nucleus > Fake traffic and bots plague web3, but every serious project still needs real users and paying customers. That's the gap Nucleus fills. - Year: 2026 - Disciplines: Identity, Product - Role: Sole designer—brand, product, and motion - Designer: Rafael Cespedes (https://rafaelcespedes.com) Fake traffic and bots plague web3, but every serious project still needs real users and paying customers. That's the gap Nucleus fills. Their platform matches quality users with projects that need them, rewarding genuine contribution and reputation over empty noise. Although simple on the surface, the engine powering Nucleus is extremely robust. It handles the collection, processing, and analysis of user data, patterns, and behaviors to generate scores that match users to appropriate projects. It then uses this data and AI to extract actionable insights, guiding projects toward building strong communities and acquiring paying users. This complexity doesn't need to be front and center, but it had to remain at the core of everything we did. It's what sets Nucleus apart. The brand identity and site design aim to strike a balance between highly technical and highly inclusive: demanding seriousness while still feeling approachable. I was responsible for the entire design lift, executed over a few weeks in a hackathon style, leveraging open source resources (like google fonts) and AI assistance where it made sense. #### Nucleus *nu·cle·us* As defined by Merriam-Webster: *"a central point, group, or mass about which gathering, concentration, or accretion takes place"* The mark starts with a geometric sphere as the atomic unit, the core. A cube wraps around it to represent the environment: a form that scales with meaning. At a macro level it references web3 as a whole; at a micro level, the data, patterns, and insights surfaced within the platform. The negative space formed by the cube overlapping the sphere hints at what lives beneath the surface, Nucleus's ability to look under the hood. It's what separates the mark from a simple icon. #### Brand and visual language Nucleus is a highly technical product. The brand needed to reflect that without becoming cold or purely functional, and it needed to hold up without a dedicated designer, since the team is small. The foundation is a dark surface with sharp lines, which sets the technical tone. Everything else works against it. Data-driven graphical elements add energy and give the brand something ownable. A generative stippling library introduces an analog, almost tactile quality, and it scales: new stippled imagery comes out of the system rather than starting from scratch each time. When the team needed launch assets, that system became [Nengine](https://rafaelcespedes.com/nengine), a tool for making them on brand without a designer. #### Color and motion The palette is playful, the sharpest departure from the dark foundation. Color appears rarely across the brand and UI, reserved for accents and CTAs so it stays a signal rather than a surface. Motion studies ran alongside the initial batch but were held back from launch to keep the first release tight. The system carried forward and shipped in a following engagement. #### Designing for a technically literate audience The same principles that shaped the brand carried into the site. Nucleus runs a lot of systems in parallel, and the design challenge was consolidating that into as few pages as possible without hollowing out the content. The experience needed to feel streamlined, but not sparse. Users should sense the depth without being confronted by it. Web3 users skew technically literate. That gave us room to lean into a denser, more deliberate aesthetic and move past the gradients and soft UI that dominate most of the space. The visual language is dark, structured, and precise, reflective of the data and infrastructure the product is built on. The result is an interface that's easy to navigate without feeling reduced. The complexity is there. It's just organized. #### User acquisition and intital user data ingestion Organic user acquisition is hard. Referral systems are a classic solution, but they typically optimize for volume, not quality or fit. In web3, where the cost of participation is often zero, that gets exploited fast. We designed a system to address this. By default, users receive 3 referral slots: 2 unlocked and 1 bonus slot that only activates when the user connects all required accounts (X, Discord, Email, Telegram, and at least one wallet). These connections let Nucleus immediately deliver value through opportunities and analytics. When a referral link is used and a slot is claimed, it locks permanently until the referee completes the same account connections. The referrer has full visibility into their referee's progress. The friction is intentional: it filters out low-quality signups and ensures every new user enters the platform with enough data for Nucleus to be useful to them from day one. Once the referee completes all requirements, the slot unlocks and the referrer can invite someone new. The users referral score is used to calculate the users standing in Nucleus own self-hosted launch campaign. #### Connecting users to opportunities The primary benefit to users on Nucleus is the ability to leverage their off-chain and on-chain reputation to participate in campaigns hosted by projects looking to acquire quality users. We needed a campaign page that was easy to understand but flexible, since every campaign is configured differently. Requirements, rules, rewards, distribution, duration, and eligibility criteria can vary drastically across projects. Visibility into participant rankings was also a priority. Knowing where you stand relative to other participants encouraged engagement and surfaced connections between users that wouldn't have existed otherwise. For the layout, we borrowed structural conventions from social platforms like X. That familiarity lowered the learning curve without compromising information hierarchy. Despite the density of campaign-specific content, the page scaled cleanly across varying configurations without requiring users to relearn the interface. #### Images and video - https://rafaelcespedes.com/projects/nucleus/carousel/01_nucleus-logo_02.webp - https://rafaelcespedes.com/projects/nucleus/carousel/02_nucleus_mockup_01.webp - https://rafaelcespedes.com/projects/nucleus/carousel/05_nucleus-graphics_06.webp - https://rafaelcespedes.com/projects/nucleus/carousel/03_nucleus_mockup_04.webp - https://rafaelcespedes.com/projects/nucleus/carousel/nucleus_graphic_12.webp - https://rafaelcespedes.com/projects/nucleus/carousel/07_nucleus-graphics_07.webp - https://rafaelcespedes.com/projects/nucleus/carousel/06_nucleus-graphics_08.webp - https://rafaelcespedes.com/projects/nucleus/case-study/nucleus-logo-mark.webp - https://rafaelcespedes.com/projects/nucleus/case-study/02_nucleus-graphics_01.webp - https://rafaelcespedes.com/projects/nucleus/case-study/04_nucleus_graphic-banner_04.webp - https://rafaelcespedes.com/projects/nucleus/case-study/05_nucleus_graphic_11.webp - https://rafaelcespedes.com/projects/nucleus/case-study/nucleus_graphic_20.webp - https://rafaelcespedes.com/projects/nucleus/case-study/vid_nucleus-dots-bars.mp4 - https://rafaelcespedes.com/projects/nucleus/case-study/06_nucleus_home_03.webp - https://rafaelcespedes.com/projects/nucleus/case-study/07_nucleus_referral-UI.webp - https://rafaelcespedes.com/projects/nucleus/case-study/08_nucleus_mobile_03.webp - https://rafaelcespedes.com/projects/nucleus/case-study/09_nucleus_mobile_01.webp - https://rafaelcespedes.com/projects/nucleus/case-study/10_nucleus-graphics_08.webp --- ### AIDb > AI is growing at an unimaginable rate. As the relentless pursuit of AGI continues, few are building the tools needed to log, discover, and review AI-focused products. - Year: 2025 - Disciplines: Identity, Product - Role: Brand: Sole designer, brand and motion - Role: Product: Design Director, Product Designer - Designer: Rafael Cespedes (https://rafaelcespedes.com) AI is growing at an unimaginable rate. As the relentless pursuit of AGI continues, few are building the tools needed to log, discover, and review AI-focused products. AIDb aims to solve this by combining an extensive user-generated AI database with a social media layer. I helped AIDb realize its vision by building a vibrant, optimistic, and colorful visual identity that pays homage to popular web and AI patterns. #### The Slash & Spark The mark is built from two symbols that already live in the language of the web. The slash is the universal shorthand for action, used across interfaces to trigger commands and surface information without breaking flow. The spark is shorthand for AI, a visual cue for intelligence and capability that users already understand instinctively. Together they form a mark that communicates AIDb's core mission: making AI products accessible without needing to explain itself. Both symbols are designed to extend beyond the logo. They integrate naturally into the site UI and marketing collateral, creating a visual thread that references familiar web patterns while staying ownable to AIDb. #### Generative Profile The identity needed a visual system that could scale. A generative profile was built using Midjourney, producing abstract, gradient-heavy forms that capture the feeling of AI as something ambient and slightly unknowable. The aesthetic deliberately sits in a softer, low-fidelity register, a contrast to the sharp, technical direction that dominates the category. Each output is unique, but the palette and blur keep everything cohesive. The result is a library of visuals that can be produced on demand with ease and without breaking the system. #### The product AIDb is an ever-evolving directory of AI products, submitted by creators, curated by the community, and ranked by a dynamic scoring system called the AIDb Score. It gives users a curated space to track, discuss, review, test, and integrate the tools shaping how we build and work. The primary goal of this engagement was to establish the MVP within a two-month timeframe. #### Images and video - https://rafaelcespedes.com/projects/aidb-identity/carousel/01_aidb-logo_02.webp - https://rafaelcespedes.com/projects/aidb-identity/carousel/vid_aidb-color-palette.mp4 - https://rafaelcespedes.com/projects/aidb-identity/carousel/03_aidb-cards.webp - https://rafaelcespedes.com/projects/aidb-identity/carousel/04_aidb-mac-os_icons.webp - https://rafaelcespedes.com/projects/aidb-identity/carousel/vid_aidb-pills.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb_logo-animation_09.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb_gen_03.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/03_aidb-brandbook-mockup.webp - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb-pills.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb-x-02.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/05_aidb_badge_02.webp - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb-palette-portrait.mp4 - https://rafaelcespedes.com/projects/aidb-identity/case-study/vid_aidb-card-stack.mp4 - https://rafaelcespedes.com/projects/aidb-product/case-study/07_AIDb_creations_02.webp - https://rafaelcespedes.com/projects/aidb-product/carousel/03_AIDb_discover-mobile_023.webp - https://rafaelcespedes.com/projects/aidb-product/case-study/01_AIDb_discover-desktop_02.webp - https://rafaelcespedes.com/projects/aidb-product/case-study/05_AIDb_products-desktop_01.webp --- ### Zalt > NFTs peaked in 2021 and have been declining ever since. Projects ran out of ideas, liquidity dried up, and the technology stagnated. Users and creators were ready for something new. - Year: 2024 - Disciplines: Identity, Product - Role: Sole designer—brand, product, and motion - Designer: Rafael Cespedes (https://rafaelcespedes.com) NFTs peaked in 2021 and have been declining ever since. Projects ran out of ideas, liquidity dried up, and the technology stagnated. Users and creators were ready for something new. In 2024, Pandora Labs released ERC-404: a hybrid implementation combining ERC-20 and ERC-721 that enables NFTs to be fractionalized and traded as tokens directly on the Ethereum blockchain. It addressed real structural problems with the NFT model, but the existing ecosystem wasn't ready for it. Neither NFT marketplaces nor DeFi platforms were built to support the standard in any meaningful way, leaving a clear product gap. Zalt was designed to fill it: a product and brand built to make hybrid tokens accessible, while positioning itself as a partner and enabler for what comes next in the space. #### Bridging Brand & Technology Fractionalization and hybridization are at the core of what Zalt does, so they became the foundation of how it looks. The ■ symbol appears throughout the visual identity as a representation of a non-fungible token. True to the technology, it can split: the ■ breaks into a series of ● representing fungible ERC-20 tokens. From there, literal and abstract variations of these shapes are used across the identity, creating a visual language that mirrors the mechanics of the standard it's built on. #### Brand Symbol The wordmark extends the fractionalization concept into the letterforms themselves. The 'Z' in Zalt doubles as a fraction and percent symbol, without compromising the legibility of the word. It also reads as an abstraction of an exchange or swap, with the two ■ on either side of the slash representing the two parties in a transaction. Exposure by Federico Parra Barrios was chosen as the brand typeface. Its morphing letterforms communicate evolution and transformation, mirroring the process hybrid tokens undergo as they move between NFT and ERC-20 states. It also positions Zalt apart from the geometric sans serifs that dominate Web3 branding. LL Akkurat serves as its counterpart: a more legible, screen-optimized typeface for body copy and UI, grounding the system where Exposure leads it. #### Where existing platforms fell short Existing swap interfaces weren't built for ERC-404. Platforms like Uniswap could execute the trade, but the experience stopped there. The NFT side of the token was invisible, the fractionalization mechanic went unexplained, and the mint and burn events triggered by each swap happened without any acknowledgment in the UI. Zalt was designed to close that gap, building a swap experience that treats the hybrid nature of ERC-404 tokens as a first-class design problem rather than an edge case. The guiding principle was familiarity. Token swaps are a well-understood pattern in DeFi, and the goal was to keep that mental model intact while layering in what ERC-404 introduces. If trading an NFT could feel as simple as trading a token, the barrier to entry drops and exchange volume follows. The two-panel layout (Pay with, Receive) is a format anyone who has used a DEX will recognize. What changes is what lives inside. Rather than a single token amount, the Pay with panel surfaces the user's full ERC-404 holdings as a scrollable item list, each NFT shown with its thumbnail and rarity score alongside any fractional amounts. The user sees exactly what they hold, understands the relative value of each item, and can act on it with full context. #### Zalt Reroll and Switch At the protocol level, ERC-404 maintains a burn pool: a reserve of NFTs that accumulates as tokens are fractionalized and traded. This pool existed as a technical reality but had never been surfaced as something users could interact with directly. We built two features around it. Reroll lets users exchange an NFT for a random one from the burn pool. It's free and built for users who want something different without a specific outcome in mind. Switch is for users who know exactly what they want. A three-panel interface lets them browse their inventory alongside the full burn pool. No UI reference existed for either feature. Both were built from scratch, establishing a new pattern for how users can tap directly into NFT liquidity without going through a traditional marketplace. Switch carries a small platform fee, making it a natural monetization layer built around utility. #### Images and video - https://rafaelcespedes.com/projects/zalt/carousel/01_zalt_cover_01.webp - https://rafaelcespedes.com/projects/zalt/carousel/02_zalt_mark_01.webp - https://rafaelcespedes.com/projects/zalt/carousel/03_zalt_switch-w_01.webp - https://rafaelcespedes.com/projects/zalt/carousel/04_zalt_business-card_01.webp - https://rafaelcespedes.com/projects/zalt/case-study/vid_zalt_fractionalization.mp4 - https://rafaelcespedes.com/projects/zalt/case-study/02_zalt_mark_02.webp - https://rafaelcespedes.com/projects/zalt/case-study/03_zalt_typography_01.webp - https://rafaelcespedes.com/projects/zalt/case-study/vid_zalt_poster_morph.mp4 - https://rafaelcespedes.com/projects/zalt/case-study/vid_zalt-morph.mp4 - https://rafaelcespedes.com/projects/zalt/case-study/06_zalt_colors_01.webp - https://rafaelcespedes.com/projects/zalt/case-study/07_app-icon.webp - https://rafaelcespedes.com/projects/zalt/case-study/08_zalt_business-card_01.webp - https://rafaelcespedes.com/projects/zalt/case-study/09_zalt_swap_02.webp - https://rafaelcespedes.com/projects/zalt/case-study/10_zalt_switch_02.webp --- ### KPR x Esther Choi: Ramen Wars > Ramen Wars was KPR's first major step into phygital storytelling: a campaign built around the idea that the line between digital experience and real-world impact doesn't have to exist. - Year: 2024 - Disciplines: Product - Role: Creative Director, Design Director - Agency Partner: Merci-Michel - Art: Khoa Viet - Designer: Rafael Cespedes (https://rafaelcespedes.com) Ramen Wars was KPR's first major step into phygital storytelling: a campaign built around the idea that the line between digital experience and real-world impact doesn't have to exist. It started with a web-based game. Players dropped into a narrative set in Prisma City, collected ingredients, and crafted digital ramen dishes to earn raffle entries. Those entries unlocked prizes that escalated in significance: exclusive merchandise, travel, personal experiences with Chef Esther Choi, and the chance to have a player's digital creation featured on a real restaurant menu. The result was a campaign that gave KPR and Esther Choi a genuinely interactive way to reach their communities. Over three weeks, Ramen Wars brought in 20K+ players and generated over $1M in Chibi-Go sales. The concept proved its value and the framework served as the foundation for future activations with other Creators. #### Featured Creator: Esther Choi KPR partnered with chef, restaurateur, and entrepreneur Esther Choi to anchor Ramen Wars around a real culinary voice. The founder of Mŏkbar and Ms. Yoo, Esther's cooking is rooted in the techniques of her Korean grandmother and driven by the belief that food is the ultimate form of cultural expression. To bring her into the KPRverse, we designed a custom 2D character in her likeness, translating her identity into the visual language of the game world. #### Meet BOON Ramen BOON Ramen is a phygital brand developed in collaboration with KPR and Chef Esther Choi. Born inside the game as a narrative centerpiece, it was designed from the start with a real-world future in mind: a retail brand built for supermarkets and store shelves. The branding covers the full scope, from core logo and world-building art to conceptual packaging. #### Game Design The core design challenge was building a game with enough depth to sustain three weeks of engagement without alienating a non-gamer audience. KPR's and Esther’s communities spans collectors, food enthusiasts, and Web3 natives. The experience needed to feel rewarding from the first session and worth returning to every day. The solution was a layered loop with a clear daily rhythm. Players arrive on the map, dispatch their Chibi-Go courier to a point of interest, and play a mini-game to earn ingredients. Performance in the mini-game determines how quickly the Chibi-Go returns, giving skilled players a tangible advantage without locking out casual ones. When the courier returns, a chest reveal delivers the ingredients, which feed into an XP progression system that unlocks new areas of the map over time. Each new area unlocks new ingredients and a new chapter of the story. The daily anchor is the Kitchen (BOON Ramen). Once per day, if a player has the right ingredients, they can craft a ramen dish and earn a raffle ticket. The more tickets accumulated, the more rewards a player becomes eligible for. Each location in Prisma City has its own identity, visual language, story, and set of ingredients, making exploration feel purposeful. We collaborated with Merci-Michel on final design execution, technical implementation, and balancing the game mechanics. My role covered the overall design direction, high-level gameplay loop, branding of all in-game entities and locations, art direction for the characters, kitchen, and environments, and production of all marketing assets, rewards, and partner decks. #### Images and video - https://rafaelcespedes.com/projects/kpr-web-game/carousel/01_rw-map_02.webp - https://rafaelcespedes.com/projects/kpr-web-game/carousel/02_rw-dialogue_02.webp - https://rafaelcespedes.com/projects/kpr-web-game/carousel/03_rw-kitchen_02.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/vid_esther-looping.mp4 - https://rafaelcespedes.com/projects/kpr-web-game/case-study/02_esther-kpr-03.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/03_Boon_storefront.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/04_boon-logo_01.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/05_boon-packaging_02.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/06_ramen-wars_user-flow_01.webp - https://rafaelcespedes.com/projects/kpr-web-game/case-study/vid_rw-collect-ingredients_02.mp4 - https://rafaelcespedes.com/projects/kpr-web-game/case-study/vid_ramen-creation_02.mp4 - https://rafaelcespedes.com/projects/kpr-web-game/case-study/08_prisma-map_01.webp --- ### KPR > More of identity now lives online than off. As people spend their lives on the internet, a new need has emerged: not just documenting the physical world, but creating, collecting, and belonging to things that are native to the digital one. - Year: 2022 - Disciplines: Identity - Role: Creative Director, Design Director - Artist: Minh Khoa - Website Partner: Resn - Designer: Rafael Cespedes (https://rafaelcespedes.com) More of identity now lives online than off. As people spend their lives on the internet, a new need has emerged: not just documenting the physical world, but creating, collecting, and belonging to things that are native to the digital one. Digital collectibles and avatars are how a lot of people now choose to show up. KPR is a world-building project built around that shift, focused on identity, collective narrative, and gamification. I led the brand identity and world art direction: the visual language, the cast of characters, and the aesthetic that ties the world together. The work below covers that identity and art direction. The KPR team gave the art direction one hard constraint: it had to feel futuristic without tipping into sci-fi cliché, current enough to live as a lifestyle brand. That balance is what would let KPR work in two places at once, a game world and something closer to a fashion label. The answer was a cybersolarpunk aesthetic. I led the brand identity, brand book, website, and marketing collateral, and owned the art direction and generative strategy behind the digital collectibles: a system that produced 10,000 Keeper avatars, each with a unique set of traits. The full collection is [here](https://kprverse.com/gallery). #### Images and video - https://rafaelcespedes.com/projects/kpr/carousel/01_kpr_portfolio_00.webp - https://rafaelcespedes.com/projects/kpr/carousel/02_kpr_portfolio_06.webp - https://rafaelcespedes.com/projects/kpr/carousel/03_kpr_portfolio_03.webp - https://rafaelcespedes.com/projects/kpr/carousel/04_kpr_portfolio_04.webp - https://rafaelcespedes.com/projects/kpr/carousel/05_kpr_portfolio_05.webp - https://rafaelcespedes.com/projects/kpr/case-study/01_kpr_logo_02.webp - https://rafaelcespedes.com/projects/kpr/case-study/02_kpr_colors_02.webp - https://rafaelcespedes.com/projects/kpr/case-study/03_KPR_Carousel_06.webp - https://rafaelcespedes.com/projects/kpr/case-study/04_KPR_Carousel_07.webp - https://rafaelcespedes.com/projects/kpr/case-study/05_KPR_Carousel_08.webp - https://rafaelcespedes.com/projects/kpr/case-study/vid_63894cb80c805525709078.mp4 - https://rafaelcespedes.com/projects/kpr/case-study/07_kpr_art_01.webp - https://rafaelcespedes.com/projects/kpr/case-study/08_kpr_collage_02.webp - https://rafaelcespedes.com/projects/kpr/case-study/09_KPR_Carousel_01.webp - https://rafaelcespedes.com/projects/kpr/case-study/10_KPR_Carousel_02.webp - https://rafaelcespedes.com/projects/kpr/case-study/11_KPR_Carousel_03.webp - https://rafaelcespedes.com/projects/kpr/case-study/12_KPR_Carousel_04.webp - https://rafaelcespedes.com/projects/kpr/case-study/13_KPR_Carousel_05.webp - https://rafaelcespedes.com/projects/kpr/case-study/14_kpr_art_02.webp - https://rafaelcespedes.com/projects/kpr/case-study/15_kpr_posters_01.webp --- ### Vidmob Design System > When I joined Vidmob the company had 38 employees. By the time this project started, it had grown to over 300. - Year: 2021 - Disciplines: Design System - Role: Lead Product Designer - Team: Lucy Bradshaw, Rafael Cespedes, Marina Porta, Vidmob Product - Designer: Rafael Cespedes (https://rafaelcespedes.com) When I joined Vidmob the company had 38 employees. By the time this project started, it had grown to over 300. The product had gone through multiple evolutions in that time, most significantly a shift toward complex data tooling. The existing design system wasn't built for it. Components were inconsistent across the product, design-to-dev handoff was slow, and there was no shared documentation. Design debt had accumulated to the point where it was actively slowing the team down. In partnership with designer Lucy Bradshaw and the Vidmob Product team, we built a new system from scratch to tackle these issues and more. #### Methodology The system was built on atomic design principles, a methodology that treats interfaces the way chemistry treats matter, breaking them into their smallest parts and building back up. **Design Tokens:** the core variables that underpin the system. Color, typography, spacing. Change a token and the change propagates everywhere. **Atoms:** the smallest functional units. Buttons, inputs, icons. The consistency here is what holds everything else together. **Molecules:** atoms combined into functional groups. Like an input paired with a label and a button. **Organisms:** complex, reusable sections built from molecules and atoms. Data tables, navigation bars, filter panels. **Templates:** layout and structure without real content. The skeleton before the skin. #### Key Considerations Design systems need to cater to the product they serve. Going into this we knew there were general problems to solve for, but also challenges specific to where Vidmob was headed as a platform. **Data Density:** Vidmob was becoming more of a data platform by the day. Components needed to hold up at high information density without compromising clarity or usability. **Data Visualization:** The system needed more than primitive and semantic colors. Charts, graphs, and tables are abundant across the platform, each requiring their own defined color logic. **Interactivity Patterns:** A lot of components in the platform carry hidden context. Hover states, tooltips, and drill-downs were doing a significant amount of the work. Getting them right required dedicated time and attention. **Accessibility:** Contrast matters even more when data density is in play. Vidmob's user base is wide ranging, from analysts to executives, making accessibility a baseline requirement. Each component kicked off with a brief covering its definition, stakeholders, and what was being redesigned. From there it moved through three phases: research, execution, and documentation. Research meant auditing other design systems, interviewing designers and engineers, and mapping existing usage across the product. Execution covered wireframing, UI exploration, and Sketch symbol creation. Documentation closed the loop with written specs and Zeplin links for engineering. Not every component needed every step. Complexity determined the process. [Design System Website](https://design.vidmob.com/475003233/p/4303cb-vidmob-design-system) #### Color The color system is organized into four categories: primary, secondary, status, and neutrals, with an extended palette for data visualization and illustrations. All colors are tokenized in two layers: option tokens define the ramps, decision tokens map them to UI contexts. The separation keeps the foundation stable as the product evolves. The system supports light and dark mode. Dark mode uses layered greys to express elevation, with color used sparingly as an accent. WCAG AA compliance is required across both. #### Typography The type scale was built on a modified Major Second scale with thirteen sizes, adjusted to align with a base-4 unit system. All sizes are implemented as rems in code to ensure consistent scaling across environments. Three typefaces make up the system: TT Commons, Maison Neue, and Maison Mono. TT Commons, while not optimized for product, was retained to maintain continuity with Vidmob's marketing brand. Hierarchy is determined by size first, color second. Every style is tokenized, from headlines down to supporting text and inline code, making updates a single-source change rather than a manual sweep across the product. #### Spacing & Shadows Spacing runs on a base-4 scale with ten defined steps, 4px to 80px, implemented as rems. Proximity drives grouping. No one-off values. Shadows are a three-step scale managing elevation across light and dark mode. Light mode uses higher opacity for visible depth. Dark mode relies on grey layering, with shadows playing a supporting role. #### Components In addition to the foundational elements, the system included a full component library covering avatars, buttons, cards, checkboxes, date pickers, dropdowns, form items, menus, radio buttons, search fields, and more. Each component was built to handle the density and complexity demands of the platform. #### Product Illustrations Illustrations serve a functional purpose first. Adding context, directing action, and filling moments where the UI would otherwise feel empty. Simple shapes form the foundation, with the contrast between round and sharp details reflecting the duality of creative and data throughout the product. Color is restrained: three shades from a single ramp per illustration, with white used selectively for negative space. Product illustrations are used mainly for empty states, onboarding, and announcements. A design system is never finished. Work on the Vidmob system has continued since I left in 2022, growing alongside the product. For anything not covered here, feel free to reach out. #### Images and video - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/01_Vidmob_DS_Intro_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/02_Vidmob_DS_Grid_04.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/03_Vidmob_DS_Icon_Cover_02.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/04_Vidmob_DS_Typography_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/01_Vidmob_DS_Intro_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/02_Vidmob_DS_Process_05.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/03_Vidmob_DS_Color_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/04_Vidmob_DS_Typography_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/05_Vidmob_DS_Styling_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/06_Vidmob_DS_Grid_05.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/07_Vidmob_DS_Icon_Cover_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/08_Vidmob_DS_Components_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/09_Vidmob_DS_Illustrations_07.webp --- ### Vidmob Creative Analytics Dashboard > Vidmob is a creative intelligence platform that uses AI to analyze the performance of video and image ads. - Year: 2019 - Disciplines: Product - Role: Lead Product Designer - Designer: Rafael Cespedes (https://rafaelcespedes.com) Vidmob is a creative intelligence platform that uses AI to analyze the performance of video and image ads. It helps brands and agencies understand why creative content performs well or poorly by connecting visual elements (color, pacing, text placement, faces) to ad metrics like click-through rates and conversions. This project was completed using Vidmob’s existing design system and high-level user experience frameworks. #### The Problem Before the dashboard existed, users landed directly into raw data-centric tools that lacked clear next steps. Although the data was powerful, there was no entry point that surfaced why a user should care, or gave them a quick read on what was happening across their account and campaigns. #### My Role As Lead Product Designer, I was responsible for: - Defining the requirements, scope, timeline, information architecture and widget framework - Translating the requirements into low-fi wireframes, prototypes, high-fidelity designs, and spec-sheets - Running and synthesizing user testing sessions - Collaborating with engineering and product management - Driving alignment across product, data science, and client success stakeholders #### Understanding the Users and Media The work started with understanding how clients actually run media. How a business splits into accounts, campaigns, ad sets, and individual creative. Each level carries its own budget, its own optimization goal. Getting that wrong means surfacing data that makes no sense in context. The harder problem was doing this across nine platforms at once. Facebook, Snap, Pinterest, YouTube, LinkedIn, Twitter, AdWords, DV360 — each with its own naming conventions, metric definitions, and attribution logic, none of them built to talk to each other. Pulling that into one view required a normalization layer underneath the dashboard: a common taxonomy that could hold all of them without flattening what made each platform distinct. UX audits across ad platforms and interviews with clients and internal Vidmob teams shaped what data actually mattered and where it needed to live. #### 7 Widgets. Every Platform. No Analyst Required. The core idea: every widget answers a question on the surface, but leads somewhere deeper if you need it to. Nothing is a dead end. Insights connect to Vidmob's production offering. Data connects to action. Everything across Facebook, Instagram, Snapchat, Twitter, Pinterest, YouTube, LinkedIn, AdWords, and DV360 rolls up into a single brand view without losing campaign-level detail, with dedicated Ad Account and Campaign views for those who need to go deeper. The dashboard was also built modular by design, making it easy to test different information architectures and build custom views for different user types. #### Key Feature: Insights Widget Insights are surfaced automatically, drawing from the client's account data and Vidmob's broader dataset. That combination unlocks signals no single account could produce on its own. Analysts can also upload reports directly into the widget, replacing the off-platform back and forth that had become the default workflow. Clicking an insight opens a modal with the full report and two actions: view the report in detail, or hit Create Project to hand off directly to Vidmob's production team with a brief auto-generated from the insight. #### Key Feature: Top Creative Elements Widget The widget uses AI to scan every element in a piece of creative, emotions, objects, people, text, motion, and maps each one against real ad performance data. The result is a ranked view of exactly which creative elements are driving results and which aren't, broken down by KPI and platform. A "Swipe" element might lift CPM on Snapchat but hurt it on Instagram. "Excited" emotion reads well on Facebook and Twitter but underperforms on Snap. That kind of signal is impossible to see inside any single platform's native reporting. Here it's a single table. Clicking on the creative elements allows for a deeper dive. #### Key Feature: Account Comparison Widget Most performance data tells you how you're doing. This tells you how you're doing relative to everyone else. The widget takes the distribution of a client's media, objectives, placements, and media types, and benchmarks it against Vidmob's dataset of advertisers in the same vertical. The result is a fast read on where a brand is over-indexing, on-par, or leaving spend in the wrong places compared to what's actually working across the industry. #### Key Feature: Campaign Snapshot Widget A quick read on how your creative is performing within a campaign, ranked against the account average. The widget surfaces top and bottom performers at a glance. Hover over any thumbnail to preview the creative without leaving the view. Click to go deeper, pulling up the full breakdown of how that specific asset is performing and why. #### Closing The full dashboard for this initiative also included: - Platform Fitness Score: an overall health rating for how well a campaign's creative adheres to platform best practices across duration, branding, messaging, and key visuals. - Performance Norms: benchmarks a KPI against Vidmob's full dataset, showing whether performance is above or below industry or platform averages over a selected time period. - Creative Element Visualizer: maps every element in an ad account as a bubble, sized by relevancy and positioned by KPI impact. Click any bubble to see how that element performs across creatives. #### Takeaways - Data normalization across nine platforms is only half the problem. The other half is educating users on how the numbers are compiled. Without that transparency, the data loses credibility. - A dashboard is only as good as what it links to. Inconsistent UX downstream undercuts the experience upstream. - The Vidmob design system wasn't built for this level of complexity and data vizualisation. Working within those constraints showed typography, color, spacing, and other areas needed massive improvement. - One dashboard for every user type is a compromise. The research pointed clearly toward role-based views, but the infrastructure wasn't there yet. That's the next problem to solve. #### Images and video - https://rafaelcespedes.com/projects/vidmob-dashboard/carousel/01_vidmob_cover_01.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/carousel/02_vidmob_dashboard_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/carousel/03_vidmob_widget_03-account-comparison_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/carousel/04_vidmob_widget_05-campaign-snapshot_02.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/01_vidmob_cover_05.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/02_vidmob_nike-account-set-up_02.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/03_vidmob_widgets_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/04_vidmob_widget_01-insights_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/05_vidmob_widget_02-creative-elements_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/06_vidmob_widget_03-account-comparison_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/07_vidmob_widget_05-campaign-snapshot_00.webp - https://rafaelcespedes.com/projects/vidmob-dashboard/case-study/08_vidmob_dashboard-full_02.webp --- ### IBM (Live Nation App) > At IBM I worked as a design consultant, embedded directly with clients to solve business and user problems through research, strategy, and design. - Year: 2017 - Disciplines: Product - Role: Sole designer - Designer: Rafael Cespedes (https://rafaelcespedes.com) At IBM I worked as a design consultant, embedded directly with clients to solve business and user problems through research, strategy, and design. Live Nation was one of those engagements. I was part of the team that won the initial pitch and went on to lead all design work. The goal was straightforward: build an MVP that worked for fans and for the business. Fans got a personalized experience before, during, and after the show. Live Nation saw a 47% year-over-year increase in mobile app ticket sales. The project became a key reference case for new client pitches. While at IBM I also completed work for BMW, Chanel, JetBlue, and others. For those case studies, reach out directly. #### Design strategy The redesign was centered on redefining the live concert experience. Unlike other ticketing platforms, Live Nation owns the venues where performances take place, over 150 across the US. That ownership created a unique opportunity to serve fans not just before the show, but during and after it as well. To establish the foundation, we conducted stakeholder interviews, a competitive mobile app audit, a live music fan survey, persona alignment, and an as-is customer journey mapping exercise. The takeaway was consistent: fans want a frictionless, personalized experience from beginning to end. That insight shaped three key design opportunities: a discovery experience surfacing shows relevant to each user, a streamlined ticket purchasing process, and a single source of truth for all concert and venue information. #### Onboarding The onboarding experience was designed to learn as much about the user as possible, so the app could serve them better from day one. To drive completion, we anchored it around a $20 concert ticket reward, broken into four steps worth $5 each: syncing a music account, syncing Facebook, creating or logging into a Live Nation account, and selecting favorite artists. The incentive structure proved effective. Users were motivated to complete steps they would have otherwise skipped, and the data gathered from music taste, artist preferences, and account history became the foundation for personalizing the in-app experience that followed. #### Concerts The Concerts page is the first place the onboarding data goes to work. Rather than defaulting to a generic feed sorted by proximity or popularity, we led with the Recommended tab: a personalized list of upcoming events built around each user's favorite artists. For users who skipped onboarding, an empty state prompts them to add favorites directly from the page, keeping the path to personalization always within reach. #### At Venue On the day of a show, the app's homepage automatically transitions to the At Venue experience. This is where Live Nation's venue ownership becomes a tangible product advantage. While other ticketing platforms stop at the transaction, Live Nation has direct relationships with the venues, and the app was designed to activate that. The At Venue page gives users access to everything they need before, during, and after the show: seat upgrades, food and beverage ordering directly to their seat, ride booking, hotel recommendations, parking info, venue rules, and more. No searching, no switching apps. Everything is surfaced in one place, timed to when it's actually useful. #### Images and video - https://rafaelcespedes.com/projects/ibm-live-nation/carousel/01_live-nation_logo.webp - https://rafaelcespedes.com/projects/ibm-live-nation/carousel/02_live-nation_mockup.webp - https://rafaelcespedes.com/projects/ibm-live-nation/carousel/03_offset_comp_247173-1.webp - https://rafaelcespedes.com/projects/ibm-live-nation/case-study/01_live-nation_logo.webp - https://rafaelcespedes.com/projects/ibm-live-nation/case-study/02_live-nation_onboarding.webp - https://rafaelcespedes.com/projects/ibm-live-nation/case-study/03_live-nation_ticketing.webp - https://rafaelcespedes.com/projects/ibm-live-nation/case-study/04_live-nation_in-venue_01.webp - https://rafaelcespedes.com/projects/ibm-live-nation/case-study/05_live-nation_filter.webp --- ### Markor International Home Furnishings > Zest was the newest addition to Markor Home Furnishing. Markor is one of the largest mid to high-end furniture companies in China, with approximately 400 stores across 150 cities. - Year: 2016 - Disciplines: Web - Role: UI Designer - Team: Alex Jones (UX Designer) - Designer: Rafael Cespedes (https://rafaelcespedes.com) Zest was the newest addition to Markor Home Furnishing. Markor is one of the largest mid to high-end furniture companies in China, with approximately 400 stores across 150 cities. Zest was Markor’s first fully customizable mass-produced real-wood furniture line of products. With their new state-of-the-art factory, which can organize, track, and deliver millions of configurations, we set out to build an online experience centered on customization. #### Fully Customizable & Delivered in Weeks At the heart of the Zest experience is customization. In a cabinet, customers could customize the color, legs, knobs, top surface, and even the individual inserts. This level of flexibility extended to the entire catalog, allowing for millions of possible combinations. The system we created was robust enough to handle the complexity of this feature. In addition to the customization engine, we created an entire e-commerce experience, with over 50 unique pages. The catalog for the initial launch included over 150 items. #### Images and video - https://rafaelcespedes.com/projects/markor/carousel/01_Zest_Slide_02-1.webp - https://rafaelcespedes.com/projects/markor/carousel/02_Zest_Slide_04.webp - https://rafaelcespedes.com/projects/markor/carousel/03_Zest_Slide_01.webp - https://rafaelcespedes.com/projects/markor/carousel/04_Zest_Slide_05.webp - https://rafaelcespedes.com/projects/markor/carousel/05_markor.webp - https://rafaelcespedes.com/projects/markor/carousel/06_Zest_Slide_06-1.webp - https://rafaelcespedes.com/projects/markor/case-study/01_Zest-configurator-4.webp - https://rafaelcespedes.com/projects/markor/case-study/02_Zest-Product-listing-4.webp - https://rafaelcespedes.com/projects/markor/case-study/03_Zest-furniture-icon-set.webp - https://rafaelcespedes.com/projects/markor/case-study/04_Zest-lifestyle-3-1.webp --- ### Manhattan Skyline - Year: 2016 - Disciplines: Identity, Web - Role: Brand Designer, Design Direction, Product Design - Designer: Rafael Cespedes (https://rafaelcespedes.com) Case study coming soon. The images below are what the site shows for now. #### Images and video - https://rafaelcespedes.com/projects/manhattan-skyline/carousel/01_MSky_Slide_01.webp - https://rafaelcespedes.com/projects/manhattan-skyline/carousel/02_MSky_Slide_06.webp - https://rafaelcespedes.com/projects/manhattan-skyline/carousel/03_MSky_Slide_05.webp - https://rafaelcespedes.com/projects/manhattan-skyline/carousel/04_MSky_Slide_04-1.webp - https://rafaelcespedes.com/projects/manhattan-skyline/carousel/05_MSky_Slide_03.webp - https://rafaelcespedes.com/projects/manhattan-skyline/case-study/01_MSkyBrandingCover10-1.webp - https://rafaelcespedes.com/projects/manhattan-skyline/case-study/02_MSky_Slide_04-1.webp - https://rafaelcespedes.com/projects/manhattan-skyline/case-study/03_MSky_Slide_06.webp - https://rafaelcespedes.com/projects/manhattan-skyline/case-study/04_MSky_Slide_07.webp - https://rafaelcespedes.com/projects/manhattan-skyline/case-study/05_MSky_Slide_05.webp