Zipline Utah
Website story
Creative Brief
Most people willing to hang from a zipline at lethal heights want reassurance that the company that built and maintains the facility is professional, thorough, organized, and trustworthy. When a customer comes to a quirky site they immediately become more skeptical of the company. The website representing Zipline Utah needs to represent professional, thorough, organized and trustworthy qualities to reassure the customer that this company and it’s employees can be trusted.
To be sure the company is represented positively, and to a variety of people and places, the website must be designed with RWD. Starting with mobile because it is the most common way people will access websites these days.
There are many ways to develop a website. The following document will show the best process to develop a well designed website. Starting with developing Personas.
Personas
Concept Model
It all starts with a concept and branches out from there. Thinking about the Zipline, all that it has to offer, all of it’s requirements, and important information can be overwhelming. Writing it all down and grouping them together and showing how they relate helps keep a record of all the ideas and concepts that pop up during the brain storm.
Information Architecture: Planning
After a thorough investigation of the ideas, concepts, and connections of the Zipline Utah website, I was able to come up with some Content Hierarchy and Information Architecture.
The top row of sticky notes is the main navigation. All the content for this website will be on one long page. The navigation Bar will jump down the page to the specific spot where that information is held.
Each section will be separated from the previous and proceeding contents by color blocks. I chose this design because most of the content related to each other. Learn about the individual tours, each tour has a reservation, location, and group elements relate to each tour.
Information Architecture: Site Map
Site mapping this information made the process feel like it was really progressing. It helped me to add more information in a more clear and organized fashion so that I could potentially present it in a more professional and efficient manner.
Some changes were made at this stage because I realized that I could combine all the tours into a slide show making the downward scroll of the main screen much shorter and more manageable.
The graph comes next because it gives all the essential information for each tour at a glance and in a way that can be compared to each other. I spent a lot of time making this graph and it was worth it. This website definitely needed it.
The other “pages” were added according to most accessed down to least accessed.
Sketching the Concept
Sketching out the wire frames was very helpful to get ideas out. It was essential to viewing consideration of size, shape and placement of text, images, photos, as well as navigation and symbols.
Making this website with RWD was best starting out with the mobile design since mobile devices are now used more than desktop. Once I had the mobile wire frames sketched out I continued to Tablet and then desktop. It was important to stay as consistent as possible as I worked my way across the different screen sizes.
For the mobile screen I wanted to make it interesting and have a call out. I thought it would be best to have a great photo describing the zipline and the call out in a separate area with plenty of white space to draw attention to it. I also thought it would be best to have the graph partially showing on the main screen so that the view would know to scroll down for more information.
The tablet was basically the same idea as the mobile. I increased the size of all the H1, H2, and H3 text but left the paragraph text the same size. Photos and images were increased to fit the screen size. The Graph was also increased to fit the screen size.
The Desktop had more distinguished differences. The white space around the button would be too much so I decided to limit it and make the call out button visible on the image. H1,H2,and H3 text were increased and paragraph text was once again left the same. I brought in a navigation bar instead of a big mac hidden menu as it is preferred on a larger screen with more room. I left the Graph the same size as the tablet because it would be overwhelming too large if I increased it to fit the size of a desktop screen.
Wire frame sketching helped solidify ideas and tweek problems.
Wire Framing
Creating the wire framing in sketch made it easy to align and move elements around until I they made sense and looked aesthetically pleasing.
I spent a lot of time creating that graph in Adobe illustrator. It was worth it to make all this information easily accessible and clear to compare all the different tours. A lot of questions are answered at a glance.
The concept of the slide show presentation of tours also became more clear at this point.
The mobile wire frame was designed first.
The tablet once again was basically just making the text and elements slightly larger to fit a bigger screen.
The Desktop pretty much required the same larger scale adjustments and I also added a call to action on the full screen image.
Surface Comps
Surface comps bring color and images into the design process.
I used a hero image that included the highlight of Zipline Utah.
I used orange text for the title to match the company logo.
The same color of orange was used for the call to action button to keep things coordinated and consistent. The tag line I did in light blue to compliment the orange title and look good against the blue sky.
The text above the call to action button is aligned and italicized because it was less than two lines.
The slide show title and descriptive text is left aligned to look more modern and organized than a middle alignment would have done.
Remember that the navigation bar on the desktop version will be coded to remain at the top of the screen no matter where the viewer scrolls to. This will ensure the viewer has access to navigation at all times.
Prototype
Creating a prototype is an easy way to see the basic visual and flow of the site.
I used inVision to create a prototype for Zipline Utah.
inVision has many wonderful easy to use features. However, it did not have a feature to jump or link to a spot on the same page. My website is meant to have a fixed header and as you use the menu it jumps down that “page”. I was unable to simulate this using inVision so I made two separate pages titled “Tours” and “Contact” to allow the view to see how it would look to jump there. However, because they are really separate screens I couldn’t keep a fixed header on them to show the viewer how the navigation would work and to offer them the menu at all times. If you test it out you have to imagine there is a header and touch where the big mac menu icon would be to get the menu.
I left the landing page one long scrolling page so they could also see how it looked to scroll through. The hot spots work the same as they do on the separate pages.
The sideshow part was fun to create but super frustrating as well because the slides don’t cover each other. I couldn’t figure out how to make them completely dominate the slide photo underneath. There was also the added problem of not being able to make hot spot on an overlay. Once the viewer clicks the left or right arrow and the new slide appears, there is no way to add a hot spot on the new right or left arrows to navigate left or right. The view has to click on the main screen to exit the slide show.
Prototype Link:
Conclusion
The Zipline Utah website has been built through a very organized and well thought out process. Design elements were implemented to make it to the best of my current abilities. When the processes broken down into these design steps it makes an overwhelming project become much more manageable which lends to more creativity.
Appendix
