top of page

Travel a'Board

The challenge: Develop a proof of concept mobile application for organizing and planning travel.

On the page I will take you through my process. ...Let the adventure begin.

01

User Research

User Interviews

My objective during the course of user research was to understand how people want to organize their travel.

I wrote a discussion guide to explain my objective, provide an introduction to the interview, entice the users with opening questions, engage them by asking specific questions, and gave them an opportunity to exit by providing their final thoughts.

iPhone.png
Memorable takeaways

 

  • Having so many different resources becomes overwhelming.
     

  • There are 3 common combinations of travelers with respect to transportation and shelter.

Noted behaviors
  • Travelers using their own vehicles for transportation are search for more terms with Google, Apple, and Waze.
     

  • Travelers who are flying are searching for terms related to gig economy apps.

Preferences
  • Reliable and accurate mobile applications.
     

  • 50% of travelers prefer traveling alone vs. with their friends, families, or co-workers.

Dislikes
  • Travelers don't know what's relevant when comparing too many choices.
     

  • Travelers aren't aware of available apps that may solve their needs.

Affinity map party!

After user interviews, I took my findings and collected them into an affinity map.

Image 2-18-22 at 1.54 PM.jpg

"I rely on Google for everything."

"If I fly I usually take an Uber."

"My [friend/family member] does most of the planning for me."

"I get overwhelmed when I start to research."

Above the Clouds

I would like to have my own digital travel agent.

NYC Skyline BW

Overwhelming, just so many things to keep up with.

Mountain Ridge

Information overload.

Dramatic Sunset

I created a folder on my notes app just for travel but it's a mess.

I created a folder on my notes app just for travel but it's a mess.

Image by Alesia Kazantceva

I just Google everything.

Competitive Analysis

I installed and researched various travel planning applications and conducted a competitive analysis. I was surprised to learn that most apps didn't have some very basic features.

competitive analysis.png

Then I used my user research findings to create a persona, Marlana.

Persona

Persona - Marlana.png

02

Information Architecture

Storyboard

With the knowledge I gained from user research, I was ready to outline at a high level the process behind the concept of the app. This helped me think about the purpose of meaningful architecture that will power the app, and build a process that seamlessly navigates the user from one feature to the next.

Untitled_Artwork.png

User Flow

Building user flows are one of my most favorite things to do. The level of zen I experience while creating these is bizarre. 
This is a high-level flow for Travel a'Board.

Screen Shot 2022-03-11 at 5.14.25 PM.png

Card Sorting

I conducted an open card sort through Optimal Workshop with 30 cards and 7 participants. I did this to help shape the information architecture for the design behind Travelers a'Board and uncovered how users expect to see content organized on the app.

Findings

Top Groupings

  • Restaurants

  • Parks

  • Dates

  • App features

Top Categories

  • Things to do

  • Dated events

  • Dining

  • Planning options

  • Activities

Screen Shot 2022-03-11 at 5.23.50 PM.png

Sitemap

Finally, I created a sitemap based on findings from the card sorting exercise. 

Untitled_Artwork 2.png
Screen Shot 2022-03-11 at 5.28.39 PM.png

03

Sketching & Wireframing

Wireframes

I finally made it to the fun stuff that people think about when they hear "UI designer."

I started with a simple wireflow sketch then translated into actual wireframes using Figma.

Untitled_Artwork 3.png
Screen Shot 2022-03-12 at 12.41.04 PM.png

04

Visual Design

Essential Concepts

Armed with user research, information architecture, and wireframes, I was ready for the real deal.

I created a high-fidelity prototype. 

 

Throughout the process, I documented some key changes I made while focusing on essential design concepts:

The Change

Round one corner of the board and card tiles.

The Concept

The Impact

Layout elements

Rectangular tiles maintain the most traditional layout element, while a rounded corner represents playfulness and evokes a sense of uniqueness that a user may feel when interacting with the element.

Added a photo of a road to include an explore icon with news headlines below.

Composition and
the Golden Ratio

