Interaction Design concepts for travel website


As a team in Interaction Design & Prototyping (HCDE 536) class, we had 10 weeks to design creative and engaging solutions for a specific persona in given constraints. Eventually we created a movie that displays different interactions possible using the modern day technology in a travel context.



Group project with Ankur Agrawal, Riyaz Javanmardi and Siddhartha Gudipati

Project Aspects

Interaction Design, Storyboard Video Production

My Role

Carved scenarios, sketched wireframes, designed prototypes, script writing

Contributed to research, video production and presentation


May - June 2015 (10 weeks)

The Goal

For a specific persona, designing a solution can both be easy and difficult at the same time. We were asked to create a website for supporting the travel needs of our persona. Later, we had to develop a mobile solution and envision interaction types that this solution can support in future. We sketched 40+ scenarios and fleshed out 10 of them to prepare our storyboard. We scripted the story and produced a video depicting immersive experience of our user story.


Week 4: Website wireframe and it's Axure prototype (available here)

Week 7: Mobile app prototype (available here)

Week 10: Video prototype (available here)

The Process

Problem 1:  Xiaoyu wants to spend less when she travels but has no time to find deals.
Solution: Website to check for tailored travel deals.
Note: Website content changes when user logs in to provide personalized content


This website prototype is available below. Also available at here

Problem 2:  Xiaoyu wants to spend less time planning and can benefit from mobile app that she can also use while traveling.

Solution: Mobile app to assist for planning and during-trip support
Note: Used the same process, Scenario - User Flow - Wireframing - Prototyping


User Onboarding and planning interactions

Trip planning and during-trip customization feature interactions

More screenshots of the mobile app

Key use cases for this prototype:

  • Change your itinerary and get suggested for more options right through a single click.
  • Explore more detailed information about your upcoming events in the itinerary.

The mobile app's high fidelity prototype is available below. Also available here


The above prototype also contains Information Architecture showcased in the sitemap available on left corner. 

Problem 3: Storytelling for validating the interactions.
Solution: Prepared a video prototype available below.
Storyboarded multiple interactions and scenarios by sketching out ideas. Collected all 40+ ideas and picked the top 10 to implement into a scripted video prototype. Prepared script by re-arranging the scenarios in order of impact/needs of the user.


Final Thoughts

This project allowed us to work with our imaginations and design real life interactive solutions that may not be too far fetched. By the end of this project, I was able to understand a specific persona problem and create a behavior driven solution. The interactions were targeted to entice the user and provide feedback as well as call to action for user's flow. I also gained experience in scripting a video presentation and producing video demos.