Work

Here's a highlight of some of the work I've been involved in over the past few years.

Chat Structure & Input

As more teams within the company moved to surface their community relevant features within chat, we had to come up with some guidance and structure to help teams build successful product.

Chat is an integral part of what makes Twitch unique and it's an area that needs to make sense, is intuitive and helps chatters and moderators feel part of the community.

With current use cases in mind, I broke chat up into different parts as a guiding light for teams and how they think about their features within chat.

Image showing the different structures of chat.

The Chat Input area also required a lot of restructuring to better include upcoming work such as Channel Points. I led this initiaive very early on to avoid it being a blocker for Channel Points and started collecting any data we have around our input and needs from stakeholders.

Image showing the chat input iterations from original to production.

We went through many iterations and made changes based on feedback from stakeholders and user testing. I approached the work very similar to the chat structure above and created sections within the area. "My stuff" is everything you collect while watching or contributing. The actual input houses everything you need to craft your message.

Mod View

Another important area of focus for my team is our Trust & Safety work. This includes moderation, user reporting and internal tooling. A large initiative we took on last year was creating proper tooling for our moderators and give then their own dashboard, called Mod View.

Mod View widgets, actions, queue and whispers.

I worked closely with the Product Manager and my designer to set overall vision for the dashboard and ensured that we work closely with the Creator team to build tooling that works in Mod View and Creator Dashboard. We also ran multiple UserTesting sessions with our moderators to best understand their needs and ensure that what we are building helps solves some of their problems.

The feature has been very well received by our community of moderators and we've seen great adoption. Many of the patterns built in this tool has made its way to Creator Dashboard and we are continually iterating on feedback and adding more tools.

Read more

Smart Costs

One of the more complex features within Channel Points is our Smart Costs. When turned on, we automatically set the prices of your Channel Points Rewards based on a number of data points. This helps create a more balanced costs on different channels.

What made the UI a bit tricky was the ability to have Smart Costs turned on for some rewards but not all, allow creators to set their own pricing, and also communicate the change and whether Smart Cost is cheaper or more expensive. Rather than burying this UI into each individual edit mode, I suggested we help bring this forward with an overview page.

This change also brought on some complexity but after creating some prototypes and running it with some folks on the team and a few creators I helped come up with a pretty elegant solution.

Smart cost modal view.

With this modal we provided a simple overview of your rewards that has Smart Costs turned on. It also allows you to toggle it on or change it to a custom amount. We also highlight the difference between custom amount and recommended pricing.

Chat Pattern: Public Callout

The need to notify chatters of important channel-wide events has seen an increase over the last year. A need the chat team had to address in order to provide a consistent user experience. I worked closely with the Product Manager to understand our user problems and needs from stakeholder teams, as well our Core-UI team to consider how this pattern may fit in our design system.

After many iterations and syncing with other designers across multiple teams, we decided on a fairly extensible UI element for teams to use. The element itslf has some basic structure such as collapsed and expanded modes, CTAs and location.

Public callout for chat.

Personal Design Projects

I enjoy building personal projects, ranging from books to small iOS apps.

Wine Regions

Wine is a bit of a passion of mine and I've been sharing a lot of educational stories via my Instagram. I ran a series of "Know Your Wine Region" stories that talked about certain wine regions from all over the world and some facts related to them.

Wine Regions example.

Cozy

Cozy is a small app I built to help my wife and I during our house hunting adventures last year. The app was built in React with Firebase for instant updates across devices. This meant that I could immediately see what she added as we walked through the house.

The app supported pasting in a listing URL to grab the appropriate data. Google Auth for easy login. Likes & Dislikes allowed photos or videos to better remind you.

Screenshots of the home, listings and likes/dislike pages.

Japan Photobook

My wife and I traveled to Japan with two close friends. I was inspired to put all of the photos I took during the trip into a photobook. First photobook I've ever done, and follows our journey from Tokyo to Kyoto over two weeks.

Photo of some of the pages of the Japan photobook.

Avocado

During the design and development of Cozy, I built a small prototype of a couples app called Avocado. The idea of the app is help couples or roommates organize their household together. From events, todo items or even shared bookmarks or links.

Screenshot of Avocado household app.