headshot

Hi, I'm Karen.

I design digital products and build design systems. My work designing holistic user journeys across across surfaces forms a virtuous feedback loop with leading design systems at startups to corporations.

Currently I'm a Senior Product Designer for Goodreads at Amazon, based in San Francisco. Previously at Brave Browser and Shutterstock.

Design Writing

From time to time, I publish in UX Collective, Bootcamp, and UX Planet.

Speaking

UX Copenhagen talk
ok hand
Amazon logo
Goodreads at Amazon

Goodreads, a subsidiary of Amazon, is the world's largest social site for readers, book recommendations, and organizing your reading life. As the design lead for design systems and product designer for personalization and book tracking experiences, I built the new design system, designed book tracking features, and helped launch the new book page.

Goodreads design system

As the design lead for Goodreads’ design system, I built out design styles, semantic tokens, and component libraries cross-surface in Figma, moderated design/dev discussions and alignment, groomed the backlog, took foundational elements through accessibility review to ensure our themes/typography pairings/components met the AA or AAA bar, crafted a vision forward for the design system, advocated for more resources, and collaborated with other Amazon design system teams. I also evaluated design system documentation platforms and worked with another Amazon team to bring in Zeroheight, a documentation repository with some automated integrations to our design and dev tooling.

Goodreads book detail page

As a product designer for personalization and tracking experiences, I synthesized customer feedback using Dovetail (an insights repository tool I introduced), and shipped improvements to the new book page. This included new breakpoints and a responsive grid, new loading states, new design system components such as the accordion and content carousel, and new features to help customers track books more easily. I also collaborated with the PM on the roadmap and set expectations by mapping a shared workflow between PM/design/dev/stakeholders.

Figma administration and education

As the Figma admin and in-house expert, I set up our SSO, managed permissions, shepherded our instance merge into another Amazon instance of Figma, educated the design team, engineering teams, and Goodreads org on using Figma, hosted office hours, and set up a self-service internal Figma resources site.

Brave app icon
Brave Browser

Brave is a browser that protects user privacy, fights back against the surveillance economy, and rewards web content creators at the same time. As one of the first designers at this startup, I designed various privacy features and the cross-platform onboarding experience for new users. I set up Brave's nascent user research function, built and managed the design system, contributed to hiring and mentoring, and was promoted from a Senior Product Designer to a Product Design Manager.

Onboarding v1, iOS + Android

I designed and shipped 3 iterations of the mobile onboarding experience. The first iteration on iOS+Android was short, used visual-first content, and introduced features along with browser setup tasks. The result was a high completion rate through onboarding and increased opt-in rate for Brave Rewards, one of our main browser features.

Onboarding v2, iOS + Android

The next iteration emphasized our privacy promise while off-loading the Rewards opt-in and larger asks to later on the user journey. Contextual education was sprinkled throughout to keep the first time user experience lightweight. The result was an increase of +5% in 30-day retention, and less complaints about Rewards.

Onboarding v3, iOS + Android

The third iteration of mobile onboarding prioritized retention-driving tasks such as setting Brave as the default, a function that was previously not available on iOS. It also introduced friendlier copy and invested even more in the contextual education approach to shorten time to browse. The user journey was made to be more flexible by introducing copy tailored to specific screens when the user lands on them. This iteration is still under development.

Onboarding v3, iOS + Android user journey

I mapped out the user journey for the third iteration of mobile onboarding in Figma, with screens lined up for each section of the experience. Some steps such as introducing our Brave Shields feature had different messages depending on the website that had a blocked tracker and ad. Others had messages showing on specific days after the user first installed Brave. Light and dark theme as well as designs for larger devices were also included in development.

Onboarding v2, desktop

Along with mobile, Brave has desktop applications for MacOS, Windows, and Linux. The second iteration of onboarding on desktop leveraged similar graphics and design thinking from what was learned from mobile. Primarily, retention-driving tasks such as importing bookmarks & settings, and setting Brave as default were prioritized in this onboarding experience. Non-essential onboarding tasks were off-loaded to the sidebar, a UI area that was presented during the first time user experience but not necessary for the user to interact with until they were more comfortable in their new browser. Part of this effort resulted in an increase of +8% of users who set Brave as default month over month.

Brave Shields, all platforms

Brave Shields is one of the main features of Brave Browser - it's the primary way in which the browser protects user privacy by blocking trackers and ads on any website the user visits. I designed this feature so that it caters to both novice users and privacy experts by exposing a large toggle to deal with web-compatibility issues as they arise, and expandable detailed settings for those knowledgeable enough to individually play with privacy settings.

Brave Design System

When I joined Brave, the design team had only a style guide and Sketch. In the first 6 months that I was there, I helped set up our initial design system with Sketch symbols and design versioning in Abstract. Later, I migrated the entire company over to Figma, which offers much better support for design system component management. I worked with the team to define and build our foundational elements such as typography, light and dark theme color palettes, buttons, and more standard components. To reduce the discrepancy between design and code, I set up regular communication with the front-end engineers and worked with them to turn out basic components into reality. Lastly, I provided ongoing Figma support to designers and the rest of company.

Sidebar, desktop

The sidebar design solves multiple problems and use cases: automatic tab management, promotion of Brave features while allowing full user control, reducing tabs as users put most-used shortcuts in the sidebar, a place to house non-urgent but retention-driving onboarding tasks, split window view within a browser, vertical tabs, and more.

Private Windows, desktop

Along with Brave Shields, Brave comes with two types of private windows - a Private Window that clears browser data on close, and a Private Window with Tor that offers additional protection like hiding the user's IP address and obscuring user activity from passive observers. Part of this challenge was to make the designs distinct and clearly explain the differences between these modes.

Speedreader, desktop

Brave comes with a built-in Reader mode just like any other browser. However, to further increase browser performance, Brave allows users to turn on Speedreader, or automatic reader mode. Browsing in this mode cuts down on loading time since the browser renders webpages with only the simplified content. Along with the discovery UX, I also designed customization options for Speedreader that lets users configure their automatic reader mode to exactly their visual preferences.

Brave VPN, all platforms

Brave offers an even greater level of privacy protection to users who wish to purchase a Virtual Private Network, directly integrated in the Brave app. I designed the MVP version for desktop and Android, which provides basic configurations such as server selection to start.

Shutterstock logo
Shutterstock

Shutterstock is a global provider of stock photography, stock footage, stock music, and editing tools, headquartered in New York. As a product designer there, I shipped pages integral to the conversion funnel such as product and pricing pages, shortened search success times on the search results page, contributed to the design system, and extended branding to internal organizations and error pages.

Footage Search Results

At Shutterstock, I worked primarily on the conversion funnel. The most important part of the purchasing journey is identifying and finding the perfect stock content asset on the search results page. Using our unmoderated testing platform, I iterated through several prototypes to identify the necessary filters and interaction mechanism for the user. I also applied our design system to ensure consistency across our business units.

Footage Clip Details, mobile

The product detail page is the final exploratory step in the conversion funnel before the checkout flow. I iterated through several design prototypes to identify the necessary information to provide on this page as well as the optimal ordering of it.

See more work on Dribbble ⇢
hobbies profile pic

my hobbies

In my free time time I make pottery, art, illustrations, and work on my list of never-ending side projects. Making something tangible with my hands and taking art classes for fun fuels my creativity and keeps me engaged at work.

Sake set Dumpling Child iOS sticker pack
Mini pencil collection Hand lettering K
Handmade planter with detachable stand Painting
Hand lettering Glitch poster