UX User Experience, Layers, Tools and workflow

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 :

1. Strategy – User needs + business goals
2. Scope – Features and content requirements
3. Structure – Information architecture and interaction design
4. Skeleton – Navigation, interface, and information design
5. 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

---

UX Tools by Five Layers of UX

UX Layer	Purpose	Deliverables	Common Tools
Strategy	Understand users and business goals	Personas, research findings, business requirements	Dovetail, UserTesting, Maze, SurveyMonkey, Notion
Scope	Define features and content	Feature lists, requirements, user stories	Jira, Confluence, Notion, Airtable
Structure	Design information architecture and user flows	Sitemaps, user flows, journey maps	Miro, FigJam, Lucidchart, Optimal Workshop
Skeleton	Layout interface elements	Wireframes, navigation, prototypes	Figma, Balsamiq, Whimsical, Axure RP
Surface	Create visual appearance	High-fidelity UI, design system	Figma, Sketch, Adobe Creative Cloud, Zeroheight

---

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

What a Real UX Team Uses

Layer	Primary Tool
Strategy	Dovetail + Notion
Scope	Jira + Confluence
Structure	Miro / FigJam
Skeleton	Figma
Surface	Figma

This is why Figma, Miro, and Jira have become the core trio in many UX and UCD workflows: Miro for thinking, Jira for planning, and Figma for designing.

Modern Reality

Today, Figma spans multiple layers:

• Scope (workshops)
• Structure (flows)
• Skeleton (wireframes)
• Surface (UI design)
• Handoff (development)

That's why many UX teams use Figma as the central platform while integrating specialized tools like Dovetail (research), Optimal Workshop (IA), Maze (testing), and Hotjar (analytics).