Overview
This project started as an idea of mine while I was trying to plan a road trip to the western national parks in the US. I wanted an easy way to browse possible road trip itineraries given a few starting parameters. I noted the thought in my list of possible projects to pursue. Eventually, I took a project-based user-experience design class in my department and thought that this would be a perfect opportunity to follow through with the road trip planner idea.
Below is a summary of the project our team completed over the course of one quarter.
The full project page can be viewed here
Below is a summary of the project our team completed over the course of one quarter.
The full project page can be viewed here
Intro to VOY
The idea behind VOY is that it is a one-stop site that handles the research, planning and booking phases of traveling. Our users need only enter a few very basic details of their trip such as start location, general area of exploration, days available and type of hospitality (camping or hotel). The system will then produce a few optimal routes with the most popular attractions, best overnight options and balanced driving schedule.
Research
We started off with the assumption that our site would pertain most to college students who won't be as willing to spend money on expensive flights and travel experiences, but still feel the desire to travel. In order to tailor our solution to our user base, we started by exploring our potential users’ needs through research. We wanted to determine the main pain points college students went through as they planned trips. To do so we interviewed a variety of college students and asked them about their recent trip planning experiences.
Storyboarding
The next step in our process was to create storyboards. Storyboards are meant to visually display how our personas interact with the product. Additionally, they display the user's motivations to use the product, the major uses of the product, and the results after using the product. We created storyboards to see how our personas would use the product and display the major interactions with the product. Storyboards allow us to depict a key path scenario that is then used in the sitemap to display the hierarchical relationships between the various pages and functionalities of our website.
|
Sketches
In the initial sketching phase, each team member iteratively sketched a look, feel, and potential functionality for our site. The variety in the sketches that we came up with allowed us to explore the best options for the design and layout of our site. These sketches are based on the scenarios which we came up with. Each of us came up with our own way of structuring the site in order to best fit the scenarios which came before. After we selected our favorite sketches, we worked on developing storyboards that incorporated our best sketches into the lives of potential users.
Sitemap
With several application screen sketches under our belts, we created the sitemap to formalize the way we would connect our screens in the final product. The process served as a platform through which we explored the full scale of the product’s functionality, and plotted a course for realizing that functionality. We used the sitemap as a blueprint when creating our paper prototype, where it served to guide our manual interaction framework, and ensured that the proper linkage of application screens was observed.
Paper Prototypes
Our paper prototype represents the first round of synthesis between our application design sketches and the functional layout explored in the sitemap. It consists of a series of paper screens drawn to mimic the key path of the user interface. We created the prototype to explore how users might interact with the product, and to validate through user testing design decisions we had made at earlier stages. After assembling the prototype, we undertook a series of user tests, manually manipulating the prototype to simulate site behavior in a web-based environments.
Hi-Fi Mock-ups
The high-fidelity mockups are full visual representations of our site in a web browser. They lack only the functionality of a website. We created them in order to better visualize the final design of our site - complete with fonts, colors, pictures and text. These mockups build on all of the previous elements of our work such as user research, sketches, paper prototypes and wireframes. The next step will be to add functionality to these pages and implement them on the web.