Badge Designs

Emblem-style badge marks, each designed to stand alone as insignia.

SiteOps Profile Badges

Internal profile badges for programs across the SiteOps organization, and one of my favorite projects. I worked closely with each program’s stakeholders to understand their objectives, then designed badges to match. Each shape was chosen to carry a specific meaning and to support the program’s goals. The project let me use my design and art direction skills in a fun and rewarding way.

Tools used: Paper for sketching, Illustrator and Figma.

Meta Infra Data Center

Iconography and logos that gave IDC TeamEx programs and communities their own identities.

Meta Infra Foundation

Identity work that gave the Infra Foundation org and its programs a recognizable look.

Commissioned Logo Design

Logos designed for clients: two barbecue brands and a beer festival.

Emblems & Challenge Coins — US Air Force

Coin and emblem designs from my time at Laughlin AFB, including the Civil Engineer Squadron coin and the AF Sergeants coin.

The problem

SiteOps needed an identity that was its own within IDC. The old mark was a pentagon badge: a spiral of lines around a chip holding the Meta symbol, with “Meta Infra Datacenter Site Operations” set around the edge.

The challenge was to redefine how SiteOps looks inside IDC without leaving Meta behind. The new identity had to stay true to Meta’s core values and brand colors.

Key decisions

Explore widely, then narrow. I sketched on paper first, then built the directions in Illustrator and Figma. The proposal shows twelve options, each in full color and in black, from skyline outlines and dot grids to server stacks and cubes.

One month from brief to launch. Approval ran in four weekly steps, so leaders could see the work, choose, and sign off without the project dragging on.

1. Week 1Options

   I turned around twelve options in a week.

2. Week 2Leadership vote

   Leaders voted for their top three.

3. Week 3Final adjustments

   I refined the chosen direction.

4. Week 4Launch

   The new logo went live.

Let color psychology lead. Working with organizational leaders, I made the case for color psychology in the logo. We chose blue for its association with respect and trust, qualities that matter for communication and relationship-building, and it keeps the mark within Meta’s brand colors.

Build the mark from the work itself. One leader described SiteOps as the heart of Meta. That idea shaped the logo: a shield-shaped hexagon formed by data servers, symbolizing harmony and balance and reflecting the team’s commitment to cohesion and stability. The palette and type stay close to Meta’s system: blues and grays, set in Optimistic Display Bold and Light.

Make it easy to use. I also wrote a style guide to help stakeholders create decks and slides for their internal programs, with clear guidelines and recommendations on formatting, design and content. It covers fonts and sizes, main and accent colors (accents only to specify teams), spacing, alignment and design elements, and links to the team’s slide templates, media library and wiki.

The wiki overhaul

The most demanding part of the project was overhauling the SiteOps wiki. It wasn’t only about looks: function and ease of use mattered just as much. I worked with program managers across the team to decide which information was essential.

The biggest problem was information overload. Program managers tended to add excessive detail with little hierarchy, and a team survey showed that most respondents felt overwhelmed by the cluttered interface and the amount of information.

Step 1 of 4

Old SiteOps wiki design

The old wiki gave every program the same weight. Mission text, team and pillar tiles, a data center map and resource links ran down one long page with little hierarchy.

Step 2 of 4

Our design approach

We centered the redesign on clarity and on the people using it, so information is easy to find and key messages come across. A hero banner opens the page and sets its tone.

The body is split into three columns, each serving a different audience. The first is for internal team members: the global team, team resources, quick links and operational resources. The second is for external readers: mission and vision, strategic priorities and goals, and the team pages. The third carries global metrics at a glance: fleet, capacity and ProdOps. Each column holds content chosen for what that audience expects, which keeps the page clear and accessible for both stakeholders inside the organization and users outside it.

Step 3 of 4

From wireframe to live pages

The first redesign opens on a hero banner that welcomes the reader and says who we are and what we do, then moves into the year’s strategic priorities, global metrics at a glance, a data center map, team news, new hires and videos.

Step 4 of 4

The current wiki

The current version keeps that structure and adds a stronger visual identity, with workplace groups to follow, a regional team directory and collapsible sections that keep the page short.

‹

Old wikiWireframeRedesignCurrent

›

Designing within the wiki’s limits

The wiki allows only HTML and a little CSS, so the challenge was to make navigation easy with those tools alone.

The role tiles took the longest. I had to find workarounds and duplicate code so the tiles stay aligned when someone collapses one. Color changes normally aren’t possible, but duplicating the code made them possible, so an open tile is highlighted and people can find information quickly. I’m particularly proud of it because I haven’t seen this done in a wiki before.

Workplace banners

I also designed the banners that headline SiteOps announcements on Workplace, including the job roles launch, the InSite podcast, the end-of-year talk and the quarterly business review. They carry the same identity as the logo and style guide, so every post reads as SiteOps.

