UI/UX Design: Before and After of a Card Design

This title was summarized by AI from the post below.
View profile for Mehedi hasan

UI UX Designer

🥰 🥰 🥰 #Figma #User_Interface_Design, #User_Experience, #Design_System, #Interaction_Design, #UI_Redesign, #Modern_UI #UI #UX #Modern Which one feels more intuitive to you — 1 or 2? 👀 As a UI/UX designer, I recently reworked this card design to make it more user-centered and visually balanced. The before design (left) focused on listing data, but it lacked hierarchy and quick readability. The after design (right) transforms that same data into a visual experience — using a circular progress indicator, grouped stats, and clear separation between sections. This update improves: ✅ Information hierarchy ✅ Visual focus and balance ✅ Readability and user engagement Sometimes, it’s not about adding more — it’s about structuring better. Which one would you pick for a real Design? 💬

  • A comparison graphic titled “Which is Better?” shows two green progress cards side by side. The left card (“1-Before”) has a photo of a woman with text listing progress stats like overall progress, sessions completed, and email details. The right card (“2-After”) presents a cleaner, more modern design with a circular progress chart, clearer labels for weekly and monthly stats, a rating section with avatars, and a compact profile bar. The second design appears more visually balanced and user-friendly.
Rosemary Rotimi

Expert Mobile App and Website Designer || UiUx Designer || Brand Identity Designer || UX Researcher. Highly proficient in Ai Prompting.

3w

Definitely 2! The hierarchy and flow make it so much easier to digest. 

Definitely #2. The improved hierarchy and visual grouping make it much easier to scan and understand at a glance.

Nikolas Richard

Hello, design theory 🙂

2w

The one at the right-hand side(Second one) But why used that color for the background UI? Why not go with white?

Like
Reply
See more comments

To view or add a comment, sign in

Explore content categories