FHANG MEDIA

Case Study: Viajerologos.com

Online Community for Solo Travelers and Photography Enthusiasts

Viajerologos.com is designed for solo travelers and photography enthusiasts, this website and online community offers expert travel tips, destination guides, and inspiring content to help you capture unforgettable moments. Dive into a rich collection of articles, digital products, and immersive VR 360° videos, all crafted to fuel your passion for exploration and photography.

Role: Founder, UX/UI Design & Web Analytics

Client: viajerologos.com (Personal project)

Timeline: From 2019 – Ongoing

Location: Remote

Responsive UI design on Figma and Sketch
www.viajerologos.com

📔 Project Overview

Viajerologos.com is a personal side project I initiated in 2019 while pursuing my Master’s Degree in UX, Usability, and Web Analytics. The project began as a way to back up my travel files and photos on Google Drive, but it quickly evolved into a platform designed to inspire others to travel smarter and capture breathtaking photos.

The primary goal of Viajerologos.com is to motivate people to explore the world and elevate their photography skills. This website serves as a comprehensive resource where I document and share my travel experiences, offering travel and photography tips, recommendations, and exclusive discounts through a user-friendly interface. It’s also a project where I can experiment and demonstrate my expertise as a UX/UI designer, web analyst, and creative content creator.

 

Focusing on promoting destinations across México and around the globe, Viajerologos.com caters to adventurers who prefer solo travel and photography enthusiasts looking for inspiration and techniques to capture epic moments at iconic destinations.

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 website and social media channels to share VR 360° videos, travel content to provide valuable tips, recommendations and inspire others. 

 

Accomplished Goals:

  • Boosted brand awareness and increased website user traffic by 50% in 2023.
  • Increased followers on social media channels from 0 to +2000 in one year.
  • Achieved a 50% increase in lead acquisition in one year.
  • Enhanced user engagement by 50% in one year.
Digital content with travel & photography tips
SMART goals
Videos in VR 360 for the YouTube channel
Design concepts and Ideas
Keyword research and Analysis
casestudy2-vjr-social-media-analytics
Web analytics and Marketing tools

🎖️ My Role

I launched Viajerologos.com as a Product Designer in 2019 while pursuing my Master’s degree in UX, Usability, and Web Analytics. With complete creative freedom, I developed and refined a design framework that prioritized a deep understanding of user needs.

 

Every element of this project, from the website and articles to the photography, VR 360° videos, and social media content, has been crafted solely by me. I utilized a variety of tools, including Figma, Sketch, WordPress, MAMP, Notion, Adobe Photoshop, Illustrator, XD, Lightroom, CapCut, Final Cut, Metricool, Google Analytics, and more.

 

Key responsibilities and milestones:

 

  • Conducting comprehensive UX Research and Analysis. Executing UX Design, user testing, and UI design for responsive layouts.
  • Developing the brand identity, including branding and logo design, with a focus on concept creation, guidelines, an accessible color palette, and typography.
  • Managing domain name & hosting configuration, web development, updates, and maintenance on WordPress.
  • Defining and implementing Growth Marketing strategies and creating SEO-friendly, data-driven content for search engines and social media. This includes blog articles, travel photos, and video reels for Instagram, TikTok, and YouTube Shorts.
  •  I craft SEO-optimized articles centered around travel and photography tips, and I extend my reach 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 in HD 6-8K with my 360 camera.

What team members think about my work

Reviews & Feedback from Clients & Colleagues

P. Mora

Manager at Latidos NZ magazine

I. Garcia

UX Designer III at Rackspace Technology

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

👥 End-users and Audience

Viajerologos.com is designed specifically for young, independent Spanish-speaking individuals aged 25-50 who have a passion for travel and photography.

These users like adventure, seeking authentic experiences, and are eager to explore the world on their own terms. They value high-quality, inspirational content that not only helps them discover new destinations but also enhances their ability to capture stunning photographs.

As a certified User Experience Designer with a diverse skill set spanning UX, UI, web analytics, and content creation, I meticulously defined the project’s requirements to align with the expectations of this audience. I employed a user-centered design process, focusing on creating an intuitive, seamless, and engaging user experience that resonates with the target demographic.

