Works

Overview

Globespinning is a mobile travel app that lets users create and share itineraries from pictures taken with their phones.

The founders of the app decided to work with The UX Department to create a mobile app and accompanying marketing website. The goal was to organize the required functionalities in a way that was intuitive and comprehensible. We helped define functionalities and user flows within the app, and designed the necessary visual styles.

SERVICES PROVIDED
  • Research & Concept Definition
  • Information Architecture
  • Interaction Design
  • Visual Design
  • Front-end Development

Context and Challenge

Project background and description

Globespinning, Inc. is a Seattle-based company run by two sisters, Mandy Rossi and Amy Boes, who travel often and were constantly being asked to share the details of their trips with their friends. Seeking to inspire others, they created Globespinning for all types of travelers, from detailed planners to spontaneous trippers.

We worked with the founders for over a year to build a mobile application for iOS and a marketing website.

The problem

Globespinning’s creators wanted to develop an easy-to-use mobile application that would allow users to carefully plan out their trips with help from other users’ knowledge, and then document their own trip.

From personal experience, they had a hypothesis that users would feel more comfortable making important decisions about a trip if those decisions were based on recommendations from people they knew and respected. They also believed that word-of-mouth would play an important role in setting the product apart from any other available in the market at the time.

img work
Searching friends
img work
Friend’s itinerary

Project goals and objectives

Our goal as a UX design studio was to elevate the founders’ vision of the potential of the product by determining key features to include, defining clear user flows within the app, organizing the planned functionalities, and creating a visually appealing interface.

The features to be included were:

img work
Profile

Includes user’s picture, hometown, number of pins collected, followers/following, and ability to view other users’ profile pages and itineraries.

img work
Globespinning (Travel inspiration)

Includes user’s personalized globe with places to go (green pins) and places visited (red pins). Users can search or spin the globe to see postcards (imagery) of a destination. Postcards can be collected to create an itinerary for a future trip.

img work
Places to go (Green pins)

Postcards and itineraries collected by the user. These can be used to create a travel itinerary. Pins are visually displayed on the user’s globe.

img work
Places visited (Red pins)

Displays the itineraries created by the user while on a trip. Shows pictures of each trip in a daily or category format, a map of the route taken, and a brief commentary of the trip (i.e. highlights and downsides). Red pins are also displayed on the globe.

img work
Itinerary

Includes a map and uploaded pictures of the user at a destination. Ability to share with other users.

img work
Camera

Each picture taken is uploaded in the form of a postcard. The back of the postcard is tagged with the location and stamped as either an activity, lodging, food, or shopping to allow filtering. Includes rate of the activities and a brief optional description. Ability to create a postcard from a website, the camera, or the camera roll. The user can also choose a frame and filter for the front of the postcard.

img work
Sharing

Ability to share postcards and itineraries on social networks.

Process

Discovery phase

The target market was women and men between the ages of 20 and 40 who were frequent travelers keen on improving their travel experiences. The app would let them rely on the advice of people they knew to do so, and then share their own travel experience to help other users improve theirs.

The founders of Globespinning provided a very detailed set of materials to us to illustrate their vision of the product, including low resolution wireframes and notes.

From these documents we started working on the information architecture for the app. This phase went through a series of revisions and corrections that improved the user flow and made the app as simple and clear as possible. We revised our proposed adjustments with the client and agreed on a set navigation that included the planned features.

At the end of this process we delivered the information taxonomy document (application map) including all the key pages and functionalities of the app.

img work

Interaction design phase

Once the app map was approved, we started our interaction design work. We created detailed and color-coded wireframes that displayed the structure and functionalities embedded in each screen of the app.

We designed around 80 screens, which were changed many times along the way. During very thorough client meetings, we discussed the different use cases of the app and cleansed it of all miscellaneous features to leave only the core features necessary for the MVP. Some screens were set aside, others were combined, and some were added.

At the end of this process we delivered the wireframes (low resolution mockups) for all the key pages of the app and created a prototype that was revised by the client and adjusted accordingly.

img work
img work
img work

Visual design phase

After several weeks of intense work we moved on to the visual design phase of the project. In this phase, the app icon was created, as well as a general style guide that defined the look and feel, color palette, iconography, illustrations, clickable elements, and more.

img work

Once the look and feel was approved, we worked on the design of the entire app. We decided to use color as a visual tool to set sections apart and make them easily distinguishable by the users. We also used color coding for tagging and filtering the postcard system.

We delivered high resolution mockups for each of the mobile application’s screens, and all of the exported assets, ready for implementation at every screen resolution.

img work
img work
img work
img work
img work

Collateral

We then worked on the brand, interaction design, visual design, and front-end development of a one page marketing website that served as a teaser until the app launched.

img work

Solution

Final app design
img work
User’s profile
img work
Postcard (back)
img work
Postcard (front)
img work
Itineraries – map view
img work
Itineraries – list view
img work
Itineraries feed

Results

“We really enjoyed working with them, it was fun! We appreciate that they didn’t just settle for the original wireframes we provided, but they committed to making the user experience better. They improved our vision. Also, they were always quick to reply and very thorough in working on every feature of the app.”

MANDY ROSSI & AMY BOES – FOUNDERS – GLOBESPINNING