Trek
TREK is a open data source that categorizes and filters Indiana trail information. By utilizing a creative UI design, Trek helps you personalize your experience in order to find the Indiana trail that best compliments you. Its modern format of responsive web design allows you to filter over 3,500 trails. The trails can be personalized based on the types of trails, their recreational use and the length of the trail.
The Problem
The state of Indiana has a great number of parks and forests. Hoosiers have always shared a strong connection and rich history with the terrain of Indiana. Many of the Indiana towns, counties and landmarks are named for the multitude of Native American tribes who once inhabited this land. In the last 100 years, Hoosiers have become disconnected from any outside activity relating to the Indiana forests, parks and trails. How might Hoosiers take advantage of the state's great resources of trails so that they can reconnect with nature, live active lifestyles and improve their quality of life.
Meet Anna
Anna is a photography student at IUPUI. She has lived in Indiana all of her life. Originally from Crawfordsville, Indiana, Anna moved to Indianapolis in order to attend Herron School of Art and Design. After living in the city for a few years, she misses exploring the forests and brooks of Turkey Run State Park.
Anna hopes to regain this sense of self and identity within her photographs. She decides to tell her narrative by depicting Hoosiers interacting with their environments. Seeing that Trek shares the same environmental values as herself, she decides to photograph people on trails throughout the state. Because there are a great number of trails and several different types, Anna hopes will be able to properly represent Hoosiers across a spectrum.
Anna's Goals
Experience Goals
Anna wants a variety of data. She wants options and the ability to sift through those options in order to plan out her on sight photo shoots.
Even though Anna wants a wide variety of data, she also does not want to be hampered by a mass amount of information.
End Goals
Anna's primary end goal is to put together a photographic narrative that will look good in her portfolio. She also hopes that this series will shed light on the people and the state that she loves, and Anna hopes this will reconcile the longing nostalgia for her hometown and Turkey Run.
Life Goals
Anna wants to graduate from IUPUI. She wants to be a featured artists in contemporary galleries and she wants to get married and raise a family in an Indiana small town.
The Solution
Personalize Your Adventure
Trek is a website that values efficiency and utilizes creative UI design to source open data about Indiana’s trails.
Trek was designed to transform to the user. It is meant to be customized, filtered and scaled. Becuase the website is visually active as well as extremely kinetic, it was designed never to scroll and remain as a responsive internet tool fixed within your monitor’s proportions.
Trek is divided up into three phases.The first phase is divided up by trail types. The second phase is based off of recreation, while the third phase is deter-mined by the length of the trail. The trail types are forest, park, riverbank, urban, nature preserve, towpath, connector, rail trail, and long distance. For this project I did not create the layouts for the other two categories because they would essentially be the exact same in looks and function. Types of recreation would be hiking, mountain biking, road biking, canoeing, exercising, and skating. The distance could be broken up in just about any way.
Everything designed in Trek is designed to feel organic and natural. The slab serif typeface with the intersecting textures appear to grow in and out of one another. The hexagonal shapes of the icons resemble honeycomb and the flat colors signify the soft tones found in nature. The natural shape of the icons at a large scale make the process of personalizing your trail feel simple and easy. The opaque checkmark overlaying the icon illustrates which icons have been checked and are applied to the map and which are not checked.
Just about all of the icons and buttons have the same feeling and even the same shape; however, there are specific buttons that have a distinct shape and location to help the user know their function. For example, the three linear buttons symbolize the three phases of Trek. They are elongated because they need to feel more like a natural button than the icons, but they still have the hexagonal shape, which keeps them cohesive with the overall design. Another distinct button is the swipe button, which is used when you are done selecting the filter buttons and are ready to view the map. They are situated on the edge of the map and point towards the direction that they respond.
When the user switches Trek over to the map viewer, the website’s responsive design kicks in. The map becomes the central visual artifact and the filters fall to left side within a container. The map’s illustration is deter-mined by the filters that the user selected. Here the user can scale the map to help them sort through the data. I decided to use Indiana’s highways and interstates as landmarks for everything in the state.
When the user clicks on a honeycomb, a sidebar slides into view from the right side. The icon is linked to the sidebar by two lines so that the user knows exactly which one is selected. The sidebar’s background color is the same color as honeycomb icon that is selected. The sidebar contains all of the information about the trail. The information consists of the name of the trail, the name of the park/forest in which it is located, the location (usually county), recreations available, images trending on Instagram, any links pertaining to the trail and park, and a google map with directions on how to get to the trail from your current location. Overall, I hope Trek has accomplished its goals of simplicity, naturalism, and connectivity.