Sail to TURKEY App

Mobile app design visual on iPhone screen

project - A case study

Travel experience design for web and mobile

tools

Adobe XD

tasks

Design for Adobe XD Challenge: Key Screens, Interactive Prototype

Process

⇝ Style Guide

The first-day challenge started with using an eye-catching image to give the user a visually appealing landing. My goal was to use a photo that has nature and a vehicle to create a sense of travel and calmness so I chose this gorgeous sailboat photo under the sunset. My color theme was formed around the background picture. Icons were chosen depending on the website content. The font family was chosen to complement the website's modern look and feel, and cursive font was added to use as tagline fonts to match the logo and create a charming look.

Style Guide for the travel app design

⇝ Landing Page and Search Experience for Web

Given goals for the first 2 days challenge were:

Web app landing page and searching experience

The icons next to the name of the places in the suggestion drop-down are used to give the sense of what kind of place you will be visiting.

⇝ Navigation for Web

Survey results show that visitors noted the travel website lacked navigation aids. Designing a navigation experience that allows users to easily orient themselves was the next step in my design

Navigation study for a travel website

⇝ Travel Deals for Web

To compete with other travel websites, designing an experience that highlights exclusive travel deals was the next step.

Highlighted deals in travel webapp design

⇝ Web experience prototype demo

⇝ Splash Screen for Mobile

To reach more users, the travel site wants to launch a mobile app! Use auto animate to prototype an engaging splash and login experience for a travel app.

⇝ Iphone Prototypes

The mobile experience has the same components as the desktop experience to create consistency and familiarity.
Navigation kept in two separate levels; hamburger menu on top for personal information and support, bottom navigation is for travel information to make the user be able to use one thumb.

Iphone experience for a travel app project

I focused on finding the destinations that a user would want to travel before booking. Getting as much information as possible in a short time to make the decision process easier is important since this travel site focuses on a specific country.

Iphone experience for a travel app project

⇝ Mobile experience prototype demo

TOP