User Interface Design

Creating polished visual designs is one of the last steps in my design process. At this point in a project, I have typically collaborated with product management and engineering triad partners to better understand the target user's task(s), the business needs of the feature/tool, and any technical constraints. In addition, we've likely put a sketch, wireframes, and/or prototype of an earlier version in front of users to get feedback on our approach.

​These examples are from SaaS product experiences from Toast and Brightcove. While both organizations had simple page templates and some building blocks (e.g., modals), there was wide opportunity to design interactions and details, some of which were folded back into the design libraries (e.g., data visualization tags for percentage changes). 

Toast Channel Insights

During the height of the pandemic, with on-premise dining put on hold, restaurants depended on online ordering and third-party apps like DoorDash to bring in orders. The problem: each ordering channel had its own tablet and app for displaying and tracking orders and net sales. With Toast Performance Center and Channel Insights, restaurants got a consolidated view of all their ordering channels (both Toast and non-Toast) to show which ones are driving most of their orders, the total cost of each channel (considering monthly costs and commission fees), and the margin for each channel. Starting with the Performance Center's entry point on the ToastWeb home page, I designed all workflows, screens, and content messaging for this feature. This included a mobile version, as shown by this genericized version I designed for unmoderated testing. 

Toast Restaurant Card

The Toast Restaurant Card was created to provide faster access to credit card sales and cash back rewards from select restaurant-specific merchants. In addition, this account included bill-paying functionality, streamlining the payment of invoices directly from the debit account. I followed a mobile-first model to ensure an optimized experience across a wide range of screen sizes. The Toast Restaurant Card is no longer available, as the product was unable to attain product-market fit despite the wide interest that was shown during market research. But the underlying framework for moving funds internally and externally continues to be relevant to any financial product offering. 

Brightcove Campaign

Brightcove Campaign provides a set of tools to help marketers with the lead generation process. Using Brightcove Campaign, users can easily generate embed code for use in video landing pages and then view analytics within the app or on a browser page to measure performance. See the Projects page for more details about how this product came to be. 

Brightcove In-Page Experiences

Brightcove In-Page Experiences are videos contained in a page on a customer's own site and can include basic interactivity features (links and cards) that will engage an audience. In-Page Experiences are embedded in a customer's web pages and are displayed along with other page content. I designed not only the experience areas listed in the left navigation, but the experiences for customizing the video experiences themselves, as shown below. Note that a video's experience can be customized before playback begins, during playback, and after (e.g., adding a call-to-action link).