Design

First, I worked with the team to identify and define GORUCK; the brand, the culture and the customers. From this investigation, it was determined that we wanted to keep the existing color palette and flat design aesthetic. GORUCK has a lot of great photos of the events and gear, so showcasing those photos was also important. The sitemap and navigation also needed to be reworked so that customers could easily navigate from one part of the site to another without ever ending on a page without anywhere else to go. A drop-down main navigation with the top-level items always displayed solved this problem.

I also designed a page hierarchy that utilized the photo collection to distinguish the home page, top-level and sub-level pages. The home page is designed with a full page gallery that provides customers with an initial visual representation of GORUCK. To encourage exploration of the site, each picture in the gallery links to a different page on the site. The next level of pages in the hierarchy have a full-screen image collage banner. On the sub-level pages, the full-screen banner collage is replaced by a three image/video section.

The product pages were redesigned with a new thumbnail slider to account for the numerous product shots of each individual product. Attention was also placed on moving all important call-to-actions above the fold so that customers could read a brief description of the product, the price and click the buy button without ever needing to scroll. Below the fold, tabs were utilized to provide customers with additional information.

Front End Development

I reviewed the project plan and Photoshop comps that I created in the design phase to begin the front end development phase of the website redesign. The project requirements for the front end code included utilizing clean, standards compliant HTML and CSS. To improve searchability, proper attention to coding with best SEO practices were kept in mind. A responsive grid was also to be implemented.

Once I completed the front end code, I passed along my HTML, CSS and Javascript files to the back-end programmers for the integration with NOP (e-commerce CMS) and .Net code. Once the redesign was completed, I regularly updated the HTML, CSS and JavaScript in source code by utilizing Visual Studio 2012 in the MVC Team Foundation Server environment.

Responsive

The project plan required that the website be responsive as to better engage customers. I chose Twitter Bootstrap as a CSS framework to create the backbone of the responsive grid. Additional fluid containers were created as needed. I further utilized media queries to fine-tune the site for tablet and mobile devices.