Viken is a simple and easy collaborative trip planner that allows you to keep all your trip details and bookings in one place. Not only can everyone on the trip see the newest update for the trip itinerary, but they could also sync their flight and hotel details onto the page. To get inspired, users can save popular attractions to then organize into specific days in their itinerary. If they’re stuck on creating a whole new trip, explore itineraries of other’s successful trips, easily copy them and edit them to your liking with a simple click. Also meet new people with Viken, by requesting to join fun public trips that are happening soon.
Feb — April
When there is a lot of people joining in on the trip, there may be different desires of what to see and do. On top of that, there is usually various changes and updates on the itinerary are not constantly sent to people or even lost within the ‘trip group chat’ to discussions of someone’s new puppy. Sometimes it is a completely new place and there just need to be a easy and reliable source of all the must-see places and activities.
The Design Challenge
How might we aid the trip planning process for a group of people?
Emily’s Use Cases to focus MVP.
The purpose of the landing page introduces first-time users to Viken, with a simple on-boarding of what the app is and how they could use the app. We have a hide option to close out the introduction for returning users and we want it to log cookies to not show it for returning users. The rest of the page provides the user a sense of what the app does and allows you to browse through various destinations in huge highlighted panels and cards of upcoming trips the user could go on.
There are various UX Challeneges that would be explained in depth throughout this casestudy. The main UX Challeneges are the large amount of functions of Viken that needs to be kept intuitive and straight forward. One of it being that there would be a lot of trips being created so every function of planning the trip will need to be contained within one page. Another huge challenege we created for ourselves
UX Challenge We wanted the app to help the user plan their trip so the Itinerary page needs to be easy to use and edit, and the user will have to quickly understand the schedules of all the seperate days.
UX Solution The Itinerary is the page the user would spend the most time on because it consists of the daily schedules for the trip, which are presented in cards of the different days. This is organized into morning, afternoon, and evening activities; this avoids conforming to a tight schedule. Breakfast, lunch, and dinner activities are highlighted to easily differentiate between food activities and other excursions. To allow the trips participants to easily discuss the trip whilst simultaneously looking at the trip plan so, we designed the message screen pinned on the left of the screen. We wanted messages to be a function in Viken so the conversations about the trip are clear and not drowned out by private conversations.
The other pages within the ‘trip page’ includes the explore pages, messages, create trip, announcements, flights/hotels, and profile page. Without feeling like the users has left their ‘trip page’, the users can use the secondary navigation to go to different pages that follows similar patterns. The profile archives all the trips the signed in user has been to; this allows easy reference to see their past trip memories. The Announcement page allows admins to post important notices that may get lost within the messages.
Initial Ideas & Development
UX Problems We initially designed the itinerary cards with a focus on photos but we realize that it is unnecessary for it to take up so much space. Especially for a packed day it may result in the page being extra long. We also had arrows to flip back and forth through the days but found that dragging it is easier and cleaner. Initially we designed the hero for Itinerary Page as a full bleed image up to the fold but it became confusing and unnecessary to fill the entire viewport without having cues for the user to continue scrolling.