Fourth Year | Spring 2019
Professor: Rita Lee, Shelley Moertel
Duration: 2 week project
You will need to design an interactive, data-driven display that structures and presents the data in an engaging, appealing manner and meets the needs of your stakeholder and users.
We will provide you with:
A set of data about a fictional transport hub called the “Atlantis Transportation Hub” for the San Juan Islands (a real set of islands), which are located off of the coast of Washington State. The data includes information about planes, trains, and ferries.
Personas of one stakeholder and two users, with accompanying use cases.
Provided as part of the prompt for the project.
Transportation Director fo the Municipality of San Juan Islands
Elizabeth Duarte is the Transportation Director of the Municipality of the Greater San Juan Islands, a division of the local government that operates Atlantis Hub. Her department is responsible for displaying transportation data on large environmental displays in the Hub for Atlantis customers. In addition to offering highly readable displays of changing transportation data, Elizabeth aims to educate the public about the ease with which travelers can make itineraries by combining plane, train, and ferry trips through her new program, the PTF Pass, which allows customers a great value and a lot of flexibility.
Property owner and retired resident of San Juan Islands
A long-time resident of the San Juan Islands, George Shimko is an avid outdoorsman who owns modest fishing cabins on nearby Orcas Island and Stuart Island. He regularly invites his children and grandchildren to his house on San Juan Island and intends to give them PTF passes so that they can travel throughout the San Juan Islands and to his cabins on Orcas Island and Stuart Island. He wants to be able to use his home on San Juan Island as a base so his guests can plan fun tourist itineraries.
EnCo Environmental Engineer
Patrick Mulvaney, is an environmental engineer for EnCo, a large energy company in the region. As an engineer for EnCo who is stationed in Seattle, Patrick spends an average of three days per week visiting drilling and wind power sites throughout the San Juan Islands. Because weather often influences his travel between the islands, Patrick welcomes the new PTF Pass program that allows him to plan multiple trips via planes, trains, and/or ferries so that he can optimize his travel on-the-fly despite changing weather conditions.
For my first concept sketches, I investigated different approaches to how to display the complex information provided in the data.
Each approach organizes the information by 1-2 methods from Richard Saul Wurman’s “Five Hat Racks.”
Though each of the three concepts was able to organize the current data information, they did not address the PTF pass and did not allow a user to create an itinerary to travel through the islands.
The third option, which includes a larger map design, has the most potential to become a more complex interface, which would have to include information about the PTF pass and an itinerary scheduler.
User Flows (InVision FreeHand) here.
In the first digital black & white mockup, I focused on creating an experience for users to create an itinerary to travel through the San Juan Islands. This included:
Sketch Screens here.
Introducing color into the mockup allowed for a greater variety of hierarchy, in addition to type hierarchy and opacity. I chose a Burnt Orange as the accent color, paired with a deep navy blue and a light blue-grey wash.
The Burnt Orange accent color was used because it invokes high energy or excitement, foreshadowing the exciting trip ahead of them. The accent color highlights the current task at hand, such as “Where do you want to go?” as well as the main call to action buttons or links on the page.
Sketch Prototype here.
The second color mockup integrated the terminal data information provided in the prompt into the current design, by moving the itinerary scheduler to the left half of the screen, and placing the current information about flights on the right. This allowed multiple users to interact with the display; they could view the current transportation information at a glance while another user could user the itinerary scheduler.
Because the itinerary scheduler was now given less screen real estate, a lot of thought was given to only displaying important information in the “Recommended Route” page, which gives users a step-by-step travel itinerary, along with transfer stops. The map decreased in size in order to allow sufficient space for “Choose Travel Options,” and to read instructions.
The Burnt Orange accent color continued to highlight important call to actions or links that the user should utilize.
This mockup also provides more of an experience to printing ones’ itinerary, by instructing them to attend to the ticket desk for actual purchase of the transportation tickets, as the itinerary printout is not a ticket itself.
Sketch Prototype here.
For the final mockup, I chose to remove the Burnt Orange border around the screen to remove potential distractions and emphasize the white space around the page elements.
Invision Prototype & Animationhere.
When designing the animation between interactions, I chose to create a fade-in/appearing location marker for the destination that the user selects; when they touch the destination’s marker, they are able to immediately see the state change in which that location’s marker changes to an orange and increases scale. This results in a fluid and dynamic transition between pages.
This animation serves as a fluid transition between the “Recommended Route” page and the “Choose Travel” page by visually linking which travel you are searching for.