The result is a platform that not only meets the functional needs of the audience but also inspires and motivates them to explore the world and capture their journeys through photography.

 

By understanding the unique desires and challenges of this audience, I was able to craft a user experience that is both impactful and meaningful, driving engagement and fostering a loyal community of like-minded travelers and photographers.

Proto-Persona 1
User Persona 1
User Persona 2
Problems and How to help

🥊 Problem Statement

Travelers often encounter significant obstacles when planning trips and capturing high-quality photos and videos. They are looking for affordable, self-guided travel solutions but face several common challenges like:

 

  • Difficulty in coordinating travel plans with friends and family
  • Overpriced, commercial travel packages that don’t meet their needs
  • Challenges in finding reliable travel agencies and trustworthy packages
  • Struggles with optimizing trip planning and budgeting
  • Limited access to practical and useful travel articles and resources.

 

These challenges make it harder for users to achieve their travel goals, prompting the need for a platform that simplifies trip planning and enhances their travel experiences.

Analyzing sketches and rough Ideas

🪢 The Challenges

The project involved several key challenges, including the need to design and develop a fully accessible, responsive website from the ground up, all while working with minimal initial content.

 

To overcome this, I conducted thorough keyword research to categorize relevant topics and utilized my personal collection of photos and videos to generate high-quality, engaging content.

 

Key Requirements

  • Define detailed user scenarios, flows, and UI screens to guide the design process
  • Design a cohesive brand identity, including a logo, color palette, and typography guidelines
  • Develop a user-friendly website that is WCAG 2.1 compliant and accessible to all users
  • Conduct a competitive analysis to understand and improve upon existing user experiences, site architecture, and navigation
  • Identify specific user pain points, such as challenges in trip planning, accessing travel discounts, and finding useful resources, and design solutions to address them
  • Create design guidelines and a components library using the Elementor plugin on WordPress, streamlining the UI design process and ensuring consistency across pages
  • Configure domain and hosting settings, and ensure the website is fully compatible across various devices and browsers
Keywords research on search engines
Planned Phases
Plugins section on WordPress Dashboard
usecase1-rcks-contrastchecktest1
Accessibility test for the color palette
www.viajerologos.com / The site adapts across devices
SMART goals
KPI's for the landing page

🎯 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 website and social media channels to share VR 360° videos, travel content to provide valuable tips, recommendations and inspire others. 

 

Accomplished SMART Goals:

  • Increased website user traffic by 50% in 2023.
  • Boosted brand awareness by 60% in 2023.
  • Growed social media followers by 50% in 2021.
  • Achieved a 50% increase in lead acquisition and customer loyalty in one year.
  • Enhanced user engagement by 50% in 2022.
The new UI adapts to mobile devices

Revenue Model:

  • Affiliate commissions and product promotions.
  • Monetization through YouTube, TikTok, and social media.
  • Private consulting and organized tours.
  • E-commerce and ads on the website.

 

Strategic Benefits:

  • Increased organic traffic through SEO-optimized content.
  • Higher revenue with low investment in marketing.
  • Stronger brand identity, attracting new leads.
  • User-centered UI redesign, improving user experience and performance.

 

Additional Goals & Solutions:

  • Reach new leads and expand audience segments.
  • Conduct UX Research to create accurate user personas and flows.
  • Monitor KPIs with Google Analytics and other tools.
  • Smart content creation with a strategic posting calendar.
  • Provide users with valuable travel articles and discounts.
  • Implement SEO and keyword strategies for blog content.
  • Automate processes with optimized conversion funnels and landing pages.
  • Apply information visualization principles to enhance user goals.
Custom Analytics Dashboard on Metricool
Custom Content Calendar on Notion for Social Media channels
Custom Google Analytics dashboard for monitoring
Improvement Strategies
Lead magnets to gain more leads
Initial sketches with pen & paper
Use cases fhang media viajerologos website responsive ux design ui web development
The website UI adapts across devices

