Responsive Web Design
Micro Travel Guide Responsive Website
Project Overview
Project Type:
Responsive Website
Team:
Independent project with the help of Mentor and Peers
Tools:
Figma, Mural, Freepik, Google
Problem Statement:
Planning short getaways is often overwhelming, as most travel platforms focus on longer vacations with generic content. Travelers waste time searching for quick, meaningful experiences. A mobile-first, offline-friendly solution with ready-made, interest-based itineraries can simplify short trips and make them more enjoyable.
Research
Competitive Analysis
Competitor analysis helps evaluate the strengths and weaknesses of similar products to identify gaps and opportunities. It guides better design decisions and ensures your product stands out by offering improved features and user experience.
Key Takeaways
Our analysis of TripIt, TripAdvisor, and Layla reveals a clear gap in the short-trip planning space. While TripIt excels at organizing existing bookings, it lacks discovery or inspiration features. TripAdvisor offers vast user-generated content but can overwhelm users with uncurated information. Layla provides personalized suggestions via AI chat, but lacks structured, ready-to-use itineraries. WanderLite fills this gap by offering curated, interest-based 1–2 day plans with a lightweight, mobile-first experience—ideal for spontaneous, time-conscious travelers.
User Interview Insights
User interview insights are key findings gathered from conversations with real users about their needs, behaviors, and pain points. These insights help identify common patterns, validate assumptions, and guide design decisions to create a more user-centered product.
Personas
A persona is a fictional character created based on real user research to represent a typical user’s goals, needs, and behaviors, helping guide design decisions.
Key Takeaways
The two personas—a Software Engineer and a busy software developer—showed different lifestyles but similar needs. The homemaker wants a simple short trip Itinerary making platform as per their personal preferences.
Affinity Map
To analyze the user interview data, I created an affinity map by grouping similar responses and observations. This helped us identify key patterns, recurring pain points, and user needs. Organizing insights visually allowed us to better understand user behavior and define clear design directions for the project.
Feature Roadmap
A user flow is a step-by-step path a user takes to complete a task within an app or website, helping designers create smooth and intuitive experiences.
Information Architecture and Flows
User Flow
A user flow is a step-by-step path a user takes to complete a task within an app or website, helping designers create smooth and intuitive experiences.
Task Flow
Design & Prototype
Branding
Branding creates a unique identity using elements like logo, colors, and tone to build recognition, trust, and connection with the audience.
Low Fidelity Wireframes
Using Figma, I translated key screens into mid-fidelity digital wireframes, enhancing the detail and structure of each interface element. This transition from hand-drawn sketches to a digital format provided clarity on the feasibility of my initial low-fidelity concepts and allowed for more precise exploration of layout and functionality.
Desktop Version
Mobile Version
High Fidelity Wireframes
A high-fidelity interface is a detailed and polished version of a design that closely resembles the final product. It includes accurate layout, typography, colors, images, and interactive elements to simulate the real user experience. This level of detail helps in gathering more precise feedback, testing usability, and presenting the design clearly to stakeholders or developers.
Desktop Version
Mobile Version
UI Interaction
Usability Testing
User testing is a process where real users interact with a product or prototype to identify usability issues and gather feedback. It helps understand how users experience the product, ensuring it meets their needs and expectations. Feedback from user testing is analyzed and used to refine the design, addressing pain points and improving the overall user experience to better align the product with user needs.
Test Feedback
Keep Just San Serif Font.
Label Icons on Itinerary page.
Label Images on Itinerary page.
Add Images on mobile design.
Color Scheme is good.
Change Itinerary Option Page with something interesting.
Usability Test Results
The feedback received during usability testing has been implemented, with references shown below.
