TOURTLE.GUIDE

TOURTLE.GUIDE

A mobile app and pc prototype that visualizes a travel itinerary website.
"Where the shell are you going?"

View Project On My New Portfolio: AustinLuppowitz.com

Role

UX Designer / Researcher

Client

Personal Project

Date

Summer 2019

Overview

Tourtle is an interactive PC & Mobile App prototype that I designed around my idea of providing an online guided trip service to travelers. I enjoy planning very detailed trip itineraries for vacations I go on so I figured I should find a way to share my research with others. Tourtle would allow me to share an interactive map of activities, articles, and even full-fledged trip itineraries that other people could copy for their own trips.

The Challenge

Most people are accustomed to sharing their vacations with numerous photos that provide no additional context to others. I wanted to create a new way to share vacations with others that provides the in-depth details someone would need to know to plan their own trip.

Open Interactive PC Prototype

(Optimized for use on a computer)

Open Interactive Mobile App Prototype

(Optimized for use on an iPhone X / iPhone Xs)

High-Level Goals

  • Integrate mapping and location pins into the service.
  • Include in-depth details like transportation costs, activity level, hours of operation, and food recommendations.
  • Maps tie in with blog-style posts of locations visited and their details

Process

First to last: Research, Define, Design, Prototype, Validate, and then return to Design.
First to last: Research, Define, Design, Prototype, Validate, and then return to Design.

Research

Research Goals

  • How do other mapping services like Google, Yelp, and Zillow display location content alongside the map?
  • What users expect out of a mapping service and what they think is missing in existing services.
  • Understand how a guided trip could be implemented on a step-by-step page.

Research Methodologies

Icon for Competitive Analysis
Icon for Competitive Analysis

Competitive Analysis

Researched existing mapping services like Google, Yelp, and Zillow to understand how I can improve the travel experience with my guided tour concept.

Discovered that the hardest part of planning a trip is not finding things to do but finding out how to fit those things into a schedule.

Icon for Benchmark Testing
Icon for Benchmark Testing

Benchmark Testing

Tested various mapping and travel services to improve the user experience with better design and interactivity.

Implemented a mobile-first design for the map and content that could easily be applied to a desktop browser while keeping a familiar experience for the user.

Icon for Interviews
Icon for Interviews

Interviews

Conducted 4 user interviews with people who have low to high levels of experience traveling to find out how they plan and share their vacations.

Discovered that most spend excessive time and use multiple services when planning and sharing their vacations.

Research Cont.

Personas

I created personas from the survey and user interviews to develop empathy and to have a reference guide making sure I understood who my solutions impacted and how. I referenced back to these frequently throughout the project.

Persona for Alabaraa including the categories Bio, Behaviors, Needs & Goals, Pain Points, Personality, and Life Traits.
Persona for Alabaraa including the categories Bio, Behaviors, Needs & Goals, Pain Points, Personality, and Life Traits.
Persona for Devin including the categories mentioned previously.
Persona for Devin including the categories mentioned previously.
Persona for Taylor including the categories mentioned previously.
Persona for Taylor including the categories mentioned previously.
Persona for Hannah including the categories mentioned previously.
Persona for Hannah including the categories mentioned previously.

Affinity Mapping

The research conducted up to this point allowed me to collect the Positives, Problems, and Potential Ideas from the surveyed. I used Mural.co and the Rose, Thorn, Bud method to visualize and empathize with their feelings. I then organized these feelings with Affinity Clustering to consolidate their insights. The overwhelming conclusion was that each person had varying requirements when planning a trip and knew of no service that could help.

An Affinity Map of sticky notes including the categories Budgeting, Points of Interest, Transportation, Time Management, Housing, and Other.
An Affinity Map of sticky notes including the categories Budgeting, Points of Interest, Transportation, Time Management, Housing, and Other.

Define

Information Architecture

I used the insights from my research to determine the product roadmap to determine what features were essential and what were optional.


User Flow

A map of web navigation.
A map of web navigation.

Customer Journey Map

For the Customer Journey Map, I designated the specific task of finding and viewing individual steps of a guided trip starting from the home page.

A Journey Map for Alabaraa showing the Research, Search, Review, and Selection stages to complete a goal.
A Journey Map for Alabaraa showing the Research, Search, Review, and Selection stages to complete a goal.

Ideate

Sketches

I used rough sketches to help visualize how I could implement both the map and the content on a desktop web browser at the same time. I did not want the content to pop up over the map like Google Maps because that would detract from the guided trip’s experience. These sketches helped me get started wireframing the design.

A sketchbook page of web layouts.
A sketchbook page of web layouts.
A sketchbook page of web interactions.
A sketchbook page of web interactions.
A sketchbook page of alternate web layouts.
A sketchbook page of alternate web layouts.

Low Fidelity Wireframes