⭐ 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.

 

  • My approach began with thorough research to validate the need for the product concept. By gathering insights from potential users, I identified key pain points and opportunities that shaped the direction of the design.
  • Throughout the project, I iterated on designs based on user feedback, ensuring that each stage of development was aligned with user needs and expectations. As a solo designer, I was responsible for every aspect of the product’s creation, from initial ideation to the final, polished design. This involved continuous refinement of the user interface, user experience, and overall product functionality, all grounded in data-driven decision-making.
  • The result was an end-to-end product that not only addressed the challenges users were facing but also provided a seamless and intuitive experience, reflecting the core principles of Design Thinking.
Creative design process

📝 Phase 1: Discover & Research

First, I started the process with a list of rough concepts and interviews I had with people from the target audience to gather initial data.

 

UX Research Goals:

  • Gain insights into users, the travel and photography market, and competitor products.
  • Identify pain points in user journeys.
  • Discover what users seek from the website and brand.

Qualitative & Quantitative Methods:

 

  • Observation & Field Studies: Analyzed user interactions in their natural environments.
  • User Interviews: Conducted 10 interviews with travelers, photography enthusiasts, and industry professionals to gather feedback on user journeys and requirements.
  • Surveys: Collected data on user preferences for travel discounts and reliable content. This helped identify popular brands and destinations and prioritize website features.

Key Insights from initial research:

  • Users need a website offering travel discounts and valuable content with travel & photography tips.
  • Existing websites often lack accessibility and clear navigation.
  • Custom color palettes and readable typography are needed for accessibility.
  • Competitors’ sites have issues with outdated content and confusing layouts.
  • My content is authentic and original. Using new technologies like 360 videos and guided tours in virtual reality will help to highlight the brand and  increase engagement and brand awareness.
  • There are multiple options to earn income through affiliate links, sponsorships, ads, collaborations, social media monetization and 1:1 coaching  sessions, for example.
Brain storming ideas for creating the brand's name
Keyword research on search engines
Pre-test questions and script for the interview
UI Design on Figma and Sketch
Web Development on WordPress
website: www.viajerologos.com
Custom dashboard for monitoring social media channels
casestudy2-audience-social-media-monitoring
Social media analytics tools

Market Research & Competitor Analysis:

  • I analyzed competitors’ UX, site maps, and features to find opportunities and gaps such as outdated designs and lack of VR 360° content.
 

SWOT Analysis:

  • Strengths: Custom branding, valuable content, and user-friendly design.
  • Weaknesses: New brand with unknown metrics.
  • Opportunities: Develop a responsive, accessible site with simplified navigation.
  • Threats: Late adoption of new technologies and potential security concerns.
Keyword research on semrush.com
Surveys on Google Forms
Survey Analysis

Observations & Findings

The initial research phase provided crucial insights that shaped the subsequent design process by providing a solid foundation for defining user personas, creating empathy maps, and mapping customer journeys. They also informed the design of a user-centric, accessible website that addresses identified needs and leverages market opportunities.

 

  • The research clarified user frustrations and goals.
  • Identified needs for security, accessibility, and effective SEO strategies.
  • Competitor analysis revealed opportunities for a unique offering in VR 360° content.
 

Key observations and findings:

 

  • User Needs and Preferences: Users expressed a strong desire for a website that offers travel discounts and high-quality, reliable content. They want access to valuable resources to help plan trips and capture memorable moments through photography. This feedback highlighted the need for a platform that combines practical travel advice with inspirational content.

  • Accessibility Issues: Many existing travel and photography websites were found to have accessibility issues, such as low contrast ratios and small font sizes, which hinder usability for all users. This pointed to the necessity for an accessible color palette and typography that complies with WCAG 2.1 guidelines.

    • Outdated Designs: Some competitor sites were outdated or offline, indicating a gap in current offerings.
    • Content Access Barriers: Many sites required subscriptions for access to content, which could deter users.
    • Confusing Navigation: Websites often featured overwhelming visuals and poor content placement, leading to user frustration.
  • Market Opportunities: The absence of VR 360° content among competitors presented a unique opportunity. Integrating VR 360° videos into the platform could offer a distinctive user experience and set the website apart from others in the market.

  • Social Media Insights: Social media analysis revealed Instagram as the most utilized channel among the target audience. This insight guided the strategy for content distribution and engagement. Custom dashboards on Google Analytics and other tools were set up to monitor KPIs, such as user engagement and conversion rates, across various platforms.

  • User Experience Challenges: Competitor sites often struggled with incomplete content and difficult navigation. Users reported that these issues increased their frustration, underscoring the importance of creating a site with streamlined navigation and comprehensive, accessible content.

  • Content and SEO Strategy: Research indicated a need for well-optimized SEO content to enhance organic traffic. This included strategic keyword research to improve the site’s visibility on search engines and attract a broader audience.

  • Security and Performance: Ensuring the website’s security and performance was crucial. Findings suggested that addressing potential vulnerabilities and maintaining regular updates would be necessary to protect user data and enhance site reliability.

