Just some of the brands and clients that I've had the pleasure of working with since 2005.

Telemetry Pipeline

Mezmo

I led the design of a greenfield data management platform enabling teams to seamlessly ingest data, apply complex transformations, and route outputs to any destination. My contributions included defining the product vision and strategy, conducting market and user research, and recruiting top-tier talent to tackle sophisticated challenges in a competitive market. I observed 50+ customer interviews with ideal end-users (SREs) and budget-owners (CTOs/VPs) to understand their needs and problem-solving attempts.

From sketches to a $50M Series D 🙌

1. Validated market need by identifying customer intent for key use cases
2. Secured new customers, optimized signup flows, and expanded the log analysis customer base by promoting the pipeline offering with in-app nudges and relevant use cases
3. Led outreach program to find ideal customer profiles and find design partners
4. Secured Series D with first beta in collaboration with Head of Product (with demos, decks, beta testimonials, and future design visions comps)

Pan, zoom, and navigate with ease 🔎

Add source, processor, or destination nodes ❇️

Connect nodes gracefully 🔗

Use Tapping to validate processors in flux ䷉

Then just deploy & monitor 🏝️

“Indispensable— Love the ease of use and simplicity of the UI. Mezmo Pipeline has changed the way we do business and handle escalations for the better, I'll never go back.”

Kwesi S, Engineering Manager
★★★★★

System Overview offers an elegant ten-thousand foot view for budget owners (CTOs, VPs of Enginnering, CISOs, etc) to understand costs at a glance.

I played a key role in shaping a greenfield DevOps product, guiding its evolution from early VP diagrams, wireboard sessions and wireframes to a successful launch. Following the rebranding from LogDNA to Mezmo, we expanded from Log Analysis into Telemetry Pipelines to drive exponential growth in a booming market. Over a year, I led my design team in transitioning off the legacy product (with impactful, lasting features), defined the interaction model vision, validated MVP features and strategy, recruited top product and engineering talent, and facilitated feedback and QA from beta to launch and beyond.

I lived in Figma's trenches with my lead product designer daily in crafting the core interaction model with the Pipeline’s canvas, columns, nodes, overflow-menus, the fly-out panel (for adding or editing nodes), data visualization graphs, navigation, and the modes (deployed, paused, and editing). I also discovered adjacent diagram-building products with similar frameworks to seed the best approaches for our offer.

My role was to set a vision for the interface that could scale to support the hundreds of potential features and capabilities we hope to add over time so that the product is accessible, friendly, intentional, and beautiful.

My most impactful contribution to the Telemetry Pipeline was driving continuous improvement through facilitating feedback sessions, prioritizing feature requests and bug fixes, and conducting SWOT analyses with product, design, and engineering to focus on high-impact initiatives. I delegated work strategically based on designers’ expertise and career goals and partnered with EMs and PMs to improve Jira tracking and develop the team’s first roadmap.

Discovering Tapping, our flagship feature 🏁

A pivotal feature, "Tapping," emerged from these feedback sessions. Initially, the Pipeline allowed users to receive data from sources, apply a limited set of transformations, and send it to destinations, but lacked a way to validate transformations within the app. Users had to manually compare source data with destination outputs, introducing inefficiencies.

To address this, we proposed a vertically split panel within the Pipeline UI, incorporating a tabbed interface to streamline workflows. This design enabled users to view and validate data at any stage, ensuring transformation success and enhancing the overall user experience. My team championed this approach to centralize comparisons and improve workflow efficiency.

I collaborated with our Customer Success team to establish a design partner program, identifying prospective customers, understanding their goals for our new offering, and fostering relationships to support a product-led growth strategy.

The Pipeline product launched successfully, becoming the cornerstone of Mezmo's offerings. Its beta program played a pivotal role in securing a $50M Series D funding round led by NightDragon, Emergence and Initialized Capital.

Trust & Growth

Mezmo

During a fraught period, our platform was experiencing an unfortunate number of outages which led to a loss in trust from our customers while an unsuccessful marketing website redesign led to stagnent signups. After both Engineering and Marketing executives were replaced, we froze new feature developement to fix our outages. We on the product team took swift action with limited resources to earn back trust and re-spark organic growth and signups.

My small team turned outages into NPS points 🤝

1. Experienced our highest, lasting spike in signup click rates (+6%) after website redesign
2. Increased trial account rates without any negative impact on users sending us real data (reduced onboarding drop-offs at data ingestion stage with prominent sample data option)
3. Reduced drop-offs (-5%) during the data ingestion waiting period by adding educational carousels, introducing key use cases
4. Converted trial users who chose sample data into mid-sized enterprise accounts (without our changes, they otherwise would have left)
5. Shipped over a dozen product enhancements to give context and help during outages or if the end user is experiencing a faulty connection
6. Increased perception of speed with animated loading UI skeletons

Loading skeletons increase perception of speed 🏃

Homepage redesign to increase signups by 4% ⏳

Notifying when connections are lost and found 🛜

Carousel to retain during ~80 second setup ⏳

Exploring ways to fail more gracefully 😇

“Flawless experience— Love its reliability. I can always rely on Mezmo to check out critical logs without ever worrying whether the service is up or if its showing correct and current info.”

Pratik K, Software Engineer
★★★★

Okay, from the start with challenging context 😬

1. Replaced our VP of Eng (hired to many juniors, leading to outages)
2. Engineering freeze on new feature work to fix outages
3. Replaced our CMO (their website redesign hurt sign ups)
4. I was hiring and onboarding my first design report
5. Product scrambled to increase customer trust and trial sign-ups with only a PM, two front-end devs, my report and me

First, our website was broken ⛓️‍💥

1. Identified top problems with new marketing website (aka front lawn)
2. Stock photography wasn’t landing; cold stock photos and gradients
3. Cookies consent sticky was broken
4. Responsive/mobile views were broken
5. Delegated my first hire to redesign it while onboarding him
6. I personally coded the WordPress redesign
7. Also juggled trust and growth work (see below)
8. Our prominent CTAs and visuals led to higher signups

The final version of the website featured my lead designer's awesome, looping, lofi abtraction animation highlighting our log viewer, boards, screens, and alerting. I designed the original abtractions, and he brought them to life!

Second, our product was not failing gracefully during outages ‼️❓

1. Lost connections were not communicated in-app, it would just stop working
2. The app needed a hard refresh to work, even after connected again
3. Time-out errors took too long and were vague
4. Instability created a perception of our service being slow
5. Customer support were answering the same questions, manually
6. I shipped a dozen+ critical urgent fixes to alleviate customer and support pains

Here is a thorough walkthrough of the in-app releases to establish trust and reduce strain on our internal service design and customer support resources.

