Case Study: Viajerologos.com

An Online Community for Solo Travelers and Photography Enthusiasts

Viajerologos.com, launched in 2019, is a personal project designed to inspire solo travelers and photography enthusiasts through comprehensive travel guides, expert tips, and immersive VR 360° videos. This project highlights my multifaceted role launching a product from the ground up. I work on UX/UI Design, UX Research, web development, analytics and content creation, emphasizing my leadership in creating a user-centered platform.

Role: Founder, UX/UI Design, Web Development & Analytics

Client: Viajerologos.com (Personal project)

Timeline: From 2019 – Ongoing

Location: Online

www.viajerologos.com / The site adapts across devices
Digital content with travel & photography tips
The new UI adapts to mobile devices
website: www.viajerologos.com
Web Development on WordPress with Elementor
Responsive UI design on Figma and Sketch
Use cases fhang media viajerologos website responsive ux design ui web development
The website UI adapts across devices

📈 The Impact

Satisfaction
+ 10 %
Engagement
+ 10 %
Task Success
1 x
Lead Aquisition
+ 10 %

📔 Project Overview

Viajerologos.com is a self-initiated project launched in 2019, designed as a comprehensive platform for solo travelers and photography enthusiasts. This project showcases my expertise in UX/UI Design, web development, analytics, digital marketing, and content creation. Through Viajerologos.com, I aimed to create a resource-rich online community offering travel tips, destination guides, and VR 360° videos, all crafted to inspire and equip users for their travel adventures.

 

The primary audience comprises young, independent Spanish-speaking individuals aged 25-50, passionate about travel and photography. They seek authentic experiences and value platforms offering practical travel advice and photography tips.

SMART goals
www.viajerologos.com

📌 The Problem Statement

Travelers often face barriers such as the language, high costs, and inadequate resources for planning and documenting their journeys. Viajerologos.com addresses these issues by providing accessible, affordable travel solutions and photography tips.

Design concepts and Ideas
Keyword research and Analysis
casestudy2-vjr-social-media-analytics
Web analytics and Marketing tools

🎖️ My Role as a Product Designer

Viajerologos.com stemmed from a need to organize personal travel content. It soon evolved into a public platform, reflecting my professional skills and passion for design, travel and photography. The website serves as a practical demonstration of my ability to design, share my own experiences, content and implement digital experiences that resonate with the audience.

Tasks and Actions

  • UX/UI Design: Created a visually appealing and user-friendly interface, ensuring a seamless user experience across devices.
  • UX Research: Conducted usability testing to gather feedback from users and comprehensive user research to understand the needs and behaviors of target audience.
  • Web Development: Developed the platform using WordPress, ensuring robust performance and scalability.
  • Analytics: Implemented Google Analytics and custom dashboards to monitor site performance and user engagement.
  • Digital Marketing: Devised growth strategies that significantly boosted brand awareness and user engagement.
  • Content Creation: Produced SEO-optimized articles, travel guides, and VR 360° videos to enrich user experience and increase reach.
  • I created more than 200 reels on Instagram and wrote 30+ SEO-optimized articles centered around travel and photography tips. I extended my reach more than +70% by sharing my content on social media.
  • Recording and editing VR 360° videos (6-8K) in Virtual Reality for the YouTube channel to showcase some of the most stunning locations I’ve visited, all captured with my 360 camera and edited on FinalCut and Adobe Premiere. So far I’ve created 15+ videos. Implemented growth marketing strategies that boosted user traffic and engagement by +50% within a year.

What team members think about my work

Reviews & Feedback from Clients & Colleagues

I. Garcia

UX Designer III at Rackspace Technology

P. Mora

Manager at Latidos NZ magazine

I believe any design team would benefit greatly from the skillset that Mario offers.

E. Jones

UX Manager at Rackspace Technology

During our time working together, Mario took ownership over our new design system. He worked with developers and product teams to ensure the design system was satisfying consumers. Our team being completely remote, Mario was very good at reaching out and staying in touch with all parties to ensure progress was made.

I believe any design team would benefit greatly from the skillset that Mario offers.

L. Fielder

UX Manager at Rackspace Technology

K. Thomas

Tech Manager at Essilor of America

A. Rodríguez

Software Engineer at Essilor of America

Analyzing sketches and rough Ideas

🪢 The Challenges

  • High-Quality Content Creation: Creating engaging, high-quality travel guides, photography tips, and VR 360° videos was essential to keep the audience interested. This required on-going content production and a deep understanding of what inspires and motivates the target audience.
  • Technological Adaptation: Integrating new technologies like AI for content creation, VR 360° production and ensuring the website remained accessible across different devices and screen sizes posed additional challenges. The platform had to be adaptable for the evolving user expectations and technological advancements.
  • Safety Concerns: Traveling alone, especially for first-timers, can be daunting. Users often struggle with concerns about personal safety and security while exploring new destinations. The platform needed to offer advice and tips to help users travel confidently and securely.
  • Reliable Resource Accessibility: Users frequently encountered difficulty in finding dependable travel content that is both current and trustworthy. Many existing platforms offer commercialized, generic travel packages, which do not meet the unique needs of independent travelers. 
  • Cost and Budget Constraints: Finding affordable travel options is a significant challenge for solo travelers who may not have the advantage of shared expenses. The website needed to include budget-friendly recommendations and resources to help users make cost-effective travel decisions without compromising their experiences.
  • Language Barriers: Many of the target users, Spanish-speaking solo travelers, face difficulties when traveling to non-Spanish-speaking countries. This required the site to provide content that is both informative and accessible, and reliable.
  •  

Keywords research on search engines
Plugins section on WordPress Dashboard
VR 360 video production for the YouTube channel
Problems and How to help
Planned Phases
Custom Analytics Dashboard
SMART goals

🎯 Solutions: Goals and Objectives

I developed a comprehensive growth strategy to increase conversion rates, improve customer satisfaction and retention, also minimize maintenance and risk. Starting from scratch, I created a brand with a user-friendly website and social media channels to share VR 360° videos, travel content to provide valuable tips, recommendations and inspire others.

 

  • 50% Increase in User Traffic: Enhanced SEO and content strategies led to a significant rise in site visits.
  • +2000 Social Media Followers: Active engagement and quality content boosted the platform’s social media presence.
  • 50% Increase in Lead Acquisition: Improved user experience and targeted marketing efforts resulted in higher lead generation.
  • Enhanced User Engagement: Strategic content planning and interactive features raised user participation levels by 50%.
Improvement Strategies
www.viajerologos.com / The site adapts across devices
usecase1-rcks-contrastchecktest1
Accessibility test for the color palette
Custom Content Calendar on Notion for Social Media channels
Lead magnets to gain more leads

⭐ The Design Process

I adopted the Design Thinking methodology to guide the overall design process, emphasizing a deep understanding of user behavior and their challenges. My approach involved validating the product concept through research and leveraging insights to create a comprehensive end-to-end solution as a solo designer.

📝 Discover

The first phase involved understanding the core needs and pain points of solo travelers and photography enthusiasts. This stage was focused on gathering insights and identifying key challenges.

  • User Research: Conducted interviews and surveys with solo travelers to understand their experiences, frustrations, and what they look for in a travel resource.
  • Market Research: Analyzed competitors to identify gaps in the market, especially regarding accessibility and the use of new technologies like VR.
  • Observation: Studied user behaviors on existing platforms to gain insights into their navigation patterns and content preferences.
  • Field Studies: Observed how solo travelers plan their trips and capture photos in real-world scenarios to identify practical challenges.
  • Social Media Analysis: Monitored social media platforms to gauge trending topics and content that resonated with photography and travel enthusiasts.

Initial sketches with pen & paper
Brainstorming, analyzing sketches and taking notes
Custom Google Analytics dashboard for monitoring
Creative design process
Custom dashboard for monitoring social media channels
casestudy2-audience-social-media-monitoring
Social media analytics tools

UX Research

This phase was dedicated to diving deeper into the users’ needs and preferences to inform the design process.

 

  • User Personas: Developed detailed personas to represent the primary user segments, highlighting their goals, motivations, and pain points.
  • Empathy Maps: Created empathy maps to capture what users are thinking, feeling, and experiencing, ensuring that the design would resonate emotionally.
  • User Journeys: Mapped user journeys to visualize how they interact with similar platforms and identify opportunities to improve their experience.
  • Competitor Analysis: Evaluated competitor platforms to understand their strengths and weaknesses, identifying areas for differentiation.
  • Surveys: Deployed online surveys to collect quantitative data on user preferences and behaviors, supporting qualitative insights.
Lead magnets to gain more leads
Brain storming ideas for creating the brand's name
Keyword research on search engines
Pre-test questions and script for the interview
Keyword research on semrush.com
Surveys on Google Forms
Survey Analysis
Dashboard from Facebook analytics
Comparison of Functionalies with competitors
casestudy2-vjr-competitive-analisis
Competitor analysis
observations findings
Insights

👤 Phase 2: Define