The result

SiteOps now has a single identity that reads as part of Meta: a server-built mark, a blue-and-gray palette from Meta’s brand, and a consistent type system. The style guide gives stakeholders what they need to carry it into their own decks and slides.

Tools used: Paper for sketching, Illustrator and Figma for the graphic assets, and HTML for the wiki itself.

Overview

Stay Hydrated is a drinking water mobile app. The company’s mission: use software to get people to drink more water and eat healthier. My job was to turn that mission into an app people would actually keep using.

The challenge

Most food-related decisions aren’t the healthiest, and people everywhere could be better educated on the long-term damage of not drinking enough water. Most people don’t drink enough water per day, and most could make healthier food-related decisions.

Learning goals

• Users learn the importance of drinking water and eating healthy.
• Users can classify healthy and unhealthy food options.
• Users can monitor how much water they need to drink a day.

Research

Being healthy takes time, money, and sacrifice, so research started with who the users are and what gets in their way. I mapped the user, the problem, and the solution, then tested three assumptions against seven personas, from an engineer to a full-time student.

In their words

“…I have an app before that tracks my food and water but I stopped using it because it was complicated to use, you have to click a lot of button…” — Engineer, 25

“…I have never used an app for that, but I have a water tumbler that I use as my reference of how much water I have taken in a day…” — Call center agent, 30

Insight

• Most personas know health matters in their daily activities, but income, kind of work, and budget limit their options, so they take the cheaper route — usually the unhealthy one.
• Most have tried tracking apps and stopped, because of time, experience, and interfaces that are unfriendly and complicated.
• All value water for getting through the day, and opt for tap.

The less interaction the user has, the more chance they will use the app.

New mission

Build an app that is user friendly and easy to use, with a cool interface that motivates users to drink more water.

Process

1. 1User Research
2. 2Wireframing
3. 3Product Prototyping
4. 4User Testing
5. 5UI Design
6. 6Visual Design & Branding

Paper wireframes for the Profile, Homepage, and Customize screens went in front of users, who answered on sticky notes. Their feedback shaped the prototype before any visual design began.

The solution

Drag a drink, don’t fill a form. “What did you drink today?” — drag the drink icons from the bottom into the open space. Logging a drink is one gesture, because fewer interactions mean more use.

A screen that reacts to you. The home screen shifts from blue to yellow to red alongside the heart-rate reading, with a prompt to “Drink some water!!” when it runs red. A smart watch or Health Kit can be connected.

Progress you can see. The profile shows a status — excellent, enough, or not good — plus points collected by drink, daily to yearly views, and a QR reward to redeem.

A first run that asks little. Sign in with email, Facebook, or Google, connect a watch or Health Kit, and pick the drinks you always have besides water.

Testing & results

Overall, the user testing was successful, and many suggestions went into improving usability. Testers liked that it was “simple and clean,” “easy to use,” and that the icons worked well. The confusion — “I’m not sure what to do,” “what’s the empty middle screen” — came from one place: the prototype’s lack of animation. Users eventually solved it and understood the nature of the app.

Next

Prototype the motion the testers needed to see.

The problem

Bento ordering is fixed-portion and rigid: the box arrives as a set menu — set items, set amounts — and the apps that sell it inherit that rigidity. There is no room to make the meal your own.

The idea came from the table. I love Japanese food and almost always order a bento box, and every time I ate with family and friends I heard the same wish: let me choose how much of each portion I get. It isn’t only my table: people in general want to customize their food as much as possible, and a fixed box gives them no say. So I designed an app around it, where anyone who wants more rice or more meat can adjust the grid from 0 to 100% in 25% steps.

Key decisions

Portions you drag, not pick. The signature interaction replaces size menus with a direct gesture: drag the serving line, and the portions change with it, from 0 to 100% in 25% steps. Portion control becomes something you do with your hands, not something you request.

A five-step guided flow. Ordering runs as a step guide — Create, Select, Modify, Deliver, Confirm — so a customizable order never turns into a complicated one; each step asks for one thing at a time.

A visual language rooted in Japan. The mood board grounds the design in Japanese culture, where the bento box began; its interiors, gardens, and bonsai set the tone the interface follows.

The result

The final screen set pulls the system together: the landing page opens on the menu categories and the steps ahead, and the box that arrives is portioned by the person who will eat it. One direct interaction loosens a rigid format.

The project earned an A. My instructor and a few classmates said it felt like a real product: they wished Imbento actually existed, and that chains like Chipotle, and especially Panda Express, could put it to use. My classmates also agreed that restaurants should let customers decide how much of each portion they get.

The problem

The brief from my professor: create a recruiting ad campaign for your dream company. I chose Google.

Google’s identity is unmistakable, which makes it hard to extend: the series has to stay instantly recognizable while saying something new — experimental layouts that balance bold typography, photography, and the iconic identity, without breaking the brand.

