Strategy
Understanding the problem before designing the solution.
See the magic.
Designing digital products that are intuitive, scalable, and built with purpose.
Strategy
Understanding the problem before designing the solution.
Experience
Designing products that feel simple, intuitive, and human.
Systems
Building scalable interfaces with consistency at every level.
02 — About
Currently finishing a BSCS while working with clients on turning ideas into thoughtful, usable products. Web, mobile, dashboards, and the design systems underneath them.
Most of my work is remote and end to end: I take a rough brief, ask the uncomfortable questions early, and hand back an interface your engineers can actually build — documented, tokenised, and tested against real use.
03 — Experience
Freelance since 2024, after an in-house year that taught me how design survives contact with engineering.
04 — Services
Thoughtful interfaces, from the first idea to the system that brings it all together.
End-to-end interface design for web apps, from information architecture to the final polish.
Intuitive mobile experiences that feel familiar from the first tap, built around your users.
Turn complex data into clear, focused dashboards that help people see what matters and act.
A shared foundation of tokens, components, and guidelines that keeps your product growing together.
Have something in mind that doesn't fit a box?
Let's figure it out together05 — Writing
Short pieces on systems, restraint, and getting from idea to shipped product.
How consistency and reusable components create better products.
Read Essay 02Every design decision should solve a problem, not just look beautiful.
Read Essay 03Turning concepts into intuitive digital experiences through thoughtful design.
Read Essay 04Why removing complexity creates products people love to use.
Read06 — Questions
The four things people ask before we start. Anything else, just message me.
Mostly product work: mobile apps, web apps, SaaS dashboards, and the design systems that hold them together. I also take on marketing sites, logos and graphics when they sit alongside a product. If your brief is somewhere between two of those, it usually still fits — ask.
Four steps. I start by understanding the problem and the people it belongs to, then map the structure — flows, information architecture, the states nobody remembers to design. Interface comes third, once the skeleton holds. Last is the system: tokens, components and documentation, so what I hand over can be built and extended without me.
Message me on Fiverr, Upwork, LinkedIn or by email with a short description of what you're building and roughly when you need it. I'll come back within 24 hours with questions, a scope, a timeline and a price. No call needed unless you want one.
Because I ask the uncomfortable questions early, and because I hand back work your engineers can actually build — documented, tokenised, and tested against real use rather than a pretty screenshot. I work end to end and I stay reachable while it ships.
07 — Contact
Tell me what you're building and roughly when you need it. I'll come back within 24 hours with questions, a scope and a price.
Booking new workI'll read it properly and come back within 24 hours with questions, a scope and a price. If it's urgent, email me directly.
Side quest · Interactive portfolio
Explore my portfolio as a little adventure. Step into the world to discover my work, skills, and stories.
Click inside the game to start. Use the game's on-screen controls or open it fullscreen for more room.
Case study · Web UI · Wellness
A calm, human homepage for personal and workplace wellness—designed to make the first step feel clear.

Awakenings Online presents personal and workplace wellness through a calm, welcoming homepage. The design brings a broad wellbeing offer into one clear introduction, with distinct entry points for individuals and organizations.
This case study focuses on the homepage direction shown in the desktop and mobile mockups: its visual language, message hierarchy, navigation, and responsive composition.
| Project | Awakenings Online |
|---|---|
| Category | Personal & workplace wellness |
| Surface | Website homepage · Desktop & mobile mockups |
| Design focus | Visual hierarchy, audience pathways, brand expression, and responsive layout |
A wellness homepage needs to introduce a broad offer without making the first screen feel like a catalogue. Visitors should understand the purpose of the service, recognize which route applies to them, and see a clear next action.
Here, the central design challenge is balancing a warm, human introduction with practical navigation for two audiences: people exploring personal support and organizations exploring workplace wellness.
The design combines terracotta accents, warm neutrals, generous space, and natural photography. Together, these elements create a softer visual tone than a dense, clinical interface would.
The portrait is a major part of the composition. On desktop, the subject occupies the right side of the hero while the message sits on the left. The image gives the page a human focal point and supports the personal nature of the offer.
These swatches describe the color direction visible in the supplied mockup. The terracotta accent connects the logo, highlighted headline words, and calls to action.
The hero introduces the experience with a small eyebrow, “Well-being, at your own pace,” followed by a large benefit-led headline: helping people feel better so they can live more fully.
The headline uses scale and color to establish a reading sequence. “Feel Better” and “Live More Fully” receive the brand accent, while the connecting phrases remain in a darker neutral. This breaks a long message into readable parts without turning it into several competing headings.
The supporting paragraph adds practical context beneath the emotional promise. The two calls to action then give the visitor a way forward.
The navigation names Personal Wellness and Workplace Wellness directly. The hero repeats these destinations through “Explore Personal Wellness” and “Explore Workplace Wellness.” This gives visitors the same meaningful choice in both navigation and page content.
The personal route uses a solid terracotta button, giving it stronger visual emphasis. The workplace route uses an outlined treatment, keeping it prominent while preserving a clear hierarchy.
About and Resources sit alongside these audience routes, while Member Login is separated as a utility action. The first-time visitor can explore the offer, and a returning member has a recognizable destination.
The supplied mobile mockup keeps the same logo, warm photography, accent color, and headline language. A compact menu replaces the desktop navigation row, allowing the brand and hero content to retain more space.
The desktop composition is wide and balanced across text and imagery. On mobile, the headline wraps into a narrower column and the action buttons stack. The hierarchy remains recognizable even as the composition becomes more vertical.
The white navigation band gives the header a clear boundary above the image-led hero. Rounded buttons provide a softer counterpart to the thin headline typography, and small arrow icons reinforce the idea of moving into the next part of the experience.
Spacing is doing much of the organizational work. The eyebrow, headline, supporting copy, and action group each have their own space, so the visitor can read the hero as a sequence rather than one uninterrupted block.
The repeated terracotta accent is deliberately concentrated around brand and action elements. It gives the composition continuity without requiring every element to compete for attention.
The mockups establish the homepage's visual direction. Turning that direction into a complete experience means carrying the same clarity through the pages and interactions behind it.
Awakenings Online shows how a welcoming visual identity and a practical page structure can work together. The warm palette and portrait establish the tone; the headline explains the benefit; the repeated personal and workplace routes organize the next step.
The result visible in the mockups is a coherent homepage direction across desktop and mobile, with a consistent brand language and a clear hierarchy of information.
Case study · Muawaz Ur Rehman
A 26-page website redesign for a licensed security firm.
Client |
Advanced Professional Security — privately owned, GSA-contracted, operating since 2008 from Phoenix, AZ and Denver, CO |
Role |
Sole designer — content audit, IA, wireframes, visual language, every page design, handoff |
Project type |
Client work — full website redesign |
Surface |
26 desktop pages, 1440px artboards. Longest page (homepage) runs 11,321px |
Platform |
WordPress, with LearnDash for guard training and BuddyBoss for the staff community behind the login |
Tools |
Figma |
Status |
Delivered — desktop complete, mobile outstanding |
APS is a real operation. Roughly two decades in service, licensed and bonded in two states, a GSA contract holder, an A+ rating with the Better Business Bureau, and its own training pipeline feeding its own hiring.
The website did not say any of that quickly enough.
The content was not the problem — the client had spent years refining how they describe fire watch versus mobile patrol, and none of it was going to change. The brief was narrower than a normal redesign, and harder for it:
Same words. New site. Make a stranger understand, in the first screen, that this is a serious, licensed, two-state operation — and make it just as easy to apply for a job as it is to request a quote.
Two audiences, one content set, twenty-six pages, one designer.
#040707, gold #F6BC15, blue #169FDA. Every decision across 26 pages had to be made inside those three colours.Comparing vendors under time pressure. Needs licensing, coverage area, response capability and a way to request a quote — fast, and preferably without reading three paragraphs first.
Needs: proof, scope, a quote button.
Government facilities, healthcare, transport, food and agriculture, construction. Buys against compliance requirements, so needs sector-specific evidence rather than a generic capability list.
Needs: sector evidence, standards, a named contact.
Often on a phone, often mid-shift. Wants to know what the role involves, what training is required, and how to apply — in as few taps as possible.
Needs: open roles, the training path, apply.
Restructuring came before any visual work. Grouping 26 pages this way is what made four templates enough to cover the whole site — and what separated the sales path from the recruitment path.
flowchart TD
H["Homepage"] --> C["Company — Who We Are, Experience, Why Choose APS, Capabilities, News, Contact"]
H --> S["Services — 7 pages"]
H --> X["Sectors — 6 pages"]
H --> K["Careers & Training — 6 pages"]
S --> Q["Quote request"]
X --> Q
C --> Q
K --> A["Online application"]
K --> L["LearnDash training behind login"]
Cluster |
Pages |
Template |
Leads with |
Company |
Home, Who We Are, Experience, Why Choose APS, Capabilities, News, Contact |
A — editorial |
Credibility |
Services |
Integrated Security Service, Unarmed / Armed Guards, Fire Watch Guard, Mobile Vehicle Patrol, Access Control, Government Facilities Security, Security Guards Arizona |
B — service |
Scope |
Sectors |
Healthcare & Public Health, Commercial Facilities, Construction, Transportation Systems, Food & Agriculture, Sectors overview |
C — sector |
Relevance |
Careers & Training |
Careers, Job Board, Apply Online, Pre-Assignment Training, On-the-Job Training, Training |
D — funnel |
The next step |
Two structural decisions worth naming:
Three colours, straight from the logo, with rules that keep them from becoming five. Ink is the surface. Gold marks exactly one word in a headline or one action in a section — never both. Blue is informational only: breadcrumb bar, eyebrows, the occasional full-width band.
Type on gold is always ink, never white. Photography carries the warmth, so a fourth colour is never needed.
Uppercase display headings with wide tracking — institutional rather than loud. One word per headline may take gold: PROTECTING PEOPLE, PROPERTY, AND POSSIBILITY. Eyebrows sit inside gold or blue brackets, small and letter-spaced.
Body copy stays sentence case at a comfortable measure. The display face does the shouting so the body never has to.
No two adjacent sections share a background. Long pages alternate light, ink and full-bleed photography, with a single gold block reserved for the one claim that matters most on that page.
That alternation is what keeps an 11,000px homepage readable without any decorative filler between sections.
Every page is assembled from the same small set of sections. Designing them once — and reusing them exactly — is what keeps 26 pages consistent with one designer on the file.
Block |
What it does |
Bracketed eyebrow |
Opens every section — gold on light, blue on dark. The smallest possible signal that a new idea has started. |
Blue breadcrumb bar |
A full-width strip directly under every inner-page hero. Orientation on a 26-page site, and a visual full stop after the photograph. |
Stat block |
24/7 dispatch, 100% licensed officers, two states served, 40+ hours of documented training. Overlaps the hero photograph so proof arrives before any body copy. |
Track-record bento |
Numbered panels — dark, photographic and gold — carrying the three heaviest claims: 18+ years in service, dual-state licensing, GSA contract holder. |
Split image / text band |
The workhorse. Alternates sides down the page and switches between light and ink so a long article never reads as one block. |
Quick-quote form |
Guard type, headcount, date needed, total hours. On every service and sector page, so a quote is never more than one scroll away. |
Dual CTA band |
Two buttons, always the same order: Online Application for applicants, Request a Quote for buyers. The two funnels, side by side, on every page. |
Newsletter strip |
Job openings and safety bulletins — one capture serving both audiences, placed above the footer sitewide. |
What it does: A photographic hero with the stat block overlapping the image, then the numbered track-record bento, three capability cards, the credentials checklist beside GSA and BBB recognition, a four-tile sector grid, a client quote, the three coordinated service lines, the training story, and finally the quote-or-roster contact block.
Why that order: It is the order a buyer's questions actually arrive in — are you real, how long have you been doing this, what do you do, do you know my sector, who says so, what does it cost me to start. Nothing above the fold asks for a decision except the one primary button.
The bento is the section I would defend hardest. A list of three credentials reads as a list. The same three as a numbered grid — dark panel, photograph, gold panel — reads as a composition, and a visitor takes all three in without reading any of them in sequence.
Verdict: Strongest page on the site. It was also rebuilt twice, for reasons in section 10.
What it does: Hero with an overlapping stat panel, a blue pull-quote band carrying the brand line, four cards routing to Arizona / Capabilities / Experience / Why Choose APS, alternating image-and-text rows for what the promise means in practice, a field gallery, then the gold technology block.
Why: This is the page a buyer opens when they have decided APS is plausible and want to know whether they are big enough. The four routing cards matter more than the copy — this page's job is to hand the visitor onward, not to hold them.
A revision worth recording: the first version put the photo collage inside the hero and stacked most of the content near the top. It was cut back to a shorter hero with the gallery pulled out into its own section, because a hero carrying six jobs carries none of them.
What it does: Photographic hero, blue breadcrumb, two alternating split bands carrying nearly two decades of history, a gold emphasis block for the partnerships claim, and four numbered cards defining the track record — government operations, transportation and critical infrastructure, professional partnerships, backed by innovation.
Why numbered cards rather than prose: the four areas are the answer to "have you done my kind of work". Numbering them makes them countable, and countable claims feel checkable in a way a paragraph does not.
What it does: Hero naming the service with gold on the operative words, scope first, then higher-risk environments, a full-width blue band for the settings it covers, training and supervision, why APS, and the same quote block that closes every page.
Why scope leads: someone on a service page has already decided they need something; the open question is whether this specific service covers their situation. Answering that before any sales claim is what earns the scroll to the training section.
What it does: The sector is named in gold inside the headline itself (HEALTHCARE security), a centred intro states the compliance promise, then an ink band pairing risk context with control-room imagery, a second band on continuity and disaster response, and the standard quote block.
Why the compliance answer comes first: a regulated buyer arrives with one question — do you understand my constraints. Leading with capability instead would answer a question they had not asked yet.
Verdict: structurally right, thinner than the service pages. See section 10.
What it does: A light hero, benefit cards, the training path as a stepped timeline, job board rows, and a short application form. Careers sits in the main navigation in gold — the only coloured item in the nav — so it is findable from every page without competing with the primary sales CTA.
Why it is separated so hard: these six pages are the intake for the operation the rest of the site is selling. Mixing them into the sales path means every applicant sees a quote form and every buyer sees a job board. Both audiences get worse.
Problem |
Why it actually hurt |
What it should have been |
No written design system |
The patterns are consistent, but they live in the file and in my head. Nothing is named, nothing is tokenised, and a developer picking this up has to infer every rule from the artboards. Consistency that cannot be handed over is a personal habit, not a system. |
A tokens file and a documented component sheet, built before page four rather than never. |
Desktop only |
No mobile artboards were drawn. The careers funnel is the part most likely to be opened on a phone by a guard mid-shift — and it is the part with no designed mobile state at all. The one screen I did not design is the one that audience sees first. |
At minimum, mobile layouts for the homepage, one service page and the whole careers branch. |
The homepage was built twice |
The first version was cluttered because I started laying out pages before the section rhythm was fixed. That is a self-inflicted rebuild, and on a 26-page project it is expensive. |
Fix the repeating blocks and the rhythm first. Pages second. |
Three carousels |
Reliability, service environments and training all hide content behind arrows. Carousels reliably lose everything past the first slide — which means proof I deliberately gathered is proof most visitors never see. |
Grids. If it is worth showing, show it. |
An eight-field quote form |
Name, phone, email, guard type, headcount, date, total hours, comments — repeated on every page. Excellent for the sales team, hostile to a manager checking three vendors on a Tuesday. |
Three fields to start the conversation, the rest after first contact. |
Sector pages are thinner than service pages |
Healthcare carries two content bands where a service page carries five. A buyer arriving from a sector page gets less than one who arrives from a service page — and sectors are how regulated buyers search. |
A sector-specific proof block: what has actually been secured in that sector, and against which standards. |
No measurement plan at handoff |
I proposed what to track — quote submissions by page, application starts, scroll depth on service pages — but nothing was instrumented before delivery. So the redesign's effect on enquiries is currently an opinion. |
Agree the four numbers, and a baseline, before the first page is designed. |
Case study · Muawaz Ur Rehman
An Islamic companion that brings essential daily tools into one experience.
Deen 360 is a mobile application designed to bring essential Islamic tools and everyday spiritual activities into one accessible experience.
Instead of switching between multiple applications, users can access features such as Quran, prayer-related tools, Islamic content, duas, and other faith-based resources within a unified platform.
Role: UI/UX Designer
Platform: Mobile App
Tools: Figma
Category: Islamic / Lifestyle / Productivity
Timeline: 2 weeks
Team: Solo
Muslims often rely on multiple apps to manage different aspects of their daily religious routine.
One application may provide Quran, another prayer times, another duas, and another Islamic content.
This creates a fragmented experience.
The goal was to design a modern, organized, and accessible Islamic companion that brings multiple aspects of a user's Deen into one cohesive experience.
Everything you need for your Deen, in one place.
Muslims looking for a centralized digital companion for their daily religious activities.
Because Deen 360 contains many different features, information architecture was an important part of the design process.
The experience organizes features into clear sections while keeping frequently used actions accessible.

The visual system was designed to create a consistent experience across the application's many features.

The final interface combines a modern visual language with a calm and respectful aesthetic appropriate for an Islamic lifestyle application.
The onboarding introduces the purpose of Deen 360 and guides users into the core experience.


The home experience acts as the central hub, providing access to frequently used features and relevant content.


The Quran experience prioritizes readability and focused interaction, allowing users to engage with the content without unnecessary distractions.


Instead of separating Islamic resources into different experiences, Deen 360 brings them together under one ecosystem.
The interface uses visual hierarchy to organize a large amount of content without making the experience feel overwhelming.
Different tools are grouped logically so users can understand where to find what they need.
Reusable components create consistency across the many screens and features of the application.
Deen 360 contains many different types of content and functionality.
The challenge was to create an experience that feels comprehensive without becoming complicated.
Different features have different content requirements, but they still need to feel like part of the same product.
A consistent design system helped maintain a unified visual language.
The final concept creates a unified mobile experience for accessing multiple aspects of a user's Islamic lifestyle.
Discover → Learn → Practice → Track → Stay Connected
The resulting interface provides a foundation that can scale as additional Islamic tools and content are introduced.
Designing Deen 360 challenged me to think beyond individual screens and focus on information architecture, scalability, and consistency.
With a large number of features and content types, the biggest design challenge was maintaining simplicity while still providing users with a comprehensive experience.
Future iterations could explore:


Deen 360 — Your Complete Islamic Companion
One experience. Every part of your Deen.
Case study · Muawaz Ur Rehman
An AI-powered mobile experience for personalized nutrition and calorie tracking.
Macro Lenz is an AI-powered mobile nutrition app designed to make calorie and macro tracking easier and more personalized.
The app guides users through an initial health and goal assessment, calculates personalized targets, and provides tools to track food, calories, macros, meals, and progress.
Role:
UI/UX Designer
Platform:
Mobile App
Tools:
Figma
Category:
Health / Fitness / AI
Timeline:
3 weeks
Team:
Solo
Traditional calorie-tracking apps can make nutrition tracking feel like a tedious and repetitive process.
Users often need to manually search for foods, calculate portions, track macros, and constantly compare their intake against their goals.
The goal was to create a personalized and easy-to-use nutrition tracking experience that reduces the friction of daily calorie and macro tracking.
Set Goals → Log Food → Track Macros → Understand Progress → Improve
The onboarding experience collects information such as:
This information creates the foundation for a personalized nutrition experience.




Rather than immediately placing users inside the dashboard, Macro Lenz first establishes their personal goals and nutritional context.
This allows the experience to feel personalized from the beginning.
The core experience follows a simple loop:
Open App
↓
Personalize Profile
↓
Set Nutrition Goals
↓
Dashboard
↓
Log Food
↓
Track Calories & Macros
↓
Review Progress
↓
Adjust Daily Choices
The low-fidelity stage focused on establishing the structure of the nutrition experience before applying the final visual design.

The goal was to determine what information users need first and how they can complete common tracking tasks with minimal friction.
Macro Lenz organizes the experience around the user's daily nutrition journey.
Macro Lenz
│
├── Home / Dashboard
│ ├── Calories
│ ├── Macros
│ ├── Meals
│ └── Daily Progress
│
├── Food Tracking
│ ├── Search Food
│ ├── Add Food
│ └── Meal Details
│
├── Progress
│ ├── Weight
│ ├── Calories
│ └── Nutrition Trends
│
├── Recipes / Discover
│
└── Profile
├── Goals
└── Personal Information
The dashboard is designed to give users an immediate understanding of their current nutritional status.
Users can quickly view:


The dashboard prioritizes progress over complexity.
Instead of requiring users to interpret multiple numbers individually, visual indicators help communicate how close they are to their daily goals.
One of the key opportunities for Macro Lenz is reducing the manual effort involved in logging food.
Instead of relying entirely on traditional database searches and manual entry, AI can help users identify food and estimate nutritional information.

The AI experience is positioned as an assistant rather than a replacement for user control.
Users can review the detected food and nutritional information before adding it to their daily log.

Users can organize their daily intake across meals and track nutritional information throughout the day.

The experience makes it easy to understand:
What I ate → How much I consumed → How it affects my daily goal

The visual system uses a clean, health-focused aesthetic with teal/green accents and soft backgrounds.
The onboarding experience establishes the user's goals before presenting their nutrition dashboard.
Visual indicators make calorie and macro progress easier to understand at a glance.
AI can simplify the traditionally repetitive process of identifying and entering food.
The interface doesn't just show nutritional data—it helps users understand what that data means in relation to their daily goals.
Calorie and macro tracking can involve a large amount of numerical information.
The challenge was presenting this information without making the interface feel overwhelming.
AI-generated food information needs to be convenient while still allowing users to review and correct results.
The product contains onboarding, tracking, progress, food discovery, and profile experiences, requiring a consistent design system across different workflows.
Macro Lenz brings personalization, calorie tracking, macro monitoring, food logging, AI assistance, and progress tracking into one mobile experience.
The product transforms nutrition tracking from a repetitive task into a more guided experience:
Know your goals → Track your food → Understand your progress → Make better choices.
Macro Lenz — Smarter Nutrition Tracking

