INTRO UX DESIGN

UX-design and it´s purpose

UX stands for User Experience. It refers to the overall experience a person has when interacting with a product, service, or system. The goal of UX design is to create products that prioritize usability, accessibility, and customer satisfaction, ultimately leading to higher engagement and conversions. By understanding users’ behaviors, pain points, and expectations, UX design helps businesses build products that are not only functional but also enjoyable to use.

To achieve a great user experience, designers can follow various methodologies. The UX design process varies depending on the approach and company needs, but some of the most widely used frameworks include Design Thinking, Double Diamond, Lean UX, and the Standard UX Process.

PROJECT

Website for rental of accommodation in Spain

This project focuses on a website for a small business that rents out accommodation in Alicante, Spain. The goal is to create a user-friendly and visually appealing platform where potential guests can easily browse available accommodations, explore amenities, and make inquiries. The design emphasizes clear navigation, engaging visuals, and an intuitive booking experience to enhance user engagement and increase conversions.

UX DESIGN PROCESS
1. Research & Discovery
2. Structure & Planning
3. Visual Design
4. Testing & Iteration
5. Development & Launch
Step 1: Research & Discovery

– Identify target audience and needs – analyze competitors  – define the client’s goals.

1.1 User Research

Target audience

  • Tourists (short-term stays)
  • Expats (longer stays)
  • Retirees (seasonal residents)

How to collect data?

  • Interview past guests.
  • Survey potential travelers.
  • Use analytics tools (Google Trends, Airbnb trends).
  • Observe travel forums.
  • Analyze competitors websites.

User needs & priorities

  • Easy booking process 
  • Trust & credibility
  • Transparent pricing & availability
  • Location & accessibility
  • Amenities & comfort 
  • Local recommendations
  • Customer support

User problems

  • Hidden fees & unclear pricing
  • Poor communication
  • Misleading listings 
  • Limited cancellation & refund policies
  • Noise & neighborhood issues
  • Check-in/check-out hassles

Rental laws and regulations

Up to date with rental laws and regulations in Spain, including the legally required content that must be displayed on the website such as: Pricing transparency, refund and cancellation policy, Terms and conditions of stay, Privacy policy (GDPR Compliance).

1.2 Competitive Analysis

Competitors

  • Large vacation rental platforms
    Booking.com, Airbnb, Vrbo, Expedia, Tripadvisor rentals, Vacation rentals by owner
  • Local vacation rental platforms
    Spotahome
    Nestpick
    HomeAway
    Alicante holiday rentals
    Inmo Alicante
    Spain-holiday.com
  • Short-term & seasonal rentals
    Holiday lettings
    Zumper
    The plum guide
  • Long-term stay platforms
    Nomad list
    Selina
    Airbnb monthly stays
  • Specialized marketplaces 
    Retirement rentals
    Pensionistas
  • Other competitors
    Facebook marketplace
    Instagram & social media groups

Competition analysis

  • Google search
  • SEO and ranking
  • Price model
  • Booking flow
  • Presentation of properties
  • Customer support
  • Strengths and weaknesses
  • Unique selling points
  • Highligh opportunities
  • Reviews both complaints and praise
1.3 Key Findings & Business Goals

Key pain points & needs

  • Unclear property division when multiple apartments are listed and confusing which photos belong to each. Solution: Clearly separate listings with labeled photos and a floor plan.
  • Confusing information, such as info box with text “Availability was limited and an apartment like this is no longer available” make users second-guess bookings. Solution: Remove unnecessary info to avoid misunderstandings.
  • Lack of key details, such as exact address, street number, and surroundings. Users also want more info on air-conditioning, house rules, cleaning, and insurance. Solution: Provide clear details on location, facilities, and policies.
  • Payment concerns: Users prefer well-known platforms and more payment options. Solution: Use a website with strong SEO and a good search function while promoting listings on trusted platforms with secure payment solutions. Ensure seamless integration between them.