The next step was to clearly define the problem statements and user needs to guide the design, all based on insights from UX research.

  • Problem Statements: Articulated the specific problems that the platform needed to solve, such as simplifying trip planning, discount links, offering recommendations and tips.
  • Feature Prioritization: Prioritized features based on user needs, focusing on those that would provide the most value, like easy navigation, accessible content, and immersive VR experiences.
  • User Stories: Created user stories to capture key user goals and tasks, ensuring that each design decision was aligned with real user needs.
  • Information Architecture: Structured the site’s content and navigation to provide a logical, user-friendly framework that facilitates easy access to key information.

Proto-Persona 1
User Persona 1
User Persona 2
Emphaty map
Process automation
User journey and pain points
User journey map
User journey
User journey

💭 Phase 3: Ideation

During the ideation phase, I leveraged insights from my research to explore and refine new design concepts. My approach began with creating initial versions of the sitemap to visualize the structure and hierarchy of the website, ensuring clarity in navigation and content organization.

 

  • Brainstorming Sessions: Conducted brainstorming sessions to generate creative ideas for features and design elements that would engage users and address their needs.
  • Sketching: Created quick sketches to explore various layout options and user interface concepts, enabling rapid iteration and idea refinement.
  • Mind Mapping: Developed mind maps to visualize the relationship between different features and content areas, ensuring a holistic approach to design.
  • Storyboard Development: Used storyboards to map out user interactions and visualize how users would navigate the platform, highlighting potential pain points.

User flows and scenarios
User flows
Navigation menu analysis
Initial site map and navigation structure
Optimized the Navigation structure and site map
Easy access to information and points of contact
SEO content creation for Instagram and TikTok
Analyzing initial design concepts
Sketches on pen & paper

​​✨​ Phase 4: Design

During the design phase, I created and refined wireframes and prototypes, translating user needs into intuitive design solutions. This iterative process ensured that the design was continuously improved based on feedback. 

  • Wireframes: Created low and mid-fidelity wireframes to outline the structure and layout of the website, focusing on usability and accessibility.
  • Visual Design: Developed a cohesive visual identity with a custom logo, color palette, and typography, ensuring that the design was both aesthetically pleasing and functional.
  • Interactive Prototypes: Built interactive prototypes to simulate user interactions and test the design’s usability and functionality.
  • Design System: Established a design system with components and patterns to ensure consistency across the platform, facilitating future updates and scalability.
  • Style Guide: Compiled a style guide detailing typography, color schemes, and component usage, standardizing the visual elements across the website.
Brainstorming, analyzing sketches and taking notes
Affinity diagram
Growth Hacking Conversion Funnel
Wireframes - Landing page and conversion funnel
Lo-Fi wireframes
Building responsive UI's on Figma
Wireframes and Mockups on Figma and Sketch
Prototyping on Figma
Usability testing - Task analysis on Notion
User escenarios

4. Usability Testing

The testing phase allowed to validate the design choices and ensuring the platform met user needs effectively. Multiple rounds of testing were conducted to refine the user experience. 

 

  • Usability Testing: Conducted tests with a diverse group of users to gather feedback on the prototypes, identifying areas for improvement.
  • A/B Testing: Ran A/B tests on different design elements to determine which variations performed better in terms of user engagement and satisfaction.
  • Accessibility Testing: Ensured the design met WCAG 2.1 standards, making the platform accessible to users with varying abilities.
  • Heuristic Evaluation: Performed heuristic evaluations to identify usability issues based on established principles, enabling the refinement of design elements.
  • Feedback Loops: Established continuous feedback loops to incorporate user insights and ensure iterative improvements throughout the development process.
A/B testing to compare elements and content
SUS System Usability Scale to measure usability
Custom color palette with enough contrast ratio
Test of foreground and background color combos for compliance with WCAG 2.1 AA minimum contrast
Keyword research for SEO optimized content creation
KPI's for monitoring overall performance
Value proposition canvas

Branding & Visual Identity

In crafting the logo, branding, and overall user interface, I prioritized creating a welcoming and cohesive visual identity that resonates with diverse user backgrounds. The goal was to establish an authentic, consistent and appealing brand presence across all touch points.  
  • Logo Exploration: I began by exploring various logo concepts, narrowing down the options to those that best aligned with the website’s vision. The final logo was selected based on user feedback, after a deep competitive analysis and mood board creation on platforms like Instagram and Pinterest for design inspiration.
  • Style Guide: I developed a comprehensive style guide that included a consistent, harmonious and accessible color palette, emphasizing teal green and orange as primary colors. This guide ensured facilitated the development process by standardizing typography and color usage.
Logo design concepts
Logo and brand name branstorming
Final logo design of viajrologos.com
Armonious Typography scale
Table with variables and attributes for development
UI Design on Figma and Sketch
Web Development on WordPress with Elementor
Responsive UI design on Figma and Sketch

