Hi, I'm Karen.

I design digital products, build design systems, and care deeply about craft. My work designing holistic user journeys spans across platforms and balances the agility of startups with the accessibility compliance of 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.

We gave up Sketch and rebuilt our design system in Figma ⇢

The real reason why your company doesn’t have a design system ⇢

Create cross-platform UI animations with After Effects and LottieFiles ⇢

Quitting Merge Dragons and addictive smartphone games ⇢

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 product designer, I design book tracking and discovery experiences for readers, publishers, and authors. As design system lead, I built the Goodreads design system, from Figma libraries to documentation and design tokens. Currently I'm designing cross-functional AI workflows.

Goodreads book detail page

As the lead designer for the book tracking experience, I synthesized customer feedback, conducted foundational and iterative user research, and shipped improvements to the new book page. This included new features to help customers track books more easily, new breakpoints and a responsive grid, new loading states, and new design system components such as the accordion and content carousel. I collaborated with product on the roadmap and set expectations by mapping a shared workflow between PM/design/dev/stakeholders.

Listopia experience

Listopia is a top book discovery feature, allowing readers to create and curate their own lists of books, and find their next book to read from community-created and Editorial-curated lists. I designed the new cross-platform Listopia experience on web, iOS, and Android. Although this was an experiment testing out the limits WebView implementation, I held the design to a high quality bar by aligning product, design, and engineering on WebView navigation patterns and design standards.

Goodreads design system

As the design lead for Goodreads design system, I built out design foundations, cross-platform component libraries, Figma variables, and light/dark theming on all platforms using design tokens. I bridged design and development, set accessibility standards, advocated for more resources, and collaborated with other Amazon design system teams. I evaluated design system website services and brought in Zeroheight, a solution with automated integrations to our design and dev tooling. Currently, I'm collaborating with engineering on our design system MCP and designing cross-functional AI workflows.

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 resulted in increased retention.

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 to turn basic components into reality. Lastly, I provided ongoing Figma support to designers and the rest of company.

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

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.