• twitter icon
  • github icon
  • dribbble icon
  • codepen icon

Quest ATX Redesign

View the project live or view the code onGithub.

About

This project was my final project for The Iron Yard. It was a redesign of Quest ATX, a cable wakeboard park located in Austin, TX. Quest ATX was the first wakeboard park in Austin and had a lot of hype in the beginning. With a shift in management and a new direction, it was time for a change in their website. They needed an update to invite more newcomers to the sport and give clear information to the experienced alike. Although it was a school project, I talked with the owners of Quest and was able to get a solid understanding of their needs.

Technologies Used

  • HTML
  • CSS3
  • Sass
  • jQuery
  • Bootstrap
  • RWD
  • Photoshop
  • Illustrator

Process

I started with user experiences, being a wakeboarder myself made finding people in the sport fairly easy. I talked to the owners, people who knew nothing about cable parks, first timers, and experience riders. It soon became apparent that the site was overwhelming to new riders and didn't provide users with an understanding of what a cable park is. I also found that tablet users lost the navigation when using the website. While the content was all there I decided it would need an easy to use layout that allowed the user to find info quickly. I moved into doing a word list, S.W.O.T analysis, and competitive market study to gain all the knowledge I could before starting my design.

After gaining as much information with the research I did, I designed five style tiles with different concepts and narrowed it down to two. After critiques from the class, I decided to merge the two concepts into one.

questatx-styletile

From style tiles, I moved into the sketching phase to figure out what the best possible layout would work for the content. I decided on one page for all the most important content and allow people to learn more by going to the specific page. I narrowed it down to two sketches and went into Photoshop to make the final decision.

Once I had the two layouts and the basic look and feel, I could see that it was missing something. I brainstormed different ideas to give the layout more personality and came up with an angular layout. Wakeboarding is very angular be it a ramp, the board itself, or just edging on the water.

questatx-wireframe1
questatx-wireframe2
questatx-mockup