Viken

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.

Year

2017
Feb — April

Skills

Art Direction
Collaboration
User Interface
Identity

The Problem

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?

Branding
Viken was the origin for the name, Viking, and naturally, since they traveled and explored a lot, we named our app ‘Viken’. We experimented with different ideas for the logo, narrowing them down to the compass, the pin, and other various related icons such as the wave (or topography), the boat and the more obvious Viking helmet. In the end, the pin integrated with the V is chosen due to it’s simplicity and our focus on the destinations.

Research
We analyzed individual functions and aspects of existing competitors, it helped us understand what we want to improve and what functions we want for our app. We created an user persona to help us target our app to a more specific user, allowing us to focus on her goals and frustrations.

Emily’s Use Cases to focus MVP.

Wireframing
After weeks of researching existing apps, developing personas and moodboards, and defining our app features, we produced three key Use Cases. We explored how users would interact and use the app and with that, we sketched out different ideas and came up with the initial wire frames. We carried on developing them, refining them and adding details through the next weeks.
Landing Page

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.

UX Challenges

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

Itinerary Page

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.

Ipad and Phone views of the itinerary page that allows you to add activities.

Viken Explore pages of the different activities as well as a page to view public trips.
Other Pages

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.

Additional pages of Viken App for creating a trip, announcements, profile, flights and past trips page.

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.

Development of the Itinerary
UX Solution We landed with having smaller images of each place in circles and create a list for the day. Experimenting with different styles and lists, we decided having it in a contained card with the pink background for the lunch and dinner is the best solution. It is also more intuitive to have them as contained cards to easily rearrange the itinerary. We also decided to label the itinerary with morning, afternoon and evening to make it clearer instead of just seperating them with the meals.
Additional Credits
Partner — Rachel Dunn
Instructor/Advisor — Hieu Tran
Share