Questions people ask me
Answers to what founders, hiring managers and designers usually ask about my work, my background and working together.
About me and working together
Who is utkarsh?
I'm Utkarsh Dhairya Panwar, a founding product designer and design engineer from India. I studied at IIT Roorkee and have been the founding designer at CodeAnt AI (YC W24) since June 2024, as it grew from $0 to a $60M valuation. I'm also an official Framer Expert and on the Awwwards Young Jury.
How can i contact you?
Email is fastest: work@utkarshdesign.com. You can also book a 30-minute call on cal.com/utkarsh-design/30min, and WhatsApp and LinkedIn are on the contact page if you prefer them.
Contact · Book a 30-minute call
What is your email?
My email is work@utkarshdesign.com. For a project, send a link to the product, what isn't working and how you know. For a role, send the job description.
Can we schedule a call?
Pick any 30-minute slot on cal.com/utkarsh-design/30min. We talk about what you need, what already exists and when you need it, and I follow up with a written proposal.
Book a 30-minute call · Contact
Phone number
You can reach me on WhatsApp through the link on my contact page, and my phone number is on my resume. Email at work@utkarshdesign.com is still the quickest way to get a considered reply.
Are you available?
Freelance and contract work can start immediately. For a full-time role my notice period is 30 days.
Can i hire you?
Four ways: a 2 to 4 week design sprint on one problem, fractional design for part of each week, a Framer website built in 3 to 6 weeks, or a full-time or contract role. Freelance work can start immediately, and the first step is an email or a 30-minute call.
Hire me · Book a 30-minute call
Are you open to a full-time job?
Yes. I'm open to full-time roles as a founding product designer, product designer or design engineer, working remotely from India. My notice period is 30 days, and I'm open to relocating for the right role.
Can i hire you on contract?
Yes. I take fixed-scope contracts like a design sprint, a website or an audit, and longer contract roles where I work as part of your team for a set term. I charge $50 an hour for hourly work, get paid by bank transfer against an invoice, and can start immediately.
Do you freelance?
Yes. Startups hire me for freelance product design, Framer websites, brand work and UX audits, and freelance projects can start immediately. Before CodeAnt I freelanced for xPay (YC W24), HelpNow (YC W20), Entvin (YC S22), OceanFriends and Zania.
Do you do fractional design?
Yes. Fractional work is for a product that changes every sprint and has no designer on staff. I own design decisions for a fixed share of each week, month to month. The starting price is on my pricing page, and a whole product costs more than one area of it.
Fractional product designer · Pricing
What roles are you open to?
Founding product designer, product designer or design engineer, full-time or contract, remote. The best fit is an early design hire at a startup, owning product, website and brand, especially in B2B SaaS, AI products and developer tools.
Are you a design engineer?
Yes, in the sense of a designer who ships. I design and build production websites in Framer and build working prototypes and small tools with AI coding tools. I don't write production front-end code, so if the role needs that, I'm not the right person.
Roles I'm open to · What is a design engineer?
Do you work remotely?
Always remote. I'm based in India and work with teams in the US, UK, Europe, the Gulf, Singapore and India, with a few hours of overlap each day for calls and reviews. I'm also open to relocating for the right role.
What time zone are you in?
I'm on IST (UTC+5:30), with no daylight saving. My hours are flexible, so UK, EU, Gulf and APAC teams get easy overlap, and with US teams I shift my day to cover your standups and key calls. We agree the overlap hours at the start.
Hire me · Working with a designer in India
Where are you based?
I live in Roorkee, Uttarakhand, India, on IST (UTC+5:30). I work remotely with teams in the US, UK, Europe, the Gulf, Singapore and India, and I'm open to relocating.
What languages do you speak?
English and Hindi, both fluently. I work in English with teams in the US, UK, Europe, the Gulf and Singapore.
Are you open to relocating?
I'm open to relocating for the right role, and the site doesn't limit that to a list of cities. To work outside India I'd need visa sponsorship. Tell me where the role is and I'll give you a straight answer.
Do you need visa sponsorship?
To work outside India I'd need visa sponsorship. Remote from India needs none, and that's how I already work with teams in the US, UK, Europe, the Gulf and Singapore.
What are your salary expectations?
For a full-time role, a base salary above ₹40 lakh a year. For contract work my rate is $50 an hour.
What is your hourly rate?
$50 an hour, for work that's hard to scope up front. Most projects are quoted as a fixed price or a monthly rate instead, so you know the total before we start.
How much do you charge?
Starting prices for each service are on my pricing page, and they cover the smallest version of each job. Your final quote is fixed in a written proposal after one call. For work that's hard to scope up front, I charge $50 an hour.
Pricing · Book a 30-minute call
What changes the price?
Size, what already exists, CMS and content, migration, and motion or custom illustration. If the scope changes halfway, I say what it adds in time and money before doing it, and the change goes into the proposal in writing.
How does a project start?
A 30-minute call or an email, then a written proposal with scope, what's included and what isn't, timeline, price and payment terms, then work starts. A link to your product and what isn't working, with how you know, helps more than a long brief.
Hire me · Book a 30-minute call
Can we do a trial project?
Yes, and it's a good way to test the fit: a paid freelance project first, with a full-time role on the table from day one. You see real work and how I deal with your engineers, and I see how your team makes decisions.
Which industries do you work in?
Mostly B2B SaaS, AI products and developer tools, mainly CodeAnt AI and xPay. I've also designed consumer fintech at FamPay and high-traffic sports pages at Sportskeeda read by 20M+ people a month. The best fit is a live product with real sign-ups and a gap between signing up and getting value.
What tools do you use?
Any tool your team uses. I design in Figma, build websites in Framer and prototype with AI coding tools. My resume also lists Webflow, Spline, Adobe CC, n8n and Zapier, and I work in whatever chat, tracker and docs you already have.
Do you code?
No production app code, in any language. I ship production websites in Framer and build working prototypes and small tools by directing AI coding tools. App code stays with your engineers, and I review the build with them before release.
Do you use ai?
Yes. I build working prototypes and small tools by directing AI coding tools, for ideas that need to be clicked before engineering commits. I also clean up design and UX for apps built in Lovable, Bolt or Cursor, working in the same tools.
Prototyping · AI-built app cleanup
Will you sign an nda?
By default I own the designs I make. If you need to own them, I'm happy to sign an NDA and agree ownership in writing before work starts.
How do i pay you?
By bank transfer, against an invoice. Payment terms, schedule and currency are set out in the written proposal, so you know them before work starts.
Is this an agency?
One person, not an agency. You work with me directly, from the first call to handover. The trade-off is capacity: I can't run three sites in parallel the way an agency can, so I take fewer projects and say so at the start.
Hire me · Freelancer vs agency
Do you work with agencies?
Yes. Agencies hire me for white-label Framer builds: I build your Figma designs or briefs in Framer under your name, then hand the site to you or your client. Each one gets a fixed quote per project from the same starting prices.
White-label Framer development · Pricing
Why should i hire you?
Judge me on results: at CodeAnt AI I doubled trial-to-paid conversion, my UX is used weekly by 40,000+ developers, and manager dashboards cut org-level triage time by 35%. At FamPay, making the one-time voucher rule visible cut related support tickets by 80%.
CodeAnt AI case study · FamPay case study
When are you not a good fit?
If you need a team of researcher, PM and three designers, that's an agency. Same if you want screens restyled with the flow off limits, if the role is mostly production front-end engineering, or if you need a designer live through the whole US Pacific working day.
Testimonials
Amartya Jha, co-founder of CodeAnt AI, said working with me is like compressing five years of design into a single month. There are more on my home page from founders at DawnBreak AI and xPay, and from people at Sportskeeda and Xiaomi. For a reference conversation, email work@utkarshdesign.com.
Can i see your resume?
My resume is on the resume page, with a PDF download: roles, dates, results and credentials, including the IIT Roorkee B.Tech, Official Framer Expert and Awwwards Young Jury 2026.
Social media
I'm on LinkedIn, Behance, Dribbble, Instagram, X (@utkarsh_dp), GitHub, Framer, Contra and the Figma community. LinkedIn, Instagram, WhatsApp and Behance are linked on the contact page.
Yes: linkedin.com/in/utkarshdhairyapanwar. Happy to connect there, though email at work@utkarshdesign.com gets a faster reply about work.
Behance
Behance is behance.net/utkarshdhairyapanwar and Dribbble is dribbble.com/utkarshdp. A few playground cards open on Behance too, like Mars Explorer and the SoundSphere project. The fullest view of my work is on this site, in the case studies.
Github
github.com/UtkarshDhairyaPanwar. I don't write production app code, so it's not where my work lives. The case studies and playground on this site show it better.
What is your notice period exactly?
For a full-time role my notice period is 30 days. Freelance and contract work isn't tied to it and can start immediately. If your timeline needs someone sooner, say so in your first email and we can talk it through.
What interview process do you prefer?
The interviews I find most useful go deep on one shipped project: the problem, the options I dropped and what changed after launch. Thirty minutes on one project tells you more than a slideshow of ten. Send me your process and I'll fit into it.
Hiring a founding designer · Roles I'm open to
Will you do a take home assignment?
What I recommend to any team hiring a designer is a short paid trial: one real problem, a few days, paid. It shows how someone asks questions and handles missing information, which matters more than the output. Send me the brief and timing and I'll tell you what works.
Hiring a founding designer · Hire me
Can you walk us through a project?
Yes. I'd pick one shipped project and go deep. The CodeAnt onboarding work is a good one: developers stalled at connecting a repository because they lacked GitHub admin rights, and fixing that step doubled trial-to-paid. The full write-up is in the case study.
CodeAnt AI case study · How we doubled trial-to-paid
What are your working hours?
My hours are flexible. I work around your team's day where it matters, including live overlap with US time zones, and we agree the overlap at the start. Everything else runs in writing: updates, recorded walkthroughs and decisions logged where your team can see them.
Working with a designer in India · Hire me
Can you work uk hours?
Easily. Central Europe overlaps with most of your working day, since IST is 3.5 to 4.5 hours ahead. With the UK, your morning to early afternoon is my afternoon to evening, so live calls and reviews fit most days.
Working with a designer in India · Hire me
Dubai time zone
Very well. The UAE and the Gulf are 1.5 hours behind IST, so we overlap nearly the whole day. Singapore is 2.5 hours ahead and Sydney 4.5 to 5.5, so your afternoon is my late morning to afternoon.
Working with a designer in India · Hire me
Communication style
Mostly in writing. I write the reasoning next to each design decision, share designs with a short recorded walkthrough, and keep feedback as comments in Figma or your tracker. Decisions get logged in the ticket or doc so nobody reopens them next week.
Working with a designer in India · How to give design feedback
Do you work async?
Yes, and it's how I work best with teams abroad. A one-page brief before any design, a short overlap used for decisions, recorded walkthroughs instead of live presentations, comments in Figma, and an end-of-day handover note. Time zones matter much less once work doesn't wait on a call.
Working with a designer in India
How often will i get updates?
At the end of each day I send a handover note: what's done, what's blocked and what I need from you, so you start your day with it. Bigger pieces come with a recorded walkthrough you can watch when it suits you.
Working with a designer in India
How many meetings a week?
Few, and short. Usually one or two fixed calls a week, plus about thirty minutes in the shared window for anything that needs a yes or no. Everything else goes in comments, which keeps the calls for real decisions.
Working with a designer in India · How to give design feedback
How do you take feedback?
Well, and I prefer it written. Comments in Figma or your tracker are usually sharper than a live reaction, because writing makes you finish the thought. The most useful feedback tells me what's going wrong for users, not just what to change.
How should i give you feedback?
Describe the problem, not the fix. 'I can't tell what to do first on this screen' is something I can design against. 'Make it pop' isn't. A gut reaction is real data too, it just needs one sentence of explanation. My guide on giving design feedback has examples.
What if you disagree with us?
I say so, with the reasoning written down next to the design so you can weigh it. Ask me what I'd push back on and you'll get a straight answer. If the numbers point somewhere, that usually settles it, and most of my results came from changing a flow someone first wanted restyled.
How to give design feedback · Working with a designer in India
Do you sign a contract?
Every project starts with a written proposal: scope, what's included and what isn't, timeline, price and payment terms. Confidentiality and who owns the work get agreed in writing too, and I'm happy to sign your NDA or services agreement if you have one.
Hire me · Working with a designer in India
Do you send invoices?
I send an invoice and payment comes by bank transfer. Projects are usually invoiced by milestone and longer engagements monthly, with the exact schedule set in the proposal so there are no surprises.
Pricing · Working with a designer in India
Payment methods
By bank transfer, against an invoice. The currency and payment schedule are set out in the proposal before work starts. If your company needs a different method, ask and I'll tell you if it works.
Working with a designer in India · Pricing
Do you need an advance?
Payment terms, including any deposit, are set in the written proposal before work starts. The usual shape for a project is a deposit, then payment on delivery. Fractional and product design work is invoiced monthly.
Pricing · Working with a designer in India
Do you charge gst?
I work as an independent designer and I'm not GST-registered, so my invoices don't add GST on top. If your finance team needs anything for its records, like invoice details or a services agreement, I'll provide it. For tax on your side, check with your accountant.
Can we hire you through an eor?
Yes, that works. For a full-time role on payroll from outside India, an employer-of-record service is the usual route. For freelance and contract work it's a simple contractor relationship with invoices, no payroll needed.
Working with a designer in India · Roles I'm open to
Can you work from office?
I work remotely, from Roorkee in India, and I'm open to relocating for the right role. The site doesn't promise regular office days or travel, so if your role needs either, tell me how often and we can work out whether it fits.
Startup or big company
Startups, mostly. The best fit is an early design hire working directly with the founders and owning product, website and brand. I'm also open to a product team at a bigger company if there's a real problem to own end to end, especially in B2B SaaS, AI or developer tools.
What do you look for in a team?
One clear owner on your side, problems written down, and short loops. That's what made my remote work with YC teams go well every time. I also look for a team that runs on written context and lets design change the flow, not just restyle it.
Working with a designer in India · Roles I'm open to
What kind of work culture do you like?
A written one. Teams that put the problem in a brief, decide in short calls and log decisions where everyone can find them get the most out of me. I also like directness: if something's off, say so, and I'll do the same.
Working with a designer in India · How to give design feedback
What are your values?
Say things plainly and early. I publish starting prices rather than make people book a call to learn if I'm in budget, and I'd rather say I don't write production code on my site than in a third interview. And judge the work on results, not how polished the screens look.
Have you managed a team?
Not as a people manager in a job. At CodeAnt I've been the only designer. My leadership experience is E-Summit at IIT Roorkee, where I was design lead and mentored 5+ designers through structured critiques and reusable components, which cut visual rework under deadlines.
Can you lead design?
As a founding designer I already set design priorities with the founders, from what the numbers say, and own design across product, website, brand and design system. The roles I'm open to are founding product designer, product designer and design engineer, and I led design for E-Summit at IIT Roorkee.
Roles I'm open to · Hiring a founding designer
Would you mentor our junior designers?
Yes. At E-Summit I mentored 5+ designers through structured critiques and reusable components, and I've given a career talk at IIT Roorkee on practical paths into design. Sharing what works is part of how I like to work.
Timeline · E-Summit case study
Do you want equity?
Yes, I'm open to equity alongside the base salary. My stated base is above ₹40 lakh a year, and the equity part is something we can shape together for the role, vesting included.
Roles I'm open to · Hiring a founding designer
Is your salary negotiable?
My stated expectation is a base salary above ₹40 lakh a year for a full-time role, and $50 an hour for contract work. The rest of the package, like equity and the shape of the role, is a conversation for a call.
Roles I'm open to · Book a 30-minute call
What is your current ctc?
My site lists what I'm looking for rather than my current pay: a base salary above ₹40 lakh a year for a full-time role. For contract work my rate is $50 an hour.
How many hours a week can you give?
For fractional work, we agree a fixed share of each week up front and it runs month to month. I take fewer projects than an agency would and say so at the start, so the share you get is one I can actually keep.
Fractional product designer · Hire me
Do you work with other clients at the same time?
Usually yes, but not many at once. I'm one person, so I take fewer projects and tell you up front what else I'm carrying. If you need someone exclusive, that's what a full-time or contract role is for, and I'm open to both.
Are you open to contract to hire?
Yes. Contract-to-hire is one of the formats I offer. A paid freelance project first, with a full-time role on the table from day one, lets you see real work and how I deal with your engineers, and lets me see how your team makes decisions.
What would you do in your first 90 days?
I'd want two or three outcomes written down before the offer, so we both know what good looks like. For example: activation improved on a named step, a rebuilt site live, or a component library your engineers actually use. Then the work starts on whichever problem costs you the most.
Hiring a founding designer · Roles I'm open to
How fast do you reply?
Within 24 hours, and usually much sooner. Email work@utkarshdesign.com, or book a 30-minute call if you'd rather talk.
Do i need a designer?
You need one when a design problem costs something you can count, like drop-off at one setup step or support tickets about one rule. If you can't point to that yet, you may not need a designer, and when I reply to an email, sometimes that's my answer.
Hiring a founding designer · Hire me
Do you collaborate with engineering?
Closely. App code stays with your engineers, so I design specs they can build, with the edge cases thought through, and I review the build with them before release. For the website, there's no handoff gap: I build it in Framer myself.
Design handoff guide · Hire me
Will you report to the ceo?
Yes, directly. As a founding designer there's nobody setting design priorities for me, so I set them with the founders, from what the numbers say. Every engagement works best with one clear owner on your side.
Hiring a founding designer · Roles I'm open to
Do you need a lot of direction?
Not much direction. At CodeAnt nobody set design priorities for me, so I set them with the founders, from the data. The best brief I had there was a funnel chart showing people dropping at one step, with no instructions, and that led to the fix that doubled trial-to-paid.
CodeAnt AI case study · How to give design feedback
Why do you like startups?
I do my best work when the problem is messy and the stakes are real, and startups have both. At a startup one designer can own the product, the website and the brand, and see the numbers move. At CodeAnt that meant doubling trial-to-paid.
Why are you a designer?
I started with graphic design and real projects, then moved toward UI and UX once I understood product thinking. What keeps me in it is finding clarity in constraints and structure in chaos, and seeing a flow change move a number.
Are you interviewing elsewhere?
I'm open to my next role, full-time or contract, and to freelance projects. If your timeline is tight, say so in your first email and I'll tell you where things stand on my side.
Are you looking for long term work?
Yes. Fractional work runs month to month for as long as it's useful, and I'm open to full-time and longer contract roles. Most of my best results came from staying with a product long enough to see the numbers move.
Are you reliable?
People I've worked with say so. Ajay Kumar, Growth Manager at Xiaomi, called me creative, reliable and dedicated, with high-quality work beyond scope. Rehan Danish at Sportskeeda mentioned dedication and professionalism. Timelines and scope are in writing from the start, so nothing is a surprise.
How do you handle pressure?
I do my best work when the problem is messy and the stakes are real. At E-Summit, with 11K+ attendees and fixed dates, I kept a team of designers moving with structured critiques and reusable components, which cut visual rework under deadlines.
How do you handle ambiguity?
I like it. I'm a designer who finds clarity in constraints and structure in chaos. My first move is to find the number that shows the problem, like the CodeAnt funnel chart where people dropped at connecting a repository, and design against that.
How fast do you learn?
Quickly. At xPay I picked up Framer in 3 days and shipped landing pages, decks, graphics and marketing assets end to end, which their co-founder Aniket Gupta wrote about. I'm now an official Framer Expert, and I pick up a team's tracker, docs and chat on day one.
Are you a team player?
Well. At IIT Roorkee I worked in a 5-designer team on campus food systems with McDonald's, and led design for E-Summit. Day to day I work with founders and engineers and keep decisions written down so the whole team can follow them.
Are you looking for an internship?
No. I graduated from IIT Roorkee in 2025 and I've been founding designer at CodeAnt AI since June 2024. I'm open to full-time and contract roles, and to freelance projects.
Feedback on my portfolio
Portfolio reviews aren't one of my listed services. My guide on judging a founding designer's portfolio walks through 20 examples and what to look for, which is a good place to start. For anything more, email work@utkarshdesign.com.
Judging designer portfolios · Contact
Want to collaborate
Happy to hear about it. Email work@utkarshdesign.com with what you're building, where it's stuck and what you'd want from me, and I'll reply with a few questions. Paid projects are what I take on, so mention the budget and timing.
Can you refer me?
This chat can't take referral requests. For CodeAnt AI, codeant.ai is the place to look for what the company is doing. For anything else, email work@utkarshdesign.com with the details.
Are you hiring?
The site doesn't list any openings, and I'm one person rather than an agency, so there's no team to join. If you'd like to work together on something specific, email work@utkarshdesign.com.
I'm a recruiter
Send the job description to work@utkarshdesign.com, or pick a 30-minute slot on cal.com/utkarsh-design/30min. Quick facts: founding product designer, product designer or design engineer roles, remote from India, 30-day notice, base above ₹40 lakh a year.
Roles I'm open to · Book a 30-minute call
Will you show our project in your portfolio?
By default I own the designs I make, so shipped work can end up in my portfolio. If the project has to stay private, I'm happy to sign an NDA and agree ownership in writing before work starts.
What if we want to cancel?
The site doesn't spell out cancellations or refunds. Terms are set in the written proposal before work starts, along with scope, timeline and payment, so ask then and you'll have it in writing.
Can you do it for free?
The trial I offer is paid: a freelance project first, with a full-time role on the table if that's the plan. The site doesn't offer free or spec work. If you want to see how I think before paying, the case studies and guides on this site are free.
Hire me · CodeAnt AI case study
Do you give discounts?
The site doesn't list discounts. The quote depends on scope, so a smaller scope is the way to a smaller number, and the pricing page shows the starting price for the smallest version of each job.
I have a small budget
Tell me the budget and what you need. The pricing page lists starting prices for the smallest version of each job, and a tighter scope keeps the number down. Sometimes the honest answer is that you don't need a designer yet, and I'll say so.
Why is the price different?
The pricing page shows starting prices for your region, worked out from your browser's time zone, so check it there rather than trusting a number you saw elsewhere. Your actual quote is fixed in a written proposal after one call.
Pricing · Book a 30-minute call
Is it cheaper to hire a designer from india?
Rates in India are lower, and that's a fair reason to start a conversation and a bad reason to hire anyone. A cheaper designer who needs constant direction costs you founder time. Judge me on shipped work, like the CodeAnt case study.
Working with a designer in India · CodeAnt AI case study
Can i trust you?
Look at shipped work you can click: codeant.ai, the CodeAnt dashboard at app.codeant.ai, zania.ai and entvin.com. Founders like Amartya Jha of CodeAnt AI and Aniket Gupta of xPay have gone on record, and every project starts with a written proposal.
Are you on upwork?
I'm on Contra at contra.com/utkarsh_dhairya_panwar and in Framer's Experts directory at framer.com/@utkarsh-dhairya-panwar. Hiring me directly by email at work@utkarshdesign.com works the same way.
Do you work with indian startups?
Yes. I'm based in Roorkee and I've worked with Indian teams like FamPay, Sportskeeda and xPay, alongside teams in the US, UK, Europe, the Gulf and Singapore. Same process either way: one call, then a written proposal.
Hire me · Working with a designer in India
Can i leave a message?
This chat doesn't pass messages on, and Utkarsh isn't reading it live. Email work@utkarshdesign.com, send a brief through the contact page, or book a 30-minute call, and you'll reach him directly.
Contact · Book a 30-minute call
How do you design a product?
As a short loop. Find the number that's moving the wrong way, find why, sketch the flow before any screens, test the cheapest fix, ship it with every state (empty, loading, error, no-permission), then measure the same number again. One turn can take days, and I go round many times.
My product design process · CodeAnt AI case study
How do you design a website?
Week 1 is positioning and the page map: who the site is for and what they need to believe. Then wireframes and copy on every page, reviewed before anything is styled. Then I design the main pages and build in Framer as I go, so you review a live staging link. The last week is domain, redirects, real phones and handover.
Website design and development · Framer developer
What is your design philosophy?
Change the flow, not just the screens. I find clarity in constraints and structure in chaos, start from a number that's moving the wrong way, agree flows in writing before high-fidelity screens, and design every state, not only the happy path. Then I check the same number again.
About · My product design process
Interests outside design
When I'm not designing, I'm at a card table, on an impromptu trip or doing absolutely nothing, guilt-free. Off screen I'm chasing mountains, drums and open sky. After hours I also build things you play with, like Mitti, a pottery wheel you shape with your bare hands, in the playground.
How do you optimise things?
Find the step where people drop and the one sentence that explains why, then test the cheapest fix and measure the same number. At CodeAnt the drop was connecting a repository, because the person signing up usually wasn't the GitHub admin. Letting them pull the admin in doubled trial-to-paid, and setup went from 7 steps to 3.
How we doubled trial-to-paid · CodeAnt AI case study
Working with you
Remote from India, mostly in writing. A short daily overlap is for decisions, the rest is async: recorded walkthroughs, comments in Figma, decisions logged in your tracker and an end-of-day handover note. Files live in your workspace, so the Figma files and Framer project are yours at handover.
Working with a designer in India · Hire me
Have you worked in a team?
Both. At CodeAnt I'm the only designer, working day to day with the founders and engineers. In internships at xPay, FamPay and Sportskeeda I worked inside product teams, and at IIT Roorkee I worked in a 5-designer team on Campus Food Systems and led design for E-Summit.
How do we schedule recurring calls?
Book recurring calls in a shared calendar rather than agreeing on '7pm my time'. India doesn't change its clocks, but most of the US, UK and Europe do, so the gap shifts twice a year. A shared invite moves with it.
Working with a designer in India
Do you check results after launch?
Yes. I measure the same number I started with, never one picked afterwards, usually two to four weeks after shipping. If it moved, we find the next problem. If it didn't, the why was wrong, so I go back a step. At CodeAnt that number was trial-to-paid, and it doubled.
My product design process · How we doubled trial-to-paid
What's the process to hire you full time?
Email the job description to work@utkarshdesign.com or book a 30-minute call. I reply with a few questions, we talk, and if you want to test the fit first, a paid freelance project works with the full-time role on the table. For a full-time start, my notice period is 30 days.
Roles I'm open to · Book a 30-minute call
Would you work for equity only?
The site doesn't offer equity-only work. Freelance and contract projects are paid, and for a full-time founding role my stated ask is a base salary above ₹40 lakh a year, with equity as part of the conversation on top.
What would you own as our founding designer?
Design across the company: the product, the website, the brand and the design system, often in the same week. Nobody sets design priorities for a founding designer, so I'd set them with you from what the numbers say. That's the job I've done at CodeAnt AI since June 2024.
Hiring a founding designer · CodeAnt AI case study
Can a designer in india be our founding designer?
Yes, if your team runs on written context. I'm based in India and have been founding designer at CodeAnt AI (YC W24) since June 2024. What made it work: one clear owner on the team's side, problems written down and short loops.
Working with a designer in India · Roles I'm open to
What is the time difference between india and the us?
IST is 9.5 to 10.5 hours ahead of the US East Coast, 12.5 to 13.5 ahead of the West Coast, 4.5 to 5.5 ahead of the UK, 3.5 to 4.5 ahead of Central Europe and 1.5 ahead of the Gulf. Singapore is 2.5 hours ahead of IST, Sydney 4.5 to 5.5.
Working with a designer in India
What is the best designed thing?
The safety pin. Walter Hunt patented it in 1849, and it has barely changed since, because there's nothing left to take away. One piece of wire does everything: the coil is the spring, the clasp covers the point so it can't hurt you, and it costs almost nothing to make. Simple, safe and obvious once you see it, which is what I aim for in a product.
Favourite design book
Lean UX by Jeff Gothelf and Josh Seiden, for treating design as a series of small bets you test quickly, and Steal Like an Artist by Austin Kleon, for the reminder that good work grows out of what you collect and remix. One shapes how I run projects, the other how I find ideas.
Favourite show
Abstract: The Art of Design on Netflix. Each episode follows one designer, from illustration and architecture to typography and product, and it's a great reminder of how differently good designers think.
Favourite app
Duolingo, for making a hard habit feel light: one tiny lesson, instant feedback and a streak you don't want to break. And UPI apps like Google Pay, which turned paying someone into scanning a code and entering a PIN, so simple that a whole country changed how it pays. Both win by removing every step that doesn't need to be there.
Services, timelines and process
List all your services
Three groups. Product UX and apps: SaaS products, dashboards, mobile apps, MVPs, redesigns, prototypes, AI-built app clean-up. Web design and dev: Framer sites and landing pages, Figma or Webflow to Framer, white-label builds, rebrands with a new site. Branding and consultation: identity, design systems, marketing design, UX audits, usability tests and consults.
All services · Starting prices
Which service do i need?
Start with one question: is there a live product with real users? If yes, an audit usually finds the cheapest fixes first. If not, design the product. A website that's dated or missing is a Framer project, and if decisions come up every week with no designer on staff, fractional work fits. On the first call I'll say which one, even if it's none.
UI/UX design services · Book a 30-minute call
Framer website design and build
I design and build marketing sites in Framer, usually 5 to 10 pages: home, product or feature pages, pricing, about, contact. You get a page map, wireframes with real copy, desktop and mobile design, the Framer build with CMS, forms, analytics and SEO settings, then a handover session so your team publishes without me.
Framer design and build · Starting prices
Landing page design
Yes. Every landing page is built around one action: a trial, a demo or a waitlist. A trial page leans on product screens and setup steps, a demo page on outcomes and recognisable customers, a waitlist page on a sharp problem statement. I keep one primary button, put analytics events on it, and publish on your domain with the form connected.
Framer landing pages · Starting prices
What can't you build in framer?
Logged-in apps, user accounts, stores with checkout and anything that needs a backend. Framer isn't the tool for those, and I'm not the person: you want a front-end developer or a development partner. I can still design the app and work alongside whoever builds it. And if you only need a template recoloured, buying one from the Framer Marketplace is cheaper than hiring me.
What's included and not · Hire
Figma to framer
Yes. If the site is designed in Figma, I build it in Framer: every page responsive on desktop, tablet and mobile, components and styles matching your file, CMS templates, interactions kept light, forms, analytics, SEO settings, your domain and a handover. Because I design too, I fill gaps in the file for you to approve instead of guessing.
Figma to Framer build · Starting prices
What do you need in the figma file?
The file doesn't have to be perfect. Before quoting I review it the way the build will, then send a short list in three groups: ready to build, missing (I'll propose it), and needs a decision from you. Missing mobile frames are common; I design them in your file's style for approval, which adds a few days, not weeks. View access is enough.
Do you use a figma to framer plugin?
Plugins can paste frames across, but the result is usually absolute-positioned layers that break at other screen sizes. I use Framer's official Figma plugin to copy layers when it helps, then rebuild the layout with stacks, components, styles and breakpoints, so the site is responsive and your team can edit it without breaking things.
Figma to Framer · Figma vs Framer
Webflow to framer migration
Yes. There's no one-click importer, so it's mostly an SEO and content project: a URL map and content model first, templates rebuilt in Framer, CMS collections brought across by CSV and checked by hand, every changed URL given a 301 before the domain switches, then two weeks of Search Console checks. I move it close to like-for-like first and redesign after.
Webflow to Framer · Book a 30-minute call
Will we lose seo moving from webflow?
Not if the URLs that earn traffic keep their paths, every changed URL has a 301 before the domain switch, and metadata is carried over. Redirects are a Pro feature on Framer's current plans, so in practice a migration needs Pro. Small swings in the first weeks are normal; lasting drops usually mean a missed redirect, which is what the two weeks of checks are for.
Migration without losing rankings
Should i move from webflow to framer?
Move when the builder is the problem: every small edit needs the one person who knows Webflow's class system. Don't move when the problem is the message, since a site that doesn't convert on Webflow won't convert on Framer. Stay if you depend on deep CMS references, native ecommerce or an in-house web team. I build in Framer, so a happy Webflow team should hire a Webflow designer.
Should you move at all · Book a 30-minute call
How does white label work?
Two set-ups work. You send finished Figma designs and I build them, or you send a brief and your client's brand and I design and build it for you to present as your own. I review the file, send gaps, scope, timeline and a fixed quote, build on a staging link you review first, and changes come through you. Then I transfer the project to whoever you say.
White-label Framer · Book a 30-minute call
Will your name appear on the site?
No credit in the footer or the code, and the Framer project ends up in the workspace you choose with no trace of my account. I don't contact your client or pitch them other work, I join client calls only if you invite me, as part of your team, and I don't show white-label work anywhere unless you say I can. I'm happy to sign your NDA first.
Agency rates
Each agency project gets a fixed quote after I've seen the file or brief, from the same starting prices as direct work, which are on the pricing page. Page count, CMS, animation and missing breakpoints are what move it, and design-and-build costs more than build-only. If you expect a steady flow of projects, say so on the first call and I'll cover it in the proposal.
Pricing for agencies · Starting prices
Do you design and develop websites?
Yes, both. I design the site and build it in Framer myself, so one person owns it from page map to published URL, with no drift between a Figma file and a developer's guess. I don't write code by hand and I'm not a software engineer. The trade-off is capacity, so I take fewer projects.
Website design and development · Starting prices
First website for my startup
At seed stage most visitors arrive because a founder sent them, so the site confirms what they heard and gives one obvious next step. I start with a positioning one-liner and page map, then wireframes with real copy, design, and a Framer build you can edit. I've built first sites for Entvin (YC S22) and Zania.
Startup website design · Starting prices
How many pages does a startup website need?
Usually four to six: home, product or how it works, a demo or trial page, pricing, and about. A blog, careers or changelog can wait, since empty pages look worse than none. I still set up the CMS templates for those, so adding a blog later is a content job rather than a design project.
Do we need a brand before the website?
No. I can set up a light identity (type, colour, a few components) as part of the site, and a fuller brand can come later. If you want a proper identity and a new site launched together, that's my rebrand service, done as one project by the same person.
Startup website design · Rebrand with a new site
Website redesign
A redesign is worth it when the company changed (new positioning, product line or buyer) and the site still tells the old story. I start from the message, audit current pages for traffic, conversions and rankings, decide which URLs stay, then design and build in Framer with a redirect list and two weeks of Search Console checks. That's what I did as CodeAnt's go-to-market moved.
SaaS website redesign · Starting prices
Will a redesign hurt our seo?
It can, if URLs change without redirects or ranking pages lose their content. So before any design I pull the pages that rank and convert and give each a decision: keep the URL and redesign, keep and rewrite, restructure for search, or merge with a 301. The 301s go live before the DNS switch, and I watch Search Console for two weeks after.
Startup rebrand
A rebrand is usually three vendors: identity, website and moving search traffic across. I do all three as one project: a new identity tested on real pages, a new Framer site handed over in your account, and a URL map with redirects checked at launch. If you were looking for a rebranding agency, this is the smaller version: one designer, no account managers.
Startup rebrand · Starting prices
Will a rebrand hurt seo?
It can if old URLs vanish or all redirect to the homepage. I do the URL map before the site design: each old URL is kept, redirected to its closest new page, or retired on purpose, and I test the redirects on launch day. Keeping your domain is the safer option for search; a rename with a domain change takes longer because more URLs move.
Keeping search traffic · Website redesign
Refresh or rebrand
Refresh when the name and positioning still fit and the visuals have drifted or look dated. Rebrand when the company now sells something different, or to someone different, from what the old brand says. Often the logo is fine and the problem is everything around it, like colour, type and how the product uses them.
Startup rebrand · Brand identity
What do i get in branding?
A logo (usually a wordmark first) with light, dark and one-colour versions and clear-space rules, a colour and type system that works at 13px in a product table as well as in a headline, short guidelines people actually read, Figma tokens and core components, and starter templates for the website, social posts and decks. Directions are shown on real surfaces, not blank artboards.
Brand and design systems · Starting prices
Can you work with my existing logo?
Yes. Often the logo is fine and the problem is everything around it: colour, type and how the product uses them. And if you only need a logo on its own, a logo designer will cost less than me; my work is the system around it, across site, product and marketing.
Design system
Yes. I start from the screens already shipped and pull out what repeats, then build tokens and components in Figma with every state, named to match what your engineers use in code, and review the coded versions with them so Figma and production don't drift. At CodeAnt I standardised 18+ UI patterns into one system and design turnaround dropped 30%.
Brand and design systems · CodeAnt AI
Design system vs component library
A component library is the reusable parts; a design system adds tokens, patterns, usage rules and someone who owns changes. Most startups need a library of 10 to 25 components with one page of rules first, and grow it when a second designer or product arrives. Material UI or shadcn can be the base; it becomes your system once your tokens and rules sit on top.
Design system vs component library
Graphic design services
Yes: social and campaign graphics with reusable templates, ad creatives in each platform's size and readable at thumbnail size, launch assets, sponsorship and sales decks, and event collateral. Because I also design the product and site, they can share one visual system, as they did at CodeAnt. It's quoted per project after a first call, with every asset, size and revision round in writing.
Graphic and marketing design · Book a 30-minute call
Monthly social media package
No. I design campaign sets and templates per project, so your team can produce routine posts without me. If you want something like 30 social posts a month at a fixed low price, a design subscription or a marketplace seller suits that volume better.
Marketing design · Subscription vs freelancer
Event posters
Yes. My biggest graphic project is E-Summit 2023 at IIT Roorkee: as design lead with 5 designers and 3 developers, one identity ran across posters, standees, passes, merch, sponsorship deck, stage, social tiles and the website. Posters ran on templates so five designers could work at once. It reached 5M+ social impressions, 11K+ attendees and ₹25L+ in sponsorship.
E-Summit case study · Marketing design
Do you handle printing?
Yes. I hand over print-ready files: colour profile, bleed and resolution set before export, using CMYK Exporter, the Figma plugin I built for that step, plus the editable Figma files. The printing itself stays with your printer.
Pitch deck design
Yes. I design sponsorship and sales decks that make sense without anyone presenting them, plus short launch decks. At xPay I shipped decks alongside landing pages and product work. The E-Summit sponsor deck was many sponsors' first contact with the event, so I kept it calmer than the posters: one point per slide, numbers set large, the ask stated plainly.
Interactive website
Yes, when the interaction carries the message: a demo visitors can try, or a scroll sequence that explains how something works. My test is whether a visitor understands something after touching it. I build in Framer, or with AI coding tools when it needs a camera, sound or live input, with reduced-motion fallbacks and a performance check. My playground pieces are the proof.
Interactive websites · Playground
Do you do 3d?
Spline is in my toolkit for lighter 3D, but I don't build large 3D product configurators or WebGL games for brands. A heavy 3D experience needs a specialist studio. For most startup sites I'd keep it to one or two moments of real interaction and very little motion elsewhere.
B2b product designer
I design B2B SaaS products: onboarding, the core workflow screens and the dashboards managers decide from. You get a flow map, Figma screens for every state, a clickable prototype, written rules for edge cases attached to the frames, and a review of the build before release. At CodeAnt my manager dashboards cut org-level triage time by 35%.
SaaS product design · Starting prices
Analytics dashboard
Yes. The main one is CodeAnt AI's dashboard, used weekly by 40,000+ developers: code analysis and secret leaks lived in separate places, so I designed manager dashboards around the question managers arrive with, and org-level triage time fell 35%. I've also designed dashboards for Entvin, Ocean Friends and Trusty Money.
SaaS dashboard design · CodeAnt AI
Do you design edge cases?
Always. The happy-path screen is maybe a fifth of the work. The rest is states: empty, loading, partial data, a failed sync, no permission, 3 rows and 3,000 rows. I design them with the feature and write a rule for each, so engineers don't guess. I picked up the habit at FamPay, redesigning what happens when a payment times out or a bank declines it.
What a SaaS designer owns · FamPay
Can you work inside our design system?
Yes. I design with your components first and only propose new ones where a pattern is missing or duplicated. If your product already has a mature system with a team maintaining it, a contributor inside that team may serve you better than an outside designer, and I'll say so.
Mobile app design
Yes. I design mobile apps: task flows including what happens when a payment fails, iOS and Android screens with every state, and a prototype tested with five to eight users. Examples: FamPay's Cashback Store and payment error states, and SoundSphere, a concept podcast app I designed end to end in four weeks.
Both ios and android
Yes, both. Most flows share one design, and I adapt the parts where the platforms behave differently, like navigation patterns, bottom sheets and system permission prompts.
Can you build the app too?
No. I don't write Swift or Kotlin. I design and prototype the app, then work with your engineers or development partner during the build, with handoff notes and a review of the first built screens. For websites I do build, in Framer.
Mvp design
MVP design means designing only the screens that test the one assumption that could sink the company, and deciding what to fake, skip or do by hand. You get a one-page assumption brief, a flow map from signup to first value, finished screens for the build pile with their states, a prototype for five to eight user sessions, and a small component set.
What should be in my mvp?
We go through your feature list line by line into three piles: build properly (the path that tests the bet), fake or do by hand (billing by invoice, onboarding on a call), and skip (roles matrix, dark mode, admin console). Anything that blocks first success can't be skipped. And the core path should look finished, because users read a rough product as a bad idea.
Can you build the mvp?
I design it and work alongside your developers, but I'm not an engineering team. I can build a working prototype of a risky interaction with AI coding tools, and I review the build against the designs. Tools like Lovable, v0 or Bolt are fast at screens, but they don't decide what the product should do first or what happens when something fails.
MVP design · AI-built app clean-up
Product redesign
I redesign live SaaS products in three passes instead of one big relaunch: first the flows that cause support tickets and drop-off, then one system instead of scattered UI patterns, then the visual refresh through tokens. Each pass ships on its own, so users get fixes within weeks and never relearn everything at once. I can lead pass one and hand the rest to your designers.
Product redesign in three passes
Redesign or rebuild from scratch
Redesign in passes if the product's core job and audience stay the same; changes arrive a few screens at a time, so users don't need retraining. Rethink from the flows up only if you're changing what the product is, and design the new version once if engineering is moving to a new stack anyway. You don't need a design system first; it comes out of pass two.
Usability audit
My UX audit covers the whole product: every core flow against usability heuristics, then each finding weighed against funnel data, recordings and support tickets. Findings that are only my opinion are labelled as opinion. You get an annotated walkthrough in Figma, a ranked fix list in a spreadsheet, a two-sprint cut, redesigns of the worst two or three screens and a live review.
What do you need for an audit?
Product access with realistic data, any funnel or analytics exports you have, a sample of support tickets, and about an hour of the product owner's time across the audit. You don't need analytics set up first: funnel data sharpens the ranking, but walking through as different user types and reading tickets finds most issues on its own.
When is an audit a waste?
It's the wrong buy for a pre-launch product with no users, since there's no evidence to test findings against; a usability test on a prototype is better value. A marketing site needs a conversion audit instead. And if your team has no engineering time in the next two months, skip it, because the list will be out of date before anyone ships it.
Onboarding audit
A fixed-scope review of signup to first value, in about two weeks. I go through it as an admin, an invited non-admin and a solo signup. You get an annotated flow map, fixes ranked by impact and effort, redesigns of the worst two or three screens and a recorded walkthrough. It builds on the work that doubled trial-to-paid at CodeAnt.
SaaS onboarding audit · CodeAnt AI
Can you implement the audit fixes?
The audit itself doesn't include building the fixes, A/B testing them or redesigning the rest of the product. Afterwards I can design and test the fixes with your engineers as a follow-on sprint of two to four weeks. Many teams ship the quick wins from the fix list themselves.
Onboarding scorecard
Yes, there are free self-assessments on the site's tools page: an onboarding scorecard that takes about five minutes and points to your weakest stage, a landing page grader that runs 12 conversion checks, plus an activation calculator and a design cost estimator. They're a rough read before talking to anyone, not a substitute for an audit.
Onboarding audit · Conversion audit
Website conversion audit
I check your homepage and up to four landing pages for message, page order, proof, the path to a demo or trial, and traffic fit, against your analytics. You get an annotated teardown, ranked changes with reasons, a rewritten hero and section order with headline options, and redesigned high-impact sections in Figma. A homepage plus four pages takes about two weeks; a single page closer to one.
Conversion audit · Starting prices
A/b testing
I suggest what to test, how to measure it, and design the variants. A continuous testing programme is better run by a CRO team with the tooling and traffic for it, and I don't sell an A/B testing retainer. Most conversion problems are message problems anyway: the headline, the proof, or asking for a demo before explaining the product.
User testing
I run small, moderated tests: five to eight remote sessions of 30 to 45 minutes on the one flow you can least afford to get wrong, failures included. You get a test plan, the prototype or script, recordings, a findings sheet ranked by fix cost, and redesigns of the top two or three problems. It takes about two weeks. I don't run large unmoderated panels or surveys.
Can you recruit participants?
Five to eight for one flow; problems start repeating by the fifth session. Your own users are almost always better, so I help you write the invite and pick who to ask; before launch, people from your network who match your users work. Sessions are remote, in English and in your users' time zone.
Ux audit vs usability testing
Audit first when you don't know where the problems are: a metric is bad and nobody agrees why. Test first when you know the flow and doubt one thing about it. I often combine them: audit the whole path, pick the two flows that matter most, design fixes as a prototype, test with about five users, then check the metric.
Ux consulting
For founders who already have someone designing or building and want a senior second opinion on one decision: a flow, a site, a redesign plan or a design hire. Two formats: one 90-minute working session with a written summary, or a one-week review with an annotated walkthrough and ranked issues. The best outcome is your team shipping the changes without me.
UX consulting · Book a 30-minute call
How much is a consultation?
I quote after reading your question, because a single session and a week-long review are very different amounts of work. Hourly work is $50 an hour, and the nearest published starting price, the UX audit, is on the pricing page. The first 30-minute call to talk about your project is how every engagement starts.
UX consulting · Starting prices
Prototyping service
I pick the fidelity from the question. A clickable Figma flow for usability tests takes about a week. A Framer browser prototype for investor or sales demos takes one to two weeks. A working prototype built by directing AI coding tools, for ideas that need a camera, sound or live data, takes one to three weeks.
Interactive prototypes · Google Detective
Can engineers reuse prototype code?
Treat it as a reference to build from. Working prototypes skip auth, security, error handling and scale on purpose, and I say so in writing with the code. A prototype is not an MVP: if real customers need to log in and pay, you need engineers. I also don't do hardware or physical product prototyping.
Fix my lovable app
If your Lovable, Bolt or Cursor app works but confuses users or looks generic, I fix the design: flows first (sign-up to first useful result, plus empty and error states), then one consistent set of components, then copy and mobile layouts. I work in the same AI tool, so fixes land in the app itself. Usually 1 to 3 weeks.
AI-built app clean-up · Book a 30-minute call
Will you fix bugs in my lovable app?
No. I fix what users see and do: design, UX, flows, copy and layout. Backend logic, APIs, your database, security and code audits need a full-stack developer who can read the code your tool generated, and if you handle payments or personal data, get a security review before launch. I'm happy to work alongside that developer.
What I don't do, and who should
Ai product design
This is my main area. Since June 2024 I've owned the UX of CodeAnt AI's code review, security scans and code quality product, used weekly by 40,000+ developers. Devtools break at org permissions, self-hosted installs and first runs against real code; letting blocked developers ping their admin cut drop-off at that step by 40%. I also design and build these companies' websites in Framer.
AI and developer tools · CodeAnt AI
Do you understand developer workflows?
I've designed CodeAnt's code review, security scanning and Git provider onboarding since 2024, so repo, PR, rule and branch are my working vocabulary, and I still check every flow with your engineers. I design the setup flows in front of the docs and the structure around them; long-form technical writing stays with your engineers. I haven't designed a CLI.
How do you design ai features?
Two problems. On the website, 'AI-powered' tells a buyer nothing, so I lead with the buyer and the job, as Zania and Entvin's sites do. In the product the problem is trust, so I treat the evidence behind each AI finding (the file, the line, the rule) as part of the interface. Model quality and prompts need an ML engineer.
How does fractional work run?
Start of month, a planning call to pick two or three bets and a metric for each. Every week, work in your Figma and tracker with a fixed review slot with engineers and async updates. Mid-month, put the riskiest thing in front of users. End of month, a written note on what shipped and what moved. The share of each week is agreed up front, month to month.
Fractional product designer · Starting prices
When doesn't fractional work?
The question is whether the problem has an end. One defined problem is a project. A product that changes every sprint with no designer on staff is fractional. Fractional doesn't work if nobody on your side owns product decisions, if you need a designer in live meetings most of the day, or if the work has an end date, in which case a sprint costs less.
Fractional, project or full-time
Minimum commitment
Product design runs month to month, with the share of each week agreed up front. There's no stated lock-in, but the first month is mostly learning your product, so it's worth planning for at least a few. Every file lives in your workspace from day one, so if it ends you keep the library, flow maps and decision log. Starting prices are on the pricing page.
Fractional designer · Starting prices
Design sprint
A design sprint is for one problem with a clear edge, like a repo-connection step, a pricing page or a dashboard nobody opens. You get designed, tested screens your engineers can build, usually in 2 to 4 weeks. Before design starts I name the metric that should move, and check it after release.
Ways to work with me · Book a 30-minute call
How long for a landing page?
One to two weeks from brief to a published URL, closer to one if you already have a brand and a Framer site. If the page is already designed in Figma, the build alone is quicker. The biggest variable is how fast copy and feedback come back.
How a Framer project runs · Book a 30-minute call
How long does a website take?
A 5 to 10 page Framer site takes three to six weeks end to end. A first startup site of about four pages with an existing brand can take around two weeks; a new identity or bigger product pages push it to four. The slowest part is almost always waiting for copy and feedback, rarely the build.
How the weeks go · Book a 30-minute call
How long does a rebrand take?
A small rebrand, identity plus a site of 5 to 8 pages, usually takes 4 to 8 weeks end to end. A rename with a domain change takes longer because more URLs move. I confirm the timeline after the first call, once the scope is clear.
How a rebrand runs · Book a 30-minute call
How long for a logo?
An audit of what exists takes a few days, then two or three identity directions on real surfaces, then building the system (tokens, components, guidelines), which is the bulk: typically two to four weeks depending on product size. Then a roll-out on the highest-traffic screens. The exact timeline for brand identity is agreed in the proposal.
How long to design an mvp?
Usually 3 to 6 weeks. One workflow and one user type fits in three or four; two user types, or web plus mobile, takes closer to six. Week one is the bet and the build, fake and skip lists, and I don't design anything until you've signed off on it.
How long does app design take?
About six weeks for the first version of a focused app: flows and risk list in week one, screens and states in weeks two to four, a user test in week five, handoff in week six. Redesigning a single flow in an existing app takes two or three weeks.
How long does a ux audit take?
A whole-product UX audit runs about three weeks; a product with one main user type and a handful of flows can take two. The onboarding audit and a usability test each take about two weeks. A conversion audit of a homepage plus four landing pages takes about two weeks, and a single page closer to one.
How the weeks run · Onboarding audit
How long is a webflow migration?
A five-page site from a complete Figma file takes about a week; ten or more pages with CMS templates and custom interactions take two to three, and missing breakpoints add a few days. A Webflow site with a blog moved like-for-like usually takes 2 to 3 weeks, or 4 to 7 with a redesign on top; large CMS libraries with many references sit at the long end.
Figma to Framer · Webflow to Framer
How long does a product redesign take?
For a mid-sized B2B product, about ten to twelve weeks across all three passes, with fixes shipping from around week four. A small product can do all three in about six weeks; a large one may only need pass one from me while your designers take the rest.
How long is a design sprint?
A design sprint on one flow, or a single devtool flow fix, is typically 2 to 4 weeks. A SaaS project on one area of the product runs about four: understanding the work in week one, flows then screens in weeks two and three, a usability round and build review in week four. A whole product that keeps changing is better as monthly work.
How long for an interactive website?
Week one is the concept, with rough prototypes of two or three ideas. Weeks two to three build the chosen piece, tested on phones and slow laptops. If it's a full site, the pages and Framer build run alongside in weeks three to five, then a launch week for performance and accessibility. A single piece adds a few weeks to a build.
How long to fix my lovable app?
A small app usually takes 1 to 3 weeks, depending on how many screens it has and how far they've drifted. I confirm the timeline and quote after the first call and a walkthrough of the app.
Urgent project
Honestly, it depends on the job. A single landing page from brief to live is one to two weeks, closer to one with a brand and Framer site already in place, and a five-page build from a complete Figma file is about a week. A full website in a few days isn't realistic. Freelance work can start immediately, so email your deadline and I'll say plainly what fits.
Book a 30-minute call · Contact
What slows a project down?
Waiting for copy and feedback, almost always, rarely the build. Things that shorten the work: copy that exists, a brand, finished Figma designs and real product screenshots. Things that lengthen it: starting from nothing, slow approvals, missing breakpoints, many CMS references, a domain change, slow recruiting for user tests. If scope changes, I say what it adds before doing it.
How a project runs · Starting prices
What happens on the discovery call?
It's a 30-minute call about what you need, what exists already and when you need it. Links to your current site or product help more than a long brief. For products, the number you'd like to move helps most. After it I send a written scope, and sometimes my honest answer is that you don't need a designer yet.
What's in your proposal?
A written proposal after the call: scope, what's included and what isn't, timeline, price, and how and when you pay. Payment terms are settled there, before work starts. If the scope changes halfway, say two more pages or a new user role, I say what it adds in time and money first and the change goes into the proposal in writing.
Starting prices · Book a 30-minute call
How many revisions?
Revisions aren't capped at a number of rounds; they're limited by the agreed timeline. Within it, you review as often as you need: on a live Framer staging link for websites, or in fixed review slots, often twice a week, for product work. Anything beyond the agreed scope gets priced in writing first.
How do you communicate?
Short loops. I work in your Figma, tracker and chat tool, with fixed review slots (weekly, or twice a week on product projects) and async updates in between: written decisions and recorded walkthroughs. Website work is reviewed on a live staging link instead of screenshots. Decisions get written down so they survive the next pivot.
Do you work with us clients?
Yes, I work remotely with teams in the US, UK, Europe, the Gulf, Singapore and India. UK, EU, Middle East and APAC teams get live overlap most days. With US teams I keep a window in your morning, which is my evening, and run the rest on written updates and recorded walkthroughs, with one or two fixed calls a week.
What do we get at the end?
Everything lands in your hands. Framer sites are handed over in your own Framer account or workspace with the CMS set up, plus a handover session on editing and publishing. Design work lives in your Figma workspace from day one, with named components; fractional work also leaves a flow map and decision log. Ownership terms are agreed in writing when you need to own the designs.
Can my team edit the site after launch?
Yes, that's the main reason I build in Framer. Sections are components and the CMS has templates your team fills in, so a new campaign page is usually a duplicate and an edit. Every project ends with a handover session on editing, adding pages and publishing. Text, images and CMS items are edited right on the page; layout changes are easier for someone comfortable in design tools.
After launch support
Framer hosts and updates the site, so there's no server to maintain. On migrations and redesigns I watch Search Console for two weeks after launch and fix anything odd. For products, I review the build against the designs before release. If you want ongoing design after that, product work runs month to month, or ask on a call about what you need.
Seo setup in framer
The SEO basics go into every build: one topic per page, a real heading structure, titles and descriptions, social images, clean URLs, a sitemap, fast pages and redirects from old links. They cost almost nothing at launch and a lot to retrofit. At xPay, restructuring 10+ Framer pages around one topic each doubled indexed pages. Content strategy is a separate job.
Do you write the copy?
I write the structure, headline options and section copy from your proof and a brief call, and on products I write UX copy like labels, empty states and error messages. Detailed product copy is best written with you or a copywriter, because you know what your customers say. Wireframes use your real copy, so copy problems show up while they're cheap to fix.
Do you write the copy · Website redesign
Do you use templates?
I design and build the site from your page map, with components made for it. If you only need a template recoloured, or the design is a lightly edited template, buying it from the Framer Marketplace is quicker and cheaper than hiring me. If you're pre-product and only need an email capture, a Framer template and an afternoon will do.
Do you work with in house designers?
Yes. On a product redesign a common split is that I lead the audit and the first pass of flow fixes, and your designers take over the system migration. If you already have someone designing and want a senior second opinion on one decision, a UX consult is the right size.
Product redesign · UX consulting
What do you need from me to start?
It depends on the job. Website: your current site, what the new one has to do and when it needs to go live. Figma to Framer: the Figma link (view access) and your launch date. Audit: a product link and roughly how many trials you get a month. MVP: the idea in one sentence, who it's for and what could kill it.
Contact · Book a 30-minute call
Minimum project size
The starting prices on the pricing page are the floor for each service, and each covers the smallest version of the job. A single landing page or one consult session are the smallest pieces of work. Hourly work is $50 an hour for things that are hard to scope. If something's too small to need me, like recolouring a template, I'll say so.
Starting prices · Book a 30-minute call
Hourly or fixed price
Both exist. Hourly work is $50 an hour, for work that's hard to scope up front. Most projects are quoted as a fixed price or a monthly rate instead, so you know the total before starting, and the final quote comes in writing after a call.
How much is a rebrand?
Starting prices for each service are on the pricing page, and each covers the smallest version of the job. Build-only, migration, marketing design and consulting work is quoted after I've seen the file, site or brief. Hourly work is $50 an hour. Your final quote is fixed in a written proposal after a call.
Starting prices · Book a 30-minute call
Do you work on many projects at once?
I'm one designer, so I take fewer projects and say so at the start. One person can't run a brand, a website and a full product in parallel by a fixed date; for that, hire a team. If the work comes one problem at a time and you want the person designing it to understand your funnel too, one designer is usually faster with fewer hand-offs.
Freelancer vs agency · Book a 30-minute call
B2b saas experience
Most of my work is B2B SaaS. In B2B the person who signs up is rarely the one who pays or can finish setup, so I design for the user, the admin who unblocks them and the buyer. At CodeAnt that meant 2x trial-to-paid, 40% less drop-off at the admin wall and 35% less triage time; at xPay a 25+ component system cut feature delivery by 35%.
Cybersecurity design
Good security UX turns a pile of findings into a short, ordered list someone can act on today. At CodeAnt I design the security scanning, secret-leak and attack surface views, and I designed and built zania.ai, an AI agent for GRC compliance, in Framer. My work is application security; I haven't designed a SOC console, and control requirements come from your compliance team.
Healthcare design
My healthtech and pharma work is for the people behind care: Entvin's website for pharma regulatory AI, HelpNow's InstaMed app for businesses ordering medicines (both since closed), and an OceanFriends dashboard redesign for therapy-centre staff. I haven't built HIPAA, FHIR or EHR systems, patient-facing medical devices or clinical tools, and I say so before scoping anything.
Sports website design
At Sportskeeda I designed the NFL and IPL live-score pages for 20M+ monthly users, treating pre-match, live and finished as three states of one page so the layout never jumps, and worked on advertiser landing flows that lifted campaign CTR 10%. I haven't designed a newsroom CMS. For audio, SoundSphere is a 4-week podcast concept that never shipped.
Sports and media · SoundSphere
Design for startups by stage
Different stages need different design. Pre-seed: a clear website, usually 3 to 6 weeks for 5 to 10 pages. Seed: a design sprint on the core flow. After traction: fractional or a founding designer for funnel and system work. No designer and no files is the normal starting point; the first project sets up a small component library and written decisions.
Startups · Book a 30-minute call
Do you build online stores?
I don't build online stores, and Framer has no built-in store; teams connect Shopify, Lemon Squeezy or payment links. If selling is the site's main job, WordPress with a shop plugin, Wix or Squarespace fit better. Checkout UX inside a product is different: I designed xPay's checkout for live sales demos and FamPay's payment flows.
What services don't you offer?
I don't build production app code or backends (I pair with your engineers or a development partner), online stores, Webflow or WordPress sites, large 3D or WebGL experiences, hardware prototypes, naming or trademark work, HIPAA or EHR systems, or monthly social packages. I design products, build marketing sites in Framer and prototype with AI coding tools.
Naming service
Naming research, trademark searches, leadership positioning workshops and multi-market brand programmes are a brand strategy firm's job, and I can pick up from their brief. What I do is a one-line positioning on website and redesign projects, agreed with the founders before design, so the pages say what you do and for whom.
Framer vs webflow
For a SaaS site run by a small team that ships often, I'd pick Framer: faster to build in, and marketers edit without a developer. Pick Webflow for deep CMS relationships, heavy content operations, native ecommerce, code export, or an in-house web team that wants control over markup. I'm a Framer Expert, so I'm not neutral, and I'll tell you to stay on Webflow when it fits.
Webflow to Framer · Framer vs WordPress
Framer vs wordpress
For a 10 to 30 page startup site edited by a small team, I'd pick Framer: nothing to host or patch, and marketers publish without a developer. Pick WordPress when content is the business (many authors, editorial review) or you need its plugins or must self-host. Wix and Squarespace fit sites that take bookings or sell products. I don't build on WordPress.
How much does framer cost per month?
Framer charges per site, with hosting included. On its October 2026 pricing page, a typical startup setup on Pro (owner, two layout editors, one content-only editor) came to $80 a month, with nothing else for hosting or updates. Pro is also what you need for redirects in a migration. Pricing changes often, so check Framer's own page before deciding.
Framer vs WordPress · Migration
Can framer handle a blog?
Yes. Framer's CMS suits a startup blog, changelog, customer stories or job posts, with collections limited by plan. If you publish daily with many authors and editorial review, WordPress is built for that. A middle path is the marketing site in Framer and a large blog on what your content team already runs, but only when the content operation needs it.
Figma vs framer
Figma is where you design; Framer is where a website gets built, hosted and edited. I keep product UI and design systems in Figma and build marketing sites in Framer. Figma Sites was still in beta in October 2026 and suits simple pages best; for a SaaS site that has to rank, I'd want Framer's maturity.
Freelancer or agency
Hire a freelancer when you have one clear problem at a time and want the person you talk to to do the work. Hire an agency for several disciplines at once, a deadline one person can't cover, or a vendor procurement can sign off. I'm one person, so the honest risk is continuity, and I'll tell you plainly what happens if I'm unavailable.
Design subscription vs freelancer
A subscription is a flat fee for a queue of requests, worked one or two at a time; it suits steady, well-defined marketing work. A freelance product designer suits problems like onboarding, where deciding what to design is the hard part. I don't run a request queue; ongoing product and marketing design from me is fractional work. Plenty of startups use both.
Freelance or full time designer
Freelance fits work that comes in projects with a clear end; full-time fits when design decisions come up every week and need an owner. Signs it's time: back-to-back projects with the same freelancer, engineers waiting on design weekly, and product, site and brand looking like three companies. If only one or two are true, try fractional first. I'm open to all three.
Freelance vs full-time · Open to roles
Are you good at seo?
Yes, on the design and structure side, in order of what pays back: the message and page order first, then structure for search (one topic per page, real headings, internal links), then Framer SEO settings and speed. At xPay, restructuring 10+ Framer GTM pages doubled indexed pages. This portfolio is built for search and AI assistants too: JSON-LD, llms.txt, Markdown pages, a sitemap and an MCP server.
Framer SEO guide · Framer websites
Can you make my site show up in chatgpt?
I can set your site up the way I set up my own: pages AI tools can read and quote (live text, one topic per page, clear headings), structured data as JSON-LD through custom code since Framer has no schema builder, llms.txt and a sitemap. Whether ChatGPT, Perplexity or AI Overviews cite you still depends on your content and authority, so I don't guarantee results.
Framer SEO guide · Book a 30-minute call
Do you do link building?
No. I cover the design side of SEO: page map, structure, metadata and a fast Framer build, on new or existing sites. I don't do link building, content programmes or ranking guarantees; pair me with an SEO specialist for those. Rankings also depend on links, brand searches and domain age, which no builder or designer controls.
Core web vitals
Framer hosts on a CDN and resizes images into modern formats, but it won't stop a 4 MB video and three scroll animations above the fold, so I keep pages light. Interactive pieces get a performance check, load after the main content and have fallbacks for slow devices. I check speed in conversion audits too: cheap to fix, though rarely the main reason a good visitor leaves.
This site and the intro
What is this site?
This is my portfolio. I'm Utkarsh Dhairya Panwar, a founding product designer and design engineer, Founding Designer at CodeAnt AI (YC W24) and an IIT Roorkee graduate. Home holds my intro, services, case studies, live work and testimonials, all inside a desktop you can play with.
What is the scrolling text?
The ticker runs through the quick facts: 5+ national design awards, Awwwards Young Jury, Framer Expert, IIT Roorkee graduate, 15+ brands, the Adobe design hackathon, and Founding Designer at CodeAnt AI (YC).
Product ux and apps
Product UX & Apps is complete design for mobile apps, dashboards and complex workflows, built on systems that scale. It includes UX/UI design, app flows, interaction design and usability testing. The card shows a Unipace job-search dashboard.
UI/UX design · SaaS product design
Web design and dev
Web Design & Dev means Framer-powered websites that are fast, responsive and built to convert. It includes research and insights, Framer development, SEO and visual identity. I design and build the site myself, so there's no designer-developer handoff. The card shows the Cognizance 2023 site.
Website design and development · Pricing
Branding and consultation
Branding & Consultation covers cohesive brand identities, design systems, and strategic advice to sharpen UX and direction. It includes logo design, guidelines, UX audits and packaging design. The card shows my E-Summit '23 branding on a street billboard.
Brand and design systems · UX audit
Pranav
Pranav Karthik Nagesh, Co-Founder of DawnBreak AI (ex-Google, Amazon), said: "Utkarsh iterates fast, asks the right questions, and delivers polished results in days. The final output exceeded expectations."
Aniket
Aniket Gupta, Co-Founder of xPay (YC W24), said: "Quick learner and strong designer. Picked up Framer in just 3 days and shipped landing pages, decks, graphics, and marketing assets end-to-end." I worked with xPay in early 2024.
Rehan
Rehan Danish, Product Designer at Sportskeeda, said: "Utkarsh brings creativity, dedication, and professionalism. He turned complex requirements into intuitive, valuable designs for our team."
Ajay
Ajay Kumar, Growth Manager at Xiaomi (ex-Flipkart), said: "Utkarsh combines vision with execution creative, reliable, and dedicated. He consistently delivers high-quality work beyond scope."
Intro video
The intro is a narrated reel, about 1 minute 40 seconds. It covers IIT Roorkee, E-Summit, joining CodeAnt AI as founding designer, Framer Expert and the Awwwards Young Jury, and the things I build after hours. The intro page has the full transcript.
Intro transcript
Yes. The video has captions (off by default; the CC button turns them on), and the intro page has the full transcript if you'd rather read. It opens with "Hi, I'm Utkarsh" and ends with "Let's make something people love to use."
How did you become a designer?
In 2021 I walked into IIT Roorkee to study engineering, and four years later I walked out a designer. Somewhere in between, design stopped being a hobby; I shipped work for 10+ teams before graduating, led the E-Summit brand, then joined CodeAnt AI as founding designer.
What do you build after hours?
My favourite work happens after hours: Mitti, a pottery wheel you shape with your bare hands; Type Piano, which turns typing into posters; Particle Flow, particles that follow your fingers. Plus Chrome extensions, Figma plugins, games, a desktop pet and posters. It's all in the Playground.
Why does the site look like a desktop?
I built the site as a playful desktop metaphor: each page opens as a draggable window over a desktop, with a dock, wallpapers and a desktop pet. It's meant to be played with, not just scrolled. Drag a window, switch a theme, poke the pet.
Can i drag windows?
Yes, it behaves like a real desktop: drag to move or resize a window. Shift+W closes the focused window, Shift+X closes all, Shift+Up maximises, Shift+Down minimises, and Shift+Left or Right snaps it to a side.
Themes
There are six looks: Canvas, Sketchbook, Circuit, Bubblegum, Cloud and Console. Circuit and Console are the dark ones, and Cloud is soft neumorphism. Press M to cycle themes, or open Display Options with the comma key. A fresh visit moves you one theme along, so returning visitors see a new look.
Wallpapers
Each theme has its own set of four wallpapers, 24 in all, picked to match that theme's mood and contrast, like Moonrise Hills for Canvas or Neon Rain for Console. Press the backslash key to cycle them, or choose one in Display Options (comma key).
What is the pet?
That's the desktop pet. It roams your screen, you can drag it around, and it says a short line depending on the page you're on. There are nine: Shinchan, Pearl, Tiko, Spider-Man, Zvzo, Boo, Biscuit, Naruto and Swagger. Shift+P or a double-click switches sprite.
Can i get the pet on my mac?
The pet comes from Desktop Companion, a native macOS desktop pet I made, recreated in the browser so you can drag, poke and play with it. You can try it in the Playground. For the Mac version, ask me directly.
Weather
The desktop shows your weather: clear, rain or snow. It uses an approximate region from your IP address and a public forecast, with no location prompt, and shows your region and country rather than your city. Shift+S changes the weather by hand.
Keyboard shortcuts
Press ? for the full list. The main ones: Cmd+K or / for search, comma for Display Options, M to cycle themes, backslash for wallpapers, Shift+S weather, Shift+P pet sprite, Shift+Z screensaver, Shift+W or Shift+X to close windows.
Search
Hit Cmd+K, or just press /, to open search and jump anywhere on the site. Esc closes it, and Enter opens a focused icon on the desktop.
Gesture mode
Gesture Mode lets you drive the desktop with your hand instead of a mouse, using your webcam. Turn it on from the Gesture Mode toggle or the tip that suggests it. The same hand-tracking idea runs my playground pieces like Mitti and Particle Flow.
Sound
Yes, turn the sound on and every click has its own sound, and they change with the theme. It's off until you switch it on, so nothing plays by surprise.
Screensaver
There's a screensaver, like a real desktop. Press Shift+Z to preview it.
Notifications
Those are small tips, like notifications on a real desktop. Each one points out something to try, such as switching themes, Gesture Mode, sound, live weather or Cmd+K search, and has one button to try it or dismiss it.
How was this site built?
It's my own design, built as an interactive desktop. In general I design in Figma, ship production websites in Framer, and build working prototypes and small tools with AI coding tools; I'm a design engineer, not a software engineer. For details on this build, email me.
Interactive websites · Contact
Llms.txt
Yes. Every page has a Markdown version at the same address plus .md, there's an llms.txt and an llms-full.txt with the whole site as one file, and a read-only MCP server for AI assistants. The desktop is for people; those are for tools.
What does designing with codeant mean?
It means where I'm designing right now: I'm the Founding Designer at CodeAnt AI (YC), since June 2024. I own its product, Framer website, brand and design system.
What does freelancing availability mean?
That's the month I can next take on a freelance project. Up to the 15th it shows the current month, and from the 16th it moves to next month. Contract and freelance work can usually start right away once scope is agreed.
Hire me for a project · Contact
What does the contact me button do?
The Contact Me button at the top of Home opens my contact window, with email, WhatsApp, LinkedIn and a project form. Email is fastest: work@utkarshdesign.com, and I reply within 24 hours.
What does your outcome driven designer mean?
The headline reads Your Outcome Driven Designer. It's the short version of how I work: I care about what a screen changes, like 2x trial-to-paid at CodeAnt or 80% fewer voucher complaints at FamPay, not just how it looks.
What is the video on the home page?
That's a short silent loop in the hero frame, there to set the tone. If you want me talking, the Watch intro button on the About section opens the narrated reel with sound.
What is the black card on home?
The black card under the headline is my name card: my photo, my name, Utkarsh Dhairya Panwar, and a scrolling ticker of quick facts like Awwwards Young Jury, Framer Expert and Founding Designer at CodeAnt AI (YC).
Is that you in the photo?
Yes, that's me in the About section: smiling and giving a thumbs-up outdoors in a yellow kurta. The Watch intro button on that photo plays my narrated intro with sound.
I design fast and practical solutions
I design fast and practical solutions is the About heading, and it's meant literally. Pranav Karthik Nagesh of DawnBreak AI said I deliver polished results in days, and at xPay I picked up Framer in 3 days and shipped landing pages end to end.
What do you mean by tight systems?
Tight systems means design systems with few, well-defined parts that a team actually reuses. At CodeAnt I standardised 18+ UI patterns into one system and design turnaround dropped 30%; at xPay I built a 25+ component UI system that cut feature delivery time 35%.
Brand and design systems · CodeAnt AI case study
What is framer?
Framer is a website builder where you design and publish real, responsive sites in one tool, with a CMS and SEO settings built in. I'm an official Framer Expert and I build sites in it myself, including codeant.ai and the full Zania site.
Framer developer · Framer review
Why framer?
Because one person can design and build the site, so there's no designer-developer gap and nothing gets lost in handoff. Founders can edit pages and the CMS themselves after launch. For a 10-page SaaS marketing site that usually beats a custom build.
Framer vs Webflow · Website design and development
What are app flows?
App flows are the step-by-step paths through an app, like sign-up, checkout or redemption, including what happens when something fails. I did this at FamPay for the Cashback Store and iOS payment errors, and for the SoundSphere concept.
Mobile app design · Fampay case study
What is research and insights?
Research & Insights is where every website project starts: who the buyers are, what they need to believe, and what competitors already say. It decides the page order and the copy before any visual work happens.
Website design and development
What is visual identity?
Visual identity is the look a site carries: colour, type, imagery and layout rules that match the brand. On web projects I set it up inside the site; for a full identity with logo and guidelines, that's the Branding & Consultation service.
Do you design logos?
Yes, logo design is part of Branding & Consultation. I designed the E-Summit identity at IIT Roorkee, and one of my first wins was runner-up in the DnIC logo design contest there in 2022.
Brand and design systems · How to get a logo
What are brand guidelines?
Guidelines are the brand rulebook: how to use the logo, colours, type and layouts so anyone on the team stays on brand. I deliver them with brand identity work, alongside a design system the product can use.
Do you do packaging design?
Yes, packaging design is one of the Branding tags. The playground has a packaging concept, Spotify Beverages, a Spotify-branded guava juice can, and merch pieces like printed tees.
Visual work · Brand and design systems
What's on the web design card?
That's the Cognizance 2023 website, IIT Roorkee's tech fest, themed Cosmos Renascence. I designed it, and it sits on the Web Design & Dev card as an example.
Playground · Website design and development
What i do section?
WHAT I DO is the Services section on Home. It lists three areas, numbered (001) to (003): Product UX & Apps, Web Design & Dev, and Branding & Consultation, each with a short description, tags and an example image.
Projects section
The Projects section says I helped businesses across industries achieve their goals: developer tools with CodeAnt AI, fintech with FamPay, a campus event brand with E-Summit, and a concept podcast app with SoundSphere. Below those sit seven live products.
How do i open a case study?
Click View Case Study on any card and it opens as its own window over the desktop, with the problem, research, decisions and results. Each one also has a short film, and some screens have an Annotations switch that shows the why behind the UI.
What are annotations?
Annotations are a switch above some case-study images. Flip it on and the same screen shows callouts explaining why each part of the UI is the way it is. The FamPay case study is the clearest example.
Why these four case studies?
They cover different kinds of problems: CodeAnt is B2B product, website and brand at a YC startup; FamPay is a consumer fintech flow; E-Summit is brand and event design at scale; SoundSphere shows how I research and think when there's no client.
What is ipl?
IPL is the Indian Premier League, India's big T20 cricket league, and NFL is American football's National Football League. Designing both meant very different audiences, so the pages use region-aware data density.
Live score page guide · Experience
How did you design live score pages?
Live-score pages have to update during a match without making people hunt. I restructured the tables and navigation for scan speed and matched data density to each region's audience, for pages serving 20M+ monthly users.
How to design live score pages
What does view live work do?
Each In Production card's View Live Work button opens the real product: codeant.ai, app.codeant.ai, Sportskeeda's IPL and NFL pages, zania.ai, entvin.com and FamApp on the App Store. Those are the live versions, so they may have changed since I worked on them.
What does conversion focused mean?
Conversion-focused means every page is built around one next step, a demo, a trial or a signup, with the message, proof and page order working toward it. The CodeAnt AI site I built in Framer has doubled its conversion rate since launch.
Conversion audit · SaaS CRO guide
What is dawnbreak ai?
DawnBreak AI is where Pranav Karthik Nagesh is Co-Founder; he's ex-Google and Amazon. The site quotes him but doesn't describe DawnBreak AI or the project in detail, so for that, email work@utkarshdesign.com.
Did you work with xiaomi?
Ajay Kumar, Growth Manager at Xiaomi and ex-Flipkart, is one of the people quoted on Home. Xiaomi isn't listed as a client of mine; the site shares his quote, not a Xiaomi project.
Are the testimonials real?
Yes. Each quote is from a named person with their role and photo: founders at DawnBreak AI and xPay, a product designer at Sportskeeda and a growth manager at Xiaomi. If you want a reference conversation, email work@utkarshdesign.com.
How do i see more testimonials?
Use the arrows beside the testimonials to go to the previous or next quote. There are four on Home, and the case studies carry more, like Amartya Jha of CodeAnt and Esham Hassain of FamPay.
From bus stops to the main stage
For E-Summit I led the brand from bus stops to the main stage: one identity across posters, tickets, merch, the stage and the website. I led 5 designers and 3 developers, and the event drew 11K+ attendees.
Lets make something people love to use
Let's make something people love to use is how the reel ends, and it's the standard I hold work to. Looking good isn't enough; a screen has to be clear enough that people choose to come back.
How long is the intro video?
The intro reel runs about 1 minute 40 seconds. It was uploaded in October 2026, has captions you can switch on with CC, and the intro page has the full transcript.
Why is there no sound?
The clip on the About page is an 11-second silent highlight loop, and the hero clip is silent too. The full intro on the intro page has my voice-over; press play there, check your volume, or switch on captions with CC.
Why did you make an intro video?
It's for anyone who'd rather watch than read: a quick video on who I am, what I've built and what I make for fun. Recruiters get the career in under two minutes; the rest of the site has the detail.
What is the canvas theme?
Canvas is the clean, minimal theme, a blank canvas to work on. Its default wallpaper is Moonrise Hills, its pet is Swagger and it uses the default cursor. Press M to move to the next theme.
What is the sketchbook theme?
Sketchbook is the hand-drawn, paper look. It swaps the dock for real hand-drawn sketch icons, uses a scribble cursor and brings Shinchan as the pet. Wallpapers include Winter Tree, Quiet Wires, Desert Peaks and Moonlit Meadow.
What is the circuit theme?
Circuit is one of the two dark themes: technical and precise, with pixel-art dock icons, a crosshair cursor and Zvzo as the pet. Its wallpapers are Forest Glow, Mountain Village, Ashen Peak and Lantern Street.
What is the bubblegum theme?
Bubblegum is the bright, candy, playful theme. It pairs with a bouncy dot-trail cursor and Boo, the ghost, as the pet. Wallpapers are Moon City, Pop Skyline, Storm City and Burst Rays.
What is the cloud theme?
Cloud is the soft one, built in neumorphism: pillowy UI that looks pressed out of the surface. It uses a circle cursor and Pearl as the pet, and its default wallpaper is, fittingly, Cloud Summit.
What is neumorphism?
Neumorphism is a style where buttons and panels look softly extruded from the same surface, using light and dark shadows instead of borders. The Cloud theme on this desktop is built that way.
What is the console theme?
Console is the dark, retro-arcade theme. It has a rotating directional cursor with a game feel and Spider-Man as the pet. Wallpapers are Neon Rain, Prism Window, City Aurora and Rainbow Pier. It's also the theme the desktop switches to at night.
Why did the theme change?
On purpose. Each fresh load moves one theme forward, so a refresh or a return visit shows a different look, in the order Canvas, Sketchbook, Circuit, Bubblegum, Cloud, Console. Pick one with M or Display Options and it holds for that visit.
Is there dark mode?
Yes, two of the six themes are dark: Circuit and Console. Press M to cycle to them, or pick one in Display Options with the comma key. At night where you are, the desktop switches to Console on its own.
Why did it go dark?
When it's night at your location, the desktop switches to the dark Console theme once, at the change to night. If you then pick another theme, it leaves you alone until the next nightfall. If you're already on a dark theme, nothing changes.
Why is my cursor different?
There are six cursors: Default, Directional, Dot Trail, Scribble, Circle and Crosshair. Each theme picks its own match, like Scribble for Sketchbook and Crosshair for Circuit. You can change it under Cursor in Display Options.
What is display options?
Display Options, opened with the comma key or by right-clicking the desktop, holds every look setting: Cursor, Theme, Wallpaper, wallpaper Auto-Change, Scrollbar, Screensaver and Weather, each with its shortcut shown.
Can the wallpaper change automatically?
Yes, wallpapers can change on their own. Under Auto-Change in Display Options, pick Off, 30s, 1m, 2m or 5m, and it cycles through the current theme's four wallpapers.
List all wallpapers
Canvas: Moonrise Hills, Foggy Pine, Paddle at Dusk, Red Ridge. Cloud: Cloud Summit, Desert Tree, Cloud Peak, Winter Dunes. Bubblegum: Moon City, Pop Skyline, Storm City, Burst Rays. Sketchbook: Winter Tree, Quiet Wires, Desert Peaks, Moonlit Meadow. Circuit: Forest Glow, Mountain Village, Ashen Peak, Lantern Street. Console: Neon Rain, Prism Window, City Aurora, Rainbow Pier.
Can i download the wallpaper?
The site doesn't offer the wallpapers as downloads; they're picked per theme for mood and contrast. If you want one, email work@utkarshdesign.com and ask.
Hide scrollbar
You can hide the scrollbar under Scrollbar in Display Options. Scrolling still works when it's hidden, it just keeps windows cleaner.
When does the screensaver start?
The screensaver starts after 10 minutes without any mouse, key or touch input. It shows the time and date with pets walking along the bottom. Turn it on or off under Screensaver in Display Options, or preview it with Shift+Z.
Which pet goes with which theme?
Each theme brings its own pet: Swagger on Canvas, Shinchan on Sketchbook, Zvzo on Circuit, Boo on Bubblegum, Pearl on Cloud and Spider-Man on Console. Tiko, Biscuit and Naruto are there too, through Switch this pet.
How do i change the pet?
Right-click the pet and choose Switch this pet to pick from all nine. Or press Shift+P, or double-click the pet to cycle to the next one. Once you choose, it stops following the theme.
Can i have more than one pet?
Right-click the pet and choose Add a friend: a random new pet joins the desktop right away. Friends can be taken off again with Remove from their own right-click menu.
How do i remove the pet?
Friends you've added have a Remove option on their right-click menu. The main pet stays, since it's part of the desktop, but you can drag it out of the way or switch it to one you like better.
Can i change the pet colour?
Pets can be recoloured with seven swatches: Original, Sunset, Grape, Mint, Ruby, Ocean and Mono. They're colour filters over the sprite, so the pet keeps its shape and gets a new tint.
What does the pet say?
The pet's line depends on the page: Home sweet home on Home, Real work, not mockups on Work, My whole story on About, Fun side projects on Playground, Grab the PDF on Resume and Go say hi on Contact. Each pet says it in its own voice.
Did you draw the pets?
The pet sprites are community-made sprite sheets. What's mine is everything around them: the roaming, dragging, theme matching, friends, colours and screensaver, and Desktop Companion, the native macOS desktop pet the browser version is based on.
What are the desktop icons?
The icons are the site's pages: Home, Work, About, Playground, Resume, Contact and Intro. Open one and it becomes a window, or focus an icon and press Enter. Their style changes with the theme, like hand-drawn on Sketchbook and pixel art on Circuit.
Right click menu
Right-click the desktop for a quick menu: Display Options, cycle the wallpaper, cycle the theme, change the weather, open search, keyboard shortcuts and Arrange Icons, which tidies the desktop icons back into place.
What's in the top menu?
The top bar has menus: Work (Case Studies and In Production), About (Intro, Timeline, Experience, Education, Achievements, Resume), Playground (All, Interactive, UI/UX, Visual) and Socials (LinkedIn, Instagram, WhatsApp, Behance, Email).
Where did my window go?
Shift+Down minimises the focused window, and minimised windows wait in a row on the desktop. Click one to bring it back. If there are more than fit, a +N pill restores the rest.
Fullscreen
There's a fullscreen toggle in the top bar, so the desktop can fill your whole screen like a real one. Toggle it again or press Esc to leave.
Does this work on mobile?
Yes, it works on phones too: same pages, same windows, and the pet shrinks to fit. Keyboard shortcuts need a keyboard, so they're mostly a laptop and desktop thing.
Are you tracking my location?
No location prompt and no exact location. The weather uses an approximate region from your IP address and a public forecast from Open-Meteo, and the desktop shows your region and country, not your city.
How do i make it snow?
Press Shift+S or right-click the desktop and choose Change Weather to preview clear, rain or snow. Set it back to Auto in Display Options to return to your real weather, or turn weather effects off there.
Do you use cookies?
I use one analytics cookie to see which pages help people and where they get stuck. No ads, nothing sold. You get a choice in the cookie notice, and the cookie policy has the details.
Cookie policy · Privacy policy
How do i click with gesture mode?
Point with your index finger to move the cursor. Move slowly to hover, hold still for under a second to click, and make a fist to grab: hold to drag, move to scroll, open your hand to let go. Fast moves don't click, so you won't trigger things by accident.
Is my camera recorded?
Gesture Mode uses your webcam only while it's on, and the hand tracking runs in your browser with MediaPipe Hands. Turn it off and the camera stops.
Any easter eggs
A few to find: double-click the pet to cycle it, right-click it to Add a friend, press Shift+S for snow, try Gesture Mode with your hand, wait 10 minutes for the screensaver, visit at night for Console, and press ? for every shortcut.
What tips are there?
The tips include: 6 looks, 1 click to switch themes; a pet roaming your screen; Gesture Mode; drag and resize windows; Cmd+K search; sound; live weather. On other pages they point to Work, Annotations, Playground tabs, the resume PDF, the timeline and contact.
Can i use this template?
The site doesn't offer itself as a template or open-source project. It's my own design and build. If you want something like it for your product, that's the interactive websites service, and you can ask me directly.
Interactive websites · Contact
Found a bug
Thanks for spotting it. Email work@utkarshdesign.com with what you saw, the page and your browser, and I'll fix it. A screenshot helps.
When was the site last updated?
Home was last updated in October 2026, and the intro reel went up the same month. The site, its Markdown pages and llms files are regenerated from the same data on every deploy, so they stay in sync.
Where should i start?
Depends who you are. Hiring: read the CodeAnt AI case study, then the resume. Founder with a project: Hire me and Pricing. Short on time: the 1:40 intro reel. Curious: open the Playground, or play with the desktop.
Do you write?
Yes, I write practical guides for founders: SaaS onboarding, dashboards, Framer vs Webflow, pricing pages, UX audits, AI features and more, most drawn from CodeAnt, FamPay or Sportskeeda. Home lists them all.
Activation metric guide · How we doubled trial-to-paid
Is there an faq?
Yes, there's an FAQ page with the common questions on hiring, process, pricing and tools. You can also just ask me here.
What does valuation mean?
Valuation is what investors priced the whole company at, not revenue or profit. So $0 to $60M means CodeAnt AI went from nothing to a $60M valuation while I designed its product, website and brand.
Background, experience and education
What are your highlights?
Four quick ones: IIT Roorkee graduate, Awwwards Young Jury, 5+ national design awards, and an Official Framer Expert. On the work side, I'm Founding Designer at CodeAnt AI (YC W24), where my product UX is used weekly by 40,000+ developers.
How many years of experience do you have?
I've been doing paid design work since my first live project in November 2022, with product design internships from early 2023. That's 3+ years of hands-on product work, including Founding Designer at CodeAnt AI since June 2024, all alongside and after my IIT Roorkee degree.
Why design after mechanical engineering?
I'd been sketching and painting since 2016, so the instinct was there before IIT. I joined IIT Roorkee in 2021 for Mechanical Engineering, got serious about design in early 2022 with graphic design and real projects, then moved to UI and UX. By graduation in 2025 I'd shipped for 10+ teams and was founding designer at CodeAnt AI.
Did you switch branches?
Yes. I joined IIT Roorkee in Civil Engineering in 2021 and later switched to Mechanical. I explored multiple paths there before finding design.
Show me your timeline
Short version: visuals from 2016, IIT Roorkee in 2021, design pivot in Feb 2022, first live work Nov 2022, Sportskeeda and FamPay in 2023, xPay and CodeAnt in 2024, graduation and Framer Expert in 2025, Awwwards Young Jury in March 2026.
What did you do before college?
Between 2016 and 2020 I was sketching, painting and exploring illustration. That's where I built an early instinct for composition and aesthetics, long before I knew product design was a job.
When did you join iit roorkee?
I entered IIT Roorkee in November 2021. I joined Civil Engineering, later switched to Mechanical, and explored multiple paths before finding design.
What happened in 2022?
2022 is when I got serious. I started with graphic design and real projects in February, then shifted toward UI and UX once I understood product thinking. By November I shipped my first live work.
What was your first real work?
My first live work went out in November 2022. Early on I took up internships and freelance work on visuals, landing pages and basic product flows, which led to product design internships in 2023.
What happened in 2023?
2023 is when I moved into product design. At Sportskeeda I designed high-scale web experiences, and at FamPay I improved fintech flows and reduced user errors. Bold Finance came first that spring.
What awards did you win in 2023?
2023 was a good year for competitions: Winner of TinkerQuest UI/UX Design (Feb), Runner-up at Syntax Error's Design Track (Jan), Runner-up at the Appnova UX Hackathon (Mar), plus Runner-up in the DnIC Logo Design Competition (Sep 2022).
What happened in 2024?
In 2024 I worked across teams and products: xPay (YC W24), HelpNow (YC W20), Entvin (YC S22), Ocean Friends and Zania, handling end-to-end design across UX, UI and brand. In June I joined CodeAnt AI as Founding Designer, and I was runner-up at the Adobe Design Hackathon.
When did you graduate?
I graduated from IIT Roorkee in May 2025 with a B.Tech in Mechanical Engineering, and transitioned fully into my product design career. I was already Founding Designer at CodeAnt by then, so it was more of a handover than a start.
What happened in 2025?
2025 had three markers: I gave a career talk at IIT Roorkee in January, graduated in May, and became an Official Framer Expert in June. My portfolio was also featured on Wall of Portfolios.
What happened in 2026?
In 2026 I joined the Awwwards Young Jury (March) and judged the Cognizance Design Hackathon at IIT Roorkee. I've also started building with code: prototyping small products and tools with AI coding tools.
Where have you worked?
Currently Founding Designer at CodeAnt AI (YC W24) since June 2024. Before and alongside that: Zania and Ocean Friends (contracts), Entvin (YC S22), HelpNow (YC W20), xPay (YC W24), FamPay (YC S19), Sportskeeda and Bold Finance. 15+ brands in total.
Where do you work now?
I'm Founding Designer at CodeAnt AI (YC W24), since June 2024, owning product UX, the design system, website and brand. On the side I build small products and tools with AI coding tools, in the Playground. I'm also open to full-time, contract or freelance work, remote from India.
Experience · CodeAnt AI case study
How did you double activation?
Setup broke because installing the GitHub app needs org admin rights. Blocked users can now email the admin or share an invite link, self-hosted setup became step-by-step flows, and nudges follow what each user has done. A/B tests cut setup from 7 steps to 3 and doubled activation; trial-to-paid went 2x.
Manager dashboards
I own UX for AI code reviews, developer insights, and code quality and security scans. I built manager dashboards that pull code analysis and secret leaks together, cutting org-level triage time by 35%, and standardised 18+ UI patterns into one system, cutting design turnaround by 30%.
CodeAnt AI case study · Resume
What did you do at ocean friends?
Ocean Friends was a UX contract from November 2024 to December 2025. They make software for children's therapy centres. I designed care-team workflows, dashboards and interfaces for clinical use, including a dashboard redesign, plus event banners, merchandise and on-ground assets for outreach.
What did you do at helpnow?
I was a Product Design Intern at HelpNow (YC W20) in May and June 2024. I designed medicine ordering flows for delivery and store pickup, including InstaMed, their B2B door-to-door medicine delivery app. Both have since closed.
What did you do at xpay?
I was a Product Design Intern at xPay (YC W24) from January to May 2024. I built their baseline design system for product and marketing, defined checkout UX for live demos, and designed the Framer website plus pitch decks for customers and investors. I picked up Framer in 3 days there.
Xpay results
At xPay: checkout UX for live demos cut sales walkthrough time by 30%, a reusable UI system of 25+ components cut feature delivery time by 35%, and restructuring 10+ Framer GTM pages doubled indexed pages and brought more qualified inbound demos.
What did you do at bold finance?
Bold Finance (gold loans, now closed) was a UX Design Intern role from April to June 2023. I redesigned the marketing site, shipped the loan renewal flow in the mobile app and made marketing creatives. The 'Are you a Jeweller?' page in the playground is the real site.
Have you worked with yc startups?
Yes, five YC companies: CodeAnt AI (W24), where I'm Founding Designer, plus xPay (W24), Entvin (S22), HelpNow (W20) and FamPay (S19). Most of my work has been at early-stage startups working directly with founders.
Experience · Design for YC startups
How many brands have you worked with?
15+ brands so far, including CodeAnt AI, xPay, FamPay, Sportskeeda, Entvin, HelpNow, Zania, Ocean Friends, Bold Finance, and campus work like E-Summit and Cognizance 2023 at IIT Roorkee.
How did you work while in college?
Most of it happened alongside my B.Tech: internships and freelance product work from 2022, and I joined CodeAnt as Founding Designer in June 2024, about a year before graduating in May 2025.
What's your education?
I have a B.Tech in Mechanical Engineering from IIT Roorkee (Nov 2021 to May 2025, 7.8 CGPA), with a parallel focus on design, technology and management. Before that, Skyward Senior Secondary School, where I scored 96.8% in Class XII Science.
What's your cgpa?
I graduated from IIT Roorkee with a 7.8/10 CGPA, while doing internships, freelance work and campus design alongside.
What design courses did you take?
My design-related coursework at IIT Roorkee included Interaction Design, Innovation & Entrepreneurship, and Introduction to Artificial Intelligence. Most of my design learning came from real projects, internships and campus work.
Which school did you go to?
I went to Skyward Senior Secondary School in Roorkee: Intermediate in Science with 96.8%, a top performer in Class X and XII, House Vice Captain, and always into art and craft. From there I cracked JEE Main and Advanced to get into IIT Roorkee.
What are your achievements?
Awwwards Young Jury (2026), Official Framer Expert (2025), Cognizance design hackathon judge, featured on Wall of Portfolios, Adobe Designathon runner-up, TinkerQuest winner, Syntax Error runner-up, Appnova runner-up, DnIC logo runner-up, and an invited career talk at IIT Roorkee.
How many awards?
5+ national design awards, mostly hackathons: Adobe Design Hackathon runner-up (2024), TinkerQuest UI/UX winner, Appnova and Syntax Error runner-up (2023), and DnIC logo design runner-up (2022). On top of that, Awwwards Young Jury and Framer Expert.
Awwwards young jury
I joined the Awwwards Young Jury in March 2026. It's a global design jury that reviews and scores website submissions on Awwwards.
Are you a framer expert?
Yes. I've been an Official Framer Expert since June 2025, listed in Framer's own experts directory, where my profile shows the sites I've built: CodeAnt's GTM site, Zania and Entvin. I design and build production websites in Framer myself. The site doesn't describe the application process.
Achievements · My Framer Expert profile
Tinkerquest
I won TinkerQuest UI/UX Design, run by the Tinkering Lab at IIT Roorkee, in February 2023.
Syntax error
I was runner-up in the Syntax Error Design Track, run by SDS Labs at IIT Roorkee, in January 2023.
Appnova
I was runner-up at Appnova, the UX Mobile App Hackathon at Cognizance, IIT Roorkee, in March 2023.
Dnic logo
I was runner-up in the Diversity and Inclusion Committee (DnIC) Logo Design Contest at IIT Roorkee in September 2022, one of my first design wins.
Cognizance judge
I judged the Cognizance Design Hackathon at IIT Roorkee in 2026. Cognizance is IIT Roorkee's tech fest; I'd been a runner-up at its Appnova hackathon in 2023, and designed the Cognizance 2023 website.
Wall of portfolios
My portfolio was featured on Wall of Portfolios among top portfolios, in 2025.
Career talk
In January 2025 I gave an invited career talk at IIT Roorkee, sharing practical paths into design. It's where I started sharing and mentoring more deliberately.
Do you judge or speak?
Three so far: an invited career talk at IIT Roorkee (Jan 2025), judging the Cognizance Design Hackathon at IIT Roorkee (2026), and the Awwwards Young Jury, a global design jury (since March 2026).
Have you led a team?
Yes. As design lead for E-Summit IIT Roorkee 2023 I led a team of 5 designers working with 3 developers, and mentored 5+ designers through structured critiques and reusable components. At CodeAnt, as founding designer, I own the design standards across product and marketing.
What are your skills?
Product design: UX design, design systems and prototyping. Research and data: usability research and product metrics. Tools: Figma, Framer, Webflow, Spline and Adobe CC. AI and automation: AI-assisted prototyping, n8n and Zapier.
What projects are on your resume?
Two projects on my resume: Campus Food Systems (McDonald's x IIT Roorkee, Jan to May 2025), a physical and digital kiosk and ordering system, and E-Summit IIT Roorkee 2023 branding, where I led the visual system and mentored 5+ designers.
Mcdonald's project
Campus Food Systems (McDonald's x IIT Roorkee, Jan to May 2025) was systems and interaction design. I did field research with 40+ students and 5+ canteen owners, worked in a 5-designer team on service flows and group ordering, and shipped an end-to-end physical and digital kiosk and ordering system.
What's your full name?
My full name is Utkarsh Dhairya Panwar. Most people just call me Utkarsh.
How old are you?
I was born on 3 October 2003, so I'm 23. I grew up in Roorkee, cracked JEE to get into IIT Roorkee in 2021, and have been doing paid design work since late 2022.
Where are you from?
Roorkee, Uttarakhand. I grew up there, went to school there at Skyward Senior Secondary School, studied at IIT Roorkee and still live in Roorkee today.
What card games do you play?
Poker, blackjack and a few others. Card games are good practice for reading people and making calls with incomplete information, which isn't far from product work. It's one of the three things that keep the work sharp, along with impromptu trips and doing nothing, guilt-free.
Do you play drums?
In my intro reel I say that off screen I'm chasing mountains, drums and open sky. The About page adds card tables and impromptu trips. The details beyond that aren't on the site.
How do you avoid burnout?
Partly by doing absolutely nothing, guilt-free, which is on my About page next to card tables and impromptu trips. That balance is what keeps the work sharp.
Can i get references?
The site carries testimonials from co-founders at CodeAnt AI and xPay, a designer at Sportskeeda and others, on the home page. For a reference call, email work@utkarshdesign.com and I'll connect you.
What are your weaknesses?
The honest gap: I don't write production app or backend code, and I don't claim any programming language. I build prototypes and small tools with AI coding tools and ship websites in Framer, and I pair with engineers for production code.
What are your strengths?
Speed with structure: clean IA, tight systems and measurable outcomes. I design and ship: I've been the only designer at a YC startup through a $0 to $60M valuation, and I build the Framer site myself, so there's no designer-developer gap. I'm most useful when the problem is messy and the stakes are real.
How do you work?
I iterate fast, ask the right questions early and ship polished work in days, which is close to how a co-founder at DawnBreak AI described working with me. Clean IA first, then a tight system, then the numbers it should move.
How fast do you work?
Fast is part of how I work: I ship with clean IA and tight systems, and clients have described polished results in days. At CodeAnt, standardising 18+ UI patterns cut design turnaround by 30%. Project timelines depend on scope.
What does clarity in constraints mean?
It's how I work: I find clarity in constraints and structure in chaos. I do my best work when the problem is messy and the stakes are real, like CodeAnt's setup flow, where the person who wanted the tool couldn't install it.
What kind of interfaces do you build?
Clear, outcome-driven interfaces for web, dashboards and Framer sites. That covers product UX for SaaS and apps, websites I design and build in Framer, and brand and design systems.
What is ia?
IA is information architecture: how content and features are grouped, named and ordered so people find things without thinking. Clean IA plus tight systems is what lets me ship fast; at Sportskeeda, restructuring tables and navigation sped up scanning for 20M+ monthly users.
What does outcome-driven mean?
Outcome-driven means I judge a design by what it moves. Product metrics is on my resume: at CodeAnt, activation doubled and triage time fell 35%; at FamPay, voucher support tickets fell 80%; at Sportskeeda, campaign CTR rose 10%.
What is a design system?
A design system is the shared set of components, patterns and rules a product and its marketing are built from, so screens stay consistent and new ones are faster. At CodeAnt I turned 18+ UI patterns into one system and cut design turnaround by 30%.
Glossary: design system · Design systems for startups
What is a founding designer?
A founding designer is the first design hire, who sets design for everything early on. At CodeAnt AI that meant owning product UX, the design system, the Framer website, brand and marketing from June 2024.
CodeAnt AI case study · Hiring your founding designer
What does yc mean?
YC is Y Combinator, the startup accelerator. The letter and year are the batch: W24 is Winter 2024, S19 is Summer 2019. I've worked with five YC companies: CodeAnt AI and xPay (W24), Entvin (S22), HelpNow (W20) and FamPay (S19).
What is gtm?
GTM is go-to-market: the website and pages a company uses to find and convert customers. I drove CodeAnt's GTM site revamp in Framer, and at xPay I restructured 10+ Framer GTM pages, which doubled indexed pages.
CodeAnt AI case study · Framer SEO guide
What is ctr?
CTR is click-through rate: the share of people who see something and click it. At Sportskeeda, my advertiser landing flows made the ad formats clearer and raised campaign CTR by 10% across US sports brands.
What is a btech?
B.Tech is a Bachelor of Technology, a four-year undergraduate engineering degree in India. Mine is in Mechanical Engineering from IIT Roorkee, November 2021 to May 2025, with a parallel focus on design, technology and management.
What is iit roorkee?
IIT Roorkee is the Indian Institute of Technology in Roorkee, Uttarakhand, where I did my B.Tech in Mechanical Engineering. Most of my early design work happened there too: E-Summit, the Cognizance 2023 website and three campus hackathon wins.
How did you get into awwwards jury?
I joined the Awwwards Young Jury in March 2026. The site doesn't describe the selection process, so if you're curious how it works, ask me on a call.
Achievements · Book a 30-minute call
Did you win an awwwards?
I'm on the Awwwards Young Jury, which reviews and scores website submissions. The site doesn't list an Awwwards award for my own work; my competition wins are the hackathons on the Achievements page.
Did you learn framer in 3 days?
Yes, at xPay in early 2024. Their co-founder Aniket Gupta wrote that I picked up Framer in just 3 days and shipped landing pages, decks, graphics and marketing assets end to end. By June 2025 I was an Official Framer Expert.
Did you win the adobe designathon?
Runner-up. The Tryst x Adobe Design Hackathon in April 2024 is listed as runner-up on my resume and Achievements page. My outright win is TinkerQuest UI/UX Design at IIT Roorkee in February 2023.
What did you build in the hackathons?
The site lists the results, not the entries: TinkerQuest winner, and runner-up at Adobe, Appnova, Syntax Error and the DnIC logo contest. The briefs and designs aren't published, so ask me on a call if you want to see them.
Achievements · Book a 30-minute call
What was your first award?
My first design win was runner-up in IIT Roorkee's Diversity and Inclusion Committee (DnIC) logo design contest in September 2022, seven months after I got serious about design.
What's your latest achievement?
The latest: I joined the Awwwards Young Jury in March 2026 and judged the Cognizance Design Hackathon at IIT Roorkee the same year. I've also started building small products and tools with AI coding tools.
What's next for you?
Next, I'm looking at full-time or contract roles as a founding product designer or design engineer, remote from India, plus freelance projects. And more building with code: prototyping small products and shipping useful things independently.
Why are you looking for a new job?
I'm not leaving CodeAnt. I'm Founding Designer there and enjoy the work. I'm open to the right offer, a full-time or contract role as a founding product designer, product designer or design engineer, so if you have one, let's talk.
Roles I'm open to · Book a 30-minute call
Who do you report to?
I report to both of CodeAnt's founders and work with them directly on product and design decisions. Amartya Jha, a co-founder, describes working with me as compressing five years of design into a single month.
What did you do before codeant?
Right before CodeAnt, in the first half of 2024, I was a product design intern at xPay (YC W24), HelpNow (YC W20) and Entvin (YC S22). Before that came FamPay, Sportskeeda and Bold Finance in 2023.
What was your first internship?
My first live work went out in November 2022, from freelance work on visuals, landing pages and basic product flows. The earliest internship on my Experience page is Bold Finance in April 2023, followed by Sportskeeda.
How many internships?
Six internships: Bold Finance, Sportskeeda and FamPay in 2023, then xPay, HelpNow and Entvin in 2024. After that came UX contracts with Ocean Friends and Zania, and Founding Designer at CodeAnt AI.
What contracts have you done?
Two UX contracts are on my Experience page: Ocean Friends (November 2024 to December 2025), care-team dashboards and event branding, and Zania (December 2024 to January 2025), an AI security website I designed and built in Framer.
Do you have full-time experience?
Yes. My main role since June 2024 is Founding Designer at CodeAnt AI, where I own product UX, the design system, the website and brand. Before that came six internships and two UX contracts.
Are you a fresher?
Not really. I graduated in May 2025, but I've done paid design work since November 2022 and have been Founding Designer at CodeAnt AI since June 2024, a year before my degree ended.
What's your seniority?
The site doesn't give me a level. What it shows: 3+ years of product work, and as Founding Designer at CodeAnt AI I own product UX, the design system, the website and brand. I also led a team of 5 designers at E-Summit.
What's your title?
Founding Product Designer and Design Engineer is how my resume puts it. At CodeAnt AI my title is Founding Designer.
How much work did you do before graduating?
Plenty: I shipped work for 10+ teams before I graduated in May 2025, including six internships, two UX contracts, E-Summit's brand and CodeAnt from June 2024.
Do you have a design degree?
No design degree. I studied Mechanical Engineering at IIT Roorkee with a parallel focus on design, technology and management, took Interaction Design as coursework, and learned most of it through real projects, internships and campus work.
Are you self taught?
Mostly self-taught through real work. I started with graphic design and real projects in 2022, moved to UI and UX once I understood product thinking, and kept learning through internships, freelance work and hackathons. Interaction Design was part of my IIT coursework.
What was your jee rank?
Yes. In school I cracked both JEE Main and JEE Advanced, which got me into IIT Roorkee in 2021.
10th marks
The site doesn't give a Class X percentage; it says I was a top performer in Class X and XII at Skyward Senior Secondary School. Class XII Science was 96.8%.
Were you a leader in school
Yes, I was House Vice Captain at Skyward Senior Secondary School in Roorkee, which meant student coordination and responsibility, alongside being a top performer in Class X and XII.
What did you do at iit roorkee besides studies?
A lot of design. I was Design Lead for E-Summit IIT Roorkee 2023, designed the Cognizance 2023 website, worked on Campus Food Systems with McDonald's in my final semester, and won or placed in four campus design competitions.
E-Summit case study · Education
Can you mentor me?
I started sharing and mentoring more deliberately in 2025, after my career talk at IIT Roorkee, and I mentored 5+ designers at E-Summit. The site doesn't offer a formal programme; email work@utkarshdesign.com with what you need.
Can you speak at our event?
Possibly. I've given an invited career talk at IIT Roorkee and judged the Cognizance Design Hackathon there, and I'm on the Awwwards Young Jury. Email work@utkarshdesign.com with the event, date and format.
How do i become a product designer?
What worked for me: real projects early (graphic design and landing pages in 2022), then UI and UX once product thinking clicked, internships at startups, and campus competitions for feedback. It's the path I shared in my career talk at IIT Roorkee.
Ecommerce experience
Some. At HelpNow I designed end-to-end e-commerce flows for pharmacy use cases, delivery and store pickup. FamPay's Cashback Store was a voucher store, and at xPay I designed checkout UX for live demos.
Experience · Checkout UX guide
Have you designed at scale?
Two numbers: Sportskeeda's live-score pages I worked on serve 20M+ monthly users, and the CodeAnt product UX I own is used weekly by 40,000+ developers at 800+ companies.
Loan renewal flow
At Bold Finance, a gold-loan company that has since closed, I designed and shipped the loan renewal flow in the mobile app, redesigned the marketing site for clearer positioning, and made marketing creatives. That was April to June 2023.
Experience · Bold Finance on the Playground
Are these companies still running?
Two have closed: HelpNow, including its InstaMed delivery app, and Bold Finance. The rest are live, including CodeAnt AI, FamPay, Sportskeeda, Zania and Entvin, and the Work page links the live sites.
Do you do user research?
Yes. At FamPay I validated 15+ screens with usability tests; for Campus Food Systems I did field research with 40+ students and 5+ canteen owners; at E-Summit I ran interviews and on-ground testing with founders and students.
Resume · Usability testing guide
Do you run ab tests?
Yes. At CodeAnt I led the onboarding A/B tests that cut setup from 7 steps to 3 and clarified the first-PR success criteria for teams, which doubled activation.
CodeAnt AI case study · How we doubled trial-to-paid
Growth design
Yes, growth is where my numbers come from: at CodeAnt, activation doubled and trial-to-paid went 2x; at Sportskeeda, campaign CTR rose 10%; at xPay, 2x indexed pages brought more qualified inbound demos.
Do you do graphic design?
Yes, that's where I started in 2022, and I still make posters for myself. Client side: the E-Summit 2023 identity, marketing creatives at Bold Finance, decks and graphics at xPay, and my first award, the DnIC logo. The Playground's Visual tab has about 20 posters, tees and brand pieces.
Visual section · E-Summit case study
Which design systems have you built?
Two: at CodeAnt I standardised 18+ UI patterns into one system shared by product and marketing, cutting design turnaround by 30%. At xPay I built a baseline system of 25+ components that cut feature delivery time by 35%.
Xpay components
At xPay I designed a reusable UI system of 25+ baseline components for product and marketing use. It cut feature delivery time by 35% and reduced frontend rework cycles.
Xpay seo
At xPay I restructured 10+ Framer GTM pages so each matched one search, which doubled indexed pages and brought more qualified inbound demo requests. SEO is part of my Framer website work.
Xpay checkout
At xPay I defined the checkout UX used in live sales demos. A checkout that explains itself cut sales walkthrough time by 30% and improved buyer understanding during evaluation.
Do you use figma?
Figma is where I design, and it's first on my resume's tools list. I've also built Figma plugins of my own, which are on the Playground.
Do you use webflow?
Webflow is on my resume, but the production sites I design and build myself are in Framer. If your team is happy on Webflow, a Webflow specialist may suit you better; moving to Framer is something I do.
Framer vs Webflow for SaaS · Webflow to Framer
Do you use adobe?
Adobe CC is on my resume's design tools list, next to Figma, Framer, Webflow and Spline. The site doesn't break it down by app.
Do you do motion design?
Yes. At CodeAnt I set the brand's visual, motion and product design standards, and the Playground has interactive motion experiments like Particle Flow and Type Piano.
How do you prototype?
Prototyping is on my resume under product design. I prototype in Figma and, more and more, build working prototypes with AI coding tools so ideas get tested as real software instead of static screens.
AI prototyping guide · Prototyping service
What is vibe coding?
Vibe coding is building software by directing AI coding tools instead of writing code by hand. Since 2026 I've used it to prototype small products and tools, and I also fix the design and UX of apps founders built in tools like Lovable, Bolt and Cursor.
Timeline · AI-built app clean-up
What's on the about page?
The About window has my intro, highlights and career timeline, with tabs for Timeline, Experience, Education and Achievements, plus links to the intro reel and resume.
Have you designed error states?
Yes, at FamPay. I redesigned timeout, bank-decline and retry error states across iOS payment flows and introduced unified error patterns. Failure-related drop-off fell 20% and repeated user mistakes fell 25%.
Have you reduced support tickets?
Yes. At FamPay, one-time-use Cashback Store vouchers lost value when partly spent, and people only found out after. Adding clarity before purchase and at redemption cut voucher support tickets by 80%.
FamPay case study · Reduce support tickets with UX
What is triage time?
Triage is sorting incoming issues to decide what to fix first. At CodeAnt, managers had to piece together code analysis and secret leaks from different places; my dashboards brought them together and cut org-level triage time by 35%.
CodeAnt AI case study · Security dashboard design
What is interaction design?
Interaction design is how a product responds to what people do: flows, states, feedback. I took it as IIT Roorkee coursework, and Campus Food Systems was a systems and interaction design project, a physical and digital kiosk and ordering system.
Glossary: interaction design · Education
Biggest team you've worked in
Both. At E-Summit I led 5 designers working with 3 developers, and Campus Food Systems was a 5-designer team. At CodeAnt, as founding designer, I own design across product and marketing and work directly with the founders.
Have you worked at google?
No. My work has been at startups, mostly early-stage ones like CodeAnt AI, xPay and FamPay. The Google, Amazon, Xiaomi and Flipkart names on my home page belong to people who wrote testimonials, and Adobe is a hackathon I placed in.
Did you work for mcdonalds?
Not as an employer. Campus Food Systems (McDonald's x IIT Roorkee) was a project from January to May 2025, where a 5-designer team designed service flows and group ordering and shipped a physical and digital kiosk and ordering system.
Any international awards
The global one is the Awwwards Young Jury, which I joined in March 2026, and Framer lists me in its official experts directory. My 5+ design awards are national ones, mostly hackathons.
How did you mentor designers?
At E-Summit 2023 I mentored 5+ designers through structured critiques and reusable components, which cut visual rework cycles under tight deadlines.
E-Summit case study · How to give design feedback
Are you a ui or ux designer?
Both, as a product designer: UX (flows, research, structure) and UI (screens, systems, visuals), plus brand and Framer builds. My titles have ranged from UI and UX intern to Founding Designer.
Product designer vs UX designer
What were you like as a kid?
I grew up in Roorkee and was into art and craft all through school, while being House Vice Captain at Skyward Senior Secondary School and cracking JEE Main and Advanced to get into IIT Roorkee. That art habit is where design started.
CodeAnt AI and FamPay case studies
What is codeant?
CodeAnt AI is a code health platform for engineering teams: AI code review, security scanning, code quality and developer metrics. It reviews every pull request and also maps your live attack surface. More than 800 companies use it, and I've been its founding designer since June 2024.
CodeAnt AI case study · codeant.ai
Is codeant a yc company?
Yes, CodeAnt AI is a Y Combinator company from the Winter 2024 batch (W24). I joined as founding designer in June 2024, and the company has gone from $0 to a $60M valuation since.
CodeAnt AI case study · CodeAnt on Y Combinator
What is your role at codeant?
I'm the Founding Designer at CodeAnt AI (YC W24), and the only designer. Product, Framer website, brand and design system all come through me. It's my current role, since June 2024.
CodeAnt AI case study · Experience
When did you join codeant?
Since June 2024, so more than two years as Founding Designer at CodeAnt AI. It's my longest role; the internships and contracts before it ran a few weeks to a few months each.
What did you design at codeant?
All of it, from the ground up. Product design (onboarding, dashboard, scan center, code review, security flows, developer metrics), the Framer website with its landing pages and ad creative, and the brand and design system, built in parallel with the product.
How big is codeant?
More than 800 companies use CodeAnt, and the core workflows I designed are used weekly by 40,000+ developers. The company went from $0 to a $60M valuation while I've been its founding designer.
CodeAnt AI case study · Experience
What problem did you solve at codeant?
Activation. As more developers signed up, fewer reached any of the product, and nothing works until a repository is connected. That repo connection step was breaking at every layer, so it's what I spent the most time on as the platform scaled.
CodeAnt AI case study · How we doubled trial-to-paid
Where were users dropping off at codeant?
On paper the path was short: sign up, choose a Git provider, connect a repo, see your code health. The funnel showed people leaving at Connect Repository, and most of them never knew why. That's where I started.
CodeAnt AI case study · How we doubled trial-to-paid
What was the admin wall?
Connecting a company repo means installing the GitHub app on the company org, which needs admin rights. The install defaulted to the developer's personal account, and most developers aren't admins. So they hit a wall with no error and no next step.
CodeAnt AI case study · How we doubled trial-to-paid
The person with intent had no access
"The person with intent had no access. The person with access had no idea CodeAnt existed." In most engineering teams, the developer who finds a new tool isn't the one who controls installs. That gap, not the screen, was the real blocker.
Why was it not a ux problem?
We had designed onboarding for one user finishing one flow, and enterprise tools don't activate that way. Polishing the connect screen wouldn't have helped. The stuck person needed a way to hand the step to someone who could finish it.
CodeAnt AI case study · How we doubled trial-to-paid
How did you fix the admin wall?
Instead of a dead end, a developer without admin rights gets two ways forward: email the admin straight from the product, or copy an invite link into the team chat. I stopped treating that developer as a failed activation. They were the person selling CodeAnt inside their company.
CodeAnt AI case study · How we doubled trial-to-paid
Why both email and invite link?
Teams ask each other for things in different ways, and the blocked person knows which one their admin will actually answer. So I kept both: a direct email, or a link they drop into team chat. My job was to make the ask quick to send and easy to approve.
How we doubled trial-to-paid · CodeAnt AI case study
What about self hosted onboarding?
Self-hosted setup lived in one dense doc covering every platform at once. I turned it into step-by-step flows for GitHub, GitLab, Bitbucket and Azure DevOps, each with a short video. You pick your platform and see only your steps.
CodeAnt AI case study · How we doubled trial-to-paid
Getting connected did not mean getting value
Even with a repo connected, plenty of users never found the part of the product they came for. CodeAnt has several product lines (reviews, security, quality, metrics) and people sign up for different ones. Most explored AI code review and left the rest untouched.
CodeAnt AI case study · How we doubled trial-to-paid
What is the get started screen?
The Get Started screen lists every product line (AI code review, security, quality, insights, integrations, your team) and each one links straight into its own setup, in any order. No tour, no forced sequence, no reading required.
Why no product tour?
Developers skip tours anyway, and a tour assumes everyone wants the same thing in the same order. People sign up for different product lines, so the Get Started screen lets each person go straight to the setup they came for.
How we doubled trial-to-paid · CodeAnt AI case study
Codeant onboarding emails
Most trials don't end on day one, so I built a communication layer that kept onboarding going. Each email went out because of what that user had or hadn't done, not a fixed drip. The same logic ran in-product as nudges, so nobody was told to set up something they already had.
CodeAnt AI case study · How we doubled trial-to-paid
Did you reduce setup steps?
Yes. Counted as the steps a user clicked through, setup went from seven to three in onboarding A/B tests, and the tests also made clear what a successful first pull request review looks like. Activation doubled. Fewer steps cut the doing time, and a visible finish line stopped people hovering at the end.
How we doubled trial-to-paid · CodeAnt AI case study
How did you decide which steps to cut?
I asked of each step whether the user needed it before their first result, or whether only the backend did. Backend-only steps can usually wait until after the first win.
What were the results at codeant?
Trial-to-paid conversion doubled, and drop-off at the admin wall fell by 40%. Separately, onboarding A/B tests cut setup from seven steps to three and doubled activation.
CodeAnt AI case study · How we doubled trial-to-paid
Which change caused the improvement?
Honestly, I can't split the activation result between fewer steps and the clearer first-PR success state, and I wouldn't trust anyone who claimed to from one round of tests. I think they need each other.
Did you design codeant.ai?
Yes. I designed codeant.ai in Framer, including its product and comparison landing pages, plus ad creative. Its conversion rate has doubled since launch, and it supported go-to-market through the $0 to $60M phase.
codeant.ai · CodeAnt AI case study
Did you build a design system at codeant?
Yes. I built CodeAnt's visual identity, component library and design guidelines in parallel with the product, and every screen from dashboard to website runs on that one system. Standardising 18+ UI patterns cut design turnaround by 30%.
CodeAnt AI case study · Design systems for startups
Show me the codeant dashboard
Here's the CodeAnt product. I designed the dashboard, scan center, code review, security flows and developer metrics. The live dashboard is at app.codeant.ai.
CodeAnt AI case study · app.codeant.ai
How does codeant code review work?
Every pull request is reviewed in depth, and the fix is one click away. I treat the evidence behind each AI finding (the file, the line, the rule) as part of the interface, so a developer can accept or dismiss it in one look. A finding that can't show its reasoning gets ignored after the second wrong one.
Manager dashboards codeant
Yes. Code analysis results and secret leaks lived in separate places, so an engineering manager had to assemble the picture by hand before deciding what to fix. The manager dashboards I designed put them together and cut org-level triage time by 35%.
CodeAnt AI case study · Experience
Codeant sign in page
This is the CodeAnt sign-in. It puts the four Git providers and the SaaS or self-hosted choice first, because developers want to know straight away whether a tool works with their setup.
How is designing for developers different?
Devtools tend to break at org permissions, self-hosted installs and a first run that has to work on real code. CodeAnt hit all three. And developers read a devtool site like a code review: they skip the hero and look for integrations and docs.
What did you learn at codeant?
When drop-off piles up on one step, I now ask whether the person on that screen can actually finish it before I ask whether the screen is confusing. And the developer who signs up is often the person selling your tool inside their company, so design for that ask.
How we doubled trial-to-paid · CodeAnt AI case study
What was hardest at codeant?
Activation was the hardest problem. The flow looked complete, but the blocker wasn't on any screen: the developer who wanted CodeAnt usually didn't have admin rights to connect the company repo. Fixing it meant designing for the org chart, not just the user.
What tools did you use at codeant?
I design in Figma and build the codeant.ai website in Framer myself, as an official Framer Expert. I also build working prototypes and small tools with AI coding tools. I don't write production app code; engineers handle that.
CodeAnt AI case study · Resume
What does codeant say about you?
Amartya Jha, co-founder of CodeAnt AI (YC W24), wrote: "Working with Utkarsh is like compressing five years of design into a single month. His speed, taste, and craft consistently push our brand to new heights."
Show me the codeant case study
Here's the CodeAnt film. It walks through the admin wall, the hand-off, self-hosted setup, Get Started, the emails and the product itself, in about a minute. The full case study has every screen.
Codeant live link
CodeAnt is a live product. The marketing site is codeant.ai and the product dashboard is app.codeant.ai. I designed both.
Is there a longer write up of codeant?
Yes. My guide "How we doubled trial-to-paid at CodeAnt" walks through the admin wall, the Get Started screen, the 7 to 3 setup steps and the behaviour-based emails, step by step.
How we doubled trial-to-paid · CodeAnt AI case study
What is fampay?
FamPay (YC S19) is India's payments app for teenagers learning to spend, save and pay on their own. I interned there in 2023 and redesigned the Cashback Store voucher flow so teens stopped losing voucher value.
What was your role at fampay?
I was a product design intern at FamPay (YC S19). I worked on two things: the Cashback Store voucher flow, which is the case study, and transaction failure UX across the iOS payment flows.
FamPay case study · Experience
Fampay timeline
My FamPay internship ran from August to November 2023. The Cashback Store project itself ran September to October 2023 and shipped during the internship.
What is cashback store?
Cashback Store is FamPay's in-app rewards marketplace, where teens turn cashback into branded vouchers. Pick a brand, choose an amount, pay, done.
What problem did you solve at fampay?
Some vouchers were one-time use. Buy a ₹1,000 voucher, spend ₹400 in one go, and the remaining ₹600 is gone. Teens didn't know this, and the mistake began at purchase, long before they found out at redemption.
FamPay case study · Reducing support tickets with UX
How did the problem affect the business?
Before designing anything, I mapped both sides. Users couldn't tell one-time vouchers apart and found the downside too late, so it felt like losing money. The business saw rising complaints, weakening trust and a revenue surface getting harder to scale.
What research did you do at fampay?
Complaints piled up, so we got on calls with users. I also mapped the full Cashback Store flow and the cost on both the user and business side before touching a screen. The key finding: the mistake started at purchase, not at redemption.
FamPay case study · Reducing support tickets with UX
How did the cashback store experience work?
Cashback Store wasn't one screen. It ran across discovery, purchase, redemption and coming back later, so I mapped all of it first. Then I marked where a user decided something without the full picture. There were two moments: Buy and Redeem.
FamPay case study · Reducing support tickets with UX
Fampay design principles
Three principles. Clarity before commitment: know how one-time vouchers work before buying. Keep the flow lightweight: fast and easy to finish. Carry clarity forward: stay guided after purchase instead of relying on memory.
What did you explore at fampay?
I pushed three directions far enough to see how each would fail with a real teenager: an interactive tutorial, a real-time payment alert and a purchase acknowledgement. The first two were rejected. The purchase acknowledgement, a one-time-use pill at the point of buying, was selected.
FamPay case study · Reducing support tickets with UX
Why not a tutorial?
A tutorial comes too early, and teens skip it. A payment alert comes too late, when the decision is already made. The rule had to be visible at the moment of purchase, so that's where it went.
Redemption was outside our control
Once users copied the voucher code and moved into a merchant app, FamPay had no say in what happened next. So anything they needed to know had to land before that hand-off.
What was the solution at fampay?
The one-time-use rule now pops up right where the decision happens, above Buy Now. Tap it, read it, proceed, and only then does Buy Now become active. The same rule is repeated at redemption, the last moment before the user leaves FamPay.
FamPay case study · Reducing support tickets with UX
Why above the buy now button?
Above Buy Now is the moment of commitment, so the rule can't be missed there. A confirmation modal everyone clicks through adds friction and changes nothing. Putting the message at the right moment does more than making it louder.
Reducing support tickets with UX · FamPay case study
Carried the rule beyond purchase
Yes. The one-time-use pill appears again on the voucher detail, right above Redeem Now, the last moment before the user leaves for the merchant's app. Users shouldn't have to remember a rule they read once.
What were the results at fampay?
On the Cashback Store, one-time voucher complaints dropped 80% after launch, freeing 20% of support's bandwidth. On payment errors, I redesigned timeout, bank-decline and retry states across iOS flows and validated 15+ screens with usability tests: failure-related drop-off fell 20% and repeated mistakes fell 25%.
FamPay case study · Reducing support tickets with UX
Who was on the fampay team?
A small team: 2 designers, 1 PM and 2 engineers. There's a team photo on the case study.
What tools did you use at fampay?
Figma, for everything: the flows, the screens, the prototypes and the hand-off to engineering.
What does fampay say about you?
Esham Hassain, UX Designer at FamPay (YC S19): "Utkarsh brought clarity and structure to our voucher flow. His work reduced confusion and made the experience feel more reliable."
Show me the fampay case study
Here's the FamPay film. In under a minute it shows the one-time voucher problem, why a tutorial and a payment alert were rejected, the rule above Buy Now, and the result.
What was hardest at fampay?
Cutting tickets without hurting the business. Hiding vouchers or adding friction until fewer people bought would have cut tickets and hurt revenue. And redemption happened outside FamPay, so the clarity had to land before the hand-off while keeping the flow fast.
Reducing support tickets with UX · FamPay case study
What else did you do at fampay?
Yes, transaction failure UX. I redesigned timeout, bank-decline and retry error states across FamPay's iOS payment flows, tested 15+ screens with users, and cut failure-related drop-off by 20% and repeated user mistakes by 25%.
Payment failure UX · Experience
Fampay live link
Yes. The Cashback Store voucher work shipped during my internship in 2023, built by FamPay's engineers, and one-time voucher complaints fell 80% after launch. FamPay is live today as FamApp on the App Store.
FamApp on the App Store · FamPay case study
Fampay before and after
The redesign added clarity at two moments: before purchase and again at redemption. This view highlights where the one-time-use step now sits in the purchase to redemption flow. The case study has a toggle to compare before and after.
Fampay learnings
The ticket shows up where the problem ends, not where it starts. Design at the complaint and you get a better apology. Design where the mistake begins, and the complaint doesn't happen. I wrote this up as a guide.
Reducing support tickets with UX · FamPay case study
Designing for teenagers
FamPay's users are Indian teens learning to handle money on their own. At FamPay that meant the rule had to be visible exactly where they decide. Teens skip tutorials, and a lost ₹600 feels like losing money, not reading fine print.
How did you design the admin handoff?
I sketched the hand-off as a flow before any UI: no access, email the admin or share a link, the admin sees it in email or Slack, repo connected. Getting the flow right mattered more than the screens.
CodeAnt AI case study · How we doubled trial-to-paid
What did self hosted setup look like before?
Before, self-hosted setup was one dense doc covering every platform at once, so each reader had to filter out the parts that weren't theirs. Docs still matter for edge cases, but for a first setup I'd take a sequence over a reference page every time.
CodeAnt AI case study · How we doubled trial-to-paid
Show me fampay screens
Here's the Cashback Store I worked on. The case study walks through the flow map, the explorations, the purchase screen with the one-time-use rule above Buy Now, and the redemption screen.
Codeant vs fampay
CodeAnt is B2B devtools: I'm the founding designer, it's ongoing, and the work doubled trial-to-paid. FamPay was a 2023 consumer fintech internship in a team of five, and it cut voucher complaints by 80%. Both start from where the mistake begins, not where it shows.
CodeAnt AI case study · FamPay case study
What is activation?
Activation is a new user reaching first real value. At CodeAnt that meant a connected repo and a reviewed pull request. It's the earlier signal, so it moves before trial-to-paid does.
How we doubled trial-to-paid · Choosing an activation metric
What is trial to paid?
Trial-to-paid is the share of trial accounts that pay when the trial ends. At CodeAnt it doubled after the onboarding work: the admin hand-off, guided self-hosted setup, the Get Started screen and behaviour-based emails, all together.
How we doubled trial-to-paid · CodeAnt AI case study
Difference between activation and trial to paid
Activation is a new user reaching first real value, for CodeAnt a connected repo and a reviewed pull request. Trial-to-paid is whether the account pays when the trial ends. Activation is the earlier signal and moves first.
Which change made the biggest difference at codeant?
Only two changes were measured on their own: the admin hand-off (40% less drop-off at that step) and the shorter setup (activation doubled). The 2× trial-to-paid came from all five changes together, so I don't credit it to any single one.
What does 40% drop off mean?
It's the step where people got stuck connecting a repo without admin rights. After blocked developers could email their admin or share an invite link into team chat, drop-off at that step fell by 40%.
CodeAnt AI case study · How we doubled trial-to-paid
Did you take codeant to 60m?
It's valuation, not revenue: CodeAnt went from $0 to a $60M valuation while I designed its product, website and brand. I won't claim design did that alone. The design results I can point to: 2x trial-to-paid and manager dashboards that cut triage time 35%.
How much funding has codeant raised?
The site doesn't cover CodeAnt's funding rounds, investors or revenue, so I won't guess. What it says: CodeAnt is a Y Combinator W24 company that went from $0 to a $60M post-money valuation while I've been there. CodeAnt's YC page has more.
CodeAnt on Y Combinator · CodeAnt AI case study
Who founded codeant?
The site names one of CodeAnt's co-founders, Amartya Jha, who wrote the testimonial on the case study. It doesn't list the full founding team, so CodeAnt's YC page is the place for that.
CodeAnt on Y Combinator · CodeAnt AI case study
Were you the first designer at codeant
Yes. I joined CodeAnt AI in June 2024 as the first designer, and I'm still the only one. Product, the Framer website, brand and design system all come through me.
CodeAnt AI case study · Experience
How do you handle product website and brand alone?
Often all in the same week: a product flow, a landing page, an ad. One design system is what makes that possible, because the website, the app and the ads come from the same decisions. Amartya's line about compressing five years of design into a month is about that speed.
CodeAnt AI case study · Design systems for startups
Is codeant remote?
CodeAnt's team is fully remote, and so am I. I work from Roorkee, India, on IST, alongside the founders and engineers, the same way I work with teams in the US, UK, Europe, the Gulf, Singapore and India.
CodeAnt on Y Combinator · Hire
Which git providers does codeant support?
Four: GitHub, GitLab, Bitbucket and Azure DevOps, each as SaaS or self-hosted. The sign-in page puts those four and the SaaS or self-hosted choice first, because developers want to know straight away whether a tool fits their setup.
What is self hosted?
SaaS means your code lives on the provider's cloud, like github.com. Self-hosted means your team runs its own Git server, such as a company GitLab. CodeAnt supports both, so self-hosted teams got their own guided setup, one platform at a time.
CodeAnt AI case study · How we doubled trial-to-paid
Why did the install go to personal account?
The GitHub install defaulted to the developer's personal account, but the code a team wants reviewed lives in the company org. Installing there needs admin rights, and most developers aren't admins, so they stalled with no error.
CodeAnt AI case study · How we doubled trial-to-paid
What is an org admin?
The org admin (on GitHub, the organisation owner) is the person allowed to install apps on the company's Git org. At CodeAnt that was usually not the developer who found the tool, and often someone who had never heard of CodeAnt.
How we doubled trial-to-paid · Team invite flows
Did users see an error at codeant?
No error, no path, just a wall. A developer without admin rights got stuck at connecting the repo with no message explaining why and no next step, which is why most of them never knew what had gone wrong.
How did you find the admin wall?
The funnel showed people leaving at Connect Repository without saying why. So I asked whether the person on that screen could actually finish it, before asking whether the screen was confusing. They couldn't: connecting the company org needed an admin.
How we doubled trial-to-paid · CodeAnt AI case study
Did you do user research at codeant?
The case study is built on funnel data and onboarding A/B tests rather than interview write-ups: the funnel showed where people left, and the tests cut setup from seven steps to three. It doesn't describe interview sessions, so I'm happy to talk through the process on a call.
CodeAnt AI case study · Book a 30-minute call
What is first pr success?
The A/B tests made it plain what success on the first pull request looks like, so people knew when setup had worked. A setup that ends on an unchanged screen leaves people guessing and hovering. Together with fewer steps, activation doubled.
What's in the request admin approval modal?
The Request Admin Approval modal has an invite link with a Copy button, a field for the org admin's email with Send, and a Book a Call link. It replaced the dead end at the repo step.
CodeAnt AI case study · Team invite flows
What happens on the admin's side?
The admin sees the request in email or in Slack, follows it, and connects the repo, so the developer who asked can carry on. The request modal, the admin's side and the waiting state are written up in my team invite flow guide.
Team invite flows · CodeAnt AI case study
Does the admin wall apply outside dev tools?
Yes, to any B2B product where the person who signs up can't finish setup alone, like connecting a workspace, a billing account or an identity provider. Let the blocked user hand that step to the person who can do it.
How we doubled trial-to-paid · Team invite flows
What were the self hosted videos?
Each platform got its own short video showing what every step should look like. On the new screen the video sits on the left and the step on the right, for example step 4 of 4 asking for your GitLab URL, Client ID and Client Secret.
CodeAnt AI case study · How we doubled trial-to-paid
What products does codeant have?
AI code review on every pull request, code security, code quality, and insights (developer metrics), plus integrations and team setup. Beyond the code it maps your live attack surface and covers your cloud and runtime. People sign up for different ones, which is why Get Started lists them all.
CodeAnt AI case study · codeant.ai
What's on the get started page?
It has tabs for AI Code Review, Code Security, Code Quality and Insights, shows the setup steps you've completed (five in the screenshot), and has integrations and an Invite More Teammates option. Every item links straight into its own setup.
CodeAnt AI case study · How we doubled trial-to-paid
Do you design ide extensions?
My work is the web product, the setup flows and the website. CodeAnt's IDE extensions appear in the Get Started screen I designed, but I haven't designed a CLI.
CodeAnt AI case study · Designing for developer tools
What are in product nudges?
The same behaviour logic as the emails, inside the product. Someone who had connected a repo heard about the parts they hadn't touched yet, and nobody was told to set up something they already had. They surfaced what users missed without interrupting what they were doing.
CodeAnt AI case study · How we doubled trial-to-paid
Why not a drip campaign?
A fixed drip sends everyone the same thing on the same days, including setup they've already done. Most trials don't end on day one, so each CodeAnt email went out because of what that user had or hadn't done.
How we doubled trial-to-paid · Onboarding email sequence template
What tool did you use for codeant emails?
The case study shows the email automation workflow (send, branch, audience filter and timer steps) beside a welcome email, but it doesn't name the email tool. The logic is the point: each message is triggered by what a user has or hasn't done.
CodeAnt AI case study · How we doubled trial-to-paid
What is in the codeant welcome email?
The welcome email is "Welcome to CodeAnt AI" with one main action: a Connect your repository button. It's the first step of the workflow that then decides who gets which email next.
Onboarding email template
Start with a few activation events and write one message for each that hasn't happened yet. My onboarding email sequence template has the trigger map and the copy.
Onboarding email sequence template · How we doubled trial-to-paid
What is a pull request?
A pull request is a proposed code change that teammates review before it's merged. CodeAnt reviews every pull request in depth with AI, and the fix for each finding is one click away.
What is code health?
On CodeAnt, code health means visibility into your code: quality, security, reviews and developer metrics in one place. The last onboarding step was literally "see your code health", once a repo was connected.
What are quality gates?
Quality gates are checks code has to pass before it's merged. The case study lists them alongside code review, security scanning and developer metrics as what CodeAnt gives engineering teams, but it doesn't break down that screen.
CodeAnt AI case study · app.codeant.ai
What are secret leaks?
A secret leak is a password, API key or token committed into code. At CodeAnt, secret leaks and code analysis results lived in separate places, so I designed manager dashboards that brought them together and cut org-level triage time by 35%.
CodeAnt AI case study · Security dashboard design
What is the scan center?
Scan center is one of the product areas I designed at CodeAnt, alongside the dashboard, code review, security flows and developer metrics. I own the UX for its security scans. The case study doesn't break it down screen by screen, but the live product is at app.codeant.ai.
CodeAnt AI case study · app.codeant.ai
What are developer metrics?
Developer metrics (the Insights tab) give engineering teams visibility into how their code and reviews are going. I own the UX for developer insights at CodeAnt. The case study names the area but doesn't walk through its screens.
CodeAnt AI case study · app.codeant.ai
What security features did you design?
CodeAnt secures your code, your cloud and your runtime, and maps your live attack surface the way an attacker would see it. I designed those security flows and scans on the same system as the rest of the product.
CodeAnt AI case study · Security dashboard design
Where should ai review comments go?
On the pull request. A review comment in a separate dashboard gets ignored, and the same comment on the PR gets read. And a finding that can't show its reasoning (the file, the line, the rule) gets ignored after the second wrong one.
AI code review UX · CodeAnt AI case study
Why build a design system at codeant?
Similar UI patterns kept doing the same job in different ways. I folded 18+ of them into one system, design turnaround dropped by 30%, and reviews stopped turning into debates about which filter bar was the right one.
Design systems for startups · CodeAnt AI case study
Did you pause the product to build the design system?
No pause. I built the visual identity, component library and design guidelines in parallel with the product, because a tool used every week can't stop for a design freeze. The site doesn't give a timeline for it.
Design systems for startups · CodeAnt AI case study
Did you design codeant's brand?
Yes, the brand identity is mine: visual identity and design guidelines that set the visual, motion and product design standards, built alongside the product. The case study doesn't single out the logo, so ask me if that's what you need.
CodeAnt AI case study · Startup brand identity
Did you design codeant ads?
Yes. The ad creatives came out of the same system as the brand, site and product, so someone who clicks an ad lands on a page with the same colours and type and meets them again in the product.
CodeAnt AI case study · codeant.ai
Did you do motion design at codeant?
Motion is part of the brand identity I set at CodeAnt: the visual, motion and product design standards. The codeant.ai site itself is deliberately restrained and fast, with very little motion, built around the demo button.
CodeAnt AI case study · Experience
How is codeant.ai structured?
A plain product claim, customer logos in the first screen and two labelled ways in. It's restrained, fast and built around the demo button, because developers skip the hero and look for integrations and docs.
codeant.ai · CodeAnt AI case study
Did you redesign the codeant website?
Yes. CodeAnt's go-to-market kept moving while the company grew from $0 to a $60M valuation, so I revamped the Framer site around the new story, with landing pages for each product line. Conversion rate has doubled since launch.
codeant.ai · CodeAnt AI case study
Codeant landing pages
codeant.ai has product and comparison landing pages, one per product line, built in Framer so the marketing team ships pages without engineering. They're conversion-optimised, and the site's conversion rate has doubled since launch.
codeant.ai · CodeAnt AI case study
Why framer for codeant?
I design and build the site in Framer myself, so no details get lost in a handoff to a developer, and CodeAnt's marketing team can ship landing pages without engineering. I'm an official Framer Expert.
Framer vs Webflow for SaaS · codeant.ai
Did you build the codeant website yourself?
Yes. I designed and built codeant.ai in Framer myself, including the product and comparison landing pages. That's the one part of CodeAnt where design and build are both mine.
codeant.ai · CodeAnt AI case study
Did you code the codeant dashboard?
No. Engineers build the CodeAnt product; I don't write production app code. I design it in Figma, build the website in Framer, and build working prototypes and small tools with AI coding tools.
What would you do differently at codeant?
I'd design for the whole team from day one. Our first onboarding assumed one person finishing one flow, but enterprise tools get adopted by an admin, a hand-off and a developer together. Designing around that is what moved activation, so today I start there on any B2B product.
CodeAnt AI case study · Book a 30-minute call
What would you reuse on any b2b product?
Find the step where drop-off piles up and check whether the person on it can finish it. If not, design the hand-off. Split setup by environment, link into each product line instead of a tour, show a clear success state, and trigger every nudge from behaviour.
How we doubled trial-to-paid · SaaS onboarding audit
How do you know onboarding is self serve?
A test I still use: if a step needs a human to explain it, the onboarding isn't self-serve yet. Either the product explains it, or it hands the step to the person who can do it.
How long did the codeant onboarding work take?
The site doesn't give a timeline for the onboarding work itself. It sits inside my role as founding designer, which started in June 2024 and is ongoing; the case study calls activation the problem I spent the most time on as the platform scaled.
CodeAnt AI case study · How we doubled trial-to-paid
How did you measure activation at codeant?
Activation was a connected repo and a reviewed pull request, read from the onboarding funnel and the A/B tests. The admin hand-off was measured as drop-off at that step (down 40%). The site doesn't name the analytics tool.
How we doubled trial-to-paid · Choosing an activation metric
How do you work with engineers at codeant?
Engineers build the CodeAnt product from my designs. When I design a feature I design its states at the same time and write a rule for each one, so engineers don't have to guess, and the shared design system keeps the screens consistent.
Design handoff · CodeAnt AI case study
Is codeant a security company?
Both. Its YC listing calls it an autonomous offensive and defensive cybersecurity platform, and the case study frames it as a code health platform: AI code review, security scanning, code quality and developer metrics.
CodeAnt on Y Combinator · CodeAnt AI case study
Who are codeant's customers?
The site doesn't name CodeAnt's customers. It says more than 800 companies use it and the core workflows I designed are used weekly by 40,000+ developers. codeant.ai shows customer logos in its first screen.
codeant.ai · CodeAnt AI case study
How much does codeant cost?
The site doesn't cover CodeAnt's pricing, so check codeant.ai for current plans. The case study does mention a trial: trial-to-paid conversion doubled after the onboarding work.
Can i try codeant?
Sign in at app.codeant.ai with GitHub, GitLab, Bitbucket or Azure DevOps, SaaS or self-hosted. For a demo, codeant.ai is built around the demo button.
How did you get the codeant job?
The site doesn't tell that story beyond the date: I joined CodeAnt AI as its first designer in June 2024, after design internships at xPay, FamPay and Sportskeeda. Happy to tell you the rest on a call.
Experience · Book a 30-minute call
How many employees does codeant have?
The site doesn't give CodeAnt's headcount. What it does say: I'm the only designer, more than 800 companies use the product, and the case study has a team photo.
CodeAnt AI case study · CodeAnt on Y Combinator
What is a devtool?
A devtool is software made for developers, like a code review or security product that plugs into their Git workflow. CodeAnt is one. They tend to break at org permissions, self-hosted installs and a first run that has to work on real code.
Designing for developer tools · CodeAnt AI case study
What is onboarding?
Onboarding is everything between creating an account and the moment a user gets what they signed up for. At CodeAnt it ran from sign-up through connecting a repo to the first reviewed pull request, and with emails it carried on through the trial.
How we doubled trial-to-paid · SaaS onboarding examples
What is drop off?
Drop-off is the share of people who leave at a given step instead of moving to the next. At CodeAnt the funnel showed it piling up at Connect Repository, and the admin hand-off cut drop-off there by 40%.
How we doubled trial-to-paid · UX metrics
Why does the codeant case study focus on onboarding?
It focuses on onboarding and activation because that's the problem I spent the most time on as the platform scaled. The rest of the product, the website and the design system appear briefly, and the live product and site are linked.
CodeAnt AI case study · app.codeant.ai
What does yc s19 mean?
Yes, FamPay is a Y Combinator company from the Summer 2019 batch (S19). YC names batches by season and year, so W24 is Winter 2024, which is CodeAnt's.
Were you a product design intern or ux design intern at fampay
Same internship, two labels: the case study says Product Design Intern and my resume says UX Design Intern. It ran August to November 2023, and the Cashback Store project inside it ran September to October.
What is a one time use voucher?
A one-time-use voucher can be redeemed once. Spend part of it and the rest is gone: buy a ₹1,000 voucher, spend ₹400 in one go, and the remaining ₹600 is lost. Teens didn't know which vouchers worked this way.
How many complaints did fampay get?
The site gives the change, not the raw counts: one-time voucher complaints fell 80% after launch and 20% of support bandwidth was freed. Ticket volumes and user numbers aren't published, so I won't guess them.
FamPay case study · Reduce support tickets with UX
80% of what
Voucher-related support tickets, specifically complaints about one-time vouchers, fell 80% after launch. It's not 80% of all FamPay tickets.
FamPay case study · Reduce support tickets with UX
What does 20% support bandwidth mean?
20% of the support team's time went back to issues that needed a person, instead of answering one-time voucher complaints.
FamPay case study · Reduce support tickets with UX
How did you know it worked at fampay?
Support noticed before we pulled the data. The measure was voucher-related tickets, compared before and after launch. Same tag, same time window: otherwise nobody can say whether a change worked.
FamPay case study · Reduce support tickets with UX
What is purchase acknowledgement?
Purchase acknowledgement was the direction we picked: a "One time use only" pill at the point of buying that you tap and read before Buy Now becomes active. It beat an interactive tutorial (too early) and a real-time payment alert (too late).
FamPay case study · Reduce support tickets with UX
Why not just remove one time vouchers?
Hiding vouchers, or adding friction until fewer people bought, would have cut tickets and hurt the business. Cashback Store is a revenue surface, so the fix had to cut confusion while keeping the flow fast.
FamPay case study · Reduce support tickets with UX
Did fampay sales drop?
The site doesn't publish revenue or purchase numbers, so I won't claim either way. The goal was to cut confusion without hiding vouchers or slowing the flow, and the published results are 80% fewer voucher complaints and 20% of support bandwidth freed.
Which brands are in the cashback store?
The screens show vouchers for Amazon, Flipkart, Nykaa and Myntra in My Vouchers, and an Amazon voucher detail with the one-time-use pill above Redeem Now.
How many users did you talk to at fampay?
Complaints piled up, so we got on calls with users. The site doesn't say how many calls there were. Alongside them I mapped the whole Cashback Store flow and what the problem cost on both sides.
Why show the rule twice?
Once where they decide and once where they act on the decision. Users shouldn't have to remember a rule they read once, and more than two turns into noise.
FamPay case study · Reduce support tickets with UX
Won't warnings slow the flow
Only if they're everywhere. One clear message at the moment of commitment, repeated once where the user acts, adds very little friction compared with a modal on every step. Keeping the flow lightweight was one of the three principles.
Reduce support tickets with UX · FamPay case study
Who is esham hassain?
Esham Hassain is a UX Designer at FamPay (YC S19) and wrote the testimonial on the case study: I "brought clarity and structure" to the voucher flow. The team was 2 designers, 1 PM and 2 engineers.
What exactly did you do at fampay?
I mapped what the problem cost on both sides and the whole Cashback Store flow, marked the two decision points, and pushed three directions until they failed. The team (2 designers, 1 PM, 2 engineers) shipped the selected one during my internship.
Was fampay ios or android
The payment error work was on FamPay's iOS payment flows. The Cashback Store case study shows phone screens but doesn't specify a platform, and FamPay is listed on the App Store as FamApp.
FamPay case study · FamApp on the App Store
How did you handle payment timeouts?
A timeout means the outcome isn't known yet. The screen has to say whether money may have left the account and when the user will find out, and it shouldn't push an instant retry, because that's how people end up paying twice.
Payment failure UX guide · FamPay case study
Bank decline ux
A decline means the bank said no, not that the app failed. The user needs to know whether trying again makes sense or another method is better, without being blamed or shown a raw bank error code.
How should retry work?
A retry has to say what will happen this time and that the earlier attempt won't also go through. Lock the button after the first tap, so a nervous double tap can't cause a double charge.
How did you test payment errors?
I built a prototype path for each failure on iOS and asked people to complete payments I knew would fail, then watched what they tapped next. Tests across 15+ screens found retry gaps and moments where the app said too little.
Payment failure UX guide · Usability testing for startups
Unified error pattern fampay
I introduced one error pattern across the payment flows, so every failure followed the same structure. People learned once where to find what happened and what to do next, and repeated user mistakes fell by 25%.
Why do payment errors need design?
Failure states usually get one generic screen written late in the sprint, yet a failed payment is when someone is most anxious about their money. For a teenager it may be their own savings, so a vague "something went wrong" costs a lot of trust.
Is fampay a bank?
FamPay calls itself India's wallet built for teens learning to spend, save and pay on their own. It's a payments app for teenagers, now listed on the App Store as FamApp.
How did fampay change how you design?
At FamPay I picked up a habit I still use: when I design a feature I design its states at the same time, and write a rule for each so engineers don't have to guess. It came from redesigning what happens when a payment times out or a bank declines it.
Payment failure UX guide · Error message design
What did the fampay screen look like before?
Before, nothing on the purchase screen made the one-time rule stand out from any other voucher, so it was easy to miss. People found out after redemption, when the money was already gone.
How big was the fampay change?
Small. It put a "One time use only" pill right above Buy Now, with a confirmation before payment and a reminder at redemption. Nothing else in the app had to change for it to ship.
FamPay case study · Reduce support tickets with UX
What would you do differently at fampay?
I'd get on calls with users even earlier. Talking to them is what showed the real problem: teens skip tutorials and an alert at payment arrives too late. That's what led to the clear rule right above Buy Now, so now I start with users before designing fixes.
FamPay case study · Book a 30-minute call
Is there a longer fampay write up?
Yes. "How to reduce support tickets with UX" walks through the FamPay voucher work step by step, and "Payment failure UX" covers the iOS payment error states from the same internship.
Reduce support tickets with UX · Payment failure UX guide
How do i reduce support tickets?
Tag a few months of tickets by what the user was trying to do, take the top three, and walk each one back to the earliest screen where they could have known. Put the information there, before they commit, and repeat it once where they act.
Reduce support tickets with UX
Which tickets can ux fix?
The ones where the product knew something the user didn't: a rule, a limit, a status, where a feature lives. Bugs, outages, refunds and account requests need engineering or a person, and design can only make their status messages clearer.
Reduce support tickets with UX
Are your numbers real?
They're the results reported in each case study, and both companies' people are quoted on the pages: Amartya Jha, CodeAnt's co-founder, and Esham Hassain at FamPay. I'm happy to walk through how each number was measured on a call.
CodeAnt AI case study · Book a 30-minute call
Can i see your figma files?
Some of it is client work, so I'd rather show it live than post it. Book a call and I'll walk you through the files and the decisions behind them.
Book a 30-minute call · Contact
Do you have onboarding experience?
Yes, it's the core of my CodeAnt work: the admin hand-off, guided self-hosted setup, the Get Started screen and behaviour-based emails. Trial-to-paid doubled, and onboarding A/B tests cut setup from seven steps to three and doubled activation.
SoundSphere, E-Summit and live work
Show me your work
My work is four case studies (CodeAnt AI, Fampay, E-Summit IIT Roorkee and SoundSphere) plus seven pieces of live production work, from the CodeAnt website and dashboard to Sportskeeda's IPL and NFL pages. The Work window has all of it.
How many case studies do you have?
There are four case studies: CodeAnt AI (YC W24), Fampay (YC S19), E-Summit at IIT Roorkee and SoundSphere. Three are shipped work and SoundSphere is an exploratory concept. Beside them sit seven links to live production work.
What is your best project?
If you only read one, read CodeAnt AI: I was founding designer as it went from $0 to a $60M valuation. For brand and identity work, read E-Summit (11K+ attendees, ₹25L+ sponsorship). For pure product thinking from a blank page, read SoundSphere.
CodeAnt AI case study · All work
What live work do you have?
The live work is seven things you can open today: the CodeAnt AI website and dashboard, Sportskeeda's IPL and NFL pages, the Zania website, FamPay's Cashback Store and the Entvin website. Each card on the Work page links straight to the live product.
What's the difference between case studies and live work?
Case studies tell the full story: the problem, research, decisions and results. The live work cards are shorter, a line on what I did and a link to the real product. Some overlap, like CodeAnt and FamPay, which have both.
Do you do branding?
Yes. My biggest brand project is E-Summit 2023 at IIT Roorkee, where I led the identity, logo, palette, typography, campaign, sponsor deck, print and website. At CodeAnt AI I also own the brand alongside the product.
Sportskeeda nfl
I designed Sportskeeda's NFL pages for real-time match tracking and high engagement. The tables were restructured so casual readers and power fans could both find the score fast. They're live at sportskeeda.com/nfl.
Sportskeeda NFL pages (live) · Experience
Sportskeeda ads
I restructured tables and navigation to cut cognitive load and speed up scanning for 20M+ monthly users, with simpler views for low-traffic regions and denser ones for power users. The advertiser landing flows clarified ad formats and raised campaign CTR by 10% across US sports brands.
Zania
Zania is an AI agent for security risk and compliance (GRC). I designed and developed its entire website in Framer, from structure to production deployment, as a contract UX designer from Dec 2024 to Jan 2025. It's live at zania.ai.
Entvin
Entvin (YC S22) builds AI agents for lifescience regulatory work. I designed and shipped its website: clear positioning, product storytelling and conversion-focused flows, with positioning settled before any visuals. When I designed it, the headline was AI Agents for Faster Drug Development. It's live at entvin.com.
entvin.com (live) · Experience
What is soundsphere?
SoundSphere is a concept podcast app built around one question: what if you could judge an episode's value before committing to the full listen? It turns any episode into a one-minute summary you hear first, then lets you go deeper if it's worth it.
What was your role in soundsphere?
I was the product designer on SoundSphere. The scope was research, product thinking and UI, so I covered it from the first interviews to the final screens.
How long did soundsphere take?
SoundSphere took four weeks, as a focused design sprint covering research, product thinking and UI.
Is soundsphere real?
SoundSphere is an exploratory concept, not a shipped product. I designed it to test an idea, summary-first listening, so it shows my method rather than live results.
Why did you design soundsphere?
I took it on because podcast apps are built for people who already know what to play, and I wanted to design one for everyone else. Finding podcasts is easy. Knowing which episode is worth the time isn't.
What problem does soundsphere solve?
The current loop is browse, sample, decide late. You judge a two-hour episode by its cover and title, press play, skip around, and an hour later still don't know if it was worth it. Discovery feels like trial and error, not a confident choice.
What research did you do for soundsphere?
I looked at how people discover and decide on podcasts, through interviews and usage patterns. Four signals kept repeating: relevance is unclear before listening, sampling is the default, long episodes raise the cost of trying, and titles and thumbnails rarely reveal enough.
What's the key insight in soundsphere?
One line kept coming up in my interviews: "I don't know if it's worth starting." That became the bet. If a short summary heard before the full episode could answer it, the rest of the product followed.
Opportunity space soundsphere
The opportunity: podcast libraries grow faster than anyone can browse, discovery still runs on title, cover art and duration, and long-form audio has high intent but weak entry points for low-attention users.
How does the ai work in soundsphere?
The AI layer summarises each episode so you can judge it fast. The goal wasn't just to shorten podcasts but to keep the meaning while cutting the effort to evaluate them. In the film's words: preview first, judge fast, go deeper only when it's worth it.
What did you borrow from other apps?
I didn't redesign podcast listening from scratch. I borrowed interaction patterns people already understand from audio, short-form and content discovery products, so the new parts felt familiar.
What was the design principle?
The guiding rule was to help people decide earlier without making long-form audio feel shallow. Every screen, from onboarding to library, serves that one decision: is this episode worth my time?
What screens did you design?
The concept covers onboarding, a For You and Friends feed, a summary listening mode, discovery (topics, trending, playlists, people), a library, and monetization tiers.
Soundsphere onboarding
Onboarding stays light: guest access, so you can start without an account, and quick preference signals (pick three topics and a few voices you trust) so the first feed already feels relevant.
Soundsphere feed
The feed has two views: a relevance-driven For You and a socially aware Friends view. You discover through personal fit and through what people you trust are listening to. And it leads with the insight, not the thumbnail.
Summary listening mode
Summaries aren't supporting text here, they're a short listening layer. One tap and you hear the point of the episode in about a minute. Hooked? One more tap drops you into the full conversation.
Soundsphere discovery
Discovery works beyond passive scrolling: topics, trending content, featured playlists, and people you might want to follow over time. Search works the way you think, by people, topics and what's trending.
Soundsphere library
The library is built for coming back: one place for saved playlists, downloaded episodes, followed speakers and listening paths you want to return to.
How does soundsphere make money?
The business model explores a paid listening product with ad-supported and ad-free tiers, plus room for promoted podcast placements inside discovery, kept light so they don't break the listening flow.
What would you do next with soundsphere?
Next would be validating whether summary-first listening actually helps people decide faster without losing depth. Four questions: do clearer previews increase starts, do summaries lead into full episodes, how short can a summary get before it loses meaning, and does it help creators.
Soundsphere results
There are no launch numbers, because SoundSphere is a concept that never shipped. What it shows is how I frame a bet, design around it, and set up the metrics to test it: episode starts, summary-to-full-episode rate, and summary length versus meaning.
Soundsphere video
Here's the SoundSphere film, just over a minute long, narrated with captions. It walks from the problem to the one-minute summary, the feed and search.
Soundsphere takeaway
My closing line on SoundSphere: not every podcast needs to be shorter, it needs a better first step. That's the whole concept in one sentence.
What tools did you use for soundsphere?
Figma. SoundSphere is a concept project, so the whole thing, from research synthesis to the final screens and prototype, lives in Figma.
What is e-summit?
E-Summit is IIT Roorkee's flagship entrepreneurship event and one of India's largest student-run entrepreneurship conferences. For the 2023 edition I was design lead for branding and website, and it drew 11K+ attendees.
What was your role in e-summit?
I was Design Lead for branding and the website at E-Summit IIT Roorkee 2023, from late 2022 to February 2023, with 5 designers and 3 developers. The event drew 11K+ attendees, ₹25L+ in sponsorship and 5M+ social impressions.
How big was the e-summit team?
The team was 5 designers and 3 developers, working with the organizing committee. Posters and tiles ran on templates, so five designers could work at once and it still looked like one event.
E-summit timeline
The work ran from December 2022 to February 2023, and E-Summit launched in February 2023.
E-summit results
E-Summit 2023 had 11K+ attendees, raised ₹25L+ in sponsorship, and reached 5M+ impressions across social media. One sponsor alone gave ₹10L+.
How many attendees?
11K+ people attended E-Summit 2023. The decision behind it: I designed the system to be usable by the entire team, so every poster, pass and post stayed on brand at that scale.
How much sponsorship?
We raised ₹25L+ in sponsorship, ₹10L+ of it from a single sponsor. I designed the sponsor brochure as a high-trust artifact, not a print export, because for many sponsors it was their first touchpoint with E-Summit.
How many impressions?
The campaign reached 5M+ social media impressions. The decision behind it: build a system where every shared asset felt like part of one story, revealed piece by piece.
50% visibility
On the Work card I describe it as boosting visibility by 50% through web, print and promo design. The case study itself reports the reach as 5M+ social impressions, 11K+ attendees and ₹25L+ in sponsorship.
E-summit context
The 2023 edition was special because IIT Roorkee completed 175 years. The identity had to respect that legacy and still appeal to modern founders and startups, and stay credible for sponsors and investors.
What was the e-summit theme?
The theme was Reminiscing the Ethos: Bharat. To reminisce is to look back, ethos is the spirit of a people, and Bharat is India's own name for itself. The idea was to bring the spirit of India's traders and makers into a room full of founders.
Design considerations
Three constraints shaped it: a scalable identity that works on posters, tickets, merch, website and venues without fragmenting; respect for IIT Roorkee's heritage while staying energetic; and feeling rooted in Indian culture without festival-style or ornamental clichés.
How did you avoid cliches?
The easy answer for an Indian theme is festival ornament, so I avoided it. The direction drew from pre-industrial Indian craft and trade instead: fired earth, not festival. That kept it authentically Indian and still credible for investors.
Visual direction e-summit
I went back before industry: copper coins, terracotta, old trade routes and handwritten manuscripts. I filtered that moodboard into what to absorb, what to discard and what to keep, so the system felt contemporary, repeatable and tied to the theme.
Identity system
The identity was built from a small set of elements: the E and S logo, an earth-toned palette, two typefaces (Lexend and Nunito Sans) and a primary graphic motif. Few enough to scale across posters, merch, digital assets and event spaces.
E-summit colors
The research became the palette: fired earth, not festival. Warm copper and terracotta tones drawn from coins and clay, rather than bright festival colours.
E-summit logo
The E-Summit logo combines an E and an S in a single stroke. The mark stays constant and only its colour changes in each new edition of the summit, so it carries across years. It comes with usage guidelines.
E-summit deliverables
The identity extended across campaign assets, sponsor communication, merchandise and the event environment: social teasers, banners, posters, a sponsor letterhead and deck, hoodies, ID cards, a letterfold brochure, passes, standees and the website.
Campaign materials
Instead of launching the whole identity at once, the campaign revealed it piece by piece through teaser posts and event announcements: speakers, competitions, announcements. That slow reveal is part of how it reached 5M+ impressions.
How did you keep the brand consistent?
Posters and tiles ran on templates: a fixed place for the event name, date and prize or speaker, with motif and colour doing the brand work. Five designers could work at once and it still looked like one event.
Sponsor deck
The sponsorship deck was many sponsors' first contact with E-Summit, so I kept it calmer than the posters: one point per slide, numbers set large, the ask stated plainly. Alongside it I designed the sponsor letterhead.
Print system
The print system covered everything you touched on campus: posters, tickets and passes, team ID cards (designed with proper bleed lines), a letterfold brochure, a token-of-thanks piece, standees and the stage. Every piece had to feel like part of one event.
E-summit merch
Yes, merch was part of the system: black team hoodies with a boxed Reminiscing type print on the front and the E-Summit '23 logo on the back, in the same palette and motif as everything else.
E-summit on campus
On campus the identity ran from bus stops to the main stage: billboards, banners, standees, passes and the stage itself, all from one system.
E-summit website
The website was the main hub for speakers, events and registrations. I laid it out so schedules, speakers and tickets were quick to find for first-time visitors, with tickets one click away. It opened on vintage coins floating behind the theme.
E-summit testimonial
Prof. Rajat Agrawal, Associate Dean of Innovation and Incubation at IIT Roorkee, said I combine design thinking with fast execution, and that for E-Summit I led branding, website design and graphics with precision.
E-summit video
Here's the E-Summit 2023 film, under two minutes, narrated with captions. It covers the theme, the research, the logo, campaign, sponsor brochure, print, website and the results.
Were you a student when you did e-summit
I studied at IIT Roorkee (B.Tech in Mechanical Engineering, 2021 to 2025) and led E-Summit design as a student.
Education · E-Summit case study
Soundsphere vs e-summit
They show different sides of me. SoundSphere is product thinking from a blank page: a four-week concept with research and UI, no launch. E-Summit is brand and execution at scale: a team of 5 designers and 3 developers, shipped to 11K+ attendees.
Why is it called soundsphere?
The case study doesn't explain the name. SoundSphere is simply what I called the concept: a podcast app where you hear a short summary of an episode before deciding to commit to the full listen.
What does ai first mean?
On the Work card I call SoundSphere an AI-first podcast experience. That means the AI summary isn't an add-on under the title: it's the first thing you hear, and it decides whether you go into the full episode. Discovering and choosing long-form audio gets faster.
How long is the summary?
The idea is that any episode becomes about a one-minute listen. The film says it plainly: one tap, and you hear the point in a minute. The summary player in the design shows a short timer, around a minute long, with the full episode one tap away.
What is the new flow in soundsphere?
Most podcast apps go browse, start listening, judge fit later. I flipped the order: preview the summary, judge relevance, then go deeper only if it's worth it. The decision moves to before you spend an hour, not after.
Who is soundsphere for?
SoundSphere is for everyone podcast apps forget: people who don't already know what to play. Long-form audio has high intent but weak entry points for low-attention listeners, so the app gives them a quick, honest first step instead of a cover and a title.
What do you mean by low attention users?
By low-attention users I mean people who'd like to listen but won't gamble an hour to find out if an episode is any good. Long-form audio has high intent and weak entry points for them. A one-minute summary lowers the cost of trying.
Sampling is the default behavior
Sampling is the default: people listen briefly, skip and move on. In the film it's five minutes in, twenty, forty, and an hour later you still don't know if it's worth it, so you close the app. That trial and error is what the summary replaces.
Length increases hesitation
Length increases hesitation. A long episode raises the cost of trying, so a two-hour episode is a much bigger bet than a ten-minute one. That's why the summary is short and the full episode is optional.
Weak signals
People judge episodes with weak signals: titles, thumbnails and descriptions rarely reveal enough. Most discovery still runs on title, cover art and duration. So SoundSphere's feed leads with the insight, not the thumbnail.
Can you use soundsphere without an account?
Yes. Onboarding includes guest access, so in the concept you can start listening without creating an account. There's also a normal sign-up with social logins, and then two quick picks, topics and people, that build your first feed.
Pick 3 topics
New listeners pick three or more topics and three or more people. I asked because the answers change the next screen: the For You feed is built from them, so it starts relevant instead of blank. The cost is one short extra step at sign-up.
What is the for you feed?
For You is the relevance-driven view of the feed, built from the topics and people you pick at onboarding. Each card leads with the episode's insight rather than its thumbnail, so you can decide from the feed itself.
What is the friends tab?
The Friends view is the socially aware side of the feed: what people you trust are listening to. It's a second way to decide, alongside personal fit, because a friend's pick is a stronger signal than a cover image.
What is on a feed card?
Feed cards are quote-led: a line from the episode with its category label, plus like, queue and share counts, and a mini player at the bottom. The card is where people decide, so that's where the preview lives.
How does search work in soundsphere?
Search works the way people think: by people, topics and what's trending. Discovery also has featured playlists and people you may want to follow over time, so finding something doesn't depend on scrolling the feed.
Are there playlists?
Yes. Discovery includes featured playlists, and the library keeps your saved playlists in one place along with downloaded episodes, followed speakers and listening paths you want to come back to.
Can you follow people?
Yes. You can follow people as well as shows. Discovery suggests people you may want to follow over time, and the library keeps your followed speakers in one place.
Can you download episodes?
Yes. The library holds downloaded episodes, and the episode page in the design has a Download Summary option, so the short version can travel with you too.
Can you still listen to the full episode?
Yes. The summary leads into the full episode, it doesn't replace it. Hooked? One more tap drops you into the full conversation, in a player with Audio and Video tabs.
Does soundsphere support video podcasts?
The full episode player in the design has Audio and Video tabs, so a video podcast can be watched as well as heard. The summary layer itself is audio, to keep people in the medium they came for.
Why audio summaries instead of text?
I made the summary a short listening layer you hear, not text under the title. For audio, a spoken summary keeps people in the medium they came for, and it's a choice I'd still make. The full episode stays one tap away.
Episode page
Beyond the feed there's a podcast show page with its episode list and an episode page with details and a Download Summary option, next to the summary player and the full player.
How much does soundsphere cost?
The case study shows a paid listening product with ad-supported and ad-free tiers, but it doesn't state prices. It's a concept, so the tiers are there to show how the business could work without breaking the listening flow.
Does it hurt creators?
That's one of the open questions I wrote down: can summaries improve discovery without hurting original content? The design treats the summary as a way into the full episode, so the hoped-for result is more full listens for creators, not fewer. It still needs testing.
Trustworthy compression
Trustworthy compression is the open question of how short a summary can get before it loses meaning. Cut too much and it stops saying anything specific. I'd test that with real listeners rather than pick a length, designing the short and full versions together.
Which ai model does soundsphere use?
The case study doesn't name a model or tech stack. SoundSphere is a design concept, so it shows how the summarisation layer could work as a diagram and where summaries sit in the product, not an engineering build.
Was soundsphere tested
No. SoundSphere was designed but never shipped or tested with real usage, so read it as design reasoning rather than results. The case study lists what testing would need to answer first: starts, deeper listening, summary length and creator value.
What was the hypothesis?
The bet was that a short summary you hear first lets people judge an episode's value before committing to the full listen, so they decide earlier without long-form audio feeling shallow. The whole concept explores that one idea.
How is soundsphere different from spotify?
Most podcast apps are built for people who already know what to play: browse, press play, judge later. SoundSphere is built for everyone else, with a one-minute preview first and the full episode after. The case study doesn't compare itself to specific apps by name.
Why only one feature?
I kept the scope to one idea: whether a short AI summary helps someone judge an episode before committing to it. Four weeks is enough to explore one bet properly, so everything else, from onboarding to monetization, exists to support that.
SoundSphere case study · MVP scope guide
What was hardest about soundsphere?
The hard part was a tension: shorten the decision without making long-form audio feel shallow. The goal wasn't to cut podcasts down but to keep their meaning while reducing the effort to judge them. Every screen had to help people decide earlier and still lead into the full episode.
Learnings soundsphere
What I'd keep: making the summary a listening layer with the full episode one tap away, rather than text under a title. What I'd do next is test it, because without real usage this is reasoning, not results.
Is soundsphere a client project?
SoundSphere is my own concept, not a client project. I took it on to explore an idea, summary-first listening, with research, product thinking and UI over four weeks.
Why include a concept project?
I include it because it shows a different side of me: product thinking from a blank page, with no client brief. You can see how I find the problem, frame a bet, design around it and set up how I'd test it.
Is soundsphere ios or android?
SoundSphere is designed as a phone app; all the screens are mobile. The case study doesn't name iOS or Android, since it's a concept rather than a build for either store.
Did you do soundsphere alone?
Yes, it's a solo concept project. I did all of it myself: the research, the product thinking, the interaction design and the UI.
When did you make soundsphere?
The case study gives the length, four weeks, but not the dates. It's listed among my case studies on the Work page, and the timeline of my work is on the About pages.
SoundSphere case study · Timeline
Soundsphere screenshots
The case study has the hero mockup, the current-loop diagram, the opportunity space, the AI layer diagram, a moodboard, and screens for onboarding, feed, summary mode, discovery, library and monetization tiers. It opens on a narrated film.
Next case study after soundsphere
After SoundSphere, the case study links on to CodeAnt AI (YC W24), my founding designer work. That's the one to read if you only read one.
When was e-summit 2023?
E-Summit 2023 ran from 17 to 19 February 2023 at IIT Roorkee; the dates were on the stage backdrop. My design work on it ran from December 2022 up to the event.
Where was e-summit held?
E-Summit happens at IIT Roorkee, on campus. The 2023 identity ran across the campus, from bus stops and billboards to the main stage.
Who attends e-summit?
E-Summit brings together founders, investors and venture capitalists, speakers and thousands of students exploring startups, from across India. That mix is why it had to feel rooted and credible at once.
What was the brief for e-summit?
The organizing team wanted a theme that reflected India's entrepreneurial spirit while keeping credibility for sponsors and investors. My job was to turn that into one system across branding, campaign, sponsor collateral, website and event touchpoints.
What colors did you use?
The palette has five named colours: Saffron, Sand, Terracotta, Brown and Dark. Naming them meant volunteers could say terracotta instead of that brown one. The palette image on the case study shows the hex codes.
Why lexend?
Lexend for headings, for presence, and Nunito Sans for body text, for warmth. Two typefaces were enough for posters, passes, the deck and the website, and Lexend made the cut from the moodboard on purpose.
Logo colour versions
The logo had four approved colour versions: copper on dark, copper on light, black on light and white on dark. Fixing them meant nobody improvised a fifth.
Logo guidelines
The logo came with usage guidelines: a construction grid and clear-space measurements around the lockup. With five designers on deadlines, written rules for the logo, its clear space and colour versions did the job a component library does in a product.
Did you design the e-summit logo?
No, the E and S mark is E-Summit's standing logo and stays the same every year. Each year's team designs a new colour palette and identity around it, and for 2023 I led that: the colours, type and the whole system that sits around the mark.
Does the identity change every year?
The logo stays constant across editions and only its colour changes, while each year gets its own theme. So E-Summit stays recognisable year to year, and the theme lives in the system around the mark.
What did you reject?
Floral ornament, Mughal arches and Devanagari-style letterforms all went on the moodboard and I struck them all off. They'd have made it look like a festival poster, which investors don't take seriously.
Absorbed discarded kept
I sorted the moodboard into three piles: absorbed, discarded and kept. It had coins, spice bowls, clay pots and trade-route maps. The festival clichés were discarded; the compass grid and Lexend were kept.
Why a compass?
The compass is the anchor motif, taken from old trade maps; it even became the O in Ethos. It works at every scale: a full graphic on a hanging poster, a faint watermark on the deck covers.
What events were at e-summit?
The campaign posters covered events like Investors' Vista, Trading Heist and Ideastorm, each with its date and prize money in a fixed place. There were also speaker sessions with their own banners.
Competition pages on the website
On the website, each competition page leads with what happens when, as a timeline of rounds, before the description. Most visitors arrive cold from a link or poster, so the schedule comes first.
Who were the speakers?
Speaker announcements were part of the campaign, and speaker sessions had their own banners, like an interactive session with the founder of Chai Sutta Bar. A campaign tile counted 35+ speakers. The website made speakers quick to find.
Social media posts e-summit
The social tiles ran the campaign: About, Stats and contact tiles on one grid, in the same palette and compass motif as the posters. The Stats tile listed 10K+ outreach, 50+ partnerships and 35+ speakers.
Who sponsored e-summit?
NPCI was the title sponsor: its lockup sits on the standees (presented by NPCI) and on the token-of-thanks certificate. I planned sponsor lockups early, with rules for how a sponsor logo sits next to ours.
Sponsor letterhead
I designed a sponsor letterhead to go with the sponsorship deck, so outreach letters looked like the same credible event. For many sponsors these pieces were the first touchpoint.
Inside the sponsorship deck
The deck covers are deliberately quiet: the copper logo and a faint compass on cream. Inside, an About spread pairs a dark page on IIT Roorkee with a light page on the theme, written for people deciding on money.
How did you make it credible for investors?
Credibility came from restraint. I avoided festival ornament, used an earthy palette and calm type, and treated the sponsor deck as a high-trust document, not a print export of the posters. It had to make E-Summit feel ambitious and worth investing in.
Id cards
Team ID cards were part of the print system, like the Manager card on a lanyard, designed with proper bleed and trim lines for print. The case study has a toggle to show the bleed lines.
What are bleed lines?
Bleed is extra artwork past the trim edge, so nothing white shows when the printer cuts. On the E-Summit ID cards I showed the bleed and trim guides as dashed lines; print specs like sizes, bleed and paper were agreed with the printer before design.
Event passes
The event passes are dark with copper accents, carrying the dates and a list of what each pass includes. Passes were a weeks-before item on the touchpoint list, alongside registration screens.
Standees
Standees were roll-ups for the venue, like the Reminiscing the Ethos standees presented by NPCI and event-specific ones such as Poetry Revue. They had to read from across a room.
Letterfold brochure
A letterfold brochure is a sheet folded in three, like a letter. E-Summit's was part of the on-the-day print set, in the same palette and motif as the rest.
Stage design
The stage had an illuminated esummit letter sign in front of a backdrop screen reading E-Summit '23, 17-19 Feb 2023, IIT Roorkee. On stage the identity had to read in the dark from the back row, so detail was cut down.
Billboard
That's a real night-time bus shelter billboard at IIT Roorkee with my E-Summit '23 Reminiscing the Ethos: Bharat poster. The identity ran from bus stops to the main stage, and the same photo is the example on Home's Branding card.
Registration flow
The website had registration and login screens in the same identity, planned in the weeks-before phase alongside posters and passes. The case study shows the login screen next to the event info section.
What was the e-summit website built with?
I led the website's design, and the team's 3 developers built it. The case study doesn't name the tech stack. Today I'd build an event site in Framer, so the organizing team can update schedules and speakers without a developer.
Is the e-summit website live?
The case study shows the 2023 website as screens (hero, event info and login) but doesn't link to a live version. Event sites get replaced by the next edition, so the screens are the record.
Can volunteers use the system?
The system was built for people who weren't designers. There was a one-page guide for the organizing committee and templates for every recurring post type, so volunteers could make posters that still looked like one event.
Touchpoints list
Before the logo I wrote a list of surfaces by phase. Months before: theme reveal, teasers, website, sponsor deck, letterhead. Weeks before: posters, speaker announcements, registration screens, passes. On the day: stage, standees, banners, ID cards, brochures, merch. After: sponsor certificates.
E-Summit case study · Event branding guide
E-summit process
It ran in four steps: theme and direction, about two weeks; the sponsor deck and website early, since sponsors decide early and the site sells tickets; campaign and print templates; then event week, with stage screens and last-minute requests checked against the system.
E-Summit case study · Event branding guide
What was hardest about e-summit?
The hard part was feeling truly Indian without festival clichés while staying credible for investors, on a hard deadline, with five designers making assets at once. The answer to both was a small set of strict elements.
What did you learn from e-summit?
It taught me how little a logo does alone. Most of E-Summit's strength came from the palette, the compass motif and the typography around the mark, and from making the system usable by people who weren't designers.
How did design make a difference?
Each number has a decision behind it. 5M+ impressions: every shared asset felt like part of one story. ₹25L+ sponsorship: the brochure was a high-trust artifact, not a print export. 11K+ attendees: the system was usable by the entire team.
What tools did you use for e-summit?
Illustrator for the identity and print, Figma for the digital design and website, and After Effects for motion. For print I set the colour profile, bleed and resolution before export.
Organizing team
The case study has a photo of the organizing team together. I worked with the organizing committee alongside 5 designers and 3 developers.
E-summit intro video
The theme section has a short intro video of the identity in motion. The full narrated E-Summit film sits at the top of the case study, under two minutes with captions.
Next case study after e-summit
After E-Summit, the case study links on to SoundSphere, my concept podcast app. It's the opposite kind of work: product thinking from a blank page instead of brand at scale.
Was e-summit paid
It was a volunteer role. I led E-Summit's design as a student at IIT Roorkee, as part of the summit's own team, and treated it like a real brand project from research to print.
Which projects are real?
Everything is real shipped work except SoundSphere, which is an exploratory concept. CodeAnt AI, Fampay and E-Summit shipped, and all seven live-work cards link to products you can open today.
Website design examples
Three live sites: codeant.ai, which I designed in Framer and whose conversion rate has doubled since launch; zania.ai, designed and built end to end in Framer; and entvin.com, from positioning to conversion flows. I also led the E-Summit website.
Ai products you designed
A lot of it is AI: CodeAnt AI's code review and security platform, Zania's AI agent for security risk and compliance, Entvin's regulatory AI agents for lifescience, and SoundSphere's AI summaries.
All work · Designing AI features
Fintech work
On fintech, FamPay (YC S19) is the case study: the Cashback Store and payment error states in a teen payments app. I've also worked with xPay, Bold Finance and Trusty Money.
Fampay case study · Experience
Security product design
Two pieces cover security: the CodeAnt AI dashboard with its security scans, and the Zania website for an AI agent that handles security risk and compliance.
B2b or b2c
Mostly B2B: CodeAnt AI, Zania and Entvin. Consumer work includes FamPay (teen payments), Sportskeeda (sports media with 20M+ monthly users) and SoundSphere (a podcast concept).
Is there more work?
The Work page shows the best of it. I've worked with 15+ brands in all, and some work can't be linked: Bold Finance, for example, has since closed. The Experience page lists every role, and the Playground has side projects and visual work.
Work in chronological order
By date: E-Summit came first (Dec 2022 to Feb 2023), then Sportskeeda and FamPay in 2023, Entvin, xPay and CodeAnt AI in 2024, and Zania from Dec 2024. CodeAnt is ongoing. SoundSphere's dates aren't listed.
Where are the live links?
Open the Work window and pick a card. Case study cards say View Case Study and open the full story in a window; live-work cards say View Live Work and open the real product in a new tab.
Zania homepage
Zania's homepage shows a real piece of the product's output instead of claims: an access-control test marked FAIL with high confidence, its observations, gaps, recommendations and the policy quote behind it. For an AI compliance product, a sample does more than an adjective. Pricing sits in the main navigation.
zania.ai · SaaS website examples
Entvin positioning
Entvin started with positioning, well before visuals. When I designed it, the hero read AI Agents for Faster Drug Development, naming the category and the industry, and each feature was named after a regulatory task a labeling team already does, like reviewing promotional material against FDA rules.
entvin.com · SaaS website examples
Entvin dashboard
Beyond the website, at Entvin I worked on dashboard UX: labeling workflows and AI-assisted compliance tools for lifescience teams. That was a product design internship, June to July 2024.
How much traffic does sportskeeda get?
Sportskeeda's NFL and IPL pages served 20M+ users a month between them. The audiences barely overlapped, US American football fans and IPL cricket fans, so the pages had to hold up during live matches for both.
Live score design guide · Experience
Region aware data density
Region-aware data density means each audience sees a different default amount of data. People less familiar with a sport get a simpler view and power users get full depth, on the same page. It let the NFL and IPL pages work for very different crowds.
Sportskeeda tables
Each sport gets its own column order on the same component. NFL standings rank by record, so wins, losses and PCT sit next to the team, with points for, against and streak further right. A cricket points table puts points and net run rate side by side.
Sportskeeda role
Sportskeeda is a sports media site with 20M+ monthly visitors. I was a UX Design Intern there from April to July 2023: I designed the NFL and IPL live-score pages, restructuring tables and navigation with region-aware data density, and built advertiser landing flows for their ad placements.
Are the live links real?
Yes, the live-work links go to the real public products: codeant.ai, app.codeant.ai, sportskeeda.com, zania.ai, entvin.com and FamApp on the App Store. They open in a new tab. The dashboard may ask you to sign in, since it's a working product.
Results from your work
The headline numbers: CodeAnt AI went from $0 to a $60M valuation and its site's conversion rate doubled; FamPay one-time voucher complaints fell 80%; E-Summit drew 11K+ attendees and ₹25L+ in sponsorship; Sportskeeda ad CTR rose 10%.
Playground and side projects
What is the playground?
The playground is where I keep the work I make after hours: interactive experiments you can actually play with, UI/UX concepts, and posters and other visual pieces. It's split into Interactive, UI/UX and Visual tabs, with an All tab that shows everything.
How do i browse the playground?
There are four tabs: All, Interactive, UI/UX and Visual. Cards with looping clips are live demos; the ones I host open right here in a window, while Figma Community and Behance pieces open in a new tab because those sites can't be embedded.
Open the playground · Interactive section
Do you have side projects?
Yes, quite a few. Outside client work I build small interactive pieces with AI coding tools: Mitti, a pottery wheel you shape with your hands, Type Piano, Particle Flow, Sketchpad, Bloomlands, a Chrome extension, a Figma plugin and a desktop pet for the Mac. They all live in the playground.
What's the coolest thing you built?
Start with Mitti, a pottery wheel you shape with your bare hands in front of a webcam: point to press the clay in, pinch to pull it out, open your palm to smooth it. If you'd rather not turn on the camera, Type Piano turns typing into a Swiss-style poster.
Interactive experiments
Nine live pieces: Google Detective (a Chrome extension), Desktop Companion (a Mac desktop pet), Particle Flow, the CMYK Exporter Figma plugin, Bloomlands, Mitti, Type Piano, Ascii Studio and Sketchpad. Everything except the Figma plugin plays right on this site.
How do you build these?
I build them by directing AI coding tools; I don't write code in any language myself. The webcam pieces like Mitti and Particle Flow run on in-browser hand tracking, and Desktop Companion is a native Mac app built with Swift and SpriteKit. I design the interaction, test it on real input, and keep refining it.
Open the playground · Interactive websites
Why do you make these?
Partly for fun, mostly for practice. My own site is where I can try things no client has asked for yet. Pieces like Mitti have no buttons to fall back on, so a gesture without instant, readable feedback breaks the whole thing, which is the same lesson I apply to product interactions.
Open the playground · Interactive websites
Can you build something like this for my site?
Yes. I design interactive websites where the interaction carries the message, like a product demo visitors can try. Most I build in Framer; pieces that need a camera, sound or live input I build with AI coding tools and embed in your site. I don't build large 3D configurators or WebGL games.
Interactive websites · Get in touch
Which ones use the webcam?
Three pieces read your hands through the webcam: Mitti (pottery), Particle Flow (a 3D particle cloud) and Sketchpad (drawing in the air). The rest, like Type Piano, Ascii Studio, Bloomlands, Google Detective and Desktop Companion, work with a mouse or keyboard.
Do you design t-shirts?
A few of the visual pieces are apparel: Soundwave Drop (a 'Voice of the Universe' sound-wave tee), Venom Grid (a snake-and-skull grid with katakana lettering), Neon Pulse ('Good Vibes Only' jerseys) and Code and Pattern (a 'Code Train Predict' tee).
Branding work in playground
There are a few brand pieces in the Visual tab: Aurora Identity and Aurora On Wheels (a travel agency's stationery and van livery), Spotify Beverages (a drink can concept) and Night Brew (a coffee cup badge). For a full brand system, the E-Summit identity is the bigger story.
Visual section · E-Summit case study
Do you make figma plugins?
Yes, CMYK Exporter. It's a Figma plugin on Figma Community that gets designs ready for print: pick an ICC colour profile, set bleed and DPI, preview RGB against CMYK side by side, and export print-ready PDFs. I built it for the print step in my own poster and event work.
CMYK Exporter on Figma Community · Open the playground
Chrome extension
Yes, Google Detective. It turns a Google search into a detective's evidence board, with pinned clippings, red string between related finds and follow-up questions. You can play a demo on this site; it runs on sample case files, while the real extension builds the board from live Google results.
Do you make games?
Bloomlands is the closest thing to a game here: a cozy pixel-art multiplayer farming grove where you make a little Bloomling and claim turf with your bloom colour. Desktop Companion and Type Piano are playful too. I don't take on games as client work though.
Ui ux concepts
The UI/UX tab has six pieces: Futura (a time-travel app concept), Mars Explorer (a Mars travel app), a Behance Community concept video, the Cognizance 2023 website, the Bold Finance website and a Hiring Dashboard. My full case studies live under Work.
What is ascii studio?
Ascii Studio turns any photo into ASCII art in real time, on a panel that looks like a piece of hardware. Click to upload an image, turn the Detail, Contrast and Style knobs, flip Invert if you like, then download the result.
What is particle flow?
Particle Flow is a 3D particle cloud you sculpt with your hand in front of a webcam, right in the browser. You can switch presets like Saturn and Fireworks and change colour and sound. It's built with in-browser hand tracking and 3D rendering.
What is type piano?
Type Piano is a playable typewriter piano: every note you play sets a word onto a live Swiss-style hairline poster, in several scripts including Hindi and Chinese. Pick a language and sound, play, then Save Poster to download it as a PNG.
What is mitti?
Mitti (मिट्टी, clay) is a pottery wheel you shape with your bare hands in front of a webcam. Raise or lower your hand to pick the height, point to press the wall in, pinch to pull it out, open your palm to smooth, and make a fist to rest. Moving closer to the camera presses harder.
How did you build mitti?
Mitti runs entirely in the browser: hand tracking reads your webcam and the pot is a real 3D model on a spinning wheel, built with AI coding tools. Beyond shaping, you can change wheel speed and glaze, take a photo, view the model, or start fresh with a new lump.
What is bloomlands?
Bloomlands is a cozy pixel-art multiplayer farming grove in the browser. You make a Bloomling with a name, tribe, headgear and bloom colour, or draw your own in a 12 by 16 pixel studio, then spread your colour to claim turf. It's a shared world, so others see your name, look and position.
What is sketchpad?
Sketchpad lets you draw glowing strokes in the air with your fingers, using just a webcam. Pick a stroke colour, then switch on Gravity to make strokes fall or Wiggle to make them wobble with physics. Save keeps your drawing; Clear starts over.
What is google detective?
Google Detective is a Chrome extension that turns a Google search into a detective's evidence board: pinned clippings, video thumbnails, red string linking related finds, briefings and follow-up questions. In the demo here, type what you're investigating and open the case; it uses sample case files, while the extension uses live results.
Can i install google detective?
It isn't on the Chrome Web Store yet. You can play the full demo in your browser here, and if you'd like the extension itself, email me at work@utkarshdesign.com and I'll send it to you as a zip.
What is desktop companion?
Desktop Companion is a tiny pet that lives on your Mac, a native macOS app built with Swift and SpriteKit. The playground recreates it in the browser: drag a pet and let it go, click to say hi, copy a line from the ideas.txt note and watch them react, or open the paw menu for reactions and a stretch reminder.
Can i download desktop companion?
There's no public download yet. You can play with the browser version here right now, and if you'd like the Mac app itself, email me at work@utkarshdesign.com and I'll send you the build as a zip.
Try it in the browser · Contact
What is cmyk exporter?
CMYK Exporter is a Figma plugin I published on Figma Community. It handles the print step Figma doesn't: choose an ICC colour profile, set bleed and DPI, compare RGB and CMYK side by side, and export print-ready files with crop marks. I use it for my own posters and event print work.
CMYK Exporter on Figma Community
What is futura?
Futura is a UI concept for a time-travel app. The main screen is 'Start Time Travel': you set a date, time and location, hit Proceed, and it recommends events worth visiting. It's an exploration piece, not a shipped product.
What is mars explorer?
Mars Explorer is a concept app for managing travel to Mars, published on Behance as Alpha Centauri. It has a home screen of major attractions, place details like Olympus Mons, and travel plans, including a 'Golden Ticket' package.
Mars Explorer on Behance · UI/UX section
Behance community
Behance Community is a short concept video: it opens on the question 'behance community?' and then shows a community feed page I designed for Behance.
Cognizance 2023
Cognizance is IIT Roorkee's tech fest, and I designed its 2023 website, themed 'Cosmos Renascence'. I've been on the other side of the fest too: runner-up at its Appnova UX hackathon in March 2023, and later a judge for its design hackathon.
Hiring dashboard
The Hiring Dashboard is a job-search dashboard design, branded Unipace in the mockup: a personal greeting, counts of jobs applied and interviews, and a list of recent applications. For deeper dashboard work, CodeAnt's product is the real case study.
UI/UX section · CodeAnt AI case study
Blade legacy
Blade Legacy is a black-and-white 'Sword' poster: an ink-splatter samurai with vertical Japanese text and a 'Samurai of Japan' footer, shown framed on a concrete wall. It's one of the posters I make for myself.
Soundwave drop
Soundwave Drop is a purple T-shirt with a yellow 'Voice of the Universe' sound-wave badge, set on a matching mustard background. The card links to my SoundSphere podcast app project on Behance.
Visual section · SoundSphere case study
Venom grid
Venom Grid is a T-shirt graphic: a snake coiled around a skull on a grid, with red Japanese katakana lettering, shown on white and navy tees. The card links to my SoundSphere work on Behance.
Visual section · SoundSphere on Behance
Neon pulse
Neon Pulse is a pair of jerseys, one teal with green trim and one white with orange sleeves, printed with stacked 'Good Vibes Only' typography. It sits with my other apparel pieces in the Visual tab.
Visual section · SoundSphere on Behance
The frozen forest
The Frozen Forest is a greyscale movie poster I designed: misty pine trees, a credits block and 'In cinema 05 December 2022', mocked up on a ribbed wall with a passerby blurring past.
Cosmic silence
Cosmic Silence is a black 'SPACE' poster with an astronaut photo inset and vertical lines like 'Save the Planet', 'Milky Way', 'December 8' and 'Roorkee', shown in a night-time bus-shelter lightbox.
Rhythm in motion
Rhythm in Motion is a 'Music' poster: piano keys running down the left and a gold title on navy, mocked up on a subway station wall with commuters blurring past.
Wander frame
Wander Frame is a 'Holidays' poster: a vintage car on a hill road, a 'Mountains' label in Korean and Japanese characters for holiday, framed and leaning against a white tiled wall.
Midnight noise
Midnight Noise is an 'Enormous Party' event poster with concert crowd photos and orange circles, mocked up standing among sandstone rocks under a blue sky.
Pattern chaos
Pattern Chaos is a poster of a black fractal tree-branch pattern woven through a square grid on white, mocked up on a concrete pillar on a city street.
Multiverse rift
Multiverse Rift is a monochrome Doctor Strange fan poster card: a caped figure in a dark tunnel under the line 'I love you in every universe', shot resting on grey books in hard sunlight.
Code and pattern
Code and Pattern is a navy T-shirt printed with 'Code Train Predict' typography and a brain-and-network graphic, set on a grey network-pattern background.
Night brew
Night Brew is a white paper coffee cup with a circular 'Sleep Chill Design' badge logo, built from bed, mug, pen and card icons, shot on a dark table under moody teal light.
Endgame focus
Endgame Focus is a chess poster: a cream king silhouette on charcoal with the line 'Life is a chess match. Every decision that you make has a consequence to it.', shown in a lit street lightbox.
Wakanda reimagined
Wakanda Reimagined is a 'Wakanda Forever' poster with an illustrated Black Panther in a fighting stance between purple header and footer bands, pasted on a grey concrete wall.
Stories on walls
Stories on Walls is a set of three dark posters on a steel elevator wall: 'Fluidity' with blue liquid shapes, an astronaut typographic 'Future is Here', and a Japanese-text 'Explore' poster for design services.
Aurora identity
Aurora Identity is a brand concept for Aurora Travel Agency: a gold 'A' plane logo across a green envelope, card, letterhead and pencils, on mustard and white. Aurora On Wheels carries the same brand onto a van.
Aurora on wheels
Aurora On Wheels takes the Aurora Travel Agency identity onto a vintage van: dark green and mustard livery with palm-tree silhouettes and a matching surfboard, parked by the beach.
Future vision
Future Vision is a product photo of a white and black 3D-printed head-mounted device prototype with an orange part, held up against plants and a building. The site doesn't say more about it, so ask me if you're curious.
Spotify beverages
Spotify Beverages is a packaging concept: a Spotify-branded 'Guava Juice Tropical Twist' can with a green label and a pink, yellow and black geometric pattern, set over guavas.
Pottery wheel piano particles from the intro
Everything the intro mentions lives in the playground: Mitti (the pottery wheel), Type Piano (typing into posters), Particle Flow (particles that follow your fingers), Google Detective (the Chrome extension), CMYK Exporter (the Figma plugin), Bloomlands (the game), Desktop Companion (the desk pet) and the posters.
Open the playground · Watch the intro
How many pieces are in the playground?
35 pieces right now: 9 interactive demos, 6 UI/UX pieces and 20 visual pieces like posters, apparel and brand work. The newest ones, Google Detective and Desktop Companion, sit at the top.
What's the newest thing you built?
The newest pieces lead the grid: Google Detective, a Chrome extension that turns a Google search into an evidence board, and Desktop Companion, a tiny pet that lives on your Mac. Both have playable demos here.
Try Google Detective · Try Desktop Companion
Where is the playground?
Open Playground from the site's navigation, or go straight to utkarshdesign.com/playground. Every interactive piece also has its own page, like /playground/mitti, so you can link to one directly.
How do i use the interactive pieces?
Click any card with a looping clip. The ones I host open right here in their own window and run in your browser, nothing to install. Webcam pieces ask for camera permission first. CMYK Exporter and the Behance pieces open in a new tab.
Open the playground · Interactive section
What can i try without a camera?
Five need no camera: Type Piano and Ascii Studio work with a keyboard and mouse, Bloomlands is played with the arrow keys, and the Google Detective and Desktop Companion demos are point and click. Only Mitti, Particle Flow and Sketchpad use your webcam.
Try Type Piano · Interactive section
Is my webcam recorded?
No, I can't see you. The playground pieces run in your browser, and the camera only turns on when you allow it. My privacy policy says anything you draw or type in the playground stays with you, and for the site's Gesture Mode no video or image leaves your device.
Privacy policy · Interactive section
Camera not working
Your browser has to allow camera access for the page. If it's blocked, Mitti says the camera said no and waits for you to allow it and reload, and Particle Flow switches gestures off. Allow the camera from your browser's address bar, reload, and keep your hand in view.
Does the playground work on mobile?
The site doesn't promise every piece works on a phone. The webcam ones need a camera that can see your hand, so a laptop is easiest. Bloomlands has on-screen arrow buttons and tap-to-paint, and Mitti has a Help button for small screens.
Which browser do i need?
A recent desktop browser with camera access covers most of it. The 3D pieces need WebGL, and Mitti tells you if your browser can't run it. Google Detective is a Chrome extension and Desktop Companion is a Mac app in real life, but both have demos here that run in a normal tab.
Can i download these?
Most pieces live in the browser, so there's nothing to install. Several let you download what you make: Ascii Studio and Type Piano save PNGs, Sketchpad saves your drawing, and Mitti exports a photo or a 3D model. CMYK Exporter installs from Figma Community, and for the Chrome extension or the Mac app, email me and I'll send them as a zip.
Open the playground · CMYK Exporter on Figma Community
Can i save what i make?
Four of them let you. Ascii Studio downloads a PNG, Type Piano saves your poster as a PNG, Sketchpad's Save downloads your drawing as an image, and Mitti can take a photo of your pot or download it as a 3D model file.
Is the code open source?
The site doesn't link source code for the playground. My terms say the site's design, code and playground pieces are mine: you're welcome to link to them and quote with credit, but please don't copy tools wholesale. If you want to know how one works, email me at work@utkarshdesign.com.
Are these free?
Playing them here costs nothing; they're open on the site for anyone, provided as they are, for fun and learning. Bloomlands asks for a name for your Bloomling, not an account. For CMYK Exporter, check its Figma Community page.
Open the playground · Terms of use
Can i use the posters i make commercially?
The playground pieces and my artwork are mine; you can link to them and share with credit, but please don't copy designs or tools wholesale. They're provided for fun and learning. For anything commercial, like using a poster or my artwork in a product, email me at work@utkarshdesign.com first.
Can you build a hand tracking experience for us?
Yes, that's the kind of piece I build with AI coding tools: a webcam or live-input experience embedded in your site, like Mitti or Particle Flow. Tell me the idea and where it will run, and we'll scope it on a call.
Interactive websites · Contact
Cost of building something like mitti
There's no fixed price for a custom interactive piece; it depends on the idea and where it runs. Tell me what you have in mind and I'll quote after a first call. My published starting prices for websites and product work are on the pricing page.
Can you build a chrome extension for us?
I can design and prototype a small extension like Google Detective, built by directing AI coding tools. For a production extension with accounts or a backend, I'd design it and pair with your engineers. Send me the idea at work@utkarshdesign.com.
Can you build a figma plugin for us?
I can design and prototype a small Figma plugin, the way I made CMYK Exporter for my own print work, built by directing AI coding tools. Send me the workflow you want to fix at work@utkarshdesign.com and we'll see if it's a fit.
CMYK Exporter on Figma Community · Contact
How long did these take to build?
The site doesn't log how long each piece took. They're after-hours projects that I keep refining once the first version works. If you're asking because you want one built, tell me the idea and I'll give you a real timeline after a call.
Is this ai generated?
AI coding tools wrote the code for the interactive pieces, with me directing them; the idea, the interaction design, the look and the testing are mine. The posters and UI concepts are my own design work. I'm upfront that I don't write code by hand.
Is this vibe coded?
Yes, you could call it vibe coding. I describe what I want to AI coding tools, test it on real input like a webcam or keyboard, and keep refining until the interaction feels right. I don't write the code by hand, and for production app code I pair with engineers.
Open the playground · AI prototyping guide
Which ai tools did you use?
The site doesn't name the specific AI tool behind each piece. What I can say is how I work: I design the interaction, direct AI coding tools to build it, and test it on real input until it feels right. Ask me on a call if you want the details.
What did you learn building these?
That feedback is everything. With hand gestures there are no buttons to fall back on, so a gesture without instant, readable feedback breaks the whole piece. I bring the same rule to product interactions: every action should show its result straight away.
Why should a hiring manager care about this?
It shows how I work without a brief: I come up with an idea, design the interaction, build a working version with AI coding tools and test it on real input. For a startup, that means ideas you can click before engineering commits.
Did you build these alone?
Yes, these are solo after-hours projects, and each one carries a small credit to me. I design them and build them by directing AI coding tools. The one shared ingredient is Desktop Companion's pets, which come from the petdex community.
Can i embed mitti on my site?
You're welcome to link to any piece, but the site doesn't offer them for embedding elsewhere, and please don't copy them wholesale. If you want something like it on your own site, I can build a version for you; email me at work@utkarshdesign.com.
It's not working
Sorry about that. The webcam pieces need camera permission and WebGL, so allow the camera, reload, and try a desktop browser if you're on a phone. They're provided as they are, but if it still breaks, email work@utkarshdesign.com with your browser and device and I'll look.
Can i share a link to one piece?
Yes. Each interactive piece has its own page you can share, like utkarshdesign.com/playground/mitti or /playground/bloomlands. On the site they open in their own window on the desktop.
Try Mitti · Interactive section
When do you make these?
After hours, outside my work at CodeAnt and client projects. The playground is where I try things nobody has asked for yet. As the intro reel puts it, my favourite work happens after hours.
Open the playground · Watch the intro
Why the names?
Mostly they say what the piece is: Type Piano is a piano for type, Particle Flow is particles that follow your hand, Google Detective turns a Google search into detective work. Mitti is Hindi for clay. The site doesn't explain names like Bloomlands beyond what the piece shows.
Mitti meaning
Mitti (मिट्टी) is Hindi for clay, which is what you shape on the wheel. Its tagline is 'pottery, by hand alone', because there are no buttons to shape with, only your hands in front of the webcam.
Is there hindi in your work?
A little. Mitti's wordmark is written in Hindi, and its error screen opens with 'अरे' (roughly 'oops'). Type Piano can set words in Hindi alongside English, Chinese and Korean.
Why are the newest at the top?
The grid is curated, not sorted by date. The newest pieces lead, Google Detective and Desktop Companion, and the live demos are spread between the static pieces so every column has something to play.
Which ones have sound?
Type Piano is all sound, with six genre voices from Ambient to Lo-Fi. Mitti has a wheel sound you can toggle, Particle Flow can react to music through your mic or system audio, and Bloomlands has small sound effects.
Any 3d work
A few. Mitti shapes a real 3D pot on a spinning wheel that you can export as a model, and Particle Flow is a 3D particle cloud you turn with your hand. In the Visual tab, Future Vision shows a 3D-printed head-mounted device prototype.
Any physics in the experiments
Sketchpad has it: switch on Gravity and your air-drawn strokes drop and tumble, or Wiggle and they wobble. Particle Flow's cloud also responds to your hand as you pinch and turn it.
What languages are in the playground?
Type Piano sets words in four scripts: English, Hindi, Chinese and Korean. Mitti's wordmark is in Hindi, and several posters mix in Japanese or Korean lettering, like Blade Legacy, Venom Grid and Wander Frame.
Try Type Piano · Visual section
Do you like typography?
A lot of the playground is about type. Type Piano turns notes into a Swiss-style typographic poster, Ascii Studio turns photos into characters, and posters like Neon Pulse and Code and Pattern lean on stacked lettering.
Try Type Piano · Visual section
What is hand tracking?
Hand tracking means your browser reads the webcam and finds your hand and fingers in real time, so a point, pinch or open palm becomes an input. That's how Mitti, Particle Flow and Sketchpad work without a mouse.
What is ascii art?
ASCII art draws a picture with text characters, using denser characters for darker areas. Ascii Studio does it to any photo in real time, and its knobs change how detailed and how contrasty the result is.
What is cmyk?
RGB is how screens mix light; CMYK (cyan, magenta, yellow, black) is how printers mix ink. Colours that glow on screen can print dull, so CMYK Exporter shows RGB and CMYK side by side before you export for print.
CMYK Exporter on Figma Community
What is bleed in print?
Bleed is extra artwork past the trim edge so no white slivers show after cutting, and crop marks show the printer where to cut. An ICC profile describes how a printer reproduces colour, and DPI is print resolution. CMYK Exporter sets all of them before export.
CMYK Exporter on Figma Community
What is swiss style?
Swiss style is a graphic design tradition built on grids, clean sans-serif type, strong hierarchy and lots of white space. Type Piano generates that kind of hairline poster live, one word per note you play.
What is spritekit?
Swift is Apple's programming language, SpriteKit is its framework for 2D animation and games, and AppKit is its toolkit for Mac windows. Desktop Companion uses an AppKit overlay window with SpriteKit pets walking across your screen.
What is figma community?
Figma Community is Figma's public library where people publish plugins, files and widgets for anyone to use. CMYK Exporter is published there, so you install it from that page and run it inside Figma.
CMYK Exporter on Figma Community
What is a desktop pet?
A desktop pet is a small animated character that lives on your screen, walking around and reacting while you work. Desktop Companion is mine for the Mac, and this site has its own pet roaming the desktop too.
What images can i upload to ascii studio?
Ascii Studio takes JPEG, PNG and WebP images. Click the screen to upload one and the ASCII version renders straight away.
How do i download my ascii art?
Press Download ASCII Art and it saves the result as a PNG image called ascii-art.png. The site doesn't offer a plain-text export.
What do the knobs do in ascii studio?
There are three knobs, Detail, Contrast and Style, plus an Invert switch. Drag a knob to turn it and the ASCII art updates live, so the quickest way to learn them is to play on your own photo.
Why does ascii studio look like hardware?
It's styled like a piece of hardware, a dark device panel with chunky knobs, so making ASCII art feels tactile instead of like filling in a form. That's the whole idea of the piece.
Does ascii studio use the webcam?
No camera needed. Ascii Studio works on a photo you upload, not a live feed, and updates in real time as you turn the knobs.
What genres does type piano have?
Six genres: Ambient, Horror, Romance, Jazz, Techno and Lo-Fi. Each one changes the sound and the words and marks that land on the poster, so the same notes give a different poster in each.
What languages does type piano use?
English, Hindi, Chinese and Korean. Toggle them in the Lang row and the poster mixes words from whichever scripts are on.
How do i play type piano?
Play with your computer keyboard or click the keys on screen; the arrows beside C4 shift the octave. Each note sets a word on the poster. Type your own title in the Text field and it sits at the foot of the sheet.
How do i save my type piano poster?
Press Save Poster to preview it, then Download PNG. New Poster starts a fresh sheet, and posters are numbered from 001, so you can make a series.
Where do the words in type piano come from?
The poster lines are music references that change with the genre, things like Kind of Blue 1959, J Dilla, Nujabes, the TR-909 and Satie's Gymnopédie. Your own title from the Text field goes at the bottom.
What inspired type piano?
Two things meet in it: a typewriter you play like a piano, and Swiss poster design. Every note becomes type on a grid, so playing music and setting a poster turn into the same action.
What shapes can i make in mitti?
Start from one of four lumps: a bellied pot, a straight cylinder, an open bowl or a narrow-necked vase. Then shape it with your hands; Fresh gives you new clay to start over.
What glazes are in mitti?
Six: raw mitti, terracotta, porcelain, celadon, indigo and kohl black. Pick one in the glaze row and your pot takes on that finish.
How do i save my pot?
Two ways. Photo fires the pot, puts it on your shelf and downloads a picture. Model does the same but downloads the 3D model as an OBJ file you can open in 3D software.
Can i stop the wheel?
The wheel spins at 0.9 revolutions a second to start, and you can change the speed, start or stop it, and switch the wheel sound on or off from the controls.
What shapes in particle flow?
Built-in shapes include Heart, Saturn and Fireworks, and you can upload your own image to turn it into particles. You can change the particle colour too.
How do i control particle flow?
Show your hand to the webcam to take control: pinch to zoom and rotate your hand to turn the cloud. If it can't see a hand, it asks you to show one.
Why does particle flow want my microphone?
That's Sound Reactivity, and it's optional. Turn it on and the particles move to audio, from shared system audio or your microphone. If you say no to the mic, only that feature switches off; hand gestures keep working.
Can i upload my own image to particle flow?
Yes. Press Upload Custom Image, pick a picture, and the particles rebuild into its shape. Change Image swaps it for another later.
What is gesture particles?
Same piece. Inside the app it's titled Gesture Particles, and on the playground it's Particle Flow: a particle cloud you sculpt with your hand in front of a webcam.
What does gravity do in sketchpad?
Gravity makes your strokes drop and tumble like real objects; switch it off and they hold still. Wiggle makes them wobble with soft physics. Both are toggles in the toolbar.
How do i save my sketchpad drawing?
Press Save and your drawing downloads as a PNG image. Clear wipes the canvas so you can start over.
Is sketchpad the drawing tool from the intro?
The reel opens with me drawing in thin air with a tool I built. Sketchpad is the playground piece for exactly that, glowing strokes drawn with your fingers in front of a webcam, so you can try it yourself.
Try Sketchpad · Watch the intro
Can i change colour in sketchpad?
Pick any stroke colour from the colour control in the toolbar; it shows the hex value as you change it. It starts on a purple, #CC5DE8.
How do i move in bloomlands?
Move with the arrow keys or WASD, or the on-screen arrow pad. Wherever you walk, you paint tiles in your bloom colour. Press / to chat, and the gear button reshapes your Bloomling.
What's the goal in bloomlands?
Claim turf. Your trail paints the island in your bloom colour, the Bloom Lords board ranks players by turf percentage and flowers, and painting half the island sets off fireworks.
Is bloomlands really multiplayer?
Yes, it's a shared world. Everyone in the same grove sees each other's name, look and position. When nobody else is around, five wandering Bloomlings join so the island isn't empty, and they scatter when real players arrive.
How do i make my bloomling?
Pick a name, a tribe, headgear and a bloom colour. Headgear includes a sprout, flower, Santa hat, pumpkin, halo, horns and a band. Or choose Draw to make your own Bloomling in the 12 by 16 pixel studio.
Bloomlands secrets
A few. Hunt for the treasure chest on a beach for +20 flowers, wish at the fountain, find the Ancient Circle, and look for golden flowers that bloom 5 by 5. The Konami code turns on Rainbow Mode for 15 seconds.
Pets in bloomlands
Little pets can tag along and paint a second trail for you: Crumb the mouse, Ember the kitten, Blink the slime, Bubbles the frog, Petal the butterfly, Sparky the wisp and Vector the cursor.
Can i chat in bloomlands?
Yes. Press / while playing to open the chat box, type your message, and others in your grove can see it.
Is bloomlands private?
Your Bloomling's name, look and position are visible to everyone playing, and the setup screen says so. That's the shared part of a multiplayer world, so use a nickname if you'd rather.
Play Bloomlands · Privacy policy
Google detective demo how to
Type what you're investigating and press Open Case. The board fills with pinned clippings, video thumbnails and red string between related finds. Ask follow-ups from the yellow pad, or Pull Next Page for more.
What can i search in the google detective demo?
The demo runs on three sample case files: Utkarsh Panwar, CodeAnt AI and Desktop Companion. Open one and you get a board about me, my CodeAnt work or the desk pet. The real extension investigates anything on Google.
Does the google detective demo search google?
Not in the demo. The playable version here runs on sample case files, so it can't look up whatever you type. The actual Chrome extension builds the board from your live Google results.
What inspired google detective?
Search results are usually a flat list. Google Detective treats them like a case: evidence pinned to a corkboard, red string linking related finds, a briefing and follow-up questions so you keep digging.
Does google detective work on firefox?
It's built as a Chrome extension. The site doesn't say whether it runs in other browsers, but the demo here plays in any normal browser tab.
Which pets are in desktop companion?
The pets in the demo are Cinder, Jerry and Boba. They come from the petdex community and install with its command-line tool; nothing is bundled, and any pet you install shows up.
What does desktop companion react to?
It reacts to text you copy (a pet reads it back to you), idle time, reminders and your windows. A failed build gets a 'this is fine', and it nudges you to stretch or take a coffee break.
Does desktop companion have a dock icon?
It lives in the menu bar only, with no Dock icon. From the paw menu you can toggle pets, adjust reminder intervals or install more pets. The browser demo has a paw menu up top too.
Is desktop companion on windows?
It's a native macOS app, and the site doesn't mention a Windows or Linux version. The browser recreation here works on any computer, so you can still play with the pets.
Focus timer desktop companion
The demo film shows a pixel-art pet with a Focus Timer sign at 24:59 above an ideas.txt note. In the browser version you can copy a line from that note and watch the pets react, and the paw menu has a stretch reminder.
What is petdex?
petdex is the community the pets come from, and you install them with its command-line tool. Desktop Companion bundles no pets of its own, so whichever ones you install show up on your screen.
How do i install cmyk exporter?
Open its Figma Community page and add it, then run it from the plugins menu inside Figma on the design you want to print. Pick a profile, set bleed and DPI, check the preview and export.
CMYK Exporter on Figma Community
What formats does cmyk exporter export?
Print-ready PDFs, and its Figma Community listing also names TIFF, along with ICC profiles, bleed and crop marks.
CMYK Exporter on Figma Community
Why make a cmyk plugin?
Figma is built for screens and works in RGB, so getting a poster to print properly meant leaving Figma. I built CMYK Exporter for that print step in my own poster and event work.
CMYK Exporter on Figma Community
Cmyk exporter price
The site doesn't list a price for it. It's published on Figma Community for anyone to install, so check its page there for the current details.
CMYK Exporter on Figma Community
What year is futura set in?
The mockup sets a trip for 03 October 3095, with time and location fields, a Proceed button and recommended events for that moment, on a phone in front of a laptop.
What is the golden ticket in mars explorer?
It's the top plan in Mars Explorer: a 'Golden Ticket' travel package at $10,000,000, on the Plans screen. The other screens are an Alpha Centauri home with major attractions and an Olympus Mons place detail.
Mars Explorer on Behance · UI/UX section
Cognizance 2023 theme
Cognizance is IIT Roorkee's tech fest. The 2023 website I designed carried the theme 'Cosmos Renascence' for the 24 to 26 March fest, with a hero of a figure on a hill under a magenta night sky.
45 jobs applied
Unipace is the brand in the Hiring Dashboard mockup, which greets 'Good morning, Utkarsh' and shows 45 jobs applied, 18 interviewed and recent applications. It's a design mockup, so read the numbers as sample content; the site doesn't say more about Unipace.
Which ones are real products?
Real: the Cognizance 2023 and Bold Finance websites, the CMYK Exporter plugin on Figma Community, the Google Detective extension and the Desktop Companion Mac app. Concepts: Futura, Mars Explorer, Behance Community and brand pieces like Aurora and Spotify Beverages.
Open the playground · UI/UX section
Is this personal work?
Mostly personal: the playground is what I make after hours, and the posters are ones I make for myself. Two UI/UX pieces are real work, the Cognizance 2023 website for IIT Roorkee's tech fest and the Bold Finance website from my 2023 internship. Client case studies live under Work.
Open the playground · Case studies
Are the posters real prints?
Most visual pieces are shown as mockups: posters on walls and in bus-shelter lightboxes, tees on backgrounds, a van by the beach. They present the design in context. The site doesn't say which ones were printed.
What tools do you use for posters?
The site doesn't list tools per poster. My graphic work happens in Figma and Adobe Creative Cloud, and for print I set colour, bleed and DPI with CMYK Exporter, the Figma plugin I built.
Visual section · CMYK Exporter on Figma Community
Movie posters
Several: The Frozen Forest (a greyscale movie poster), Multiverse Rift (Doctor Strange), Wakanda Reimagined (Black Panther) and Blade Legacy, a samurai 'Sword' poster.
Music posters
Rhythm in Motion is a 'Music' poster with piano keys down the side, and Midnight Noise is an 'Enormous Party' event poster with crowd photos. Soundwave Drop's 'Voice of the Universe' tee links to my SoundSphere podcast project, and Type Piano brings music and type together.
Space posters
Cosmic Silence is a black 'SPACE' poster with an astronaut inset, and Stories on Walls includes a typographic astronaut 'Future is Here' poster. In UI/UX, Mars Explorer and the Cognizance 'Cosmos Renascence' site carry the space theme too.
Why japanese text in your posters?
Japanese and Korean lettering shows up in several pieces: vertical Japanese text on Blade Legacy, katakana on Venom Grid, Korean and Japanese on Wander Frame, and a Japanese-text 'Explore' poster in Stories on Walls.
Quotes on your posters
Endgame Focus says 'Life is a chess match. Every decision that you make has a consequence to it.' Multiverse Rift carries 'I love you in every universe', and Cosmic Silence runs lines like 'Save the Planet' down its side.
Roorkee in your posters
Cosmic Silence has 'Roorkee' and 'December 8' in its vertical text; Roorkee is where I studied, at IIT Roorkee. My bigger Roorkee design work is the E-Summit identity and the Cognizance 2023 website.
Visual section · E-Summit case study
Can i buy your posters?
No, there's no shop. The posters and tees are design pieces shown as mockups. If you want something designed and printed for your team or event, email me at work@utkarshdesign.com.
Are these official marvel posters?
No. Multiverse Rift, Wakanda Reimagined and Spotify Beverages are my own fan and concept pieces, not commissioned or official work. Names and characters belong to their owners.
Why do the shirts link to soundsphere?
Soundwave Drop, Venom Grid and Neon Pulse link out to my SoundSphere podcast app project on Behance. The full SoundSphere case study is on this site under Work.
SoundSphere case study · Visual section
Where are the e-summit posters?
Those live in the E-Summit case study, not the playground. The Visual tab holds personal and concept pieces; E-Summit was a full event identity across posters, tickets, merch, stage and website.
E-Summit case study · Visual section
Can you design a poster for my event?
Yes. Posters, event collateral and creatives are part of my marketing design work, priced per project. I led E-Summit's brand from bus stops to the main stage, and I prepare print files properly with CMYK Exporter.
Can you design t-shirts for us?
Yes, I design apparel graphics, like the tees in the Visual tab and E-Summit's merch. It's priced per project under marketing design; send me what it's for and how many designs you need.
How can i build something like this?
The way I do it: pick one interaction you want to feel, describe it to an AI coding tool, test it on real input, and keep refining until the feedback is instant and readable. My AI prototyping guide goes deeper.