observations findings
Custom dashboard on Google Analytics
Easy access to information and points of contact
Dashboard from Facebook analytics
Comparison of Functionalies with competitors
casestudy2-vjr-competitive-analisis
Competitor analysis
Proto-Persona 1
User Persona 1
User Persona 2

👤 Phase 2: Define

From the research, I created user personas, empathy maps, and customer journeys to capture user behaviors, goals, and needs. This allowed me to prioritize user-centered design decisions.

Empathy Map

Analyzing interview data, I identified key insights:

  • Users seek cost-effective travel planning solutions.
  • Language barriers and high costs are common concerns.
  • Users need an easy way to find travel discounts and recommendations.
  • Users want to save money when planning their trip.
  • Some users are afraid to travel alone because they don’t speak the language.
  • Some users think it’s very expensive to travel.
  • Users need a place where they can easily plan their trip and get discounts when booking.
  • Users want tips and recommendations from locations and products related to travels & photography.
  • Users want to see recommended products and services.
Emphaty map

User JourneyS

I mapped out user journeys and scenarios to understand their interactions with the website. I analyzed each stage of the user journey to understand how users interact with the site at various touchpoints. This included:

 

  • Discovery: Users find the site through search engines or social media. The goal was to ensure they quickly understand the site’s value proposition.
  • Planning: Users explore content to plan their trips or enhance their photography skills. I focused on simplifying access to relevant resources and travel discounts.
  • Booking: Users navigate to booking sections and apply discounts. The aim was to streamline the booking process and make it intuitive.
  • Engagement: Users return to engage with new content or share their experiences. I aimed to encourage repeat visits through engaging, valuable content.

Scenarios

I created scenarios that depicted realistic interactions between users and the site, illustrating typical tasks like:

 

  • Finding travel tips and recommendations.
  • Accessing and applying travel discounts.
  • Navigating through VR 360° content to explore destinations.
  • Engaging with social media posts and blog updates.

These scenarios guided the design of user flows and wireframes, focusing on providing clear, user-centric solutions that address specific needs and challenges.

 

Pain Points

Identifying and addressing pain points was crucial to enhancing the user experience.  By addressing these pain points, I aimed to create a website that is both user-friendly and effective, enhancing the overall experience for travelers and photography enthusiasts. Key pain points included:

 

  • Information Overload: Users struggled to find relevant travel information amid overwhelming content. To address this, I streamlined content categories and improved site organization.
  • Navigation Challenges: Users faced difficulties navigating the website, which led to frustration. I focused on creating a more intuitive and simplified navigation structure, ensuring users could easily find what they needed.
  • Accessibility Issues: Some sites lacked accessibility, with poor contrast ratios and small font sizes. I prioritized designing an accessible site with a custom color palette and readable typography to enhance usability for all users.
  • User Frustration: Navigating through multiple layers of content and features was confusing. I designed a user-friendly interface with straightforward navigation and clear calls to action to reduce user frustration and improve overall satisfaction.
User flows
User flows and scenarios
User flows
User journey map
User journey
User journey
User journey and pain points

💭 Phase 3: Ideation

During the ideation phase, I leveraged insights from my research to explore and refine 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.

 