Business goals focus

  • Increase bookings: Attract more guests by optimizing the website, improving SEO, and promoting listings on major rental platforms aswell.
  • Enhance guest experience: Provide seamless communication, detailed property information, quality amenities, clear pricing and policies to boost satisfaction and reviews.
  • Optimize pricing & revenue: Adjust pricing based on seasonality, demand, and competitor analysis to maximize occupancy and profits.
Step 2: Structure & Planning

Sitemap – Define the website’s page structure and hierarchy.
User flow – Create user scenarios, (how users move through the website).
Wireframe – Draw basic sketches of website layout, (information architecture & functionality). 

2.1 Sitemap & Content Strategy

Sitemap pages

  • Home: Overview of apartments and key booking info.
  • Apartments: Detailed descriptions, images, and pricing.
  • Booking: Integrated with a third-party booking system.
  • Location & attractions: Local recommendations and area insights.
  • Contact: Easy access to customer support and inquiries.
2.2 User Flow

Users scenarios

  1. Tourist looking for a vacation rental:
    Lands on Homepage → Clicks on Apartments → Views a specific listing → Checks availability → Books a stay.
  2. Digital nomad looking for a longer stay:
    Searches for “long-term rental Alicante” on Google → Lands on Apartments page → Looks for WiFi and work-friendly space → Checks pricing & booking options → Contacts the owner.
2.3 Wireframe

Wireframe layout

Layout and navigation before moving into visual design. Focus on content placement and functionality, not on colors or visual details. 

  • Content placement: Where does the booking CTA go? Where do images and descriptions appear?
  • Navigation: How do users move between pages?
  • Functionality: Ensuring a smooth experience on phones.

Moodboard & style guides – Find inspiration and choose colours, typography, graphics, photos and UI components.
Mockup – Draw a visual design without interactivity based on wireframes.
Prototype – Create a clickable model of the design that simulate the user experience.

Step 3: Visual Design
3.1 Moodboards & Style Guide

Inspiration & tools

Visual direction reflecting Alicante’s coastal feel.

  • Colours: Coastal, warm Mediterranean tones (blues, sandy beige, terracotta, whites).
  • Typography: A modern sans-serif for readability mixed with a soft and lively font with a touch of elegance.
  • Images: High-quality photos showcasing the apartments and surroundings.
  • UI Components: Buttons, icons, form fields.
  • Tools: Pinterest, Canva, Lummi.ai, Milanote, Figma.
3.2 Mockup

Mockup design

Detailed visual design, showing colours, fonts, icons, and graphic elements, but has no or very limited interactivity.

  • Home: Welcoming visuals, key CTA (Book Now), and featured apartments.
  • Apartments: Clean layout with images, amenities, and a booking button.
  • Booking: Links to a major platform for bookings and payment.
  • Location & Attractions: Highlights nearby beaches, transport, restaurants, and key sights with an interactive map.
  • Contact: User-friendly form with phone and email.
3.3 Prototype

Prototype design

Interactive prototype with clickable navigation, buttons and smooth page transitions.

  • Main navigation menu links.
  • Homepage – images links to appartment page.
  • CTA button – booking page and external booking platform. 
  • Apartment page – images and internal text links to subpages.

Usability testing – Test the design with real users or the client.
Feedback & A/B testing – Identify what works best and iterate on the design.

Step 4: Testing & Iteration
4.1 Usability Testing

Test the prototype with real users or stakeholders to identify pain points and areas for improvement.

Who should test it?
Potential renters (tourists, digital nomads, expats).
The business owner (to ensure it aligns with their needs).
Peers or designers (for usability feedback).

Conducted remote usability tests with potential renters.
Focused on key questions:
Was the booking process clear and intuitive?
Could users easily find apartment details and availability?
Were they confident about making a booking?

