UI/UX Design Portfolio · 2026

M. Praveen­raja

UI/UX Designer & Frontend Developer

I design the parts of software people never have to think about — turning ambiguous problems into interfaces that feel obvious in hindsight. B.E. Computer Science graduate blending design craft with the ability to actually ship it.

View Case Studies Get in Touch
Scroll to explore
Profile Photo Placeholder
Open to Internship Roles
01 · About Me

I'm Praveenraja, a final-year B.E. Computer Science Engineering student at V.S.B. Engineering College with a foot firmly in both design and code. Most of my design work starts from a technical question — "can this actually be built the way I'm drawing it?" — which keeps my UI decisions grounded in what's shippable.

My path into UI/UX started the practical way: building interfaces in HTML, CSS and React and noticing how much of a product's success came down to decisions that had nothing to do with the code — hierarchy, spacing, the wording on a button, where a user's eye lands first. That gap is what pulled me toward design systems, wireframing and prototyping in Figma.

I'm currently looking for a UI/UX Design Internship where I can work on real products end-to-end — research, wireframes, high-fidelity screens, and the handoff conversations with engineers that make a design survive contact with production.

Education
B.E. Computer Science & Engineering — V.S.B. Engineering College
Focus
Product & UI Design, Design Systems, Frontend Engineering
Looking for
UI/UX Design Internship, 2026
Based in
Tamil Nadu, India · open to remote

Why UI/UX, and how I work

01
Clarity beats cleverness
If a user has to pause and think about the interface, the interface has failed — not the user. I design for the fastest possible path to understanding.
02
Design is a hypothesis
Every screen is a guess about what will work. Research, wireframes and testing exist to prove or break that guess before it's expensive to fix.
03
Systems, not screens
I design components and tokens before I design pages, so consistency isn't a rule I have to enforce — it's the default.
04
Buildable by default
Knowing React and CSS means I design within real constraints — grids, breakpoints, states — instead of handing off screens engineers have to reinterpret.
02 · Skills

What I bring to a design team

A blend of design craft and frontend fluency — I can take a problem from a blank canvas to a component a developer can implement without guesswork.

Design Skills

UI DesignAdvanced
Wireframing & PrototypingAdvanced
UX Design & Design ThinkingAdvanced
User ResearchProficient
Information ArchitectureProficient
Visual Design & TypographyAdvanced
Responsive & Color TheoryAdvanced

Technical Skills

HTMLCSSReact JavaPythonMySQL Git & GitHubREST APIsResponsive Layout

Currently Learning

Design Systems at ScaleMotion Design

Tools

FigmaCanvaAdobe Photoshop Adobe IllustratorAdobe XDSketch

Figma Proficiency

Auto Layout & ComponentsAdvanced
Design Tokens & VariantsProficient
03 · UI/UX Projects

Five case studies, five different problems

Each project moves through the same rigor — research, flows, wireframes, high-fidelity UI — applied to a different domain: food, retail, banking, healthcare and education.

Mobile App · iOS & Android

NearBite

Helping hungry, indecisive users order food in under 60 seconds — not 6 minutes of scrolling.
RoleUI/UX Design (solo)
Duration4 weeks
ToolsFigma, Illustrator
DeliverableHi-fi prototype, design system

Problem Statement

Food delivery apps overload the home screen with promotions before a user has even decided what they want to eat. Decision fatigue, not lack of restaurants, is the real drop-off point — users abandon the app mid-browse more often than they abandon a cart.

Research Insight

A short survey and 6 informal interviews with peers who order food weekly showed the average session involved re-opening the app 2–3 times before ordering — mostly to re-compare places they'd already seen. The friction wasn't choice, it was re-finding choice.

User Persona

RS
Ramesh S.
22 · Engineering Student
Wants dinner sorted in one sitting between study sessions. Frustrated by apps that make him rebuild his mental shortlist every time he reopens them.

Pain Points & User Flow

  • No way to save a shortlist while comparing restaurants
  • Filters reset every time the app is reopened
  • Checkout buried behind repeated confirmation screens
  • Delivery time shown only after address is entered
Open App
Smart Shortlist
Restaurant
Cart
1-Tap Checkout

Wireframes → High-Fidelity UI

Low-fidelity flows were sketched to validate the shortlist concept before any visual design — shown below as the underlying structure, now rendered at high fidelity.