I designed the sitemap with a streamlined two-level navigation system to simplify user interactions and enhance usability.  This framework guided the user flows, incorporating findings from personas and empathy maps to align with user expectations and needs.

Navigation menu analysis
Initial site map and navigation structure
Optimized the Navigation structure and site map
Analyzing initial design concepts

​​✨​ Phase 4: Design

 1. Paper sketches & Wireframes

I began the design phase by sketching paper wireframes for each screen based on user flows identified earlier. These sketches allowed me to quickly iterate on ideas and visualize layout solutions. This initial phase focused on addressing navigation challenges and optimizing layout efficiency.

Brainstorming, analyzing sketches and taking notes
Sketches on pen & paper
Growth Hacking Conversion Funnel

2. Low & Mid-fidelity Wireframes

Transforming the paper sketches into low and mid-fidelity wireframes in Sketch and Figma, I refined the structure and content placement for better user experience. These wireframes incorporated feedback from earlier research and aimed to resolve pain points related to navigation and content accessibility.

Wireframes - Landing page and conversion funnel
Lo-Fi wireframes
Building responsive UI's on Figma
Wireframes and Mockups on Figma and Sketch

3. Prototyping

The prototyping phase was integral to validating design concepts and refining user interactions.

 

  1. Low-Fidelity Prototypes: I began by creating low-fidelity (lo-fi) prototypes to establish the basic structure and functionality of the website. These prototypes were designed to test fundamental user flows and interactions without focusing on visual details. By linking screens and creating navigational pathways, I was able to simulate user experiences and identify potential issues early in the design process.
  2. Feedback from initial lo-fi prototypes guided the development of more detailed, mid-fidelity prototypes. These versions incorporated refined layouts, enhanced interactions, and preliminary visual design elements. Iterative testing helped to refine navigation, improve usability, and align the design more closely with user needs.
  3. Validation and Adjustment: Throughout the prototyping phase, I continuously validated design choices through user testing and feedback. This iterative approach allowed me to make data-driven adjustments, enhancing usability and ensuring that the design effectively addressed user needs and preferences.

 

View the lo-fi prototype

Prototyping on Figma
Usability testing - Task analysis on Notion
A/B testing to compare elements and content
Custom dashboard on Google Analytics
User escenarios

4. Usability Testing

Usability testing was a critical component of the design process, providing valuable insights into user interactions and design effectiveness. The process involved:

 

    • Usability tests: Conducted with a diverse group of participants representing the target audience. I observed users as they interacted with the prototypes, asking them to complete specific tasks and provide feedback on their experience. This direct observation helped identify usability issues and areas for improvement.
    • A/B Testing: To compare different design variations, I conducted A/B tests. This involved presenting users with different versions of UI elements or layouts and analyzing their preferences and performance. A/B testing provided quantitative data on which design elements were most effective in achieving user goals and enhancing the user experience.
    • Gathering Qualitative Feedback: I collected qualitative feedback through user interviews and surveys, asking participants to share their thoughts on the design, navigation, and overall experience. This feedback was crucial in understanding users’ perceptions, pain points, and suggestions for improvement.
    • Metrics and Analysis: Key metrics such as task success rate, effort, error rate, engagement, and satisfaction were tracked to evaluate the effectiveness of the design. Task success rate measured how well users completed tasks, while effort tracked the number of interactions required. Error rate assessed the frequency of incorrect actions, and engagement measured user interaction with the site. Satisfaction was gauged through user feedback and overall impressions.
    • Accessibility Testing: Accessibility tests were conducted to ensure that the site met WCAG 2.1 standards. I focused on aspects such as color contrast, text readability, and compatibility with screen readers. The goal was to make the site accessible to all users, including those with disabilities.
    • Final Adjustments:The final adjustments were based on a comprehensive analysis of usability and accessibility testing. These changes were aimed at optimizing the overall user experience, addressing any remaining issues, and ensuring that the design was both functional and visually appealing.

By incorporating feedback and insights from usability and accessibility testing, the final design was refined to provide a seamless and engaging user experience, addressing key pain points and enhancing overall satisfaction.

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.0 minimum contrast

💎 Findings