I also shipped a suble, beautiful set of CSS animated loading skeletons for the parts of the experience with searches that a few moments. One study found that “68% of test participants [percieved] that left to right wave animations [meant a shorter loading time].” This was a win even after our platform's stability was attained.

Third, our sign up and onboarding flows were missing opportunities and had friction 🛑

Following our successful marketing website redesign that increased sign-ups, my Product Manager and I identified opportunities to improve trial user onboarding through growth experiments and A/B testing, targeting the highest drop-off points in the process.

By analyzing Fullstory user sessions and configuring Heap funnels, we discovered that the data ingestion phase of onboarding deterred trial users by requiring real customer data. To address this, we emphasized the sample data option, making it more prominent and accessible, which improved conversions at this critical stage.

Before I was even hired, I had identified an ~80 second opportunity gap in the user journey following data submission (real or sample). During this waiting period, users encountered a blank screen with a loading animation, risking disengagement and potential drop-off.

To address this, I designed a carousel featuring four concise GIFs that showcased our top use cases and the key workflows most associated with conversion to paid accounts. This approach not only retained user attention during the wait but also provided valuable insights into the platform's capabilities, fostering engagement and driving conversions.

My final design implementation effectively introduced our most valuable use cases, significantly reducing drop-offs at this stage of the onboarding flow. Additionally, I conducted A/B testing on the sample data card content, optimizing for the highest-performing iteration to further enhance user engagement. Lastly, our key takeaway was that the carousel's purpose was less about delivering "aha" moments and more about providing engaging content to fill the ~80-second wait period effectively.

Funnel optimization outcomes 🙌

1. Increased trial accounts without any negative impact on users sending us real data
2. Reduction in drop-offs at the data ingestion step due to the prominent sample data path; these users otherwise would have left
3. Reduction in drop-offs during the ~80 waiting period due to the educational carousel
4. Statistically significant increase in sign up completion
5. Shortly after launch, customer success spotted some sample data customers and converted them into paid accounts, the first being an EM from Dell

TV Auth

Verizon

Verizon Media brands are expanding to smart TV platforms, with apps launching on tvOS, Android TV, Roku, and more. This initiative brings brands like TechCrunch, HuffPost, Yahoo, Yahoo Sports, and Yahoo Finance to these platforms, enhancing video capabilities to drive our reach and revenue.

How I increased sign-ins from 43% to 57% ☑️

As part of the Identity Platforms team in Technology Platforms, I led a cross-functional effort spanning four teams to develop a multi-namespace, multi-platform sign-in framework, enabling seamless authentication across brands.

We shipped a delightfully simple solution 📺

The story of how I guided us there

The TV interface shown above showcases the delivered design, cycling through Verizon Media properties. Below is the mobile sign-in flow, implemented using our internal Identity Design System, featuring my contributions that successfully shipped to millions of users.

I led the development of a white-label sign-in framework for Yahoo! tvOS, following the v1 app launch with an onboarding video, basic sign-in, and simple guest option. Designed to support a growing app pipeline, the framework respected user intent, reduced friction, and securely enabled features like recommendations and favorites while minimizing redundancies. Aligned with Verizon Media's OKR to drive daily membership, the project began with a discovery session to define requirements and explore solutions. Drawing on my expertise with ten-foot interfaces, I proposed a seamless authentication process via secondary signed-in devices, avoiding the inefficiencies of TV remote typing.

Our business-needs and user-needs had both overlap and conflict. On the business-side, we needed to get as many users signed-in as possible as that directly impacts our revenue. On the user-side, we of course needed to offer a frictionless experience, but also the option to skip it for now.

Below is a diagram I put together after meeting with stakeholders to help us wrap our heads around the sign-in methods, the key use cases, and business needs.

Our VP of Identity, Senior Principle Engineer, and I picked two of the four sign-in methods that were the clearest choices for reducing friction for users as well as being cost-effective solutions to build across our brands with video content.

To streamline v2 app sign-in, we developed a dual-method page with an authentication URL/code and a QR code to minimize typing and support all skill levels. I also planned integration with Yahoo Home's upcoming authenticator tool for instant sign-in when the smart TV and phone share a secure Wi-Fi network, bypassing the dual-method flow. A prototype validated these methods' technical feasibility and provided valuable insights.

To our surprise, roughly 43% of our Daily App Users signed in to the silently launched version of the app.

Analytics from the silent v1 launch showed a 43% sign-in success rate, with most users favoring the URL + code method, while only one tested the QR code. Despite QR codes gaining global traction, U.S. adoption remains nascent but promising. Using these insights, I collaborated with stakeholders to redesign the sign-in flow, addressing key UX and visual issues. I refined wireframes into final designs with Sketch and Zeplin and built an interactive prototype to fine-tune animations.

We explored splitting up the two methods into different screens, and found that deciding to use the URL + code method first would be a disservice to the persona who strongly prefers QR codes. Flipping it the other way around would lead people to skip the sign-in process because they don't understand how to use QR codes. I pushed for keeping both methods in a single screen, but in order to accomplish that, we need to carefully audit every element and cut down to just the basics.

Single-screen is the way to go. What can we get rid of?

I advocated for shorter, user-friendly URLs, recognizing the need for simplicity when asking users to open a browser and type in a URL. Collaborating with a veteran engineer, we designed a versatile URL schema using a single subdomain for TV authorizations, VR, smart fridges, wearables, and more. Custom illustrations ensured continuity by visualizing user context. I also worked with the lead engineer and security team to simplify sign-in codes, adopting 8-digit numeric codes to prevent keyboard switching and enhance security against horizontal attacks, with 30-minute expirations and manual refresh for incomplete sign-ins.

Below you can see the more commonly used URL + code method. After the final "success" mobile screen, the TV interface would continue to the landing page.

Below you can see the more efficient QR code method.

After several rounds of iterations, tests, prototypes, design reviews, and an alignment with the Yahoo Apps Team, I got sign-off from stakeholders.

I explored every detail of how to display URLs, codes, QR codes, and instructions. We attempted to split them up into multiple screens, and landed on a minimal, two-in-one screen that has high scannability and can be understood at a glance. We pushed for the shortest code possible, and achieved high continuity between the TV and mobile flows by keeping a consistent visual hierarchy and brand tone. Lastly, this framework is simple enough to be used on multiple TV platforms, and by changing the colors and the logo, it is beautiful with each brand. Initial tests showed a double-digit increase in sign-ins, ~57% (Yahoo), a massive impact at scale.

Budgets

Mezmo