What to test?
Navigation & Flow – Can users easily find apartments and book a stay?
Clarity of Information – Are descriptions and pricing clear?
Mobile Responsiveness – Is the design intuitive on mobile devices?
CTA Effectiveness – Do users notice and click on booking buttons?

Tools:
Figma (for interactive prototypes).
Maze / Useberry (for remote user testing).
Google Meet / Zoom (to observe user behavior).

4.2 Key Adjustments

Gather insights from test participants using:

Surveys (Google Forms, Typeform).
Session Recordings (if testing with Hotjar or similar tools).
Direct Observation (watch how users interact).

Key questions to ask testers:

What was easy or difficult about navigating the site?
Were there any unclear elements?
Did they feel confident booking an apartment?
Would you like a feedback form template?

Identify Improvements & Iterate the Design
Based on feedback, make necessary changes, such as:
Adjusting button placements for better visibility.
Refining text to improve clarity.
Improving image selection or gallery functionality.
Simplifying forms to reduce friction.
Make small updates & retest before moving to development.

Key Adjustments
Simplified the booking form to reduce friction.
Made CTA buttons more prominent to increase conversions.
Improved mobile layout based on real-user behavior insights.

Handoff to Developers – Share the design with the dev team via Figma or Zeplin.
Live Testing & Optimization – Ensure everything functions properly before launch.

Step 5: Development & Launch
5.1 Development Approach

Now that the design is finalized, it’s time to bring it to life through development, testing, and deployment.

Choose a Development Approach

Depending on the project requirements and your skill set, you have two main options:

-No-Code/Low-Code (Faster & Easier)

Best for: Quick setup, client-managed updates, minimal technical complexity.
Platforms: WordPress (Elementor, Oxygen), Webflow, Wix, Squarespace.
Booking Integration: Airbnb, Booking.com widgets, or third-party tools like Calendly or Lodgify.
-Custom Development (More Flexible & Scalable)

Best for: Custom design, optimized performance, advanced features.
Tech Stack: HTML, CSS, JavaScript, React/Vue, TailwindCSS.
CMS/Backend: WordPress, Strapi, Sanity, Firebase.

Develop the Website

Once the platform is chosen, start building:

Set Up Hosting & Domain – (If not already done) Use SiteGround, Bluehost, or Cloudways for WordPress; Webflow has built-in hosting.

Develop Core Pages – Implement homepage, apartments page, booking system, etc.

Mobile Optimization – Ensure responsive design for mobile users.

SEO Setup – Add metadata, alt tags, and fast-loading images for better ranking.

Do you need help with best practices for WordPress/Webflow or custom coding?

5.2 Final Testing & Launch

Before going live, test the website to catch any issues.

Pre-Launch Checklist:

Cross-browser testing (Chrome, Safari, Edge, Firefox).
Mobile testing (Check responsiveness on different devices).
Performance check (Use Google PageSpeed Insights).
Forms & Booking functionality (Ensure all interactions work).
SEO & Accessibility audit (Check alt text, headings, and semantic HTML).

Launch & Monitor Performance

Go live! Once everything is tested, launch the site and monitor its performance.

User Personas

What is Personas?

Representing the different types of users visiting the site. Personas are fictional yet research-based representations of target users, reflecting their goals, behaviors, and pain points. They help designers make user-centered decisions by ensuring the product meets real user needs and expectations.

Personas examples:

Emma, a digital nomad
Needs: Reliable WiFi, a quiet workspace, and long-term rental options.
Pain Points: Hard to find flexible stays that allow extended bookings.

David & Sarah, a family on vacation
Needs: A kid-friendly rental close to the beach and attractions.
Pain Points: Unclear info about safety, nearby restaurants, and activities.

When to use Personas?

  • User Research & Discovery – Based on research, you define user types, motivations, and pain points.
  • Ideation & Strategy – Helps prioritize features and tailor content to user needs.
  • Wireframing & Prototyping – Ensures designs align with real user behaviors.
  • Testing & Iteration – Validates if the design meets persona expectations.
Scroll to Top