The findings from usability and accessibility tests provided crucial insights that guided the final design iterations. These insights were pivotal in refining the website’s user experience and ensuring its effectiveness in meeting user needs. Key improvements and observations included:

 

  1. Simplified Navigation: Users experienced difficulty with navigation due to the complexity of menu structures and hidden items. To address this, I implemented a sticky navigation bar that remains visible at all times, allowing users to easily locate and access content without confusion. This change significantly improved user orientation and ease of access.

  2. Enhanced Readability: Accessibility tests revealed that the original color palette had insufficient contrast, particularly with certain text colors. To enhance readability, I revised the color scheme to meet WCAG 2.1 contrast requirements, ensuring that text is legible for users with visual impairments. The font size was also adjusted to a minimum of 12px to improve readability and user comfort.

  3. Improved Multimedia Integration: Users expressed a need for more dynamic content, such as videos and interactive elements. I increased the presence of multimedia content, including travel tips and location recommendations, and integrated links to YouTube and social media channels. This enriched the content experience and provided users with valuable resources to enhance their travel and photography experiences.

  4. Streamlined User Flows: Usability testing revealed that some user flows were cumbersome and required too many steps. By analyzing user feedback and task completion metrics, I streamlined these flows to minimize effort and reduce the number of interactions needed to achieve user goals. This optimization led to a more intuitive and efficient user experience.

  5. Accessibility Enhancements: Beyond color contrast and font size, accessibility tests identified the need for improvements in information architecture. I ensured that the site’s navigation was compatible with screen readers and included clear, descriptive text for all images and icons. Additionally, I refined the site’s structure to support better navigation for users relying on assistive technologies.

  6. User Engagement and Satisfaction: Metrics such as task success rate and user satisfaction scores indicated that users found the redesigned website to be more engaging and easier to use. Positive feedback on the site’s usability and content relevance highlighted the effectiveness of the design changes in meeting user needs and preferences.

These findings provided a comprehensive understanding of user behavior and preferences, leading to targeted improvements that enhanced the overall usability, accessibility, and engagement of the website. The iterative design process, informed by user feedback and testing, was crucial in achieving a final product that effectively addresses user needs and expectations.

Keyword research for SEO optimized content creation
Affinity diagram
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 a 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 an in-depth 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 harmonious and accessible color palette, emphasizing teal green and orange as primary colors. This guide ensured design consistency and 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
Responsive UI design on Figma and Sketch
Use cases fhang media viajerologos website responsive ux design ui web development
The new website adapts across mobile devices

​🏆​ Hi-Fi Mockups

The creation of high-fidelity mockups was a critical step in translating wireframes into polished, visually refined designs. These mockups aimed to enhance user interaction and satisfaction by providing a realistic preview of the final product.

 

  • Optimized Navigation: I designed a simplified navigation menu that ensures users can effortlessly traverse through the site’s content. This included a top navigation bar that remains visible on both mobile and desktop views, enhancing accessibility and consistency.

  • Detailed Visual Design: The hi-fi mockups incorporated detailed elements such as refined typography, high-quality images, and a well-defined color scheme. I ensured that visual elements aligned with the established branding guidelines to maintain a cohesive and engaging user experience.

  • Responsive Layouts: Each mockup was designed with responsiveness in mind, ensuring that layouts adapt smoothly to different screen sizes. This approach aimed to provide a seamless browsing experience, regardless of the device used.

www.viajerologos.com
The new UI adapts to mobile devices and is user-friendly
The brand new website adapts across devices

💻 Interactive Hi-Fi Prototypes

Building on the low-fidelity prototypes, the interactive hi-fi prototypes incorporated design refinements based on usability feedback to enhance user engagement and functionality.

 

  • Incorporation of User Feedback: Updates included adding a photo gallery section and more prominent display of discounts and links across the site. These changes were made to address user suggestions and improve the overall usability and value of the site.

  • Enhanced Interactivity: The interactive prototype allowed for detailed user interactions, including clickable elements, transitions, and animations. This facilitated realistic user testing scenarios and provided a clearer picture of how users would navigate and interact with the final product.

  • User Flow Simulation: By replicating user flows from the low-fi prototype, the hi-fi version enabled thorough testing of key tasks and interactions. This approach ensured that the design enhancements effectively met user needs and preferences.

 

