Project Image

ABOUT THE PROJECT

SlickTrip is an online service that allows you to book a trip with friends, family and loved ones. You rate what’s most important to you on your trip and it creates a travel profile to suggest the most fitting places, activities and rentals for you to book.

MY ROLE

I was responsible for gathering this project’s requirements, doing competitive research and analysis for similar services, branding, architecting the website and web application, and creating final assets for development.

The Challenge

I was contacted by SlickTrip to create a unique travel experience for their users. They needed something that would be intuitive but fun to use. Most modern-day travel websites (with the exception of a few) are normally pretty cluttered and have every amount of information that you can think of crammed on the page. SlickTrip's main goal was to avoid all of the information overload that plagues most travel sites.

Research & Competitive Analysis

This was a pretty challenging stage of the project because there are so many similar services out there from Gogobot, Minube, Nara, Tribes etc… with Olset being the closest match to what SlickTrip was trying to achieve. I signed up for every single one of them to really dig into their user flows and figure out all the things they were really offering to see how SlickTrip’s concept compared.

I documented and shared all of my findings with the stakeholders, got some great feedback, and proceeded to the next stage of the project.

Competitor Sites

Personas

This part of the process is always so fun. Since I was working remotely it was a bit of a challenge to run a persona definition session with the stakeholders. We pulled it off and they actually put me in touch with users afterwards to validate some of the assumptions we were initially making. Getting these right was crucial to how SlickTrip was to move forward and how we would define the success of the project's short and long-term goals.

Persona Map

Below are some of the personas that were created, edited, and finalized.

Personas

Sketching It Out

I spent some long hard hours sketching and some minimal paper prototyping to get all the layouts and flows to a place where it didn’t feel so overwhelming to create an initial travel profile. The on-boarding process had to be as streamlined and intuitive as possible. Going straight to sketching is usually my go-to because it allows me to explore all possibilities very quickly and evaluate them with stakeholders and users.

Sketch

The intial interactions that I sketched out for booking a trip on the homepage were confusing to almost all the users I tested on. I was basically forcing them to select one option before moving on to the next and that just didn't match up with how they expected to enter information in the forms. I made some quick amendments to allow users to select in any order they wanted. I immediately saw a difference in the ease of use.

Sketch

Wireframes & Prototypes

I was initially given some rough wireframes by the stakeholders to demonstrate the basic flow of the app so I spent roughly a day sketching more ideas to make sure we had an optimal user experience.

I jumped into Sketch the following day to start putting together some digital wireframes so that I could create a prototype for the team to get feedback on. I used InVision for prototyping because it’s so easy to just import the whole project and share with anyone you wish. We went through a ton of iterations. Below is a glimpse at an InVision wireframe prototype screen.

Prototype

Visual Design

Following the intended flow from the wireframes and the interface library, it was time to put it all together. There were some small adjustments to certain layouts after sharing the high-res prototypes and final assets with team.

To my knowledge, the company actually has this project on hold so I can’t provide a link to the live site. Hopefully I’ll be updating that soon though.

The Brand

The stakeholders had a pretty good collection of inspiration but I wanted to put together a moodboard for them to see if we were all headed in the same direction. Overall, I think the end result of putting this together really helped put everyone on the same page and gave everyone a sense of equal contribution.

The logo took a couple of sketches to really find something simple but also portrayed a sense of personalization. I wanted to kind of follow in the recent footsteps of the Airbnb logo and the different shapes that can be found within. After many sketches, the team ultimately decided on the location marker/drop pin with the circle below. At first glance, it just looks like a standard location marker but there is an avatar type shape that can be found within. It’s pretty abstract and subtle but it is there.

Color Palette
Logo Exploration

UI Library & Icons

I used the wireframes and brand guidelines to design a library of all the elements I’d be using to do the visual design and end product. This was the first project that I’ve used a red color for a primary and positive action color instead of the normal traffic light metaphor. I shared the assets with the team, made some small tweaks and then I got the green light to go ahead and start on the final visual design.

User Interface Library

Screens

Below are some of the final screens for SlickTrip.

When I first discussed the layout of the homepage for SlickTrip with the stakeholders, they wanted to do something very minimal and different. So many of their competitors's homepages are overwhelming in the amount of menu options, images, text blocks and sections that it doesn't lend very well to what their audience was going to expect. I made some recommendations to add a features section. One of the assumptions we made was that all users won't necessarily want to watch the intro video so we needed some way to convey the key features of the site via text along with a straight-forward and intuitive place to immediately begin planning your trip.

Homepage

Since collaboration is a huge part of the value prop of SlickTrip, I decided to go with a full page for the sign in and sign up pages to accomodate enough space for quick social sign ups.

Login and Signup

The steps in which a user starts curating their travel profile preferences were my favorite pages to design. I knew I needed to follow a very big UX principle here which is making sure the user has a sense of where they're at in the process. I experimented with putting all the steps on one page but it didn't really come across very well with anyone I tested on.

Steps

A decision was made after some initial testing to add snippets of the matching criteria specific to the user's preferences to the listing results. This gave test users a bigger sense of personality from the service and a feeling of being catered to. Positive feedback all around.

Listing

Trip details are displayed in the order of the users itinerary so they can quickly glance and see a high-level view of flights, lodging, activities, and rentals. I decided being able to manage your trip from one single page was the best route because in the early stages of sketching, I kept getting questions along the lines of "Where do I reserve X" or "Is it possible to do X from here". It was obvious the second navigation for these options were getting overlooked.

Trip Details

There were numerous iterations on the adding collaborators flow. I decided to make it a modal for focus and separate facebook and twitter contacts. There was confusion about whether to search for a full name or a handle. It was an obvious decision to separate the two for now.

Add Collaborators

Pretty standard account setting page – I used information gleaned from personas to mimic a lot of the layouts and controls of other social media settings pages so users would feel right at home.

Account

Results

From a design standpoint this project was a huge success. I took the requirements given to me and the research I gathered to create a great experience for users. As far as I know this project is currently being developed and will be launched soon. I will more than likely add those details here once it’s completed.