🏆 Hi-Fi Mockups and Prototypes

The high-fidelity mockups and prototypes phase translated the design concepts into detailed, visually polished representations. This stage was essential for visualizing the final product and provided a platform for rigorous testing and stakeholder feedback before development.

 

  • Visual Consistency: Ensured the high-fidelity mockups adhered to the established design system and brand guidelines, maintaining a cohesive visual language across all components.
  • Interactive Prototypes: Created clickable prototypes to simulate real-world user interactions, allowing for thorough usability testing and validation of design solutions.
  • Iterative Refinement: Conducted multiple design reviews, incorporating feedback from stakeholders and users to refine the prototypes and ensure they met user expectations.
  • Stakeholder Engagement: Presented the prototypes to stakeholders for feedback, ensuring alignment with business goals and design direction.
  • Development Handoff: Delivered detailed design specifications alongside the final prototypes, facilitating a smooth transition to the development team and ensuring design fidelity during implementation.

website: www.viajerologos.com
Use cases fhang media viajerologos website responsive ux design ui web development
The new website adapts across mobile devices
www.viajerologos.com
The new UI is user-friendly and adapts to mobile devices
The brand new website adapts across devices
image of interactive prototype
Hi-Fi clickable prototype on Figma
Setting up the SQL database with PHPmyAdmin
WordPress Dashboard and Plugins section

Developing the Designs

With the high-fidelity mockups finalized, I transitioned to the development phase and started to bring the UI designs to life.

  • Implementation in WordPress: I imported the hi-fi mockups into WordPress to create the initial version of the site. This involved setting up the content management system with the defined typography and custom color palette, ensuring that design elements adhered to accessibility standards.
  • Customization and Configuration: I configured theme settings, adjusted layout options, and integrated necessary plugins to support site functionality. Customizations were made to align with the visual design and ensure a smooth user experience.
  • On-going Maintenance and Optimization: Post-launch, I implemented a robust maintenance plan that includes regular updates, backups, and security scans. This ongoing support aims to ensure the site remains functional, secure, and up-to-date.
  • Performance Monitoring: I continuously monitor the site’s performance metrics to identify areas for improvement on Google analytics and other custom analytics dashboards. This includes optimizing loading times, enhancing user engagement, and addressing any issues that may arise to ensure a consistently high-quality user experience.
Web Development on WordPress with Elementor

✨ The Outcomes and Results

The new UI adapts across mobile devices
website: www.viajerologos.com

🎯 The impact: Improved Look & Feel with Intuitive Navigation

The successful design and development of Viajerologos.com led to significant improvements in user engagement, satisfaction, and brand visibility, demonstrating the project’s impact across various metrics.

 

  • 50% Increase in Website Traffic: Through effective SEO strategies and high-quality content, the platform saw a substantial rise in the number of visitors.
  • +2000 Social Media Followers: Active and engaging content boosted the platform’s social media presence, contributing to community growth and brand awareness.
  • 50% Increase in Lead Acquisition: Targeted marketing efforts and an improved user experience led to a notable rise in leads, enhancing business opportunities.
  • Enhanced User Engagement: With interactive features and valuable content, user engagement increased by 50%, reflecting higher retention and user satisfaction.
  • Revenue Growth: Leveraged multiple monetization strategies, including affiliate marketing and ads, leading to a steady increase in revenue.
  • 30% Improvement in Performance and Accessibility: The platform achieved faster load times, better mobile compatibility, and adherence to WCAG 2.1 standards, making it accessible to a wider audience.
  • User Feedback: Collected positive feedback highlighting the intuitive design and helpful content, validating the platform’s effectiveness in meeting user needs.
  • Awards and Recognition: The project gained attention in travel and photography communities, enhancing its reputation and credibility.

Accessibility considerations
Visualizations on Google Maps
www.viajerologos.com
Videos in VR 360 for the YouTube channel
Attract leads to the website
Editing videos in VR 360 on Final Cut

​​​ 📙​ Lessons Learned

