.png)
Duration: 10 weeks
Tools: Figma
Primary Role: Product Designer (UI/UX)
​​
During my time at Sourmilk (formerly Beny Yogurt), I designed sourmilk.com end-to-end, transforming the founders’ vision into a fully realized digital experience that defined their brand identity, clarified their story, and guided users toward meaningful engagement. Sourmilk needed a website that differentiated them from competitors while expressing their playful yet premium brand personality, and I built a system that translated this into a cohesive, intuitive, and conversion-driven experience!
​
Across this project, I owned the complete product design process: from initial sketches and scaffolding to high-fidelity interfaces in Figma and engineering notes to execute this site. I refined site navigation, strengthened brand storytelling, and developed a scalable design system that unified layout, typography, color, and interactions.
​
I collaborated closely with the founders (stanford grads!), leading weekly strategy meetings to align content, visuals, and messaging. This allowed us to continuously sharpen our audience clarity, strengthen the brand’s emotional appeal, and ensure every page communicated not just what Sourmilk is, but why it matters.
The result was a fully launched website and digital identity that established Sourmilk’s online presence, differentiated the brand in a competitive space, and provided a flexible foundation the team continues to build on.
MY PITCH
I saw this opportunity in an email list and took the leap to pitch directly to the founders.
I created a structured pitch deck that outlined a complete rebuild of their site’s information hierarchy, showing how clear organization, simplified navigation, and improved UX would help users understand the product faster and convert more reliably. I mapped the entire website experience: what information should appear first, what short term fixes I could execute on a 1 week timeline, which fixes were more long term, and what could need continued updates. At the time, their biggest need was growing their waitlist, so my pitch focused on redesigning the site around that primary CTA, optimizing placement, flow, and supporting content to maximize sign-ups.
This pitch laid out not just what was missing, but what was possible, and what I was excited to build! This deck earned me the role (chosen amongst others) and set the foundation for the full design and execution of sourmilk.com.
​When I joined Sourmilk, I was given a single one-page design from their graphic designer (see above), essentially a visual reference, but not a functional website structure. I immediately began translating that concept into a usable product by sketching page layouts, user flows, and information hierarchy on pen and paper.
In my first meeting with the founders, I presented these early sketches along with a clear proposed timeline for how I would approach the redesign:
​
Project Kickoff → Sketching & IA → Low-fi Wireframes → High-Fi Figma → Final Prototype / Engineering Notes
​
​
Once I aligned with the founders on goals and priorities, my next step was to translate the initial one-page design and my pen-and-paper sketches into low-fidelity, structural mockups. At this stage, I wasn’t focused on aesthetics or final UI, the goal was to define how the website should work before deciding how it should look.
LOW-FI MAPPING
Before exploring any visual design, I created a set of low-fidelity structural mockups to define how the Sourmilk website should function at a foundational level. These wireframes mapped the entire user journey from the homepage downward, breaking the site into clearly defined sections that aligned with visitor intent, information needs, and the primary CTA of joining the waitlist.
Using only simple blocks, arrows, and text, I mapped out the entire structural logic of the site. I defined two primary audience paths; returning users seeking deeper information (1) and new users arriving through keywords or search (2), then built a clear section-by-section hierarchy that surfaced what visitors needed to understand first (“What is Sourmilk?” “What makes it different?”). I established the vertical scrolling flow, showing how foundational information should transition into trust-building elements such as ethos, transparency, and founder storytelling. I also positioned CTAs at key moments where users had enough context to convert, and clarified how each page interconnected with others, including long-form sections like “About,” “Why Beny? Why My Gut?” and “Where to Find Us?”. Each page was assigned a structural role, independent of visual design, so the team could focus solely on function and flow.
This low-fi system gave the founders their first clear view of the website’s architecture, who it spoke to, how information unfolded, and where trust and clarity were reinforced. By stripping away visual design entirely, these mockups became the blueprint for every decision that followed, guiding the wireframes, high-fidelity designs, and ultimately the final build of sourmilk.com.
​​​
​
HI-FI WIREFRAMING
After aligning on the structural wireframes, I translated the entire flow into high-fidelity prototypes in Figma. Using the low-fi architecture as a blueprint, I layered in visual hierarchy, typography, brand elements, micro-interactions, and responsive layouts to bring the experience to life. Each section was refined to ensure that the primary CTA, supporting explanations, and page transitions felt intuitive and immediately clear to users. Throughout this stage, I met regularly with the founders to review clarity, tone, and usability, adjusting layouts whenever information felt confusing, reworking components when questions arose, and tightening the narrative flow based on their feedback. I also incorporated early engineering considerations, simplifying components, ensuring scalable layouts, and structuring elements in a way that would be straightforward to build!
​
Scroll below to see the entire webpage
OUTCOME
The launch of sourmilk.com marked a complete transformation of the brand’s digital presence!!!!! The new website provided Sourmilk with a clear information hierarchy, a conversion-driven user flow, and an interactive experience built around their signature spoon animation (my idea!), all of which immediately resonated with their audience. Within days of going live, the site began receiving enthusiastic responses from designers, strategists, and industry professionals, who highlighted the clarity of the UX, the storytelling flow, and the playful interactions I designed!!!!
