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.

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.

User Testing

We hosted a user testing in order to ensure our designs and wireframes made sense to people who were going to be using the product. The testing included 7 different people excited about traveling and our concept of joining other people’s trips. In order to focus on specific functions and use cases, we gave them 5 users goals to achieve. The tasks include pretending you’re planning a trip and exploring different destinations to go to, joining a upcoming public trip, viewing the current itinerary, planning a trip from scratch.

From observing users, listening to their thoughts out loud, and taking detailed notes, we were able to identify key issues early on. On the whole, users were able to understand the information architecture and different features easily. We summarized recurring problems and corrected them for our final solution; we documented all the feedback and design iterations into a presentation

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.
Reflection

The unique problem that we’ve identified made this project enjoyable; it was a success in solving the user problem and created a product that allowed such a diverse set of functions to be simplified and prototyped. There is a lot more to think about in terms of application flow and the user experience. I would love to go back to focus on developing specific product functions and perform more detailed interviews to utilize them in creating specific user personas and workflows. However, being able to work together from initial ideation, research, testing, to the final outcome was an amazing learning experience.

Additional Credits
Partner — Rachel Dunn
Instructor/Advisor — Hieu Tran
Share