Importance of User Research: Throughout the project, I realized how vital it is to incorporate user research into every stage of the design process. Engaging with users provided invaluable insights into their needs, preferences, and pain points, which directly influenced the design decisions.

 

  1. User-centered design is crucial: Conducting iterative usability tests was key in refining the user experience. Each round of testing revealed new areas for improvement and validated the effectiveness of design changes. This iterative approach allowed me to make data-informed adjustments and significantly enhanced the usability of the site. Regular feedback from users helped in identifying and resolving issues promptly, leading to a more intuitive and user-friendly interface.
  2. Importance of Analytics: Using data to drive decisions proved crucial in identifying what worked and what didn’t. Custom analytics dashboards allowed for precise tracking of user interactions and performance metrics.
  3. Impact of Iterative Design Changes: Implementing design changes based on user feedback had a profound impact on the overall user experience. Users noted that the site’s updated look and feel, along with the streamlined navigation, made it easier to explore and find content. The clear visual hierarchy and adaptive design across devices contributed to a more engaging and accessible experience.
  4. Learning from User Feedback: Direct feedback from users about their experience with the site provided actionable insights. Users appreciated the improved navigation and the responsive design, which enhanced their ability to interact with the content seamlessly. This feedback highlighted the importance of designing with empathy and ensuring that user needs are at the forefront of the design process.
  5. Enhancing Technical Skills: The project offered opportunities to expand my technical skills, particularly in areas such as VR 360° video editing and advanced prototyping. The successful integration of VR 360° videos highlighted the value of staying current with emerging technologies and incorporating them to enhance user engagement.
  6. Utilizing analytics and performance metrics: To guide design decisions proved to be highly effective. Tracking key performance indicators (KPIs) and user behavior allowed me to make informed decisions, optimize the design, and improve overall site performance.
  7. Accessibility Enhances Usability for All: Prioritizing accessibility not only made the platform inclusive but also improved the overall user experience. This lesson emphasized the importance of integrating accessibility features from the outset.

⏩ The Next Steps for VIAJEROLOGOS.COM

Building on the success of Viajerologos.com, several initiatives are planned to further enhance the platform and its offerings.

 

  • Expand Usability Testing: Conduct additional usability tests to uncover new user needs and preferences, ensuring the platform evolves in line with user expectations.
  • Enhanced Interaction Design: Incorporate more interactive elements and micro-interactions to enrich the user experience, making navigation and content engagement more dynamic.
  • Content Diversification: Develop more diverse content types, such as podcasts and live webinars, to cater to different user preferences and learning styles.
  • Mobile App Development: Plan and develop a mobile app to provide a more tailored and convenient experience for users on the go.
  • Monetization Strategies: Explore new monetization opportunities, including premium memberships and exclusive content, to increase revenue streams.
  • Community Building: Foster a more robust online community through forums and user-generated content to boost engagement and create a loyal user base.
  • Continuous Accessibility Enhancements: Stay ahead of accessibility standards by incorporating the latest guidelines and technologies to ensure inclusivity.
  • Performance Optimization: Regularly optimize the website’s performance, focusing on reducing load times and improving the overall user experience.
Use Google Analytics to monitor metrics
Recording the voice-off for the videos
Articles, VR 360 videos and Content creation
6-8K Videos in virtual reality VR 360
New content creation for Instagram and TikTok
YouTube channel with VR 360 Videos
check out the live website: www.viajerologos.com

Related Case Studies

Casestudy-Badge-1
Case Study 1: FDS Design System
Case Study 3: iSafety web app

"The best products focus on users and help to grow the business"

OUR SERVICES: HOW CAN WE HELP YOU?

The Best Solutions for Your Brand and Digital Products

At Fhang Media, we craft seamless UX/UI and Product Design solutions that elevate user experiences. Specializing in Web Development & Analytics, Digital Marketing, SEO & Immersive Content Creation, including VR 360° video production, we help businesses connect with audiences in impactful ways. Let’s collaborate to create unforgettable experiences and drive growth through meaningful conversions.

UX/UI User Experience & User Interface Design for Accessible Websites & Apps

Design products that provide a meaningful experience to users. Responsive UI's with custom components libraries, brand guidelines and accessible design systems.

UX Research, Analysis, Web Analytics & Conversion Rate Optimization

Increase your website's conversion rates with our effective web analytics and CRO strategies. Analysis of business and behavior of visitors to understand and optimize web usage.

Web development, eCommerce, Maintenance, Hosting & Support

Web domain and hosting services. Website analysis, custom development, maintenance and configuration on CMS platforms such as WordPress and Shopify.

Growth Marketing, SEO, Content Creation for websites & Social Media

Let's plan and implement growth marketing strategies with SEO-friendly content that is organic, engaging and relevant to your audience for long-term success and growth.

Web Design Software Courses, Photography Workshops & Conferences

Take our workshops and courses to learn Professional Photography and Software Design tools. Improve your skills with our courses taught by leading professionals.

VR 360° Virtual Reality Video Production & Professional Photography

We specialize in Professional Photography for products, services and content creation. We produce videos in VR 360º Virtual Reality with an 4-8K high-definition.

Need help with your digital product?

Let's create something amazing together! Reach out and tell us about your project.