What is UX?
UX (User Experience) is the overall experience a person has while interacting with a product, website, mobile app, software, or digital service.
UX focuses on making products:
- Useful
- Easy to use
- Efficient
- Accessible
- Enjoyable
Example
When using a banking app:
- Can you find the "Transfer Money" button easily?
- Is the process fast and intuitive?
- Do you feel confident that the transfer succeeded?
If the answer is yes, the app likely has a good UX.
UX vs UI (User Interface)
(UX) How it works - (UI) How it looks
(UX) User journey - (UI) Visual design
(UX) Usability - (UI) Colors, typography, layouts
(UX) User satisfaction - (UI) User interactions
UX = The design of a house (room layout, flow, convenience).
UI = The paint, furniture, and decorations.
UX Design Layers
UX (User Experience) Design is often viewed as a set of layers that build from understanding users to delivering a complete digital experience.
 |
| UX Design Layers |
1. User Research (Foundation)
Understanding users, their needs, behaviors, and pain points.
Activities
- User interviews
- Surveys
- Personas
- User journey mapping
- Usability testing
Output
- User personas
- Empathy maps
- Customer journey maps
2. Information Architecture (IA)
Organizing content and functionality so users can find information easily.
Activities
- Site maps
- Navigation design
- Content grouping
- Card sorting
Output
- Sitemap
- Navigation structure
- Content hierarchy
3. Interaction Design (IxD)
Designing how users interact with the product.
Activities
- User flows
- Wireframes
- Task flows
- Prototypes
Output
- User flow diagrams
- Low-fidelity prototypes
4. Interface Design (UI)
Creating the screens, controls, and components users interact with.
Activities
- Buttons
- Forms
- Menus
- Design systems
Output
- UI mockups
- Component libraries
5. Visual Design
Making the product aesthetically appealing and aligned with the brand.
Activities
- Typography
- Color palettes
- Icons
- Imagery
Output
- High-fidelity designs
- Brand-consistent screens
Five Layers of UX
A widely used UX framework from the book 'The Elements of User Experience' by Jesse James Garrett's :
- Strategy – User needs + business goals
- Scope – Features and content requirements
- Structure – Information architecture and interaction design
- Skeleton – Navigation, interface, and information design
- Surface – Visual appearance
 |
| Layers of UX |
Simple Summary
Layer Key Question
Strategy Why are we building it?
Scope What should it contain?
Structure How should it work?
Skeleton How should it be arranged?
Surface How should it look?
This five-layer model is one of the most commonly used frameworks for explaining UX design in product development and digital marketing projects.
UX Tools
Major UX tools fall into a few categories based on what stage of design or research you’re working on.
1. UI Design & Prototyping
These are the core tools for designing interfaces and building interactive prototypes:
- Figma – Most widely used for UI design, prototyping, and team collaboration
- Adobe XD – Good for wireframes, prototypes, and Adobe ecosystem integration
- Sketch – Popular among Mac-based designers
- Axure RP – Strong for complex interactions and documentation
2. User Research & Testing
Used to understand user behavior and validate designs:
- Maze – Fast usability testing on prototypes
- Hotjar – Heatmaps, recordings, surveys
- UserTesting – Real users testing your product and giving feedback
3. Collaboration & Ideation
For brainstorming, mapping, and team alignment:
- Miro – Popular for journey maps, wireframes, workshops
- FigJam – Lightweight ideation and UX workshops
4. Handoff & Development
Tools that help designers pass work to developers:
- Zeplin – Specs, assets, and style guides for developers
- Figma Dev Mode – Inspect code, measurements, and assets
Simple way to remember
Design: Figma, Adobe XD
Prototype: Axure, Figma
Research: Maze, Hotjar, UserTesting
Collaboration: Miro, FigJam
Handoff: Zeplin, Figma Dev Mode
Workflow mapped step-by-step from idea to final product
1. Idea / Problem Definition
You start by understanding what problem you’re solving.
Activities
- Stakeholder discussion
- Define business goal
- Initial assumptions
Tools
- Notes / docs (Notion, Google Docs)
- Whiteboarding with Miro or FigJam
Output
- Problem statement
- Initial scope
2. User Research (Discovery Phase)
You find out what users actually need (not what you assume).
Activities
- Interviews
- Surveys
- Observation (contextual inquiry)
Tools
- Dovetail → store & analyze interview notes
- Lookback → live interviews & recordings
- Forms (Google Forms, Typeform)
Output
- Raw user data
- Pain points, behaviors, needs
3. Synthesis (Make sense of research)
Turn raw data into insights.
Activities
- Affinity mapping
- Persona creation
- Empathy mapping
- User journey mapping
Tools
- Miro → affinity maps, journey maps
- Lucidchart → structured flows and journeys
Output
- Personas
- User journey maps
- Key insights & opportunities
4. Information Architecture (Structure the experience)
Define how the product is organized.
Activities
- Card sorting
- Navigation structure
- User flows
Tools
- Optimal Workshop → card sorting, tree testing
- Miro → flow diagrams
Output
- Sitemap
- User flow diagrams
- Navigation structure
5. Wireframing (Low-fidelity design)
Start sketching layout and structure.
Activities
- Low-fidelity wireframes
- Screen layout planning
Tools
- Figma (wireframing mode)
- Paper sketches (early stage)
Output
- Wireframes (basic screens, no visual polish)
6. Prototyping (Interactive design)
Make the design clickable and testable.
Activities
- High-fidelity UI design
- Clickable prototypes
- Design system setup
Tools
- Figma
- Adobe XD
Output
- Interactive prototype
- Visual UI design system
7. Usability Testing (Validation phase)
Test if users can actually use your design.
Activities
- Task-based testing
- A/B testing
- Behavior tracking
Tools
- Maze → quick prototype testing
- UserTesting → real users give feedback
- Hotjar → heatmaps & recordings
Output
- Usability issues
- Improvement opportunities
8. Iteration (Refine design)
You improve based on feedback.
Activities
- Fix usability issues
- Adjust flows and UI
- Re-test if needed
Tools
- Same as design + testing tools (Figma, Maze, Hotjar)
Output
- Refined final design
9. Developer Handoff
Prepare everything for engineering.
Activities
- Specs, spacing, assets
- Interaction notes
- Design system documentation
Tools
- Figma Dev Mode
- Zeplin
Output
- Dev-ready screens
- Style guides
- Component specs
10. Launch & Post-Launch Monitoring
After release, you measure real-world usage.
Activities
- Analytics tracking
- UX performance review
- Continuous improvement
Tools
- Hotjar (behavior tracking)
- Product analytics tools (e.g., GA4, Mixpanel)
Output
- Real user behavior data
- Backlog of UX improvements
The Big Picture (simple flow)
Idea → Research → Insights → Structure → Design → Prototype → Test → Improve → Build → Monitor
Comments
Post a Comment