NearBite
📍 Deliver to — Hostel Block C
🔥 Your Shortlist
3 saved from last search
Saravana Bhavan
25 min · ⭐ 4.4
Wok This Way
18 min · ⭐ 4.6
← Checkout
Order Summary
2 items · Wok This Way
₹340
Subtotal
12 min
Est. delivery
💳 UPI — praveen@upi
Place Order · ₹368

Color Palette, Typography & Icons

#F97316
#EF4444
#111827
#FFF7ED
Order dinner, decided.
Inter Semibold — section titles
Inter Regular 13px — body copy, used for delivery details, addresses and receipts.

Prototype & Challenges / Solution

An interactive Figma prototype connects Home → Shortlist → Restaurant → Cart → Checkout with realistic transitions, tested with 8 peers in moderated sessions.

Challenge

Persisting a "shortlist" without adding a whole new save/favorite system users would have to learn.

Solution

Reused the existing search history model — restaurants a user views for 3+ seconds are auto-added to the shortlist, no explicit action required.

Outcome

↓ 42%
Taps to checkout, low-fi vs. final flow
7/8
Testers completed checkout without help
4.7/5
Perceived ease-of-use in testing
Mobile App · E-Commerce

Cartly

Reducing cart abandonment by making trust and shipping cost visible before the final tap, not after.
RoleUI/UX Design (solo)
Duration3 weeks
ToolsFigma, Photoshop
DeliverableHi-fi prototype, component library

Problem Statement

Shoppers add items to cart confidently but abandon at checkout once shipping fees and delivery dates appear late in the flow — the surprise, not the cost itself, is what erodes trust.

Research Insight

Competitive audits of 5 shopping apps showed shipping cost was disclosed after address entry in 4 of 5 cases — directly contradicting what users said they wanted most: "tell me the real price before I commit."

User Persona

AK
Aarthi K.
27 · Marketing Executive
Shops on mobile during commute breaks. Abandons carts the moment a hidden fee appears — she'd rather see the full price up front, even if it's higher.

Pain Points & User Flow

  • Shipping fee revealed only at final payment step
  • No visible return policy on the product page
  • Size guide hidden two menus deep
  • Guest checkout not offered upfront
Browse
Product + Full Price
Cart
Guest Checkout

Wireframes → High-Fidelity UI

Cartly
₹2,499
Item total
₹0
Shipping — free
Fri
Arrives by
Everyday Sneaker — White
Size UK 8 · Qty 1
₹2,499
Continue as Guest
← Product
Product Image
Everyday Sneaker
₹2,499 · Free shipping · Delivered Fri
Add to Cart
Buy Now

Color Palette, Typography & Icons

#4338CA
#2563EB
#06B6D4
#F8FAFC
See the real price. Every time.
Inter Bold — product titles
Inter Regular 13px — pricing, delivery estimates, policies.
Challenge

Showing full pricing upfront without cluttering the product card on smaller screens.

Solution

Collapsed shipping + delivery estimate into a single trust strip directly under the price, using a fixed height so layout never shifts as data loads.

Outcome

↓ 35%
Cart abandonment in usability walkthroughs
100%
Testers found shipping cost before checkout
9/10
Trust rating for pricing transparency
Web Dashboard · Desktop-first

Nexus Bank

A personal banking dashboard that turns a wall of transactions into decisions a user can act on in seconds.
RoleUI/UX Design (solo)
Duration5 weeks
ToolsFigma, XD
DeliverableDesign system, hi-fi dashboard

Problem Statement

Most banking dashboards present every account and every number with equal visual weight, forcing users to do the prioritization the interface should be doing for them.

Research Insight

Card-sorting with 5 participants showed users mentally group their finances into just three questions: "What can I spend today, what's due soon, and is anything unusual?" — the dashboard was redesigned around those three questions.

User Persona

VM
Vikram M.
31 · Software Engineer
Checks his banking app almost daily but only ever really wants to know one of three things. Wants the dashboard to answer that instantly, not after three taps.

Pain Points & User Flow

  • Available balance buried below promotional banners
  • Upcoming bills scattered across separate tabs
  • No way to flag unusual transactions at a glance
  • Charts present data with no comparison baseline
Login
Dashboard
Transaction Detail
Action / Dispute

High-Fidelity UI — Dashboard, Charts & Tables