Essay · Muawaz Ur Rehman
Principles, rules, and shared decisions behind a scalable product.
A design system is not just a collection of buttons, colors, and components. It is the foundation that helps teams create consistent, scalable, and purposeful digital products.
When designers hear the words “design system,” the first thing that often comes to mind is a Figma library filled with buttons, cards, inputs, icons, and typography styles.
But a good design system is much more than that.
Components are only the visible layer. Behind them is a set of principles, rules, decisions, patterns, and shared language that guide how a product should be designed and built.
A design system is a structured collection of reusable design decisions and guidelines that help teams create products consistently.
It can include:
The important part isn't simply having these elements. It's making sure they work together as a system.
Think of it like an architectural blueprint. A blueprint doesn't just show what a single room looks like—it establishes rules that allow an entire building to remain coherent.
Imagine you've created 30 reusable components in Figma.
You have buttons for every situation, multiple card variations, input fields, navigation bars, and dozens of other elements.
That's useful, but you can still have an inconsistent product.
Why?
Because designers can still make different decisions about:
A design system provides the rules behind those decisions.
Components tell you what to use. A design system helps you understand why and how to use it.
Consistency doesn't mean making every screen look identical.
Instead, it means creating predictable experiences.
If a user learns how a primary button works on one screen, they should understand how it works somewhere else.
If an error message appears, it should follow a familiar pattern.
If spacing follows a consistent scale, layouts become easier to scan and maintain.
This consistency reduces cognitive load because users don't have to relearn the interface every time they move to a different part of the product.
One of the most important layers of a scalable design system is design tokens.
Tokens store reusable design decisions such as:
Primary Color
Typography Size
Border Radius
Spacing
Shadow
Line Height
Instead of manually changing the same value across dozens of screens, a token allows a single decision to influence the entire product.
For example, instead of repeatedly using:
#647682
throughout a product, you could define:
color.primary = #647682
If the brand color changes later, the system can be updated much more efficiently.
This becomes especially valuable as products grow.
One of the biggest benefits of a design system isn't actually visual.
It creates a shared language between designers, developers, product managers, and other stakeholders.
Instead of saying:
"Make the button look like the one on that other page."
A team can say:
"Use the Primary Button component."
That small difference can save significant time and reduce ambiguity.
Designers know what is expected.
Developers know what needs to be implemented.
Product teams understand the intended behavior.
Everyone works from the same foundation.
A component without documentation can still create confusion.
A mature design system should explain:
For example, a button component might have:
States
Usage
Use the primary button for the most important action on a screen.
Don't
Use multiple primary buttons when they compete for the user's attention.
These guidelines turn a component library into an actual system.
A design system isn't something you create once and never touch again.
Products evolve.
New features are introduced. User needs change. Accessibility standards improve. Technology changes.
Your design system needs to evolve with them.
The best systems are treated as living products.
Designers and developers continuously identify inconsistencies, improve components, remove unnecessary variations, and document new patterns.
A design system ultimately helps teams achieve three things:
Users experience familiar patterns throughout the product.
Designers and developers don't have to recreate the same solutions repeatedly.
The product can grow without every new feature introducing a completely different visual and interaction language.
A beautiful component library is useful.
But a well-designed system is much more powerful.
The real value of a design system isn't how many components it contains. It's how effectively it helps a team make consistent, intentional, accessible, and scalable decisions.
Don't build a library of components. Build a system of decisions.
That is what turns a collection of UI elements into a true design system.
Essay · Muawaz Ur Rehman
Every design decision should solve a problem, not just look beautiful.
Good design is often mistaken for good visuals.
A beautiful interface can attract attention, but that doesn't necessarily mean it is useful, intuitive, or successful. In product design, the real challenge isn't making something look good—it's making something work well for the people using it.
Every color, button, layout, animation, and interaction should have a reason behind it.
That's what it means to design with purpose.
Designing with purpose means making intentional decisions based on a clear understanding of:
Instead of asking:
"How can I make this screen look better?"
A purposeful designer asks:
"What is preventing the user from accomplishing their goal, and how can design remove that problem?"
This shift might seem small, but it fundamentally changes how you approach design.
Imagine a food delivery app with a beautiful home screen.
It has:
But when the user wants to reorder their usual meal, they have to navigate through five different screens.
The interface might be visually impressive, but the experience is poorly designed.
Now imagine another app that looks simpler but allows the user to find and reorder their favorite meal in two taps.
Which one provides better design?
The second one.
Because design isn't successful simply because it looks good.
Design is successful when it helps people accomplish something.
One of the biggest mistakes designers make is starting with the interface.
They open Figma and immediately start creating:
"What should this screen look like?"
But before opening Figma, ask:
A problem should be clearly defined before designing a solution.
For example:
Weak problem definition:
Users need a better dashboard.
This doesn't tell us much.
Better problem definition:
Users struggle to understand their daily progress because important information is scattered across multiple sections.
Now we have something we can design around.
The second statement gives us a direction.
We can begin asking:
The design starts emerging from the problem rather than from personal preference.
Purposeful design begins with understanding the people who will use the product.
You don't necessarily need a huge research study for every project. Even basic research can reveal important insights.
Depending on the project, you might use:
Talk directly to potential users.
Ask questions about:
Useful when you need feedback from a larger group.
Study existing products to understand:
Give users a task and observe where they struggle.
The goal isn't simply to collect information.
The goal is to understand why users behave the way they do.
One of the easiest ways to improve your design thinking is to start asking:
Why?
Why is this button here?
Why is it this size?
Why is this color used?
Why does this information appear first?
Why does this screen exist?
Why does the user need this interaction?
If you can't answer these questions, the decision may need to be reconsidered.
For example:
"I made the button red because it looks attractive."
Try:
"The primary action uses a strong accent color to distinguish it from secondary actions and make the user's next step immediately recognizable."
The second explanation demonstrates design thinking.
Visual hierarchy isn't simply about making a screen look balanced.
It helps users understand what matters first.
Consider a dashboard containing:
If everything has equal visual weight, the user doesn't know where to look.
A purposeful hierarchy might establish:
Primary information
↓
Secondary information
↓
Supporting information
↓
Optional actions
This allows the user's eyes to naturally move through the interface.
What should I see first?
What should I understand next?
What should I do?
That's the purpose behind visual hierarchy.
This is one of the hardest lessons for designers.
You are not necessarily the user.
Your personal preferences might influence:
But the user's needs should come first.
For example, you might love minimalist interfaces with hidden navigation.
But if your target audience needs obvious navigation because they aren't familiar with the product, hiding it may create unnecessary friction.
Good design isn't:
"This is what I like."
It's:
"This is what works for the user and the product."
Visual design is important.
But decoration should support function rather than compete with it.
Consider a checkout screen.
The user's main goal is:
Complete the purchase.
If the designer adds:
the interface may become visually interesting but functionally confusing.
Every visual element should earn its place.
Ask:
Does this help the user understand, decide, or act?
If not, consider removing it.
A common misconception is that simple interfaces happen naturally.
They don't.
Simplicity often requires more design thinking, not less.
Removing unnecessary elements requires understanding which elements are actually necessary.
For example, imagine a form with 12 fields.
Instead of simply styling all 12 fields beautifully, a purposeful designer asks:
The result might be a form with only 6 fields.
That's not just visual simplicity.
That's experience simplification.
A design doesn't exist in isolation.
Users interact with products in real situations.
Someone might use an app:
Context changes how a design should work.
For example, a button that looks perfectly usable on a desktop might be difficult to tap on a mobile device.
A subtle text color might look beautiful in a design file but become difficult to read outdoors.
Purposeful design considers where, when, and how the product will actually be used.
A design isn't truly user-centered if it only works for users with perfect vision, motor skills, hearing, and cognition.
Accessibility should be considered from the beginning.
Color contrast
Text and important controls should remain readable.
Typography
Text should be appropriately sized and easy to read.
Touch targets
Interactive elements should be large enough to tap comfortably.
Error states
Users should understand what went wrong and how to recover.
Alternative communication
Important information shouldn't depend entirely on color, sound, or animation.
Accessibility isn't an extra feature added at the end.
It's part of designing for real people.
Product designers aren't only solving user problems.
Products also have business goals.
For example:
A user wants:
"I want to complete checkout quickly."
A business wants:
"We want to increase completed purchases."
These goals don't necessarily conflict.
A well-designed checkout experience can help both.
But sometimes trade-offs appear.
A business might want to show promotional content while users simply want to complete their task.
The designer's role is to find a balance.
User
What does the user need?
Business
What does the product need to achieve?
Technology
What can realistically be built?
Good product design exists where these three areas overlap.
Your first design isn't necessarily the best design.
You may believe users will:
"Obviously understand this."
But assumptions can be wrong.
That's why testing matters.
Even a simple usability test can reveal unexpected problems.
For example:
You design a button labeled:
"Continue"
But users aren't sure what happens next.
A more specific label might work better:
"Review Order"
The visual design didn't necessarily need changing.
The communication did.
This is why designers should be willing to challenge their own decisions.
A design system isn't only about consistency.
It also helps designers make intentional decisions faster.
Instead of creating a new button every time, you can use an established component with defined:
This allows designers to spend more time solving actual problems rather than repeatedly solving the same visual problems.
A strong system gives you a foundation.
Purposeful design tells you how that foundation should be used.
Not every feature needs to be added.
Not every animation needs to exist.
Not every screen needs another card.
Not every idea needs to become a component.
Designers often think their job is to add value.
Sometimes the bigger value comes from removing unnecessary complexity.
A purposeful designer should be comfortable asking:
Does the user actually need this?
If the answer is no, removing it may be the better design decision.
There is an important difference between these two statements:
"This design looks good."
and:
"This design helps users accomplish their goal."
The first evaluates aesthetics.
The second evaluates experience.
Of course, visual quality still matters.
A good product should ideally be:
Useful + Usable + Accessible + Consistent + Visually compelling
The goal isn't to choose between beauty and functionality.
The goal is to make them work together.
Before finalizing a screen, ask yourself these five questions:
If you can't explain the problem, reconsider why the screen exists.
Understand the user's goals, context, and limitations.
Make that action clear.
Look for unnecessary information, controls, and decoration.
Define something you can validate through testing, feedback, or product data.
These five questions can dramatically improve the quality of your design decisions.
Designing with purpose doesn't mean every design decision needs a complicated explanation.
It means that decisions should be intentional.
A good designer doesn't simply ask:
"Does this look good?"
They ask:
"Does this help?"
Does it help the user understand?
Does it help them navigate?
Does it help them make a decision?
Does it help them complete a task?
Does it help the business achieve its goal?
When the answer is yes, the visual design becomes more than decoration.
It becomes a tool for solving problems.
Great design isn't about making things beautiful. It's about making beautiful solutions to meaningful problems.
Essay · Muawaz Ur Rehman
Turning concepts into intuitive digital experiences through thoughtful design.
Every digital product starts with an idea.
It might be a simple observation, a frustrating experience, a business opportunity, or a completely new concept. But an idea alone isn't a product.
The real challenge is transforming that idea into something people understand, use, and find valuable.
That transformation requires more than visual design. It requires research, strategy, UX thinking, iteration, and collaboration.
This is the journey from idea to product.
Before designing anything, understand why the product should exist.
A common mistake is starting with a feature:
"Let's build an app that does X."
Instead, start with:
"What problem are we trying to solve?"
For example, instead of saying:
"I want to build an AI calorie tracker."
You might discover:
"People find manually logging every meal time-consuming and difficult to maintain consistently."
Now the product has a meaningful problem to solve.
A clearly defined problem gives the entire design process direction.
A product can solve a real problem and still fail if it doesn't understand its users.
Users have different:
Research helps uncover these differences.
Depending on the project, this might include:
Talk to potential users to understand their experiences and frustrations.
Collect broader feedback and identify patterns.
Study existing products to understand what already works and where opportunities exist.
Create realistic representations of the target audience to keep design decisions focused.
The goal isn't to collect research simply because it's part of the UX process.
The goal is to answer:
"Who are we designing this for, and what do they actually need?"
Once the problem and users are understood, the next step is defining what the product actually needs to do.
This is where ideas become requirements.
For example, a productivity app might need:
But not every possible feature belongs in the first version.
This is where prioritization becomes important.
An MVP focuses on the smallest set of features necessary to solve the core problem.
Instead of building everything at once:
Problem → Essential solution → MVP → Test → Improve
This prevents teams from spending time and resources building features users may not even need.
Once the product's features are defined, they need to be organized.
This is where Information Architecture (IA) becomes important.
IA determines how information and functionality are structured within the product.
For example:
Product
│
├── Home
├── Search
├── Main Feature
│ ├── Create
│ ├── Edit
│ └── Details
├── Progress
└── Profile
A good structure makes it easier for users to answer:
"Where am I?"
"Where can I find what I need?"
"What should I do next?"
Without good information architecture, even a beautiful interface can feel confusing.
After structuring the product, map the journeys users will take.
A user flow shows the steps required to accomplish a particular goal.
For example:
Open App
↓
Home
↓
Choose Feature
↓
Enter Information
↓
Confirm
↓
Success
User flows help identify unnecessary steps before visual design begins.
If completing a simple task requires eight screens, that's a signal to investigate whether the journey can be simplified.
The goal is:
The right steps, in the right order, with as little friction as possible.
Now the idea begins to become tangible.
Wireframes allow designers to explore layouts without being distracted by colors, images, typography, or visual polish.
At this stage, focus on:
Low-fidelity wireframes are particularly useful because they're quick to change.
It's much easier to move a button in a simple wireframe than to redesign a highly polished interface.
A static screen shows what something looks like.
A prototype shows how it works.
Connecting screens allows you to experience the product as a user would.
You can test:
This is where potential problems become much easier to identify.
A flow that looked perfect on paper might feel unnecessarily complicated when you actually interact with it.
One of the most valuable stages of product design is usability testing.
Give users realistic tasks and observe what happens.
For example:
"Add a meal containing 500 calories."
Then watch.
Do they immediately know where to go?
Do they understand the button?
Do they hesitate?
Do they make mistakes?
Do they complete the task successfully?
The important thing is to observe rather than immediately explain the interface.
And that's a good thing.
Finding a problem during testing is much cheaper than discovering it after development.
Once the structure and experience have been validated, the visual design can be developed.
This is where you establish:
A strong high-fidelity design doesn't simply make the wireframes prettier.
It should strengthen the experience.
Visual design should communicate:
What is important?
What is interactive?
What happened?
What should I do next?
As the product grows, consistency becomes increasingly important.
A design system provides reusable foundations such as:
This makes the product easier to scale and helps designers and developers work from the same visual language.
Instead of designing every screen from scratch, designers can focus on solving new problems using established patterns.
A design doesn't become a product until it is built.
That means designers need to consider implementation.
Good collaboration with developers includes discussing:
A beautiful design that cannot realistically be implemented isn't a successful product solution.
The best results happen when design and development work together, rather than one simply handing work to the other.
The perfect scenario is rarely the only scenario.
What happens when:
These situations are often overlooked during the initial design.
But they are part of the real product experience.
It's also about helping users when things don't go according to plan.
One of the biggest misconceptions about product design is that the process ends when the product launches.
It doesn't.
Once real users start interacting with the product, you gain something incredibly valuable:
Real-world feedback.
You can analyze:
This information can reveal opportunities that weren't visible during the original design process.
A product should continuously evolve.
The process becomes:
Research
↓
Define
↓
Design
↓
Test
↓
Build
↓
Launch
↓
Measure
↓
Learn
↓
Improve
↺
This is what makes product design different from simply creating screens.
You're not trying to create a perfect solution on the first attempt.
You're creating a solution, learning from it, and making it better.
A UI/UX designer isn't simply responsible for making screens attractive.
A designer helps translate:
Problems → Ideas → Experiences → Solutions
That requires asking questions, challenging assumptions, understanding users, simplifying complexity, and communicating decisions.
The strongest designers don't just know how to use Figma.
They understand why something should be designed a certain way.
A successful product journey can be summarized as:
Understand the problem and the opportunity.
Understand users, competitors, and the environment.
Establish requirements and prioritize the MVP.
Create the information architecture and user flows.
Create wireframes and explore possible solutions.
Prototype and test the experience.
Create the high-fidelity interface and design system.
Collaborate with developers to bring the experience to life.
Release the product to real users.
Use feedback and data to continuously refine the experience.
A product isn't created in a single Figma file.
It's created through a series of decisions.
Every research insight, wireframe, user flow, prototype, usability test, component, and visual detail contributes to the final experience.
The best digital products aren't necessarily the ones with the most features or the most visually impressive interfaces.
They're the ones that understand a problem and solve it clearly.
Don't design screens. Design the experience that connects the problem to the solution.
And that's the real journey from idea to product.
Essay · Muawaz Ur Rehman
Why removing complexity creates products people love to use.
In digital product design, adding more can often feel like progress.
More features. More options. More information. More customization.
But as a product grows, something interesting happens: more doesn't always mean better.
Every additional feature introduces another decision. Every extra button competes for attention. Every unnecessary step creates another opportunity for users to get confused.
That's why simplicity is one of the most difficult—and most valuable—skills in product design.
True simplicity isn't about making a product empty.
It's about removing everything that doesn't need to be there while keeping everything that matters.
Simplicity is often confused with minimalism.
They're related, but they aren't the same.
Minimalism is primarily a visual approach. It may involve fewer colors, fewer elements, generous whitespace, and restrained visual styling.
Simplicity, however, is about the overall experience.
A product can have a visually rich interface and still feel simple to use.
Likewise, a minimalist interface can feel extremely complicated if users don't understand what to do.
The real question isn't:
"How little can we put on the screen?"
It's:
"How easily can the user accomplish what they came here to do?"
Not all complexity can—or should—be removed.
Some products naturally contain complicated information.
Consider:
These products solve complex problems.
The goal isn't necessarily to make the underlying system simple.
The goal is to make the user's experience of that complexity understandable.
A useful principle is:
Don't remove necessary complexity. Remove unnecessary complexity.
A financial application may need dozens of settings and calculations behind the scenes.
The user shouldn't have to understand all of them just to transfer money.
That's good simplification.
Before removing anything, you need to understand what the user is actually trying to accomplish.
Imagine you're designing a food-tracking application.
A user opens the app because they want to:
Log their lunch.
But the home screen contains:
All of these features might be useful.
But are they equally important right now?
Probably not.
If logging food is the primary task, the interface should make that action easy to find.
Simplicity begins with prioritization.
Designers naturally think about what they can add.
Try asking the opposite question:
What can I remove?
Remove a button.
Remove an unnecessary step.
Remove duplicate information.
Remove a complicated setting.
Remove a decorative element.
Remove an unnecessary form field.
Then see whether the experience becomes easier.
This is one of the simplest ways to improve a product.
For every element, ask:
Does this help the user understand, decide, or act?
If it doesn't, question whether it needs to exist.
More choices don't always give users more freedom.
Sometimes they create decision fatigue.
Imagine a button menu containing:
For an experienced user, these options may be useful.
For a new user, they can be overwhelming.
Good design organizes choices based on importance.
You might present:
Primary action: Save
Secondary actions: Share, Export
Advanced actions: Everything else
The functionality hasn't disappeared.
It's simply been structured according to user needs.
One powerful technique for managing complexity is progressive disclosure.
Instead of showing everything at once, reveal information when the user needs it.
For example:
A screen displays 20 settings immediately.
The screen displays 5 important settings.
An Advanced Settings option reveals the remaining options when needed.
This approach keeps the primary experience focused while still supporting advanced users.
Progressive disclosure is especially useful for:
Sometimes a screen isn't actually too complicated.
It simply looks complicated because everything has equal visual importance.
Imagine a dashboard where:
The user doesn't know where to look.
A strong visual hierarchy creates order.
You can establish hierarchy through:
The goal is to guide the user's attention naturally.
Good hierarchy turns information into an understandable story.
Every interface requires users to think.
They need to understand:
Good UX reduces unnecessary mental effort.
For example, imagine a form asking users to enter their country.
Instead of requiring them to type:
"Pakistan"
you might provide a searchable dropdown with common options.
The user doesn't have to remember the exact format.
The interface does some of the work.
This is an important principle of simplicity:
Don't make users remember what the interface can provide.
Predictability makes products feel easier to use.
If a user taps a button labeled:
Delete Account
they should know what will happen.
If a button says:
Continue
the user should have a reasonable understanding of what comes next.
Clear labels reduce uncertainty.
Instead of:
Submit
consider:
Create Account
Instead of:
Continue
consider:
Review Order
Instead of:
Done
consider:
Save Changes
The more specific the action, the less the user has to think.
Simplicity isn't only about individual screens.
You also need to examine the journey between screens.
Suppose a user wants to add a payment method.
Home
↓
Profile
↓
Settings
↓
Account
↓
Payments
↓
Payment Methods
↓
Add Method
↓
Form
↓
Confirmation
If this task happens frequently, that's a lot of navigation.
The solution isn't always "reduce the number of screens."
Instead, ask:
Sometimes one additional screen makes an experience clearer.
That's why simplicity isn't about counting screens.
It's about reducing friction.
Minimalism can go too far.
A designer might hide navigation behind an unfamiliar icon because the interface looks cleaner.
Or hide important actions inside a menu to reduce visual clutter.
The screen becomes visually simpler—but the experience becomes harder.
This is an important distinction:
The interface looks clean.
The interface is easy to understand and use.
You should always prioritize the second.
A clean interface is not useful if users can't find what they need.
One of the easiest ways to simplify an experience is to use patterns users already understand.
For example:
When familiar patterns are used correctly, users don't need to learn everything from scratch.
Good design often feels obvious because it builds on what users already know.
Simplicity isn't only about UI elements.
Words matter just as much.
Compare:
"Authentication failed due to invalid credentials."
with:
"Your email or password is incorrect."
The second is easier to understand.
Good UX writing should be:
Instead of simply telling users that something went wrong, explain what happened and what they can do next.
Empty states are often overlooked.
Imagine opening a task manager and seeing:
No tasks found.
That's technically correct, but not very helpful.
A better empty state might say:
You're all caught up!Create a new task when you're ready.
Now the user understands:
Good empty states reduce uncertainty and guide users forward.
Errors are inevitable.
Confusing error messages don't need to be.
A good error message should answer:
What happened?
Why did it happen?
How can I fix it?
For example:
Instead of:
Error 402
Try:
Payment couldn't be completed. Check your card details and try again.
The goal isn't simply to tell users something went wrong.
The goal is to help them recover quickly.
Different users have different levels of experience.
A beginner might need guidance.
An experienced user might want speed.
Good products can support both.
For example:
Beginner
Guided onboarding and clear explanations.
Experienced user
Shortcuts, saved preferences, and faster workflows.
This is another reason progressive disclosure is powerful.
You can keep the primary experience simple while still providing advanced capabilities when they're needed.
A design system can help maintain simplicity as a product grows.
Reusable components establish consistent patterns.
Instead of creating ten different versions of a button, you can define:
This reduces unnecessary variation.
The same principle applies to:
Consistency makes interfaces more predictable.
And predictability makes products easier to use.
Before finalizing a screen, try this exercise.
Look at every element and ask:
If not, remove it.
If not, consider moving it elsewhere.
If yes, simplify it.
If yes, consider combining them.
If yes, reduce the user's effort.
This simple process can reveal surprising amounts of unnecessary complexity.
A product can start simple and become complicated over time.
A new feature gets added.
Then another.
Then another.
Eventually, the interface becomes crowded.
This is sometimes called feature creep.
The solution isn't to stop improving the product.
It's to continuously evaluate what belongs.
Every new feature should answer:
What problem does this solve?
And:
Is this worth the complexity it introduces?
If the benefit isn't strong enough, the feature may not belong.
Simple doesn't mean boring.
A simple interface can still have:
The difference is that these elements support the experience rather than compete with it.
The best visual design often makes the interface feel effortless.
Users don't think about the design.
They simply accomplish what they came to do.
And that's a sign of successful UX.
Before shipping a design, ask:
If the answer is yes, simplify it.
The art of simplicity isn't about creating empty screens.
It's about creating clear experiences.
It's knowing when to add something—and when to leave it out.
It's understanding that every feature, button, word, interaction, and visual element has a cost.
The best products don't make users think about how complicated the system behind them is.
They make difficult things feel simple.
That's the real goal of UX design:
Make the complex feel effortless.
Because when users can accomplish what they need without fighting the interface, the design disappears—and the experience takes over.
Simplicity isn't the absence of design.
It's the result of thoughtful design.
The collection
Web products, mobile experiences, design systems, and notes on the craft.
Paperlight is the design system this portfolio runs on — one accent colour, one hairline weight, three typefaces and a single easing curve. Every value below is read live from the same custom properties the page uses, so this document cannot drift out of date. Switch the theme while it is open and watch it follow.
Paper, not white. The base is a warm off-white so long-form reading does not glare, and the ink is 10/10/10 rather than pure black so edges stay soft. One accent — Signal — and it is spent only on things that are live: the availability dot, the loading arc, focus rings. Surfaces are separated by a hairline, never a shadow.
Paper--paper
#F4F3F0
Plate--plate
#FAFAF8
Plate 2--plate-2
#EDECE8
Card--card
#FFFFFF
Hairline--hair
ink @ 12%
Muted--muted
#6B6B66
Ink--ink
#0A0A0A
Signal--signal
#FF3B1F
Paper--paper
#0E0E0D
Plate--plate
#141413
Plate 2--plate-2
#2A2926
Card--card
#171716
Hairline--hair
ink @ 12%
Muted--muted
#8D8D85
Ink--ink
#F2F1EC
Signal--signal
#FF5533
Dark is not an inversion. Plate 2 stays a mid tone (#2A2926) rather than going near-black, because the portrait is a dark cut-out and would disappear against it — and Signal lifts to #FF5533 to hold the same apparent weight on a dark ground.
Three families doing three jobs. Inter Tight carries every display line and is tracked tight — up to −0.05em at the largest sizes, because letterspacing that reads correctly at 16px falls apart at 160px. Inter handles body copy untracked. JetBrains Mono is reserved for labels, counters and metadata, always uppercase at 0.12em.
One curve does everything. It leaves fast and lands slowly, which is why nothing on the page feels like it is easing in — motion is spent on arrival, not departure. Almost nothing autoplays: reveals are scroll-driven, the hero understructure follows the cursor, and the only continuous loops are the marquee and the light field, both of which stop when the hero leaves the viewport.
Live specimens, not screenshots — these are the same elements the page renders, so they inherit every token change instantly.
Depth comes from a 1px rule at 12% ink. Nothing on the page casts a drop shadow except the two floating pills, and those are barely there. It keeps the surface flat and the printing honest.
Signal appears on the availability dot, the loading arc and the focus ring — three places, all of which mean something is live. Using it decoratively would cost it that meaning.
There is no colour-coding and almost no weight variation: 500 for display, 400 for everything else. Scale and tracking do the sorting, which is why the page still reads correctly with styles half-loaded.
Reduced motion, no JavaScript, touch-only and no-WebGL each have a defined fallback. The preloader removes itself before first paint if motion is reduced; the work grid renders its default pair with no script at all.
The loading counter is weighted across parse, fonts, images and window load. A fake timer is easier and a designer would spot it.
The entire site is a single self-contained HTML document — styles, scripts and images inlined. No build step, no framework, one dependency (GSAP). It deploys by being copied.