Designing for outcomes, not aesthetics
Early in my career, I treated design tools like a canvas for art. I would jump straight into Figma, obsessing over drop shadows and border radii before I even understood what the client actually needed the product to do.
As a practicing UI/UX designer, I've realized that clients don't pay for Figma files; they pay for business outcomes. Whether I'm designing a custom SaaS pitch deck, establishing a brand identity, or overhauling an entire platform, the aesthetic must serve the strategy. For example, when I designed the UX for Pressvia, every structural decision was reverse-engineered from a single goal: increasing session time to secure AdSense monetization.
Step 1: Discovery & Strategic Alignment
The first phase is entirely conversational. Before any pixels are pushed, I need to understand the mechanics of the client's business. Who are their competitors? What is the primary user flow? Are we trying to drive sign-ups, reduce customer support tickets, or increase read time?
During this phase, I establish the functional requirements. I advocate for frictionless, high-utility solutions. If the client wants a complex feature that adds no real value to the user, this is where we cut it. Good UX is often about subtraction.
“A beautiful interface that solves the wrong problem is a failed project. Discovery is about making sure we are aiming at the right target.”
Step 2: Architecture & Wireframing
Once the goals are set, I move into structure. This involves mapping out the Information Architecture (IA) and creating low-fidelity wireframes. I deliberately keep things ugly at this stage usually just gray boxes and actual copy (never Lorem Ipsum).
I rely heavily on clean, functional layouts. Bento grids are a personal favorite for complex dashboards because they inherently organize hierarchical data into digestible, scannable modules without overwhelming the user.
Step 3: High-Fidelity & Typographic Systems
This is where the brand identity comes alive. My design philosophy leans heavily toward minimalist, industrial aesthetics. I believe a UI should feel like a well-machined tool sharp, precise, and highly legible.
Typography does the heavy lifting here. Establishing a strict type scale using workhorse typefaces (like GC North Sans or Alliance No.2) ensures consistency. I focus extensively on line-height, spacing, and contrast, ensuring the interface feels editorial and premium, even if it's just a backend settings page.
Step 4: Prototyping & Developer Handoff
Because I also work as a frontend developer, my handoffs are extremely strict. I don't design anything that can't be reasonably built within the project's technical constraints.
Prototypes are wired up to demonstrate micro-interactions and complex state changes. When handing off to engineering (or building it myself in Next.js or Framer), the Figma file includes clearly defined design tokens, component variants, and documented behavior for edge cases.
Never design without real (or highly realistic) copy.
Let the business metric dictate the visual hierarchy.
Keep typography strict: limited weights, purposeful spacing.
Design for edge cases: empty states, error messages, and loading skeletons.
Bridge the gap: ensure every design decision has a clear development path.
The short version
A good design process isn't about rigid steps; it's about asking the right questions in the right order. By moving from strategic discovery to functional wireframing, and finally to high-end visual execution, I ensure that the final product isn't just something to put on a portfolio it's a tool that drives tangible results for the client.
I design and build digital products from Sri Lanka, focusing on clean, strategic user experiences. If you need help structuring a product, feel free to reach out.