Utkrasht Gupta

Designing intuitive experiences where logic meets aesthetics.

Utkrasht Gupta

Designing intuitive experiences where logic meets aesthetics.

Utkrasht Gupta

Designing intuitive experiences where logic meets aesthetics.

Blog Image
Blog Image
Blog Image

Jun 8, 2025

6min read

My Design Process: From Problem to Polished Experience

My Design Process: From Problem to Polished Experience

Design, for me, is not about jumping straight into visuals — it’s about understanding the problem deeply and designing with intent. Over time, through working on projects, hackathons, and real-world use cases, I’ve developed a process that helps me move from vague ideas to clear, intuitive, and well-crafted user experiences.

This case study outlines how I approach design, the decisions I make at each stage, and how I balance usability, aesthetics, and practicality while working primarily with Figma and Framer, and collaborating through Slack.

Starting With the “Why”

Every project begins with clarity. Before opening Figma, I focus on understanding:

  • What problem needs to be solved

  • Who the users are

  • What success looks like for this product

This step helps me avoid designing for assumptions. Whether it’s a website, an app, or a branding-heavy project, I always start by aligning the design with the core goal of the product.

Research, References, and Ideation

Once the problem is clear, I explore existing solutions, design patterns, and visual references. I use this phase to understand what already works, what feels repetitive, and where there’s room for improvement.

I often map ideas, user flows, and rough concepts using FigJam, allowing me to think freely without being constrained by final visuals. This phase helps shape the overall direction before committing to screens.

Wireframing and Structure

With a direction in mind, I move to low-fidelity wireframes. At this stage, the focus is not on colors or typography, but on:

  • Information hierarchy

  • Screen layout

  • User flow and navigation

This helps validate the structure early and ensures the experience feels logical before moving into detailed design.

Visual Design in Figma

Once the structure is solid, I shift to high-fidelity design in Figma. Here, I focus on:

  • Clean layouts and spacing

  • Consistent typography and components

  • Visual balance and clarity

I prefer building reusable components and maintaining consistency across screens, making the design easier to scale and iterate on.

Prototyping and Interaction

Design truly comes alive through interaction. Using Figma and Framer, I create interactive prototypes to test flows, transitions, and micro-interactions. This allows me to evaluate how the design feels in motion and identify friction points early.

This step helps bridge the gap between static screens and real user experience.

Feedback, Collaboration, and Iteration

Design is rarely perfect in the first pass. I actively seek feedback, discuss ideas with teammates, and iterate based on inputs — often collaborating through Slack. This back-and-forth helps refine both usability and visual polish.

Iteration is a core part of my process, and I see feedback as an opportunity to improve the final outcome.

Final Outcome

The final step is delivering a well-structured, implementation-ready design, with organized files, reusable components, and clear flows. My goal is always to ensure that the design is not just visually appealing, but also practical, intuitive, and easy to build upon.

Closing Thoughts

My design process is centered around clarity, intent, and iteration. Every project is a learning experience — an opportunity to improve how users interact with products and how ideas translate into meaningful digital experiences.

This process continues to evolve with every project I work on, but the foundation remains the same: design with purpose, and always keep the user at the center.

Create a free website with Framer, the website builder loved by startups, designers and agencies.