Adding a photo of the road with an explore option will give the user an opportunity to realize ideas for their trip. News headlines can inspire the user as well. Positioning these elements together visually creates the infamous Golden Ratio.

Moved the Boards <> Cards slider to the top of the app with the profile and menu directly beneath.

Layout elements,
Balance, and Composition

Moving the Boards <>Cards slider nicely balanced the mobile screen layout with the navigation at the bottom. Adding the profile icon, menu, and weather broke up the space with smaller shapes.

Added a 'find getaway' slide in the overlay for empty card details.

Balance and Scale

Since the app is essentially comprised of a user's DIY content, itis a given that there will be empty space until it is filled with board or card tiles. Adding a 'find getaway' tile will inspire the user while upholding concepts of balance and scale.

Color Palette

Color is intentional. Here is a breakdown of Travel a'Board's palette:

Persona

You'll remember that Marlana is an IT professional who believes life is most fulfilled not by sitting behind a computer screen all day, but by experiencing life through travel and the activities that come with it, who wants to organize her dreams and document her memories.

Why I chose this palette

I chose this palette for its complementary tertiary colors that are unique, much like an individual's travel plans. The dominant teal green is meant to evoke a sense of calm and represent a combination of foliage and sky, earthly elements often appreciated when traveling. The orange color represents a sense of playfulness, and evokes a bright, happy feeling, much like the color of the sun just before dusk when driving along the plains in the midwest.

color palette.png

Typeface

I'm a sucker for typefaces. As an avid reader, typeface means more to me personally than almost any other visual element. 
Here's how it went down with Travel a'Board.

Primary - Montserrat Regular 

Secondary - Candara Bold

Where

Montserrat is used throughout the app on most elements - in buttons, board/card tiles, weather, news, and form fields.

Candara is used in the app's logo and as Heading 1.

Why

Montserrat's sans serif font appears clean, modern, and easy to read on a mobile app.

Candara is used sparingly to ensure the logo and board/card headings stand out. I selected it because it has modern feel and generously tapers around the edges.

05

Prototyping & Usability Testing

Prototype

Here's that prototype I was just telling you about. Exercising thoughtful essential design concepts helped ensure the app was polished and user-friendly.

Try it out for yourself here:  Travel a'Board 

Screen Shot 2022-03-12 at 1.37.24 PM.png

Usability Testing

With a complete prototype in hand, I conducted remote interviews for usability testing.

Testers:

Samuel - 45, father of two, IT professional

Danielle - 44, mother, small-business owner, creator

Kristen - 47, IT professional, animal rescuer, dog mother

Participants were asked to create a new travel board for Seattle, add a Destination card for this board for Mt. Rainier, and add trip details to the card.

Findings:

  • I missed a button, oops! 

  • First-time users may find a 'walk-me' feature useful upon account creation.

  • Users liked the travel board layout.

  • Users also liked the "In the news" feature.

  • Users weren't aware of horizontal scrolling features.

  • The app "was a really good idea."

  • Recommendation to upload a memories feature similar to Facebook's, that will remind you of past trips you took and show photos you uploaded of the trips.

 

06

Conclusion

Although Travel a'Board was simply a proof of concept, I gained meaningful takeaways throughout the process-
 

  • User research is absolutely vital to a product's success. And without users, we have an existential crisis on our hands.
     

  • I gained extremely valuable insight by conducting competitive analysis. Users want consistency, but it's important to make your product stand apart from the rest.
     

  • Don't forget usability heuristics for interface design.
     

  • Prioritize features. You can't fit every good idea into a product. In the case of Travel a'Board, users would have just ended up with the same problem they started: Feeling overwhelmed.

    As Steve Jobs is famously quoted as saying, 


    “People think focus means saying yes to the thing you've got to focus on.  But that's not what it means at all.  It means saying no to the hundred other good ideas that there are. You have to pick carefully.  I'm actually as proud of the things we haven't done as the things I have done.  Innovation is saying ‘no’ to 1,000 things.”

Thank you for coming to my TED talk!

bottom of page