{description}
\n {position}\n \n{description}
\n \n{description}
\nSenior product designer & product manager with over ten years experience in the industry. I studied Business Administration at CSU Cal Poly and New Media Design at AAU. I then worked at self-funded tech incubator Bebo until it was acquired by Twitch. While in San Francisco, I co-founded a non-profit, ShelterTech, to addres the technology needs of people experiencing homelessness.
\nMy nickname at Bebo was “The Mailman” because I deliver every day except Sunday. I believe everything is worth doing with 100% focus and passion. Every task is an opportunity to improve—a chance to elevate work to a craft.
\nCore Skills
\nOutside of work you can find me cooking, traveling, reading New Philosopher magazine, taking photos of my dog and cat, appearing on Dutch television shows, and playing video games. I also enjoy scuba diving, drum & bass, and humid summer nights.
\nYear {year}
\n{position ? \"Role\" : \"Project\"} {position}{exploration}
\nShelterTech is an award winning non-profit solving the biggest technology challenges faced by people experiencing homelessness. Founded in 2016, ShelterTech is now a 100 member strong volunteer-only organisation with over $100,000 in annual funding, $800,000 in in-kind contributions, and 3 program offerings.
\nShelterTech combines the innovation of the tech community and the knowledge of those who’ve experienced homelessness to build a suite of products that addresses the Digital Divide. ShelterConnect installs and operates free wifi for over 3000 people in need, AskDarcel is the first official online directory of human services in the city of San Francisco, and Casey is automating case management and referrals.
At ShelterTech I’ve put time into every facet of the organisation—from researching and writing about housing issues to designing and developing products for underserved communities, from recruiting and onboarding new talent to hosting panels of industry leaders.
\nMy main role is the product manager of AskDarcel, ShelterTech’s primary digital product. I manage the nearly 40 people working on the project, determine the project’s roadmap, and communicate with internal teams, our grant provider, and other external stakeholders.
\nI also serve as head of our design team where my responsibilities include recruiting and onboarding new talent, managing design projects and user research, and creating visual assets for AskDarcel and ShelterTech.
\nOur startup roots taught us to make the most impact with the least capital. We adopted a crowd-sourced community development organisational model so we could design and develop world-class tech products without hiring a single developer or designer.
\nEvery volunteer delivers maximum value by volunteering their professional skill set: developers develop, designers design, sales people evangelise. Money is reserved for operational expenses and to hire people with lived experience of homelessness to advise our product teams and directly improve product.
\nAs a distributed team, I take organisation, tooling, and communication seriously. I’m an evangelist for adopting the latest technologies that help our team operate more efficiently with as little effort spent on onboarding and communication as possible.
\nFrom the data we’ve collected about volunteering, it’s essential that the startup time for onboarding is minimal because people’s lives inevitably get busy and volunteers are most productive in the first few weeks of interest. So, I’ve made it my personal goal that any volunteer that wants to help the homeless can join our organisation and get right into a project within a day.
\nWe use Slack and Quip for internal communications and project management, Zoom for meetings, Figma for sharing our design system and projects, and Github and Zenhub for managing the codebase.
\nWant to know more about the design process for this project? View the case study here.
\nIn November 2017, ShelterTech begain collaborating with the SF Bar Association’s Homeless Advocacy Project to digitize the legendary HAP Manual, a 400 page tome containing all the human services available in San Francisco.
\nPrinting costs and the voluminous amount of content meant the Manual could only be revised every two years and was too expensive and cumbersome for people experiencing homelessness to utilize.
\nAskDarcel lets anyone with access to a smartphone, tablet, or computer find the resources they need—and all the content is continuously updated via a novel approach to crowd sourcing content.
\nA number of problems exist in designing for underserved communities. Technology access and digital literacy, language proficiency, diversity in devices and platforms to name a few.
\nIn our first year, our team conducted extensive user research to determine what features we should develop, what platforms we should support, and what communities we would be able to help. We partnered with other Bay Area organisations that have deeper knowledge of serving people experiencining homelessness to fill in for our relative inexperience in the industry.
\nWe also decided early on to hire people who’ve experienced homelessness to advise us on product updates and features. The Community Reps help us stay focused on the community we’re trying to help, granting us valuable insight into daily experiences that are largely voiceless in the software development industry.
\nThe biggest problem facing any solution for people experiencing homelessness is trust. The human services ecosystem is constantly shifting as government funding, processes, and requirements change with every new administration. The feedback we heard over and over was that digital resources rarely had correct information and there was a general distrust within the low-income community of San Francisco for tech workers and tech products.
\nSo our solution to ensuring our content is high quality and trustworthy involves addressing these two issues head on. We developed a crowd sourcing model of data validation which involves inviting volunteers from the tech community to work together with paid members of the homeless community to continuously update the content on our site. As an extra layer of oversight, our partner HAP verifies any information that’s been vetted through our process for accuracy.
\nIn 2018 we had over 200 volunteers attend these events, and they continue to be a major draw for many people who don’t know where to begin when it comes to helping the homeless and for people experiencing homelessness themselves. In solving for the biggest issue for our digital product, we’ve brought together two communities that are typically at odds and managed to save about $60,000-120,000 per year which is the typical cost of hiring staff to perform this function.
\nOur users’ goal is to discover services that can help them address their needs, be that affordable housing, legal support, educational programs, and so on.
\nLuckily for us, designing an online directory has many precedents—Google Maps, 211, Yelp, and AirBnB to name a few. Part of our design process involves integrating the features that make other directories successful but in service to communities that are overlooked and underserved. Powerful and predictive search, highly relevant results, meaningful filtering, and clear explanations how to access services is essential to the experience.
\nTo specifically address issues with digital literacy, and for users that don’t know where to begin, we’re experimenting with alternative interfaces, backed by the same trustworthy data that is the foundation of our product.
\nSome of our experiments include chat bots, guided interfaces, goal driven to-do lists, and even printed step-by-step guides.
\nWant to know more about the design process for this project? View the case study here.
\nEsports is a billion dollar industry and has more viewership than US professional baseball, soccer, and hockey, yet less than 1% of video game players play in professional level tournaments.
\nBebo Tournaments brings the excitement of pro tournaments to every player. Compete, watch, and win in daily scrimmages and weekly tournaments, no matter your age or skill level.
\nPro tournaments typically are played in closed events with a production team that controls graphics, scoring, and the broadcast. Our tournament software uses the game-activity driven graphics engine that we had been working on as part of our streaming software to automate tournament processes so anyone could participate in or run their own tournament with a few minutes of setup.
\nWe teamed up with organisations that were running tournaments in the Fortnite community to get started and found that players of every level were excited with how easy it was to participate in our events and how great their streams looked while playing.
\nAs we expanded to include a player base beyond competitive and pro-level players, Bebo Tournaments experimented with bringing pro esports teams to city leagues for high school and younger players, similar to the way Little League Baseball lets young baseball players play as their favourite professional teams.
\nMy role on the project varies based on the needs of the team from sprint to sprint. Some weeks I’m delivering visual assets for the app or web interfaces of the product, other weeks I’m creating shareable graphics or art directing with contract designers to support a branded tournament, and in others I’m actively pushing code to improve the user experience.
\nDue to the experimental nature of new products, my function aligns with the greatest needs of our team at the moment and I’m happy to join in wherever I’m needed, whether that’s pushing pixels, chatting with users, or writing css.
\nThe inaugural tournament season started at TwitchCon 2018. Pro players were invited to play against their fans in 30 minute micro-tournaments throughout the entire three day event. Designing the booth layout and graphics was my responsibility. The booth was one of the busiest of the entire exhibition and generated thousands of signups.
\nWant to know more about the design process for this project? View the case study here.
\nBebo streaming software lets Twitch content creators unleash their creativity with a powerful all-in-one production suite. Ground breaking computer vision technology allows any streamer to create professional looking effects triggered in real time by their gameplay with a few clicks of their mouse.
\nBebo’s identity is inspired by the engineering specifications of early television technology—fitting, as Bebo users see Twitch as the future of TV. Bebo’s bold palette is based on the famous SMPTE colour bars and the iconography and interface appeal to the technical and exacting nature of Twitch broadcasters.
\nOf the 2 million people that broadcast monthly on Twitch, fewer than 25,000 can stream as a full time job—the vast majority don’t have a large enough community to support them. So we approached this problem by giving content creators more ways to engage their audiences and stand out from the competition.
\nThe first roadblock for a new streamer is the existing ecosystem is split amongst a dozen software programs which means hours spent setting up your stream instead of streaming. We integrated the key tools into one platform—streaming and recording, chat, payments, and bots.
\nWhen Twitch featured our app in an A/B test of their broadcasting tools page, Twitch found that new streamers that used Bebo had a 35% lift in watch time compared to those that didn’t stream with Bebo.
\nThe special sauce of Bebo is GameSense, a game-activity driven graphics engine which allows streamers to trigger events based on their gameplay. For the first time, streamers can create live broadcasts on par with television without the need of a team managing the graphics.
\nAlong with GameSense, we introduced numerous features that our users asked for, including mini-games, collectables, and reward currencies to boost user engagement. Many of our ideas were eventually supported more directly by Twitch via Twitch Extensions.
\nMy role on this project varied from project management to product design to apparel design. I art directed and managed a team of animators and motion designers to work on many of the overlays and graphics that were built into the app, and I worked alongside our other in-house product designer on the interface and design system for the app itself.
\nThe most surprising and fun design project was the creation of a lifestyle apparel brand as a marketing strategy. Brands endemic to gaming understand that gaming is a lifestyle, complete with its own celebrities, language, and fashion, and Twitch is one of the few places gamers congregate on screen. We took advantage of the visual nature of Twitch to spread brand awareness by creating an apparel and accessory line that our users, and some non-users, were proud to wear on and off camera.
\nWant to know more about the design process for this project? View the case study here.
\nGnost Mono is a monospaced typeface designed for use in GUI text editors. Gnost Mono takes its name from gnosis, the ancient greek word for knowledge.
\nTwitch is the world’s leading live stream platform. Millions of people come together everyday to watch, chat, and make their own interactive entertainment live on Twitch.
\nTwitch has a strong lead in the PC and console gaming markets, but has significant room to grow in mobile gaming. I work as a senior product designer with a focus on emerging markets and mobile gamers. My team’s ambitious goal is to jump start Twitch’s mobile games content and position Twitch as the premier destination for mobile games content.
\nMy team was responsible for the launch of the mobile broadcasting feature on the iOS and Android platforms allowing anyone with a phone to stream directly to Twitch. Released in select regions in early 2020, we now have several hundred thousand new mobile creators using our feature each month. In the nearly two years I’ve been at Twitch we’ve been the fastest growing segment and produced nearly 1000% growth year over year.
\nAlongside lowering the barrier for mobile broadcasters to start streaming and making a living on Twitch, my team also experiments with mobile-first features that increase mobile viewership, participation, and monetization. In a recent experiment we ran, we increased performance of Clips views by over 300%.
\nWorking for a globally recognised brand in an area with massive growth potential with a free license to experiment is a truly special opportunity.
\nFantasy esports platform, Esports One, is in the process of switching to Figma to scale up their design team’s capabilities. As an early stage startup, they’ve been focused on growth and moving quickly, but that’s lead to inconsistencies as new designs progress faster than the existing code base. They tasked me with performing a visual audit of their site’s components and Adobe XD files and creating a comprehensive design library in Figma which will function as a single source of truth for designers and developers going forward.
\nAfter reviewing the existing designs, I split up the design system into four parts: brand assets and brand colours which could be shared with marketers and other teams, a UI kit, and an icon kit.
\nEsports products consist mainly of tables so special attention was made to ensure they were highly customisable, resizable, and variants were developed for web and mobile.
\nI worked with a Dutch green startup to help pivot their food-focused carbon tracking product from the consumer market to B2B through the creation of a new corporate climate impact dashboard. Restaurants, food brands, caterers, and corporations can use this new dashboard to analyse their food purchases and recipes to help them discover their current CO₂ impact, ways they can reduce their impact with alternative products, and purchase offsets.
\nUsing early sales conversations and feedback from prospective clients, I helped the team develop a product specification document and wrote user stories to clearly communicate the product’s features to all stakeholders. We scoped out a 3 page web app with each page focusing on one of the core unique selling points: track, reduce, and offset.
\nThe tracking page is the heart of the product where users can upload their data, view visualisations of their impact, and get useful infographics that put their impact in perspective for internal and external stakeholders. I worked with a branding designer to develop a vibrant colour scheme for the UI that’s powerful, distinctive, and immersive. Diving into the data should be empowering and inviting, but with such a dramatic colour scheme it was important to ensure that symbolic colours were consistent across every page of the product.
\nTaking action to reduce climate change should be as visually gratifying as it is impactful. I introduced a progress meter to the Reduce page so users that make pledges to reduce their CO₂ emissions can see a visualisation of their progress in a glance.
\nOn the Offset page, I introduced a progress meter of sorts with a visual calculation of the offset costs—as users fill out the form, the formula fills up until the final price can be calculated from all the user’s choices. This visual feedback encourages users to complete the form, see how many steps are left, and how their choices impact cost.
\nThe product was designed to be fully accessible via mobile web. Each page was designed with a single purpose in mind which aided in the transition to mobile. Colour schemes were also coordinated to connect pages within a flow—blues for tracking, purple for reduction, greens for offsetting, yellows for onboarding, and peach for payment.
\nAfter completing the dashboard designs, I worked with the client to design and write copy for a landing page which communicates the decades of cutting edge climate research experience of the team with the practical application of data that the product hopes to provide to customers.
\nI was approached by a stealth-mode urban mobility startup to help them design an early brand identity, design their consumer ridesharing app, and explore designs for their vehicles.
\nThe startup was developing an electric single passenger vehicle with an accompanying on-demand service, as well as the technology to convert any production car into a fully autonomous vehicle. Their service focused on customers who want an ecologically friendly, all-weather, last mile transportation option to a variety of urban locations including places of work, leisure, and living.
\nThe project started with persona development of the customers in targeted pilot cities to inform product and design decisions.
\nLogo marque and brand explorations were conducted in parallel to vehicle design explorations. The customer needed a logo marque and brand colour that could easily be identified by a person in a passing car which helped narrow down the logo marque to a typographic style and a bright purple colour rarely seen on the road.
\n70% of car trips in the US only have a single passenger so the client planned to utilise EV microcars which are cheap and widely available in Asia and can ride in underutilised bike lanes and other specially marked routes in pilot cities. Working with the client we targeted two designs: striped and bordered. We explored the use of several colour schemes which would aid users in vehicle identification, but with a small launch fleet we decided on a single colour design for this phase of the pilot.
\nIn situ designs helped the client and external stakeholders envision the vehicle’s scale and branding and its ability to integrate into underutilised bike infrastructure.
\nLater vehicle explorations focused on production car models that could be converted to semi or fully autonomous vehicles with a proprietary kit. Example colour combinations reflected a future fleet where the car’s colour would be identified in the mobile app to aid the rider in visually acquiring their car on a busy street.
\nI worked with the client to wireframe a happy path for a first time user which helped identify missing user stories and edge cases. Because the product envisions users driving the vehicle, the onboarding of the product is fairly long and requires a driver’s license verification. In the wireframing process, I identified areas where the onboarding could be shortened and permissions could be requested a later time in the user’s experience.
\nAfter the vehicle arrives, the user’s phone is docked on the dashboard and the user goes through a safety checklist before launching guidance and heading for their destiantion. Because the phone is visible to the driver while driving, I designed the app with a dark mode for use at night.
\nThe last phase of the project included a design of a B2B platform for corporate account holders to manage their employees accounts.
\nYou Need a Budget, YNAB, is one of my favourite products. It's given me tremendous insight into my spending and helped me hit major savings goals for my wedding and buying a house.
\nYNAB is all about staying within budget and it nails that experience. Every category of spending gets a preallocation of funds every month and then as you spend from that category the balance draws down to zero. Simple!
\nIn the current mobile experience, there’s a column for this month’s funds budgeted into each category and for the available amount. When I’m out and about I find that I really only need to know how much I can spend from a category so in my design I’ve simplified to just the available amount and then added a line of contextual information in a human readable format, just so I don’t have to do mental math on the go. The addition of icons for each category also helps distinguish the more spacious table rows at a glance.
\nAs someone that came to YNAB after trying several other budgeting and financial products (Simple, Mint, Level, Motif, Robinhood, Quicken, Quickbooks), I love the idea of goals as something to rally behind and get excited about. In a way, budgets look backwards at what you've spent, while goals look forward to things you want to spend on.
\nThe current YNAB mobile experience hides goals behind a tap from the categories view. To bring goals to the forefront, I've added a new top level tab where you can see all your goals at a glance. Each goal is linked to a budget item the same way they are now, so it's more a function of surfacing a feature that already exists and that I love instead of adding something new.
\nIn addition to bringing goals front and center, I’ve also revamped the Reports view to make it more dynamic, contextual, and action oriented. I got into using YNAB because I wanted to better plan for the future so in this redesign I’ve taken forecasting to the next level. On the Net Worth graph I added a forecast line so I can quickly see if I’m on the right track to hitting my long term goals. I’ve also added notification cards which draw attention to important timely information like falling behind on savings goals or upcoming bills.
\nTwitch Design hosted a friendly competition to redesign our favourite apps using our component library, CoreUI. Since I’m a huge fan of YNAB, my submission was a redesign of YNAB’s primary interface, and I won second place!
\n