Languages/Techniques used: HTML, CSS, Python, SQL Alchemy, Flask, and Jinja 2 Templates

Software: Adobe Illustrator, Adobe InDesign, and Adobe Photoshop

Introduction

I came up with Liveloúla Travel in 2019 in the last semester of my undergraduate graphic design program. The original iteration of Liveloúla Travel was a travel agency with a staff that organized the trip for the vacationer. Otherwise, the rest of the idea has stayed true to its original form. It was to be a generator based on temperature, humidity, and the time of year the user planned to travel. 

I kept this idea in my mind for a few years. In 2021, I saw an opportunity to create Liveloúla Travel for the major project for the Master’s programme in Web Design and Content Planning. 

Discover

Liveloúla Travel is for people who want to try something unique when choosing their next place for their trip to the U.S.A.

Liveloúla Travel’s generator suggests smaller towns or places outside the most famous cities everyone goes to. This format provides a spotlight for these places to not only Americans but also people who want to travel off the beaten path.

The larger travel industry does not acknowledge a distinctive audience: U.S. Residents. Compared to other countries, people in the U.S. have less time off from work, with 0 days paid minimum annual leave allotted by the federal government. The number of days off will vary between employers.

Most people in the U.S. want to see more of the world, with 76% saying so. Yet, the budget problem comes forward, with 63% saying they have never flown abroad because of the exorbitant price. (source)

Over 40% of Americans have never left the country, and more than 50% have never owned a passport. (source) For years, a U.S. resident did not need a visa to travel to Mexico and Canada; this has recently become necessary, so the statistics here can change soon. Offering places in the U.S. is a great advantage for users from the U.S.A.
Regardless, the website’s primary audience is Americans, and there are political, social, and environmental issues to address. I incorporated a note that advised all travellers to research before taking a trip to an unfamiliar area.

A vacation generator website cannot be put in control of the well-being of every single user. The website is there to be an entertaining suggestion, but the user needs to be mindful and look after themselves and their loved ones.

Define

Liveloúla Travel will provide humidity as an option for a vacation generator. The market has travel destination generators with temperature but not humidity.

Liveloúla Travel cares about users’ personal information and is also sensitive to life’s struggles. Liveloúla Travel will not ask detailed personal questions to the user when choosing a vacation spot.

How the generator works
To create a working database for the destinations, the database is written in Excel, exported into a CSV file, and then imported into D.B. Browser for SQLite. There are eight rows in the table. The names of the rows are: “id,” “country,” “state,” “name,” “description,” “link,” “season,” “temp,” and “humidity.” Due to the nature of the query from the generator form, each location has 4 data points, one for each season. The .db file can easily have more data points added to it, which makes future additions accessible.

Develop

I created four user personas to explore the various ways the site can be interacted with.

User 1: Jade, Age 26, from Brooklyn, NY
Jade is a photographer who wants to travel to new places around the U.S.A. She is up for anything, so a generator fits her needs. She is a blog writer and tech-savvy.

User 2: Rich, Age 45, Tech Nomad
Rich is a get-up-and-go type. He doesn’t have one place he calls home. He is looking for adventure and a place to explore outdoor sports and hiking.

Users like Jade and Rich are most likely to use their phones, so the website needs to be optimized for mobile use.

User 3: Thomas, Age 75, Retired, lives in Florida but is from Colorado
Thomas and his wife Martha recently moved to the warm Florida south. However, they want to travel to cooler places when Florida hits their temperature peaks in the middle of summer.

Thomas will be most likely to use the website on a desktop computer. He is also more likely to need the design to be friendly for users with low visibility, so the colour contrast and typography must reflect that.

User 4: Valeria, Age 50, Widower, Author, lives in Washington
Valeria has been hit with a tragedy. Her wife recently passed from a long illness. They did all their travelling together, so Valeria is struggling to easily plan a trip on her own without being reminded of her loneliness.

Some vacation generators ask the user if they will be travelling solo, in a couple, etc. Users like Valeria do not need to have form questions that remind them they are travelling alone and not in a family or couple.

Staying sensitive to the hardships of the user is of the utmost importance, as planning a vacation is stressful enough in the best of times.

Prototypes

Using colours that remind the user of the earth was key in this process. The branding created is whimsical and uses dotted lines, along with a dragonfly. This typography creates a sense of movement, and a desire to travel.

All of the colours used were tested to ensure all of the text had an AAA rating through WCAG standards.

Design

Color Scheme

The colour palette incorporates the colours of the earth.

Deep-Blue: the ocean, Light-Blue: the sky, Yellow: the sun, White-Blue: the clouds, Green: grass/earth

These colours are symbolic of the different elements of nature. Also, the colors work together harmoniously and create a friendly feeling for the user. 

Fonts

There are three different fonts and two different typefaces used for this project. The word “Liveloúla” and all the h1 elements on the site are in Epicursive Script from Adobe Fonts. This font is a brush calligraphy style with a slight bounciness to it. It brings the site alive and is also friendly and thick enough to be read without much struggle.

For the word “TRAVEL” in the logo, the font Forma D.J.R. is used. That is the one place this font is used. This font is a sans serif that is rounder and longer horizontally than the third and last font used for this website. 

Open Sans is the last font, and it is used for all subheads and body text. There are three different weights and two styles that are in use. The weights are regular, semi-bold, and bold. The font is also in regular and italics. 

Together, Epicursive and Open Sans are an excellent match to be side by side on the Liveloúla Travel website. I chose Open Sans as Epicursive’s companion after trying other sans serifs that didn’t quite work. Open Sans has a clean shape but is also rounder than different sans serif fonts. The energetic personality of Epicursive also needed a toned-down companion font for the body. Open Sans lets Epicursive be the main attention at first look, but the body text makes the site easy to use and welcoming.

Logo Design

Since Liveloúla Travel was named after the Greek word for “dragonfly,” it made the most sense to continue to use the dragonfly. The logo was created in Adobe Illustrator using the pen and shapes tool. The entire file is exported as an SVG to ensure that the quality is the highest possible and the file is smaller than an image file. Before inserting the SVG into the website, I optimized it on SVGOMG to reduce the file size.

This poster shows the relationship between the primary and secondary colors, the typefaces, and the different logos used on the site.

Accessibility

I wanted to guarantee that the website’s visual experience was uncomplicated for many people, including those with vision problems.

I made sure the color contrast on the text and background was strong. This contrast will make it more uncomplicated for the user to read. The current text has an A.A.A. rating.

I also explored the website operating a screen reader, which was recommended in Accessibility for Everyone. It was complicated to do so, not because the mechanics of the site were horrendous but because the overall experience of utilizing a screen reader was brutal.

Deliver

The final webpage, available at liveloula.travel (link will open a new tab), is faithful to the prototype. When the website was up and running, I sent it out to friends and family to test for any constraints and problems.

Some issues on Samsung phones were larger than iPhones, as well as a handful of stylesheet connectivity issues. However, with some changes to the code, Liveloúla Travel (at least version 1) was officially finished.

In the future, I plan on expanding the website by using a live weather API and exploring other ways to make a search more specific to or exclude certain regions.