Nexus · Overview
₹1,84,200
Available today
₹12,400
Due in 5 days
1 flagged
Unusual activity
Spending — Last 7 Daysvs. prior week
MerchantCategoryAmountStatus
AmazonShopping−₹1,240Cleared
Unknown POS−₹4,999Review
Electricity BoardUtilities−₹890Cleared
Nexus
₹1,84,200
Available balance
Bill due · Broadband
₹1,199 in 3 days
View All Transactions

Color Palette & Typography

#0F172A
#1E3A8A
#4338CA
#F1F5F9
Three questions, answered instantly.
Inter Bold — balances & KPIs (tabular figures)
Inter Regular 12px — transaction tables, dense data.
Challenge

Surfacing a flagged transaction without triggering unnecessary alarm for routine account activity.

Solution

Used a calm amber "Review" pill instead of red, paired with plain-language copy ("Doesn't match your usual pattern") rather than alarmist warning icons.

Outcome

↓ 2 taps
To reach balance + due bills, home to answer
5/5
Test users identified the flagged transaction unprompted
4.8/5
Clarity rating in usability review
Mobile App · Healthcare

MediQ

Booking a hospital appointment shouldn't need a phone call. Designed for stressed users, not confident ones.
RoleUI/UX Design (solo)
Duration3 weeks
ToolsFigma, Illustrator
DeliverableHi-fi prototype, accessibility pass

Problem Statement

Appointment booking flows are often designed for calm, confident users — but people booking hospital visits are frequently anxious, in pain, or booking on someone else's behalf. Complexity here has a higher cost than in almost any other app category.

Research Insight

Interviews with 4 older relatives and peers revealed that "which doctor do I even need" was a bigger blocker than the booking mechanics themselves — symptom-based navigation was needed before specialty-based navigation.

User Persona

LP
Lakshmi P.
54 · Booking for her father
Not confident navigating apps. Needs to book an appointment for someone else without knowing medical terminology upfront.

Pain Points & User Flow

  • Specialty list uses clinical terms with no plain-language help
  • No option to book for a family member
  • Available slots shown before symptom context
  • Confirmation lacks clear next-step instructions
Describe Symptom
Suggested Specialist
Pick Slot
Confirm

High-Fidelity UI — Login, Home & Profile

MediQ
Welcome back
Mobile number
OTP · • • • •
Continue
Booking for someone else? Switch profile
What's going on?
🤒 Fever / Cold
🦷 Tooth / Dental
🩻 Bone / Joint Pain
➕ Something else
← Profile
Lakshmi's father
Age 78 · Diabetic
Manage Family Members
Appointment History

Color Palette, Typography & Accessibility

#0EA5A4
#2563EB
#0F172A
#F0FDFA

Minimum 16px body text, 4.5:1 contrast ratio throughout, and symptom icons paired with text labels — never icon-only navigation.

Tell us what's wrong. We'll find who can help.
Inter Semibold, 16px minimum — every interactive label
Challenge

Designing for a user who may not know medical vocabulary, without dumbing down the app for users who do.

Solution

Symptom-first entry point with specialty names shown as a secondary line beneath — both audiences get what they need in one screen.

Outcome

6/6
Non-technical testers booked without assistance
↓ 50%
Steps vs. original clinic booking flow
AA
Accessibility contrast standard met
Web & Mobile · EdTech

LearnLoop

A learning platform that shows students exactly where they stand, instead of a wall of unordered course tiles.
RoleUI/UX Design (solo)
Duration4 weeks
ToolsFigma, Canva
DeliverableHi-fi prototype, dashboard system

Problem Statement

Students juggling multiple courses lose track of what's actually due versus what's just available — most platforms list content, not priority, leaving planning entirely up to the student.

Research Insight

A survey of 15 classmates found "I forgot an assignment existed" was the most common reason for late submissions — not difficulty, but visibility.

User Persona

SD
Sanjana D.
20 · CSE Sophomore
Enrolled in 5 courses across two platforms. Wants one place that tells her what's due this week, ranked by urgency.

Pain Points & User Flow

  • Assignments listed by course, not by due date
  • No visual sense of overall progress across courses
  • Grades and feedback live in a separate tab
  • No distinction between "new" and "overdue" content
Login
This Week
Course View
Submit / Review

