India Travel Website- UI Case Study

Harpekhna Mahajan.
Mar 25 · 7 min read

Visual Identity and Website Design

Introduction

The purpose of this project was to design a responsive travel website for a country or city.

When I started brainstorming ideas for this project, I was unsure what country or city I wanted to make a travel website for, all I knew was that I wanted to make a website for a place I knew well, in order to correctly and fairly represent it and showcase it in its truest essence.

I was born in LA to Indian parents and brought up in Mexico City. When thinking which one of these to represent I found myself being in the perfect position to represent India. Growing up in an Indian household, and having visited India once or twice a year I was familiar with the customs and daily life of India. However, being brought up in the West, I was also familiar with the misconceptions of India that is widely held in the West, something I wanted to clarify through my project.

Website Type: Tourism website on India

Deliverables: 4 Desktop layouts & 2 mobile layouts

Tools: Sketch, InVision, Adobe Illustrator.

Current Websites

As part of my initial research, I looked into current travel websites for India. I noticed them being very content heavy and being very mundane & plain: something that India is definitely not. This immediately helped me realize I wanted my website have a blog-like feel. Something that had the freedom of playing with colors and shapes, and did not have to follow the expected structure of a travel website.

Design Inception

After gathering some personal and professional research, I resorted to my design inception sheet where I brainstormed the WHY of my design. It helped me decide what my target user is, and although it’s not targeted towards one specific persona, it’s targeted towards anyone who’s planning on visiting India and experience it in all its glory.

Design Inception

MOOD BOARDS

Mood Board One: The creative directions I am experimenting on are both focusing on accentuating India’s beautiful colors, except that one accentuates them in bold and eccentric colour palette, with a powder texture to these colors that mimic the spices and colors used during Indian festivals. These bold colors, and rough texture will also serve to show a rushed and exciting city.

Mood Board Two: The second, also focuses on colors, but in a more subtle, minimal way. In this, the colors are toned down a bit against a white background, almost pastel-like. This will focus on flowy-ness of fabrics and water that are in India. For this, the texture will be water-colour like. These will serve to show the side of India that is more peaceful, and enlightening. I ended up deciding on this moodboard as I felt like it perfectly illustrated my ‘Why”.

COLOR SCHEME

The colour scheme stemmed out of this the second mood board, based on the bold colors of the fabrics and the spices. I allocated white as the base colour to allow for space in my website and

I based the colors from the spices and the curries found in most of the Indian dishes. The reds and dark maroons helped me get the dark bold colors I was looking for. The Yellow contrasted these perfectly, giving it vibrancy and excitement and the White base color helped me keep my website open and minimal.

TYPOGRAPHY

I want to focus my typography on thin and tall typefaces, to contrast the bold colors and heavy textures (powder and dense smoke).

The tall typeface will helps keep the website minimal as well. When pairing these, I wanted to make sure the body text was easy to read for the content heavy pages on my website. I also wanted the header typeface to be tall and thin to contrast the boldness of the colors and the heavy textures. For this reason, I decided to pair Fira Sans Thin (header) with Amiri Regular (body), as these perfectly fit what I was looking for.


Finalizing a Direction

After thinking of two distinct directions my project could be based on, I decided to go with the one that focuses on bold colors and movement. I revisited my mood board and added in some more images to define texture, typography and colour scheme.

INSPIRATION: Websites and artists that inspired me to make my website

STYLE TILE

After looking into other websites for inspiration and finalizing the colour scheme, typefaces and mood boards I was able to play around with iconography and button style

iconography: I wanted to keep the icons very thin and minimal in order to contrast the bold colors and busy images, but also compliment the tall and thin typography of the headers. The reason I decided to include the icons was to add simple information to the types of food (such as what ingredients/dietary preferences apply) to be more user friendly.

button style: the buttons I used were bold with a yellow colour to highlight the main call to actions. This is to draw attention and create a break between the red and maroon shades.


Sketches/Paper Prototype

My sketches helped me apply my design inceptions, where I considered how much white space to include, sketch out a Z pattern that I wanted to establish to guide the user’s eyes, and also create a homepage that grasps the user’s attention immediately.

Questions to consider after drawing out my sketch:

  • I enjoy making vector drawings and illustrations and it is something I’d like to incorporate in my website design. Can I find a way to incorporate both, images and illustrations in a way that works? Or choose one over the other?
  • Should I add more of an explanation of what the website consists of, especially under the title on the homepage?
  • Should my content be focused on the popular foods of each region AND where to find them? or is that too much/

Digital Prototypes

Desktop and Mobile Layouts

After working on these questions, and making the changes necessary, I turned my paper prototypes into digital ones, for both the desktop interface and mobile ones.


Conclusion

Learnings

This project gave me a chance to challenge myself as a designer and acquire new skills such as Sketch and InVision. I further familiarized myself with the different UI elements needed pre and post-research phase that contribute to creating a responsive and effective product. I believe if I had more time to do this project I could’ve developed it further and carried out more research such as usability studies in order to create more user-focused iterations. In addition, I would consider expanding the content within the cuisine/food focus and maybe include other aspects such as traditions in each area of India.

Harpekhna Mahajan.

Written by

UX Designer | Digitalizing happiness | harpekhnamahajan.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade