Bento Batch
Project Overview
Bento Batch is a transaction layer that simplifies how users interact with wallets and dApps by letting them set goals instead of manually signing each step. During its product launch, the team needed design support to strengthen feature communication, maintain brand consistency, and enhance the user experience across both in-product UI and marketing touchpoints.
Role & Scope
-
Role: Visual & UI Designer
-
Collaboration: Product Designer, Product Manager, and Engineers
-
Deliverables:
-
Referral Promo Section – Refined UI for clarity and brand fit, improving discoverability and user awareness.
-
Landing Page Visuals – Designed illustrations and assets to convey benefits and match in-product UI.
-
Referral Promo Sections
Problem
The referral promo module originally appeared only on the Referral Dashboard. While it served its basic function, the design did not fully reflect Bento Batch’s bold and playful branding, and the visual hierarchy made the reward mechanics less immediately clear to users. This limited the module’s ability to draw attention and encourage interaction at the right moments in the user journey.
Solution
I refined the module’s colors, layout, and hierarchy to improve clarity while keeping the original structure and content intact. The updates focused on strengthening visual contrast, introducing highlight colors to draw attention to key actions, and improving information hierarchy for faster scanning. I also added a “More” CTA to give users a direct path to the full referral program details. These adjustments made the module more engaging and easier to understand without disrupting the existing content flow.
I expanded its placement to the Strategy Selection Page with a shorter, more lightweight design, allowing users to notice the referral feature earlier in their journey. The updated module appeared in two user contexts:
-
Referral Dashboard – a detailed explanation to reinforce the reward structure and maintain visibility
-
Strategy Selection Page – a concise callout designed to nudge new users toward exploring the referral benefit
Responsive Design
Ensured the module adapted seamlessly across devices, maintaining legibility and balance on both desktop and mobile.
User Flow
With the promo module now appearing in two different contexts, I mapped out potential user flows to understand when and how users would encounter it. This helped ensure the design felt natural in each placement, guided users toward the referral action at the right moments, and maintained consistency across touchpoints.
Landing Page Visuals
Problem
The marketing landing page needed a stronger visual narrative to make product benefits more intuitive while keeping a consistent tone between the marketing site and in-product UI.
Solution
I designed illustrations and supporting visuals to:
-
Represent product benefits and metaphors
-
Strengthen the brand’s bold & playful tone
-
Enhance visuals without losing focus
Worked closely with the product designer to determine placement, tone, and metaphor, ensuring responsiveness and alignment with the UI grid system.
Reflection
This project was a set of focused UI and visual enhancements rather than a full-scale redesign. By improving brand alignment, visual clarity, and strategic placement, the referral promo section reached users at the right moments, and the landing page visuals strengthened product storytelling.
It demonstrated my ability to:
-
Refine existing UI for better clarity and engagement
-
Align marketing and product touchpoints for a cohesive brand experience
-
Collaborate across teams to deliver implementation-ready designs with minimal scope