Travel Co.
Senior Project Part I

Travel Co. is a mock travel brand that showcases the amazing wonders of Switzerland's Matterhorn and the various activities, eateries, and lodging around the area. Travel Co. was a way for me to showcase the wonder and magic of traveling to a foreign country while continuing to keep communication open between the user and the destination. This is done through easy to navigate tabs, clear landing site, and user input.

  • Team
    • Solo Project
  • Software
    • Adobe Illustrator
    • Adobe After Effects
  • Role: UI Motion Designer

    Involved mockups, user interface design, graphic design, and motion graphics.

User Interface Design
Home Page Mockup

Home page design was created to showcase the magic of Switzerland's Matterhorn, thus being the centerpiece for this landing page. The side and top naviagtions show the user where they are and where they can go. 

Design decisions:

  • All clickable buttons and text are in white. 
  • Unclickable buttons and text are either in this navy blue or another color.
  • Blue color shceme because the company is dependable, secure, and trustworthy.
HomePageV2.jpg
UI Iterations
Second Page

Various "Restaurant" pages are designed in Illustrator before switching to designing an "Activities" page. 

Inital Issues:

  • Cluttered text for each restaurant, little flavor to the options.
  • Lack of readability due to no contrast between the background and the text.
  • Blue is unappetizing for the user, thus did not fit well with "Restaurants" page.
  • Color Scheme relied heavily on the current Restaurants on the screen (which should always be subjec to change).
  • ResturantPage.jpg

  • Restaurant_Redesign04.jpg
  • Restaurant_Redesign01.jpg
  • Restaurant_Redesign02.jpg
  • Restaurant_Redesign03.jpg
  • Restaurant_Redesign05.jpg

User Interface Design
Actvities Mockup

Activities page design was created to showcase the various fun adventures that Switzerland has to offer around the area. Initially the activity "cards" are ordered from highest rating to lowest rating but the user can customize the list by Distance, Rating, and/or Price. The user may also select which area they are looking in for a more customized apporach. 

Design Decisions:

  • All clickable text are in white. 
  • All clickable buttons are rounded.
  • Blue fits the outdoor/snow mountain activities better.
  • Underlines indicate where the user is at the moment (ex: activites and 2)
  • Consistent color scheme that doesn't change based off the activities picture.
  • Card slots with essential detail is presented for quick skimming with a "More Details" option as to not slow down the flow of the page. 
Restaurant_Redesign09.jpg

Motion Graphics
After Effects 

After Effects allowed me to create motion graphics for the website. Wanted to show off the flipping of cards effects on the "Activities" Page because it helps reinforce the idea that each card is an option, gamifying the website in the sense of picking a restaurant like a playing card. This lightens the vibe of the app despite it's clean and simplistic composure.

gif_v01.gif
Reflections

In the future I want to build upon this mock website and bring it into Adobe XD to test the usabilty of the design. I'd like to capture the users reactions when deciding where they want to navigate first and if they feel transported to another destination through the interface design.

I've learned about motion graphics and it's effect on the perception of the website, potentially playing around with various animation styles. This project also taught me to think through the motion design in advance. Will this website have a parallax effect? Will the page swipe up? Will the mountain on the home page shrink into the distance? The motion design helps guides the user and gives more clarity to the website. These elements need to be thought out at the beginning stages of the workflow.