This is a collection of tactical, small design wins, a sort of journal.
Looking for a robust case study? Try here.

Before After ✓
Customer support and usability testing revealed that users had trouble filtering important content that was two clicks away. By exposing the filter labels, users don’t need to guess what’s inside the dropdown. Engagement increased ~500%.
bankLinking before bankLinking after
Before After ✓
Highest point of friction for Petal users is linking their accounts. By AB testing many hypothesis, we achieved a version that converts 117% more than the initial design.
feedItems before feedItems after
Before After ✓
Merchants were named with the raw strings we received, and category icons were assigned. With some quick Regex, we’re able to clean up names and display curated logos for +50% of purchses.
desktop before desktop after
Before After ✓
Our desktop app was left aside for a while, missing some important navigation and styling alignments with the mobile app Unified design allowed more consistent, accessible experience, shared components and simpler code.
Before After ✓
Initial modals had CTA and dismiss actions too close to each other and taking too much space. Centered rendering also becomes a problem as out phones grow taller and taller. Better distributed buttons allows for extra actions such as navigation and secondary CTAs and are more ergonomic on tall devices.
toast before toast after
Before After ✓
Quite a few of Petal’s initial designs didn’t meet color contrast guidelines. It’s a daily battle towards better legibility!
light fonts before light fonts after
Before After ✓
Thin, light-gray fonts were great to get Petal hyped for its “designer look”. We banned light fonts and low-contrast text even from legal disclaimers. Going from light to regular goes a long way for legibility.
navigation before 2 navigation after 2
Before After ✓
As our app grew, our minimalist navigation starter to get too cryptic. Users relied on trial and error to find the desired content. Some Information Architecture gymnastics will soon enable us to achieve a much more understandable “home” for your money.
toggles before toggles after
Before After ✓
Our custom on/off indicators had low contrast and weren’t considered “clickable” by users Using a more common pattern proved successful for user understanding.
transactions before 3 transactions after 3
Before After ✓
Our first iteration was a simple table with the raw data we got from the backend With time, we added clean brand names, logos, contact and dispute buttons.