View the interactive prototype on Figma

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 to bring the 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.

  • Ongoing 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. 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

🎯 The impact: Improved Look & Feel with Intuitive Navigation

The redesign of Viajerologos.com has significantly enhanced the user experience with a clean, minimal interface that makes navigation effortless. Key improvements include:

 

  • Optimized User Experience: The new design ensures quick access to travel photos, articles, and VR 360° videos, with a clear visual hierarchy and streamlined navigation.
  • Performance and Accessibility: The site features faster load times and improved mobile compatibility. The accessible color palette and typography meet WCAG 2.1 standards, ensuring a user-friendly experience across devices.
  • Increased Engagement: High-quality content and strategic Google Maps reviews have attracted over 1.5 million users in under two years. Custom analytics dashboards enable effective monitoring and data-driven improvements.
  • Efficient Development: Validated code and a consistent UI across resources enhance development speed and site reliability.
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. Value of Continuous Usability Testing: Conducting iterative usability tests was instrumental 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-driven 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. 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.
    3. 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.
    4. Enhancing Technical Skills: The project offered opportunities to expand my technical skills, particularly in areas such as VR 360° video editing and advanced prototyping. Mastering these new techniques not only enriched the content but also provided a deeper understanding of how to integrate diverse media into the user experience.
    5. 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.

Overall, the project reinforced the importance of a user-centered approach, iterative testing, and ongoing adaptation. These lessons will inform future projects and contribute to the continued evolution of Viajerologos.com and other design endeavors.

 

⏩ The Next Steps for VIAJEROLOGOS.COM

  • Conduct Additional Usability Testing: Explore new user scenarios and features to refine the site further.
  • Develop New Digital Products: Create eBooks, travel guides, and online courses to offer more value.
  • Optimize SEO and Content: Update site content for better search rankings and use ChatGPT for fresh ideas.
  • Enhance Social Media Presence: Increase engagement through social media and monitor feedback for insights.
  • Expand VR 360° Content: Produce more immersive VR videos for the YouTube channel.
  • Maintain and Update the Website: Regularly update WordPress, optimize code, and ensure security.
  • Integrate E-commerce: Add a shopping section for travel accessories and digital products like eBooks and guides.

 

Advantages of Digital Products:

 

  • Global Reach: Accessible worldwide, eliminating the need for physical stores.
  • Cost-Effective: No expenses for packaging or storage.
  • High Profitability: Higher margins and easy updates compared to physical goods.
  • Instant Delivery: Immediate access upon purchase, enhancing user satisfaction.
Use Google Analytics to monitor metrics
Articles, VR 360 videos and Content creation
New content creation for Instagram and TikTok
YouTube channel with VR 360 Videos
Recording the voice-off for the videos
6-8K Videos in virtual reality VR 360
check out the live website: www.viajerologos.com

Select Other Case Study

Case Study 1: FD Design System
Case Study 3: iSafety

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

OUR SERVICES

The Best Solutions for Your Brand and Digital Products

At Fhang Media, we specialize in transforming your digital presence through expert UX/UI Design, Web Analytics, and Digital Marketing services. Our mission is to help you shape your ideas into compelling products that captivate your audience, drive engagement, and boost conversions. Whether you’re starting from scratch or looking to enhance an existing digital product, our comprehensive services are designed to deliver measurable results.

 

Our Services Include: UX/UI Design, Web Analytics and Digital Marketing. Partner with us to elevate your digital strategy, increase leads, drive sales, and grow your revenue. Let’s turn your vision into a high-impact reality.

UX/UI User Experience & User Interface Design

Design products that provide a meaningful experience to users. Design of responsive UI's with custom components libraries and accessible design systems.

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, Maintenance & Support

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

Growth Marketing Strategies & Content Creation on Social Media

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

Software Design Courses and Photography Workshops

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

Photography & Videos in VR 360° Virtual Reality

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

Need help with your digital product?

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