StaffTraveler

StaffTraveler is the leading app for finding flights, at least that is if you are working for an Airliner.

screenshot StaffTraveler website desktop

StaffTraveler desktop

Concept

StaffTraveler is the leading app for finding flights, at least that is if you are working for an Airliner. StaffTraveler was created to help you find a flight of choice nearby to fly non-rev on. All other sites or apps were expensive, cluttered, inaccurate or they just didn’t seem to work. The mission of StaffTraveler is to build a global online airline community to help each other to get to places. In order to achieve this they have recently rebranded their application. But the website stayed behind. The next step is to implement the rebranded design of their app onto their website. And that is what I’ve done for them.

Users and audience

The target users of StaffTraveler are professionals working in the airline industry. These users like to do things fast so they can focus on things that actually matter. This means the website has to be lightweight and navigation must be quick.

This user group is recognisable for the use of iPads and smartphones offline. To accommodate this offline feature the site needs to be cached on the device local using service-workers and optimised images.

Team

I worked together on the website with the StaffTraveler CEO. He made a list of requirements the website should have and helped me learn “new” developing techniques such as Webpack 4 and SASS.

Design process

I started out by analysing the current website and the redesigned app. I marked text copies and images I liked and made a style sheet based on the app.

Proxima Nova

Colors

sketching a few layouts for the website. Each layout was based on the redesigned app and focussed on the 4 types of website visitors. ( competitief, spontaan, methodisch en humanistisch ) I narrowed this down to 1 main focus group, based on the airline persona.

A sketch of 4 possible website layouts.

A sketch of 4 possible website layouts

After choosing a design we both liked we started researching tools and techniques to make a prototype of the website.

The prototype was made in Sketch and animated using Principle. The prototype gave us a clear insight into the interaction and behind the website. I started coding the website a quickly realised the JS libraries required for the interactions are more than 50% of the website’s size. being one of the requirements “the website has to be lightweight” we decided this wasn’t the way to go and I returned to the drawing board.

While still designing a new look for the StaffTraveler website I read a lot of books and articles about Webpack, Gulp, NodeJS, Git and GreenSock. Trying out “new” techniques and “new” JavaScript libraries were a big inspiration source for me.

After a little while I came up with a design the StaffTraveler CEO immediately fell in love with. It met all the requirements and delivered a professional, clear looking design.

Outcome

The website was well received within StaffTraveler. While the full website still has to be released, a few parts are already included in the current website.

The website nicely combines with the app and deliverers a clear business design statement. Each section on the website includes a persuasion well tailored technique to attract more customers.

Website

StaffTraveler desktop screencap - above the fold.
Above the fold

The user instantly notices a phone as an indication of a mobile app. The first call to action button is placed under the most important line of the website “ StaffTraveler, travel where you’re supposed to go” Under the phone is a second call to action located. An App Store download icon next to the text “ More than 130.000 users started their journey. This text indicates to the user “ This app must be good, already 130.000 people downloaded it. “

StaffTraveler desktop screencap - above the fold.
Features

A simple list of features is located under the fold. Each feature holds a small “funny” icon in the StaffTraveler style. The features are located under the fold for the more quicker users so they get a quick overview of features of the app and help them decide they should download the app.

Social proof

I show reactions and reviews of the app here to indicate to the user “well know” people love the StaffTraveler app. This section is based on the Social Proof principle of Cialdini.

StaffTraveler desktop screencap - above the fold.
Frequently asked questions

I wanted to reflect a transparent and open impression. The frequently asked section reflects the wish for transparency. “We know our app isn’t always perfect, but we help you however we can ! “

StaffTraveler desktop screencap - above the fold.
Overview app

For the users that like to read a bit more than the quicker users, I included a small overview or summary of the app. A few app screenshots and a primary and secondary call to action button.

StaffTraveler desktop screencap - above the fold.
Footer

The footer includes a sitemap / overview of the website and a few social networking buttons.

Animation

The website features a header animation designed to draw attention using a low cost Transform translate3D animation. The animation runs on the GPU instead of the CPU for a better performance and faster loading time.

The overview animation reflects a well designed website and tries to persuade users to download the app.

Next project

SAVI