Role
Sole Product Designer
Tools/Skills
Figma, Prototyping
Team
1 Software Engineer
Timeline
July 2025 - August 2025
Reduce space taken up by existing information and buttons
CONTEXT
The Rank Modal is where users view, edit, and share their restaurant rankings in Beli. As new features like labels, visit dates, and tagging were introduced, the existing layout became too space-heavy to support additional actions. This project aimed to redesign the modal for efficiency—making room for richer data while keeping ranking interactions fast, familiar, and visually clean.
How might we redesign the Rank Modal to make space for new contextual actions (like labels or visit dates) and encourage users to engage with them naturally within the ranking flow?
QUESTION
GOALS
The redesign shouldn't decrease the action of ranking a restaurant
The redesign shouldn't decrease actions that accompany ranking
RESEARCH AND INSPIRATION
STUDYING HOW MODALS BALANCE SPACE AND ACTIONS
To redesign Beli’s Rank Modal — where users view, edit, and share their restaurant rankings — I analyzed how leading apps structure dense interaction flows. I looked at Instagram, TikTok, Letterboxd, Google, and Airbnb, focusing on how they surface tagging, labeling, and posting actions in compact layouts.
From TikTok and Instagram, I drew on progressive disclosure patterns — starting with minimal options and expanding into submenus. From Google and Letterboxd, I observed how scroll-based or collapsible sections support additional inputs without clutter. These insights shaped our approach to building a space-efficient, action-oriented Rank Modal that encourages tagging, labeling, and note-taking while keeping ranking effortless.
The initial concept (v0) explored how to make the Rank Modal more space-efficient while keeping all key actions visible.
I tested a list-based layout limited to six main options, with icons on the left and concise titles on the right for scannability.
To reduce visual bulk, elements like restaurant details were made collapsible, and auto-suggestions (for labels, friends, and notes) were surfaced in horizontal scrolls for quick input.
SIMPLIFYING ACTIONS — A MORE COMPACT RANK MODAL
CONCEPT DEVELOPMENT
STUDYING HOW MODALS BALANCE SPACE AND ACTIONS
BALANCING SPACE
DESIGN ITERATION
We landed on Iteration 2 for its balanced spacing and readability — it kept the interface compact without feeling cramped.
DESIGN ITERATION
RESEARCHING HOW HIGH-ACTION MODALS STAY EFFICIENT
To make ranking actions feel quicker and more intentional, we introduced autofill suggestions for labels, visit dates, and notes—surfacing the most relevant options upfront. Inspired by apps like Google and TikTok, these suggestions appear in horizontal scrolls beneath each action, reducing typing and decision time.
IMPLEMENT AND HANDOFF
Once the new Rank Modal layout was finalized, I built a fully interactive Figma prototype to capture the intended collapsing behavior and spacing. Working closely with our frontend and backend engineers, I translated each design component into developer-ready specs—defining layer structures, typography scales, and responsive states.
Current Rank Modal
Redesigned Rank Modal
This early direction focused on clarity and hierarchy—creating a lighter, faster interface that still supported tagging, labeling, and note-taking without overwhelming the user.
Designing for space efficiency requires balancing visual minimalism with functional depth.
Onboarding
@ Frich
Takeaways
Designing for action density taught me how to make interfaces feel lightweight while still supporting complex interactions.
Collapsing and autofill patterns aren’t just space-savers — they guide users toward taking more meaningful actions without added friction.
OUTCOMES AND TAKEAWAYS
Improved information density and layout clarity, making the Rank Modal feel lighter and faster to navigate.
Onboarding
@ Frich
Outcomes
Enabled new contextual actions (labels, notes, visit dates) without increasing visual clutter.
Created a scalable design system for future modal iterations—collapsible sections, autofill logic, and consistent interaction patterns.