I designed two flagship data management features that empowered enterprise customers to stay within budget while maintaining access to mission-critical data. These back-to-back, successful launches reduced customer churn, increased self-service expansions, earned positive industry recognition for introducing intelligent budgetary guardrails—a differentiator in a competitive market, and earned me a promotion. I met with six of our largest Enterprise customers to define, simplify, and deliver a solution guaranteeing a clear budget while always keeping their most critical data readily accessible.

The road to promotion 💰

1. Built in close collaboration with Enterprise customers (earning ongoing design partners)
2. Dramatic reduction in projected churn and increase in self-service expansions
3. Cost control was the #2 reported reason for customers staying (#1, platform stability)
4. Positive brand PR for helping customers save money (we stand up for our people; practitioners and buyers, over our bottom-line)
5. Reduced our own cases of eating their data costs (win-win-win!)
6. Bought us quarters runway to fund a net-new product (our Telemetry Pipeline)
7. Earned myself a promotion to Product Design Manager

Why budget owners fear spikes 📈

1. Storing data is non-negotiable for budget-owners (our buyer personas; CTOs, CISOs, VPs of Engineering) because they have a fiduciary responsibility to find root causes of incidents
2. Data volumes are steadily rising, but value is linear at best but they pay for it because of liability prevention and fear
3. Cold storage is cheap, but indexed data is costly (and they need it to be indexed to get the value out of our platform)
4. Budgets can be obliterated within hours of a spike
5. Most data during a spike is useless noise
6. Primitive tools exist, but they notify when it is too late and require manual intervention
7. Our customers are smart, and they were trying to solve this problem in clever ways (so we built these features to be optimized for their budgeting needs)

The "spiked budget" experience is like accidentally streaming 4K videos abroad, only to find your phone bill has quadrupled—but on a much larger scale. One customer shared how an accidental infinite loop function was deployed and ran overnight, costing their CTO thousands of dollars for that simple mistake. 😬

To address these significant, frustrating issues, we introduced Usage Quotas, a revisioned take on our primitive Exclusion Rules feature. While the original feature directed data to cold storage without considering budgets, this offers smart, conditional daily and monthly thresholds. These quotas automatically trigger cascading exclusion rules to prevent costly overages, inspired by enterprise customers’ attempts to manage similar challenges.

Usage Quotas offers budget aware guardrails 🧠

By enabling budget-sensitive exclusion rules, our users can default to indexing most data, and enjoy peace of mind that automated frugalities will trigger if needed.

Index Rate Alerts addresses spike prevention from a unique perspective. Complementing Usage Quotas, it provides time-sensitive alerts within minutes of a spike, supplementing the budget-sensitive, triggered exclusion rules.

