Loading

UX Design & Prototyping for the road trip app ELLEN BARYSHEV

PROBLEM

One of America's favorite vacation times is the family road trip. Usually family members have limited vacation time and they want to visit as many interesting places as possible during that time. Thus, they have to find all such places along the chosen route. In addition to proximity of these places along the route, there are several other things to consider, such as: each family member might have different interests, so there should be fun for everyone; the income of the most families in USA is quite limited, and this factor should be considered; some families have small children, or elderly people with special needs; somebody might want to take the family pet, etc.

Usually family members have a discussion expressing their wishes and needs, and after that one of the members organizes the trip. It is quite a challenge to consider all the factors; therefore, a good app would be very useful.

OBJECTIVES

To create a family road trip app, which helps to plan the trip easily considering people’s interests such as discovering places of attractions, seeing beautiful nature along the way, having the opportunity for physical activities, exploring local famous food places, finding nice and affordable motels, etc.

The whole app serves to help the user to plan the road trip and pin all selected places to the customized road map.

FRUSTRATIONS TO AVOID:

  • Long driving time between points of interests
  • Restaurants, motels or other points of interest that don't live up to expectations
  • Inaccurate business information (hours, address, etc) for points of interest online
  • Points of interest all over the place and hard to organize into single route
  • More possible problems

TWO PERSONAS

PROJECT

Developing UX for the family road trip part - a tourist attraction, particularly, finding an art museum in a certain city.

Card sorting

I created a set of attractions and activities, and asked several people to categorize them, adding more items if needed.

User flow

Scenario: working on the road trip map, the user decided to start with an art museum to visit in a particular city. This particular city has quite several good museums, but because the time is limited and the journey has to be continued the next day, the user’s family has to choose only one of them.

Simplified user flow variation:

Wireframing

Task: conduct a short user test with a paper prototype, then use your results to create a basic wireframe design in Adobe XD.

Road trip: finding an art museum in a particular city not far from a booked motel

Note: I work only on the museum part of an app; therefore, several initial steps are missing:

Scenario: during his journey, the user plans to stay in a city Moorwick and already booked a motel; among several attractions, the user has time to visit only one art museum, not further than 30 miles from the motel. He has to choose between several art museums and finally put a pin for it on his road trip map.

Part 1: paper wireframes, with which I conducted a user test

Paper wireframes

Part 2: detailed wireframe created in Adobe XD

Visual prototype

Style tile and mood board

Task: create a style tile, a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand, to help planning the design of the user interface.

Working Prototype

Task: using Adobe XD, create a working prototype of an app design and conduct a short user test.

This particular part of an app is choosing an art museum. The user starts with the beginning of the app, and then chooses Boston as one of the cities for one-two days stop (and booked a hotel there). He decides to find a good art museum not further that 30 miles from the booked hotel. He chooses Museums among the Boston’s attractions, then Art Museums. He got a list of several art museum, which he can switch to the Map view. From the list, if he is sure about a particular museum, he can either pin it to his road map, or he can read more about it on the screen with information, and then pin it from that screen. If he doesn’t like the museum, he can return to the list of the art museums.

The pinned museum appears in red. When the user clicks on that pin, the road directions will appear.

Note: any pin can be unpinned

FINAL DELIVERABLE:

Working prototype for an art museum search in Boston.

USER TESTING VIDEO

Note about missing fonts: there are prototype fonts problems on mobile devices: because of the missing fonts on the cell phone and their substitution, the prototype text is incomplete, especially on buttons. Here is the appearance on both devices:

Credits:

Created with an image by pan xiaozhen - "the way"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a copyright violation, please follow the DMCA section in the Terms of Use.