High-Fidelity UI — Dashboard & Course Screens

LearnLoop · This Week
3
Due this week
78%
Overall progress
1 overdue
Needs attention
DBMS — Assignment 4
Due tomorrow, 11:59 PM
Due soon
UX Fundamentals — Quiz 2
Due in 4 days
On track
Progress by Course
LearnLoop
3 tasks due this week
1 overdue · start here
DBMS — Assignment 4
Due tomorrow

Color Palette & Typography

#9333EA
#6366F1
#2563EB
#FAF5FF
Know what's due, before it's late.
Inter Bold — urgency labels & deadlines
Challenge

Surfacing urgency without making the dashboard feel stressful to open every day.

Solution

Capped visible urgency badges to genuinely time-sensitive items only, and used a single calm gradient card as the entry point rather than a wall of red flags.

Outcome

↓ 60%
"I forgot" incidents in follow-up survey
9/10
Preferred priority view over course-tile view
4.6/5
Would recommend to a classmate
04 · Graphic Design

Beyond product UI

Posters, social creative and campaign banners — the same type and color discipline applied to marketing surfaces.

Posters

5 concepts
Campus Event · Sat, 10 AM
Technology
Workshop
Hands-on sessions on Figma, React & applied AI — for every branch, every year.
VSB · Dept. of CSE
Live Webinar · Free
AI & the
Future of Design
A conversation on where design tools are headed, and what to learn now.
90 MIN · ONLINE
36 Hours · Team of 4
Build
Hackathon 2026
Ship something real. Mentors, prizes, and pizza on the house.
REGISTER NOW
Startup Conference
Founders
& First Principles
A one-day banner-headline conference for early builders.
MAIN STAGE
Social Ad · Limited Time
Design Kit
20% Off
Component libraries & icon sets for your next sprint.
SHOP NOW

Social Media Posts

3 platforms

Marketing Banners

2 formats
05 · Design Process

Same seven steps, every project

A consistent process is what makes five very different products feel like they came from the same design head.

01
Empathize
Talk to real or representative users before opening Figma. Understand context, not just tasks.
02
Define
Turn research into one sharp problem statement — the sentence every later decision gets tested against.
03
Ideate
Diverge fast with low-cost sketches and flows before committing to one direction.
04
Wireframe
Structure first, style later. Validate layout and hierarchy without color to distract.
05
Prototype
Connect real flows with real transitions — something a user can click through, not just look at.
06
Test
Put it in front of people who aren't me. Watch where they hesitate, not just where they succeed.
07
Iterate
Fix what testing exposed, then re-test the fix — iteration is a loop, not a final step.
06 · Figma Process

How the file is actually built

A look inside the working file, not just the polished export — frame structure, components, auto layout, and the tokens holding it all together.

NearBite — Mobile App.fig
Layers
📄 Home / Shortlist
▸ Frame — 375×812
Nav Bar
Shortlist Card
Restaurant List
Tab Bar
📄 Checkout
📄 Components
Home / Shortlist — 375×812
NearBite
🔥 Your Shortlist
Saravana Bhavan
Praveen
Component Properties
AUTO LAYOUT
DirectionVertical
Gap10
Padding16
VARIANTS — Card
StateDefault
ElevationRaised
COLOR TOKENS
surface/brand
text/primary
surface/muted
Frame Structure
Every screen lives in a correctly-sized device frame, grouped by flow, so handoff never requires guessing canvas size.
Components & Variants
Buttons, cards and inputs are built once as components with state variants — default, hover, disabled, error.
Constraints & Auto Layout
Auto layout and pinned constraints keep every frame responsive when content length changes.
Styles & Design Tokens
Color, type and spacing are saved as reusable styles — a palette change propagates without touching individual screens.
07 · Achievements

Outside the case studies

The engineering half of the profile — problem-solving, project delivery, and hands-on experience.

Internship
Frontend / full-stack internship experience — add company & role here
150+
Problems solved on LeetCode / competitive coding platforms
6+
Full-stack & design projects shipped, including this capstone
Problem Solving
Strong DSA foundation in Java & Python backing every design decision

Placeholder figures — replace with your actual internship, LeetCode and project counts before sending this portfolio out.

08 · Contact

Let's build something people don't have to think about.

Open to UI/UX design internships and junior product design roles. I reply fast — reach out any of the ways below.