By analyzing both the fixed log lines per second and the relative monthly log rate (calculated using deviations from the previous month's data), we can quickly identify anomalies that may threaten budgets. When manual intervention is required, customers receive actionable alerts with clear, step-by-step guidance to manage the spike effectively. This proactive approach ensures rapid response and minimizes budget impact.

Index Rate Alerts for intelligent spike detection 🔔

With two methods to detect spikes, we can notify the right people within minutes, providing key information to help identify the cause.

In collaboration with enterprise customers, my PM and I delivered key updates to enhance the system's functionality. These included new notification channels (PagerDuty, Webhook), custom scheduling to reduce false positives during anticipated high log volumes, and visibility into top application sources, enabling developers to identify spike causes more efficiently.

I accounted for every possible edge case including data gaps and every permutation of the feature statuses with clear messaging.

I refined the copywriting to replace terms like "lost," "delete," and "drop" with more customer-empowering language such as "do not retain" and "discard," fostering confidence in their autonomy to decide what data to index. This approach acknowledges and reduces anxiety budget owners often experience when making selective data indexing decisions.

“Awesome product, affordable price— It's easy to use, very affordable (you pay for what you use), and the customer support is attentive.”

Alexander L, CTO
★★★★★

“SaaS logs solution for affordable price— Perfect pricing that suits our needs. Also able to backup logs for history on S3. Easy setup with K8s.”

Nick M, Software Engineer
★★★★★

Some reflections 💭

1. I wish this was a single feature (we shipped these back-to-back, and didn't decide to build Index Rate Alerts until Usage Quotas was launching)
2. I wish we iterated more, because shortly after launching, we pivoted to a our new product (Telemetry Pipeline took all of our resources)
3. I would have loved to see how these evolved, given that we noticed novel, unexpected usage of these features (it's hard to leave something behind that was working to take a risk on something new with more potential upside)

Zodiac

Theory11

Zodiac is a seemingly impossible magic trick sold on the market that secretly uses technology to allow the performer to predict one randomly selected word out of millions from a stack of books with an even more impossible twist at the end. This effect has been performed for millions of spectators from online video, television specials, and in multiple recurring live-stage shows in New York and Los Angeles.

To honor the secrets behind this powerful magic trick and its creators, the complete case study is available exclusively upon private request.

How can we invisibly use a phone to find any word, from any line, from any page, from any book, in just a few seconds? Plus with a wild twist!

View on Theory11View TrailerView Full Performance

It was performed by David Copperfield for Oprah on television, by Spidey for Penn and Teller on their hit series "Fool Us", and it has been performed in multiple live-stage shows in New York and Los Angeles. Most notably, this has been one of the final effects performed by Dan White at his recurring stage show at the NoMad hotel in New York City. Dan's shows sell out in less than 10 seconds as he regularly performs for celebrities and on Jimmy Fallon.

Zodiac has been seen by millions of spectators and counting!

“The greatest book test ever created.”

Below you can watch the final product trailer that was produced by Theory11 for the release of Zodiac onto the magic market. You can also view the performance by Joel Meyers and Spidey on Penn & Teller: Fool Us! (4 million views and counting).

I was fortunate enough to travel to New York City in late 2017, and see Dan White perform this effect live at the NoMad hotel to a sold-out audience and meet him afterwards. It was an incredible feeling to know how much use this app gets on a weekly basis, and how it spreads wonder and delight. Sadly, I missed the Clintons being audience guests by a few weeks!

Design System

Mezmo

Before my tenure at Mezmo, product design was informally managed by a founding engineer, front-end, and PMs. As is common in a DevOps-focused company, our builders had strong opinions on the platform's look and feel. However, no design assets existed in tools, all design was done in code, and there was hefty debt.

I initiated a rapid but comprehensive audit of our components and patterns alongside the front-end team. Based on this audit, I developed a prioritized roadmap for our component library, ensuring a lean, reusable set of building blocks that would enable both front-end and my future team and me to design more efficiently and effectively.

Each atom crafted with care 🛠️

Visual craft that just gets more effective 🖌️

Thoughtful, flexible variants 🧩

Overview of component library v0 🔖

Starting strategy 🤔

1. Rallied two sprints to resolve front-end design system issues and set clear guardrails
2. Leveled up accessibility and contrast issues with a simplified color palette
3. Developed key components and patterns, eliminating redundancies and inconsistencies
4. Collaborated with a front-end dev to build a code library for common items
5. Promoted guardrails and formed Jira board for long-term design and front-end iteration
6. Introduced the atomic model to build consistent, accessible software efficiently

Most businesses prioritize securing funding and validating their value proposition, making the introduction of design systems for scale a matter of timing—especially if the company wasn’t (co-)founded by a designer. When I joined Mezmo, the product's interface reflected contributions from dozens of engineers, but no one had been explicitly accountable for its cohesion.

I began by meeting the product where it was, conducting a collaborative audit with the front-end team to establish shared visibility into the existing design landscape. This effort laid the groundwork for creating a more structured and scalable approach to design.

I coded our new buttons to be friendlier, more accessible, and fresh with subtle animations.

Lasting impact and system maturity 📈

1. Every front-end developer gleefuly contributed to our code library
2. We graduated the function to async check-ins once we had a stable system
3. When I hired my first designer, were enabled to focus on shipping features
4. As my team expanded to three designer reports, I was the lead in adding to our library and sunsetting archives to keep them free to solve complex problems

Fios Mobile (iOS & Android)

Verizon

I collaborated with a team of designers and a PM to design and launch iOS and Android apps for Verizon's Fios media product, supporting both mobile and tablet devices. While the interaction models differed significantly between touchscreens and remote controls, we ensured consistency in companion app experiences where it added value. My contributions focused on visual design and top-level navigation across all operating systems and device types, ensuring a cohesive experience.

Below is a motion prototype I created for the MVP Channel Browser, exploring how to display program artwork in a manner consistent with our Set-Top Box (STB) interface. While these concepts were visually distinct, I ultimately opted to move away from using images in the tablet browser for mobile screens, as the results often appeared dark and blurry, impacting clarity and user experience.

A truly novel UI for browsing channel 👀

I created the prototype above to explore the core navigation of the channel browser. Below, you can see the specs I made for my front-end engineer.

A key distinction between the Set-Top Box (STB) and mobile/tablet experiences was the approach to search functionality. On the TV, advanced voice search technology was the primary interaction method. However, on mobile, we discovered that integrating search with a discovery-driven experience—similar to trends seen on Instagram and Pinterest which were more effective.

Instead of maintaining consistency between mobile and tablet search experiences, we reimagined mobile search as a catalog that could be easily refined to help users find what they needed. I designed wireframes and collaborated with our mobile dev to ensure the implementation aligned with the overall product vision.

Initially designed as companions to the ten-foot product, our mobile apps gained expanded functionality, including streaming select content, driven by evolving deals like Verizon's exclusive NFL contract, which attracted a new demographic. In a discovery session with the Head of Product, I led mobile designs focused on sports and NFL content, sparking discussions on pivoting the product or bifurcating.

My early explorations—wireframes, design comps, and pitch decks—laid the groundwork for the go90 product, though I chose to focus on the broader Fios TV ecosystem. I then led the next phase of information architecture alignment for Fios STB and mobile, shifting from a sports-centric approach to a more balanced UX.

Following the split of the sports-focused product, we prioritized aligning the user experience across TVs, tablets, and phones. Above are proposed options I presented to align STB and mobile architectures. These recommendations were shared with our Senior VP, and my proposal was selected as the path forward.

Design Ops

Mezmo

Design operations is fundamentally a service design challenge: how can design leaders drive organization-wide efficiency in delivering, marketing, and selling products? This is both my passion and my expertise. From recruiting top-tier talent to fostering trust through successful releases, my focus extends beyond creating world-class products. I am committed to building world-class, cross-functional teams that prioritize and champion design's value.

As Mezmo's first dedicated product design hire, I built the design function from the ground up, establishing operational foundations and creating a robust design system. I also scaled the team by recruiting and managing three talented product designers, providing them with clear pathways to deliver user-centered software solutions for our customers.

My most significant accomplishments 🥇

1. Designed our highest-impact, flagship features
2. Owned Product Design (Series B through a $50M Series D)
3. Oversaw our G2 NPS score rising from 84 to a 92
4. Hired & managed a team of three Product Designers
5. Established end-to-end design-ops
6. Was the voice of design
7. Fostered an inclusive design-thinking culture
8. Built our design system from scratch and socialized Figma
9. Led successful in-app guides for self-service customers

North star to Series D ⛳️

Product Design is a collaborative effort that thrives on contributions from the entire company. As a design leader, I inspire and align teams across product, engineering, marketing, sales, leadership, and customers to realize what’s possible. My approach to driving vision and strategy includes:

1. Understanding customer needs, concerns, and goals
2. Aligning products and features with clear business objectives
3. Contributing to business goal-setting—ownership is shared across teams
4. Assuming positive intent and fostering understanding
5. Defining clear KPIs and success metrics
6. Demonstrating product-led growth through action
7. Iterating effectively without overhauling unnecessarily
8. Building atomic habits for continuous improvement
9. Differentiating through deep competitive analysis
10. Preparing for the future by applying emerging trends
11. Practicing ruthless prioritization
12. Trusting the team while verifying outcomes

This focused, collaborative approach ensures alignment, innovation, and long-term success that will last for years to come.

How I steered us there smoothly (with only a few bumps along the way) 💡

On my second day at Mezmo, while still self-onboarding, I began designing a feature for American Airlines and IBM Cloud. Despite the absence of design tools or a component library, I joined a meeting with a GM from AA, my PM, and our CTO to scope MVP requirements. Without waiting for IT to set up our Figma account, I quickly sketched user flows with copic markers to unblock development. This effort helped us secure their business, winning a $12k monthly contract from Splunk, the dominant player in DevOps & Log Analyisis.

The feature, Extract and Aggregate Fields, served as our entry point, which ultimately expanding to $200k+ in MRR within a year, while becoming a key sales asset for acquiring new customers. Simultaneously, I balanced feature delivery with creating a component library from scratch, accelerating our output and paving the way for future hires.

As the first product designer at Mezmo, I established foundational processes to manage and prioritize design work effectively. This included creating a centralized inbox for design requests, introducing Figma and design systems, and implementing a Kanban board to track and align high-impact initiatives.

After launching Cost Control features, I was promoted to Product Design Manager and expanded the team. After onboarding my first designer, I formalized design operations to scale our impact.

I also implemented a lean stack 👨🏻‍💻

1. Figma & FigJam for transparent, inclusive product design
2. Jira for project tracking, PRDs, requests inbox, and design system
3. Slite for open note-taking and meetings
4. Slack for company-wide comms
5. Dovetail for user research, interviews and synthesis
6. Fullstory & Heap for data, session replays, funnels, and A/B testing
7. EasyRetro for retrospectives and internal feedback
8. Productboard for quarterly roadmapping

I regularly evaluate and research tooling and technology stack options to ensure my team operates with maximum efficiency, proactively addressing any new frictions or challenges that could impact their ability to deliver exceptional work.

Habits & routines for champions ⚡️

As Product Design Manager, I implemented routines to drive collaboration, efficiency, and visibility:

1. Weekly planning, 1:1s, and design crits to align, support, and refine work
2. Encouraged team members to present at company-wide events and All Hands for visibility and diverse feedback
3. Shared weekly design updates in Slack and hosted bi-weekly "Demos & Drinks" to showcase work across teams
4. Conducted monthly design system meetings with front-end devs to maintain guardrails
5. Led quarterly backlog grooming and workspace organization to ensure focus and clarity

I also periodically audited workflows to optimize processes and collaborated with other design leaders via our VC, Initialized Capital, reinforcing our team as a high-performing, efficient, and visible force within the organization.

Leadership Values

More than one right way 🤔

I foster the idea that there is never one singular solution to the problems we are taking on. We just need one that is competent, feasible, measurable, and flexible for data-driven incrementation.

Bias towards action ⏳

I understand the utility of deference and expectation management, but there is always value within reach to move the needle, even if that means writing a knowledge-base article over a feature redesign.

Ruthless prioritization ✨

On a regular basis, it’s important to review backlogs and non-destructively let go of the ideas, dreams, and requests that go stale so our energy stays on fruitful efforts. Most work won’t happen, that’s okay.

Psychological safety 🧘🏼‍♂️

Every person on the team needs to feel safe to speak up and voice opinions, while also being self-aware and mindful of others’ time. Some of the best ideas can come from junior folks with fresh eyes.

Habits, habits, habits 🌱

“You do not rise to the level of your goals. You fall to the level of your systems.” - James Clear. I’ve been practicing atomic habits for over a decade, and I encourage reports and peers to explore it too.

Let’s have fun 🎊

Life’s too short. Fun can be sprinkled into team cultures easily, and after-all, we have to enjoy the journey because the shelf-life of jobs and companies these days can be terse, and paths always cross.

Fios Pin Codes

Verizon

As Senior Product Designer, I was responsible for Program Information across the set-top box platform and mobile apps. A key feature within this scope was the Video On Demand (VOD) purchase flow, which supported a variety of content packages and premium programs available for purchase. Recognizing that set-top boxes are often shared among families or roommates, I built a secure payment solution to ensure that only account owners could authorize transactions, balancing convenience with robust access controls.

I introduced a novel solution to the problem of how to make purchases on shared devices in a fast, secure, and invisible way using legacy remotes and design thinking.

At the time, thousands of beta users were testing our OTT/IPTV platform at home, using existing set-top boxes and remotes. I saw an opportunity to design a secure, low-friction purchase flow using only this hardware.

Initially, we considered leveraging the platform's standard on-screen keyboards, navigated via DPAD controls (up, down, left, right, and OK). While functional, this method was cumbersome for entering sensitive information like PINs or passwords. Profiles on the platform had separate watch histories, recommendations, and payment methods, requiring purchases to be authenticated by the profile owner. A common solution—using PIN codes—posed challenges: PINs entered via DPAD were tedious (potentially requiring 30+ button presses) and insecure, as on-screen entries were easily visible to others.

The numeric keyboard example above highlights these issues: it's slow, and anyone watching can see the entered PIN (e.g., 4531). This insight drove us to explore more user-friendly and secure alternatives.

I proposed the concept of a combination code to the team and our SVP, Dave, as an innovative solution. By remapping the remote’s DPAD buttons to represent numbers, we could transform traditional PIN codes into memorable, game-like sequences. For instance, instead of entering “168215,” users could input a faster, more intuitive combination like “Up, Down, Down, Left,” significantly improving speed, usability, and security.

Leadership saw potential in the idea, and I quickly created a prototype (shown above) to previsualize the user experience.

Through further exploration, we validated significant advantages to this approach, outweighing any drawbacks. A compelling use-case was made to adopt this solution, and the full purchasing flow (below) was remade using the faster, remapped combo method.

I collaborated with hardware and engineering teams to confirm the feasibility of remapping remote buttons for this solution. The idea gained unanimous support, and we even explored incorporating additional buttons beyond the DPAD to expand to 10 characters. However, since not all buttons could be remapped, we determined that the DPAD's 5 digits were sufficient. I also ensured the back button was reserved for deleting characters and exiting the experience seamlessly.

This method not only proved faster but also offered added benefits: it was discreet, improved with muscle memory, and could be done without seeing the remote.

Security was a core consideration in this design. I collaborated with an engineer to determine an optimal PIN code length that balanced usability and protection. We also devised fallback measures to address potential brute-force attempts, ensuring unauthorized purchases on another user's profile were effectively prevented.

The example below illustrates the security measures implemented to prevent manual brute-force attempts. After three failed attempts, the account is locked, requiring a reset by the account owner to regain access.

I presented the refined concept to our Director of Product and Senior Vice President, clearly outlining its advantages. With their approval to proceed, we moved forward with spec development and implementation. Along the way, we navigated key challenges, such as determining the optimal number mapping for the DPAD and updating the out-of-box experience. After resolving these issues, the feature successfully launched and persisted for years on the platform.

Participants familiar with video game combo codes understood the concept immediately, while others needed a moment to adjust. To make the experience intuitive for all users, we incorporated a double-entry process during onboarding and profile creation. This required users to enter their PIN twice, reinforcing muscle memory and combining PIN creation with learning in a seamless, efficient flow.

Identity Design System

Verizon

I led a secutity and design debt audit for sign-in, sign-up and account flows for over a dozen Verizon Media properties, ran an internal marketing campaign to increase adoption, and contributed patterns to our design system.

Acquisitions led to inconsistencies 🧐

Verizon Media, encompassing Yahoo and AOL's combined histories and properties, faced fragmented sign-in and sign-up flows, each requiring distinct security protocols, backend systems, account management, and database approaches. As part of the horizontal Platforms team, I was responsible for enhancing security and continuity across our brands by establishing standardized, flexible patterns to support SSO variants, error handling, multi-device flows, and edge cases.

Pixel perfect grids and illustrations for all 📐

Selling the vision cross-functionally 🧑‍🤝‍🧑

Beginning with TechCrunch, Engadget, Yahoo, and MapQuest as design partners, we secured collective sign-off while extending outreach to smaller property teams. To foster collaboration, I developed internal marketing materials, presented at company-wide events and booths, and launched a dedicated Slack channel to build an engaged and collaborative community.

Animated, delightful illustrations 💜

Interal hub for increasing adoption 👀

Informing users of security check-ups 🔒

So much more than a visual refresh 🤔

How we leveled-up our Identity UX 🪪

My small team and I undertook a comprehensive audit of over a dozen Verizon Media properties, analyzing their sign-in and sign-up flows against the latest security and usability standards. The review revealed a fragmented landscape, with each property implementing its own approach, obviously resulting in significant inconsistencies and usability challenges across the ecosystem.

I broadened my focus to tackle account-related challenges, including missing recovery emails, outdated recovery phone numbers, stale or changed passwords, and the implementation of new authentication methods.

Advocating for pattern adoption 👨🏻‍💻

Making better use of avatars 🙋🏿‍♂️

Escalation urgencies that scale 🚨

Meeting users where they are 👤

Shipping for our first few properties 🚀

Being discoverable across Verizon 👀

Stories

Verizon Media

When I joined Verizon Media (formerly Oath), there was a significant backlog of visual design work requiring swift action. Oath was formed following Verizon's merger of AOL and Yahoo, and I transitioned from Verizon Fios nearly a year after its creation. By then, many decks, documents, internal materials, and tools still featured outdated branding. My role was not only to update these assets visually but also to refine their storytelling to align with the new brand identity and vision.

Drawing inspiration from the storytelling.design movement, I took ownership of crafting compelling narratives for key events, documents, and deliverables. I also spearheaded the redesign of a template system tailored to the needs of the Technology Platforms organization led by John Matheny, senior leadership (including CTO Atte and his direct team), and anyone with feedback or requests.

How I got meetings with our CTO and CEO 👔

This initiative gained significant traction, with over 80 presentations created by colleagues before I lost count. I collaborated with senior leadership—including 5G VP Mason, CTO Atte, and CEO Guru—on high-impact presentations that achieved their objectives. My work bridged the transition from Oath to Verizon Media, and I led main stage presentations for the 2018 Tech Pulse event. My direct impact:

I enhanced Verizon Media's template system by creating an internal website to promote adoption, tracking usage metrics, and driving organization-wide engagement. After the Oath-to-Verizon Media rebrand, I updated templates within a week, boosting adoption. My redesign resolved inconsistencies, limited layouts, and unclear hierarchies, creating a cohesive system aligned with brand guidelines that empowered stakeholders to efficiently produce on-brand materials.

I led the visual design for Tech Pulse, a global company-wide event attended by over a thousand employees in person and thousands more via live stream. Collaborating directly with SVP John Matheny and BizOps Head Payal Syal, I produced, structured, and executed 11 high-visibility main-stage decks.

I took charge of framing stories, creating pixel-perfect graphics, visualizing complex data, simplifying speaker notes, and organizing rehearsals. Stepping in last-minute due to the events team losing their designer, I swiftly delivered every asset on time, even while balancing other projects, including direct collaboration with our CTO and CEO.

Check out the snippet from the event below, along with the wrap-up sizzle reel.

Below is an overview of the content layouts and over 20 components I developed to address the needs of high-impact deck requests. This robust system includes everything from simple columns and tables to icon sets and product mockups, designed for versatility in both internal and external use.

The components and layouts are simple, dynamic, and modular, allowing seamless integration with other templates. For instance, the Tech Pulse templates were adapted with a dark theme to match event branding. The system received widespread positive feedback, highlighting its impact and usability.

"OMG the decks and content on yo/stories are amazing. Thank you, thank you, thank you!"
Ashley Wolf - Principal Technical Program Manager

"Everybody just says 'wow' to me when I share this on Slack!"
Rosalie Bartlett - Open Source Community Lead

I collaborated with VPs and C-level leaders on 7 critical 5G decks that led to Oath's rebranding as Verizon Media, highlighting Verizon's commitment to Oath and 5G technology. While I couldn't save visuals (sensitive IP), this was highly rewarding.

Fios Design System

Verizon

The Fios TV service has evolved across various platforms, with set-top boxes (STBs) and companion mobile apps transitioning to immersive interfaces where video content plays behind a transparent UI. High-quality artwork, such as movie posters, showcards, and logos, is critical to enhancing the experience. Historically, the platform relied on low-quality assets sourced from metadata firms—adequate but costly and often subpar.

I took ownership of this challenge and introduced high-quality, A-level assets to our products, elevating the experience for millions across TVs, phones, and tablets.

I formed an asset design system from scratch that brought over 1,000 channel logos from D-grade quality to A-grade within months. This collection was adopted by our existing and upcoming set-top box platforms and their families of companion mobile and tablet apps that are collectively used by millions of Fios TV customers.

Above, you can see the critical role high-quality assets played in the TV product experience. Below, their importance is equally evident in our family of companion apps. Low-quality assets undermined what was meant to be a premium experience. Managing a library of 1,000+ logos required ensuring they worked seamlessly on both dark and light backgrounds, effectively doubling the workload. While some logos were versatile, many required creative solutions to meet both needs.

For years, internal teams and external agencies relied on high-quality, idealized assets (including logos) for design comps, resulting in visually striking prototypes that the actual products failed to replicate. The refreshed asset library not only elevated the real user experience but also became a go-to resource for all design teams, bridging the gap between design vision and product execution.

I provided art direction to elevate the quality of artwork across our STB platform and iOS/Android apps. I developed a cost-effective system to manage an evolving database of 1,000+ channel logos spanning 21 U.S. regions, ensuring consistency and enabling maintenance by a single person.

With numerous channels—including unique variations—it was crucial to have high-quality assets for effective representation in lineups, where a single graphic often serves as the channel's primary draw. We carefully organized the sourcing, production, documentation, and maintenance of these assets to support our products across various contexts.

As shown below (left column), we tackled numerous edge cases, including missing logos, nonexistent designs, regional and national variations, and east/west distinctions, ensuring a standardized and scalable solution.

Scaling this process required decisions like using solid-colored logos (white or black) versus original full-color versions. While bleaching logos ensured visual consistency, it violated brand guidelines, required significant effort to convert complex logos, and risked inconsistency if one partner required an exception.

Recognizing that companies invest heavily in their branding, I chose to preserve logos in their intended forms. This approach respected brand integrity and allowed us to focus on other high-priority decisions for the platform.

Achieving quality at scale was a significant challenge. To address this, I hired and trained a junior designer using a replicable system I created for asset production. I designed a hexagon-based grid to standardize logo sizing, reducing inconsistencies from production services, where assets varied in size, cropping, and transparency, causing visual chaos.

My process emphasized automation and consistency. Designers following the guidelines could produce virtually identical assets quickly, ensuring scalability and replicability. The hexagon grid ensured logos appeared equally weighted, and we refined the system as edge cases emerged.

To support the product launch in a specific region, we targeted an MVP lineup of over 120 channels. I established a foundation and trained a junior designer to complete the remaining channel logos within the next quarter, structuring the process into two stages to meet tight deadlines.

Stage one focused on C-grade logos, using scripts and automation for rapid improvements within weeks. Stage two refined these into A-grade logos, a process the junior designer and I completed over two months. This overhaul produced over 2,000 pixel-perfect assets, which we integrated into our apps, requiring only light maintenance thereafter.

We maintained time-stamped logo records on a Trello board, enabling us to efficiently manage changes in an evolving television landscape of mergers, closures, and rebrands, ensuring clarity and quick resolution of updates.

Above are snippets from the living deck I created to raise awareness of our logo database among Fios teams. The deck detailed the product's history, explained the process, and streamlined onboarding to our collection.

To maintain the logo database and accurately reflect channel lineups across all 21 VHO regions, I developed a JavaScript-and-JSON-powered emulation of our set-top box platform. Using unique "CallSign" IDs for each channel, I converted our master Excel spreadsheet into JSON and built an HTML prototype to display assets as they appeared in the platform. The tool could identify missing logos, invert the interface for white backgrounds, and more. It was fully responsive, enabling reviews and a 16;9 experience on any screen, ensuring seamless collaboration.

This tool proved invaluable for producing and iterating on large sets of channel logos, such as Music Choice’s 50+ channels, by allowing us to preview them in-context within the emulated interface. We used it to create logo sets for HBO, Showtime, MTV, dozens of serialized sports channels, and more. The ability to produce logos, preview them without full ingestion, and share them as videos streamlined the approval process with content partners, simplifying sign-offs.

This project, while not always glamorous, delivered impactful results: (1) I resolved a long-standing issue in just a few months, (2) established a low-maintenance process to ensure ongoing consistency, and (3) mentored a junior designer to develop new technical skills and adopt a systems-thinking approach.

OnCue Interaction Model

Intel

I co-led the core interaction model for Intel's OnCue set-top box (later Verizon Fios) and its mobile apps with the Creative Director and Head of Product. My work included top-level navigation, remote interactions, back-stacking guidelines, information architecture, and aligning mobile experiences.

Our STB product featured a minimal remote with DPAD navigation (Up, Down, Left, Right, OK), Back, and Home buttons, enabling video to play beneath a translucent interface for an immersive experience. I documented navigation structure, created mockups, facilitated alignment sessions, and developed prototypes to streamline engineering and demo the vision to stakeholders.

Watch and browse at the same time 😎

My rapid prototypes became highly in-demand by leadership as they were cheap to produce, they felt real, and devs would have clear specs concerning animation and easing since they were already refined in code.

Above, you can see how the DPAD remote control enables seamless navigation by maintaining focus on a single element at all times. Below, a glimpse into the prototype's construction highlights how a transparent black layer behind each thumbnail ensures a high-contrast interface, preserving a translucent aesthetic that complements the artwork.

The biggest challenge was achieving proper contrast between the background video and the foreground interface while maintaining a clear focal point, essential for ten-foot interfaces. Internal and external teams relied on idealized designs with perfect videos and artwork, which didn’t translate well to real-world content on consumer platforms. While adding a dark gradient layer was a simple solution, it left the experience feeling overly dark and gloomy. I identified this issue and developed a more effective layering approach to enhance contrast without sacrificing brightness or clarity.

Above, you can see the types of solutions that were being used to offer enough contrast to our interface while maintaining an explicit focal point. Either (A) the gradient layer was too dark, (B) the artwork was idealistic, or (C) the out-of-focus thumbnails were transparent to make the in-focus thumbnail stand out.

I studied these challenges and discovered an opportunity to solve all of them in a way that was technically feasible.

Our platform, originally built with HTML, CSS, and JavaScript (Intel), transitioned to C++ for greater performance control. While this shift improved speed and efficiency, it eliminated the free capabilities of CSS, requiring complex components to be rebuilt in native code and introducing visual constraints to the design team. Features like frosting or blurring elements to soften the dark UI weren't feasible.

To address this, I proposed a solution (shown above) that maintained high contrast and a clear focus within the core navigation. Championed by our Creative Director, it shipped in the first dogfood version of the re-engineered C++ platform. The Fios Classic team, working on the legacy Fios TV product, also adopted this technique due to its simplicity and compatibility with older hardware.

OnCue Program Info

Intel

Program Information was a cornerstone of the OnCue (Intel) and Verizon Fios platforms, providing detailed content screens for films, series, episodes, specials, sports, and more. Accessible throughout the set-top box and mobile apps—via landing screens, curated catalogs, or search results—it allowed users to seamlessly begin playback or explore additional details when a program was in focus.

I built guidelines which scaled to support hundreds of thousands of programs on our set-top box platform.

Each program type required unique menus, metadata, and artwork, varying in quality from complete to incomplete or missing. I thoroughly analyzed the available data, regularly audited for edge cases, and defined grids and layouts for each view.

At Intel (OnCue), I contributed by defining the Program Info information architecture, documenting it as the source of truth, and producing platform artwork guidelines. Over time, I expanded my role to include interaction design, grids, animations, view-type rules, and maintaining alignment with mobile app experiences.

Above are architectural diagrams illustrating entry paths and view types, categorized into two primary groups: programs and series. Each group required distinct rules and metadata displays tailored to its content type. Below are examples of metadata templates and comps designed using the structure I developed.

I refined Program Info guidelines to efficiently display key features like reminders, VOD purchase flows, and social sharing. The navigation below uses a dual-axis structure: horizontal sections at the top and vertical lists within each section for actions, with selected actions updating the metadata table in the mid-right region for clarity and functionality. Below is an early exploration of the VOD purchase flow within Program Info. See the "Pin Codes" project for the later evolution I shipped.

Platform Artwork

Program Info was a visually compelling view that showcased cinematic artwork from programs and content partners. Collaborating with our Creative Director, I helped define a distinctive visual language that seamlessly integrated the artwork with the interface, balancing aesthetic impact with production sustainability. To establish an ideal baseline of quality, we curated and evaluated a series of sample images.

Using my extensive photomanipulation skills, I modified artwork from content-providers to demonstrate what could be possible.

As part of a three-person team, I contributed to the first production of cinematic artwork for our "Family and Friends" dogfood release, targeting popular series and programs to test the process's value. Following its success with trial users, I helped assemble an in-house team of production artists, sharing visual samples and guidelines. I provided feedback and direction to ensure the vision was upheld.

I identified key patterns to avoid, such as using background artwork identical to poster/thumbnail assets or making overly drastic modifications. For example, flipping an image of Harry Potter for composition reversed his iconic scar, requiring greater care in respecting the content. While artists had creative liberty, we ensured modifications were subtle and aligned with the vision. Over the next year, our production team created thousands of high-quality assets, prioritizing key legacy content and focusing on new titles with the most visibility and impact.

Bravo

Xbox

As UX/UI lead for Bravo's Xbox 360 app at Archetype, I began with due diligence on existing Bravo apps across platforms. I proposed an information architecture that aligned with Bravo's ecosystem and the Xbox XDK/Lakeview framework, followed by low-fidelity wireframes to map the user experience and pass technical reviews. I delivered an 80-page functional specification (including wireframes and designs), a style guide for icons and assets, a 10-page redline spec (covering measurements, spacing, fonts, colors, etc.), and key development assets.

The primary challenge was ensuring designs scaled to support Kinect's NUI requirements, including hand gestures, voice commands, and DPAD controls. This required unique visual states, animations, and seamless functionality across screens, from the landing pivot to deep-level modal overlays. I also created a comprehensive user flow and application map with back-stack guidelines to ensure clarity and consistency.

Manga (Starz)

Xbox

As the visual and interaction design lead for the Starz Manga Xbox 360 application at Archetype, I enhanced existing wireframes with a distinct visual style and produced assets for both prototypes and production. The app, developed by Starz Manga, successfully launched on the Xbox platform.

This app was built using the new Xbox Lakeview Interface Guidelines, allowing us to collaborate directly with Microsoft as the platform evolved. Partnering with our Creative Director and UX Designer, I refined the visuals to create a standout experience for Manga fans. While the UX Designer developed the information architecture and wireframes, I delivered high-end visual compositions for all app views. We conducted regular reviews with clients, engineers, and Microsoft partners to ensure alignment with platform and brand guidelines, always aiming for moonshot-quality results.

I worked on this application over three months, balancing 3–4 other projects simultaneously. The designs were delivered on schedule, and the app launched on the Xbox platform shortly after. Development was split between our in-house team and the client. Although our agency was acquired before I could continue refining the project, I planned to redesign the icon set, improve metadata layouts, and enhance the landing screen's content algorithms.

Industrial Designs

Encide + Personal

Since the late 2000s (aughts), I have had a fascination with conceptual, fantasy, and industrial designs. I often day dreamed about unique shapes and forms that have never existed before, and tried to visualize these ideas. This side passion of mine keeps me interested in cool gadgets and hardware, and it inspires my UX/UI/Product work.

Brand

Personal

I crafted a simple yet effective TS monogram (for my initials) and a corresponding wordmark for my name to represent my personal visual identity. My green, brown, silver and gold color palette is inspired by my favorite drink, a salted caramel mocha accompanied by a mint.

This project was a personal challenge in condensing years of iterations into a concise system and preso showcasing my broader systems-thinking approach.

a11y Dark/Light Toggle

I was recently on the hunt for an accessible, elegant solution for bringing the trendy dark/light-mode pattern to the web. To my surprise, no one had fully solved this yet, at least not at the level I was hoping for. I published my result on Dribbble and CodePen and have recieved over 135k views and counting.
View LiveView on DribbbleView on CodePen

I tried to merge various code snippets together and ended up building this micro-interaction entirely from scratch instead based on my own list of requirements that focus on respecting user-preference above all else (plus some of my own flavors of visual and motion design). I built this using JavaScript and CSS, I used jQuery but I’m sure this could be accomplished with vanilla JS fairly easily (go easy on me, I’m a designer-first 😜).

I see dark/light mode on the web as the next massive leap forward since the responsive/adapting wave of 2011~2013. This is my contribution and take on how it should be done. I also included the ability to have dark/light mode favicon supported in this since I wanted a wholistic, shippable solution. Note that using a mid-tone gray or colored favicon, you can absolutely get by with one. 😉

Requirements ✅

1. Design a beautiful, minimal toggle switch with a buttery-smooth animation.
2. Crystal-clear states and affordances. Clickable, subtle, dual-state toggle labels.
3. On the first visit, respect the user's OS-level choice of dark/light mode (or auto).
4. As a fallback, default to the brand's choice by adding or omitting the “dark” class on the body tag in the markup.
5. While viewing the website and updating the OS-level preference, auto-update via a listener (no refresh required).
6. Allow the user to manually override their OS-level preference by clicking or tapping the toggle switch. At first, I had the favicon synchronized with both manual and OS-level changes. I changed that. See #8.
7. Remember the user's most recent choice (via the toggle or OS), store that locally, and serve again next time. If a user clears their browser's cache, the next visit will respect their OS-level preference like during the first visit. If a user changes their OS-level preference without the web page currently open, that setting will not apply on their next visit.
8. Keep the favicon synchronized with the OS-level setting at all times for optimal favicon contrast against the browser chrome.

I QA'd the code on desktop and mobile, ensuring that the user's OS preferences will always be respected, even without requiring a page refresh.

Brand & Web

Encide

Encide is a design community that I own and co-founded with friends. We started as a forum, then grew into a blog-shop-social brand, and are currently an active Slack team. We help each other in our careers, network, and provide feedback on our work and strategies.

Encide Brand

I created and maintain the brand guidelines Encide, a living document that tells our story and defines every aspect of the brand, from copy language to logo lockups and more. Spanning 50 pages, it includes raw, ongoing explorations beyond the appendix. Initially shared privately within the Encide forums, the document was later published publicly, reflecting its iterative and evolving nature.
View OnlineDownload PDF

Encide Website

Encide is a design community and social network with a blog, shop, and invite-only forum, all designed and built from scratch. Powered by WordPress, it integrates BuddyPress for social networking, WooCommerce for the shop, and bbPress for the forum. Launching this was a long-time dream of mine.

Above are the side and top navigation interfaces for the Encide website. The side navigation is optimized for tablets and mobile devices, while the top navigation is tailored for laptops and desktops. Both maintain consistent architecture, supporting multiple levels of sub-menus and input fields. I custom-coded this fully animated experience from scratch using HTML, CSS, and JavaScript, ensuring a seamless, scalable design across devices.

Above is the information architecture for the website. Below is an overview of how the responsive interface supports all viewports and device sizes.

Below is a real screenshot of our community. This is a “Latest Topics” view at the /forum/ directory instead of the traditional “Categories” view.