Creating the low-fidelity wireframes was immensely helpful for me to come up with the best visual hierarchy of content. I ended up creating and user-testing multiple drastically different wireframes before finalizing one that matched the mobile experience I wanted.

A Low Fidelity Wireframe of the web layout.

Iteration 1

A Low Fidelity Wireframe of the web layout.

Iteration 1

A Low Fidelity Wireframe of the web layout.

Iteration 2

A Low Fidelity Wireframe of the web layout.

Iteration 2

A Low Fidelity Wireframe of the web layout.

Iteration 3

A Low Fidelity Wireframe of the web layout.

Iteration 3

A Low Fidelity Wireframe of the web layout.

Iteration 4

A Low Fidelity Wireframe of the web layout.

Iteration 4

A Low Fidelity Wireframe of the web layout.

Iteration 5

A Low Fidelity Wireframe of the web layout.

Iteration 5

A Low Fidelity Wireframe of the web layout.

Iteration 6

A Low Fidelity Wireframe of the web layout.

Iteration 6

UI

Branding

Tourtle was a passion project of mine that I was hoping could eventually become a real service. Because of this, I decided to create a full brand for it to match my passion.


Logo Design

Originally I decided to use a goofy turtle design that was conceptualized during the early whiteboarding phase of Tourtle. I later decided to use a logo with a simplistic tone. The name was also changed from Tourtal to Tourtle to better match the spelling of turtle.


A picture of a whiteboard drawing on the Tourtle logo.
A picture of a whiteboard drawing on the Tourtle logo.
An early and goofy mock-up of the Tourtle logo.
An early and goofy mock-up of the Tourtle logo.
Iterations of the Tourtle logo illustrations.
Iterations of the Tourtle logo illustrations.

Prototype

Open Interactive PC Prototype

(Optimized for use on a computer)

Open Interactive Mobile App Prototype

(Optimized for use on an iPhone X / iPhone Xs)

Home Animation

I used the animate feature in Adobe XD to simulate the animation a user would see the first time they open the app or website.

Menu, Filters, and Nearby

A preview of the menu function, the map filter, and the map's menu of nearby locations.

Featured Content Carousel

A preview of how the featured content carousel works. The carousel is used frequently throughout Tourtle.

Articles Page & Featured Articles

A preview of the articles page. The mobile version has an exclusive interaction to cycle through featured articles by swiping left to skip, or right to open.

Example Article

An example article displaying the information hierarchy of the content. The mobile article allows the user to collapse information sections to free up screen space.

Guided Trips Page

The layout of the guided trips page is nearly identical to the articles page. However, the map on the guided trips home page only shows pins of trip locations rather than individual activities.

Example Guided Trip

This guided trip example provides three pages of content taken from a trip I previously went on. The first page of a guided trip is a trip overview. The trip overview includes basic information about what to expect in the rest of the guide. The trip overview also includes trip pre-planning information such as budget planning and booking flights. The second and third-page highlight cities I stopped in on my trip. The map of these pages allow the user to view the route I took, and also shows activities nearby.

Usability Testing

I conducted usability tests with 2 participants in person and 2 participants over online video calls. I asked the participants to perform the following actions.

  1. Find the Hours of Operation of a map location
  2. Return Home
  3. Filter your map to show Sushi options
  4. Access the Guided Trips page
  5. Navigate to step 2 of a guided trip
  6. Access the Reading content for step 2 (mobile-only test)

The participants performed these tasks in the Mobile App and the Desktop Browser. I switched the order of these for each interview.


Results

Icon for Successes
Icon for Successes

Successes

  • Opening locations and finding the hours of operation had no issue.
  • Return home on a Desktop Browser was easy and familiar.
  • Map filter works as intended
  • Desktop Browser users discovered both “Guided Trip” options and understood the distinction of the featured section on the homepage.
Icon for Needs Improvement
Icon for Needs Improvement

Needs Improvement

  • The hamburger menu was briefly confused with the back button.
  • When reading step 2 on mobile the read section should stay open while switching between steps (map visual not necessary).

Icon for Iterating
Icon for Iterating

Iterating

  • Thanks to the feedback from these tests I was able to clean up some interactions on both the mobile design and the desktop browser design. The largest update was to make the mobile read section stay open while switching between guided trip steps.

Conclusion

This was a passion project of mine and I could not be happier with the final outcome. The user interviews, surveys, and testing showed that not only is there an interest in a service like this but that I could also create a prototype that they liked and understood. This project was also a great learning experience for me as I got to experiment more with animations in Adobe XD. This was also my first project focused on the Mobile First Design Principles and I think it really helped push the final product to the next level.

Open Interactive PC Prototype

(Optimized for use on a computer)

Open Interactive Mobile App Prototype

(Optimized for use on an iPhone X / iPhone Xs)