Welcome to Algeria is an immersive travel website that offers the ultimate road trip experience through the Sahara desert. It features a dramatic opening with a video background depicting the unique Hoggar mountains as the home page to immerse the user in the Sahara road trip adventure package that the agency offers. The home page gives a unique first impression that triggers a powerful drive to start planning this extraordinary road trip across the Algerian Sahara. Furthermore, the goal is to highlight Algeria as a touristic spot filled with unique experiences, amazing food, diversity and stunning nature. As social media influencers are nowadays the ones willing to go the extra mile for unique content, this project is tailored to attract these adventurous travel influencers with a unique 3288km road trip across the Sahara desert filled with extreme sports, activities and quests with the mysterious Tuaregs as guides. As an immersive travel website, a minimal and clean design with gamification core in mind has been maintained to help the traveler visualize their adventure as an epic quest and enough information to plan the content they will create for their platform.
- User Experience
- Goals
- Design
- Features
- Technologies
- Methods
- Validation
- Testing
- Bugs
- Deployment
- Credit and Contacts
The target users for the Welcome to Algeria adventure road trip package are:
- Experienced travelers seeking a unique adventure
- Influencers looking to create exclusive content about the Sahara that will help them gain more followers and promote the region
- Marketing specialist working on ads to launch a specific product such as camping goods, automotive or sports equipment
- Fashion, nature, and wildlife photographers and videographers documenting the area for specific projects
- Various people looking to run or to take part in a social-media-detox retreat in the desert to reconnect with nature and decrease their stress level
The Welcome to Algeria project fills these needs with the following design features:
- Opening home page with a dramatic video background of a 4x4 vehicle driving through the scenic Hoggar mountains to immerse the user in the desert
- Clean and minimalistic design with a short introductory window positioned at the horizon from a passenger viewpoint to help the user envision themselves in that moving vehicle ready to start the road trip
- Clear overview of all the destinations including a brief description to help the user choose the spots that interest them the most
- Embedded Map with the road trip route offers a distinct insight into the duration as well as the difficulty of the road trip
- Information section with clear instructions and advice to help the user prepare accordingly for the road trip across the desert
- About us and contact section that is clean, approachable, and professional to assure the user of the high expertise of the agency "Welcome to Algeria" offering this exclusive road trip
The business goals of the Welcome to Algeria project are:
- Attract a new generation of tourists (influencers) to the south to uplift the economic situation of all collaborators
- Promot the agency's unique road trip package
- Gain subscribers and followers through the newsletter and social media accounts
- Change the touristic profile of the country, previously labeled as "dangerous for visitors", to an image of a welcoming safe country full of untouched scenic nature, history, and adventures
Wireframes were done using Figma.
- Find the link here
- The dramatic video background is set on autoplay looped and muted. It is a daring design choice meant to immerse the user in the desert to impress and spark a sense of adventure in them
- This particular video background gives the feeling to the user that they are sitting in that moving vehicle looking ahead at this extraordinary Mars-like scene, envisioning the exploration journey they are about to embark on and choose to play start
- The background is also used as a marketing hook, letting the dramatic scene draw the client in
- The clean minimalistic encourages the user to ask for more information and eventually book the road trip package
- As the user gradually receives more information about the road trip, the video background is paused until the user is ready to contact the agency to book the trip
- The colors chosen are sample colors from the video background to maintain a minimal aesthetic that highlights the earthy colors of the desert
- An accent warm orange color similar to the Tardart sand was chosen as a hover effect to mirror the dunes but also the color of the buildings in the Sahara region
- The text color is a dark grey inspired by the dark volcanic rock found in the Hoggar mountains to fit the desert theme and keep the minimalistic aesthetic of the website
- In the gallery the images are displayed in two columns responsively
- The images are displayed on a white background wrapper, with low opacity, floating on top of a paused video background to focus the eye of the user on the images
- Icons are taken from the Fontawesome Icon library and used in the tag provided by Fontaesome
- They are styled in dark grey or a bright orange depending on the hover function
- Icons with minimal design are also used in the footer as social media account icons
- Some of the icons are links that open in a different window and redirect to social media pages
- The navigation bar and the logo are grouped and placed on top of a floating white background with low opacity to mimic a cloud floating above the content giving it a sense of lightness and structure while maintaining a minimalist style
- The navigation links are positioned to the right all linking to different sections of the web page
- The navigation links are ordered in the common steps a user takes before booking a trip to enhance the user experience and encourages the user to book the trip
- On smaller screens the navigation is made responsive
- The logo has a minimalist aesthetic with keywords that embrace the message behind the agency's business goal and accentuate the dramatic scene in the video background.
- the font color matches the color of the volcanic rock depicted in the video.
- Designwise, the footer is minimalistic with grey color icons for the social media and play text for the copyrights
- The icons are taken from Fontawesome in the tag
- The icons link will open to a new tab for easier navigation
- Minimalistic clean aesthetic with a video background as a centerpiece and a simple header to immerse the user in the desert
- The index page contains a short introduction to capture the user's attention and motivates them to seek more information, thus more invested in booking the trip.
- The home page is designed with gamification core in mind, with an adventure button inviting them to start an epic journey across the Sahara triggers a powerful drive
to accomplish this drive as a quest for personal and professional growth - Media queries have been used to adjust the page to smaller screens
- The itinerary of the road trip with helpful information and images to help the traveler have an overview of the places they will visit.
- The detailed plan of the trip is displayed as a guidebook on top of a white background with low opacity to focus the eye on the itinerary
- the name of each town is accompanied by a location icon as a hint to encourage the user to click on the town names and be redirected to google map
- On the top right of the destinations, a header titled "Road trip Map (icon)" redirects the user to an embedded map with further details gives the user a clear overview of the route
- A simple Iframe embedded map depicts the entirety of the 3288km route across the Sahara, giving the user a detailed overview of the road trip sparing them the need to do further research
- on the top right of the header section of the map, a link titled "Your itinerary" redirect the user back to the destinations proposed on the itinerary
- Responsive gallery display two to one column according to the screen size
- High-quality images portray certain aspects of the road trip to capture the user's interest
- The gallery has an image as background and not a video to give priority to the photos
- This section helps the user prepare seamlessly for the trip with useful and clear information/instructions about the different aspects of traveling to Algeria such as the necessary visa procedure and in the desert such such camping, food, hygiene, and so on
- The images included give a clear picture of what the user might expect during the road trip
- A list of fun activities has also been added to encourage the user to book the trip
- a brief description of the expertise of the team welcoming and guiding the travelers in the desert to ensure their safety and satisfaction
- Minimal, transparent and professional design to inspire trust in the expert team organizing this road trip
- A simple form with minimalistic yet professional aesthetic for a trustworthy impression of the agency
- A radio button with a newsletter option to keep the user/customer informed about valuable and relevant promotions
- Once the send button is pressed, the user is redirected to a page with a short thank-you message
- Page markup
- Styling
- Font Styles.
- Used for icons
- Storing code remotely and deployment.
- IDE for project development.
- Figma
- To create wireframes
- Favicon Generator
- to create a favicon
- Canva
- To create a logo
- Pexels
- To download free images
- Resizepixe
- To resize images
- HTML has been validated with W3C HTML5 Validator and no errors were found.
- CSS has been validated with W3C CSS Validator and no errors were found.
- The site was sent to friends and mentor for feedback and testing
- Each feature was first tested on the developer tools before being added to the VScode
- External links open in a new tab
- The form cannot be sent without an email address
- The images and video background have been compressed for better performance and faster loading time
- The site was tested personally on IOS and Android using Chrome and Safari going through all pages and functions
- The responsiveness has been adjusted for different screens including mobile screens
- The attribute playsinline has been added to the video background tag to play on mobile screens
- The site was tested by different people on Chrome where it has initially been developed
- The site has continuously been tested on Edge by friends
- The overall performance of the site has been tested using Lighthouse and the site has passed the accessibility test
- The video background takes 1.9s to load and even longer with a slow connection
- The gallery loaded slowly and to fix it, the images were compressed including the video background
- The video background didn"t play in mobile chrome and Safari so the attribute playsinline has been added to the video tag
- The bullet list item showed next to the footer icons on small screens so it was fixed by adjusting the media queries for small screens
- Navigation bar and the logo touched on small screens. Fixed by grouping them in one div and then adjusted the size in the media queries
- A logo subtitle was used at first but to maintain a minimalistic design on small screens as well, it has been removed
- The iframe link provided by google comes with a style that interfered with the CSS styling. Fixed by removing all Html style in the Iframe
- Icons didn"t appear until multiple kits were added
- The site was deployed to GitHub following the code institute video instructions
- Go to the Settings page of the repository
- Scroll down to the Github Pages section
- Select the Master Branch as the source and Confirm the selection
- After a minute or two and it should be live for viewing. You will find the link here
- Some of the information about the Algerian desert has been taken from Zeribavoyage and algeria.com
- The social media links code is from the Love Running project
- The images and the video background have been taken from Pexels
Feel free to contact me at [email protected]