Key decisions

Play with the logo’s letters. The first drafts establish a brand-consistent aesthetic, and the first version builds the posters from the wordmark with letters dropped. The feedback likes the background colors but asks the right question: with letters missing, does it still communicate? The layout goes back to work.

Rebuild on a modular grid. The second version answers with structure: a modular grid system creates a more dynamic hierarchy across typography, photography, and identity. It also plays the logo as it appears on Google’s search page — a search engine that already knows what you’re looking for.

Push the playfulness, and add the ask. The next feedback round asks for a call to action and even more play. The final direction sets the series among everyday objects from home and workspace, and weaves in Android’s dessert names — Cupcake, Donut, and Honeycomb.

The result

The final feedback lands where the series aims: the posters’ playful tone captures the company’s identity — and each poster now closes with its call to action.

The project earned an A. My professor said she enjoyed the journey of the project, and that building on Google Search was a smart move, because search is where it all starts with Google.

The problem

The effects of television, video games, and music on children are easy to dismiss as harmless — adults often neglect them entirely. And they land hardest where supervision is thinnest: at home.

The brief was to create an awareness campaign for a cause of our choice, and I chose this one because of my nephews and nieces. I believe media has real power, and it can be used for good or for bad. Adults forget that children don’t fully understand what they watch, read or see. It stays with them anyway, and they rarely ask what it meant.

Key decisions

Speak to the parents, not the children. Every message addresses the adult: the posters ask “Aware?” and the campaign asks whether we are all responsible enough. Awareness is framed as the adult’s job.

Give the campaign a watching eye. The identity builds on a single eye mark set over a pattern of faces: the nest is the home, and the eye is the attention the campaign asks adults to pay.

Confront each medium directly. Television, video games, and music each get their own poster — no abstract danger, just the everyday inputs named one at a time, in the series below.

The result

Three media, three posters, one question for the adults in the room. This project is dedicated to my nephews and nieces.

The project earned an A. My professor said it was very creative to take one photo and use it as the main visual and the design elements of the whole campaign. That photo is graffiti I shot in an alley off Mission Street in San Francisco, and its crowd of watching faces became the pattern behind the identity.

The collaboration

This started as a conversation between two creatives, not a client brief. He had the songs and a clear sense of who he wanted to be. My role was to translate that into a visual identity through photography, typography and album artwork, pushing each idea further while keeping him the author of his story.

Every collaborator has a creative mind worth protecting. That belief shapes how I direct.

I lead the creative direction, the covers and the photography, and he makes his own videos and reels. He brings the ideas and asks what I’d do with what we have. When he changed his stage name, I advised him to carry his existing audience across, since starting with followers beats starting at zero. His answer was personal: he wanted a fresh start. I respected that, and the new account grew to about 700 followers in its first three months.

Each release became a chance to explore something new while building a recognizable visual language. When he took a new stage name, the challenge wasn’t to start over. It was to carry forward what we’d built and give the next chapter its own voice.

1. 1Listen & talk through the story
2. 2Explore directions together
3. 3Direct & shoot the session
4. 4Design cover & type
5. 5Release & read the response

The creative decisions

One monogram, everywhere. A bold TV monogram became his signature. It lands on the covers, the portraits, and the heart of the QR code. It also reminded him of his first tattoo, so he fell for it the moment he saw it. That’s the reaction I’m after: an identity that feels like him before it explains itself.

Red and black came from knowing him. I pushed this direction because it matches who he is. Red is his favorite color, it signals passion, and as an Aries he says it ignites his emotions. He is bold and honest, a firecracker: what you see is what you get, and you can read him easily. The identity had to read the same way.

Three covers, one winner. For one record I developed three directions and we chose on concept, not an audience test. The mirror won: him confronting his own reflection, with the flipped S letters in the title echoing it.

Every release gets its own world. For “Magic Man” the song felt hopeful and assertive, so we built a world to match: a lone figure on another planet. I directed and shot the sessions myself in Valley of Fire.

A business card that connects listeners directly to the music. The portrait goes on one side, the monogram and a QR code on the other.

Chapter two: a new name

When he changed his stage name to Vé Tristan, the brand had to move with him. The overall theme stayed bold red and black, but he wanted to try a different logo style: flashier and edgier than the original monogram. Engagement on Instagram kept pointing to the strongest work, so “Savior” leans into it: the same high-contrast photography, plus a brushed red title that cuts across the frame like a slash.

The result so far

It is still unfolding. Every release adds to a system people can recognize, and the response to each one shapes the next. The follower growth reflects the whole release effort, not the design alone. What the design did was give the audience something instantly recognizable to respond to. Followers from before the name change and new ones alike have said they like the new styling: it feels more authentic, and they feel connected to it.