Where the Design Got Smarter

Every project has its own challenges, and this one was no different. While working on the Stranerd x AUC scholarship landing page, I ran into a few key design issues that helped me grow as a product designer. Here's how I approached and solved them.

Too Much Visual Noise

🔸 The Problem

The first design drafts were very energetic bright colors, bold text, and animated elements. But instead of drawing attention to the main CTA (“Apply Now”), it distracted users from taking action.

🔸 Why It Mattered

The goal of this page was conversion. If users couldn’t quickly understand what the page was offering or where to act, they’d bounce.

🔸 The Solution

I simplified the layout and reduced the number of competing visual elements. I used more whitespace, added a clear visual hierarchy with bold headings and supporting text, and placed a sticky CTA for better visibility across screen sizes.

Mobile Layout Wasn’t Working

🔸 The Problem

On mobile, everything felt tight and cramped in the first section. Users had to scroll before they could see the CTA clearly.

🔸 Why It Mattered

Most of the users were expected to visit on mobile. A weak mobile experience meant we were losing people right at the start.

🔸 The Solution

I adjusted the spacing, scaled down some of the text, and made sure the CTA stayed fixed at the bottom of the screen on mobile. This improved readability and accessibility without sacrificing design impact.

Auto Layout Struggles

🔸 The Problem

At first, my use of auto layout in Figma made the design harder to manage instead of easier. Things broke when I resized frames or switched to mobile.

🔸 Why It Mattered

Proper auto layout is key for responsive design and developer handoff. Without it, maintaining consistency becomes difficult.

🔸 The Solution

I revisited my auto layout settings, adding padding, alignment, and constraints where needed. I grouped elements more logically and used spacing tokens to keep things flexible and clean across breakpoints.