Arctic Wolf Mini-Site Project

Company

  • Arctic Wolf | Site Launch TBD

Date

  • April 2021 - June 2021

Role

  • UX Designer
  • UX Researcher
  • Front End Developer

Responsibilities

  • Lo-Fidelity Wireframing
  • Prototyping
  • Front End Development
  • Quality Assurance Testing

Technologies Used

  • Protoshare (Wireframing Tool)
  • Adobe Photoshop
  • HTML & CSS/SCSS
  • PHP
  • Prepros
  • Github / Git

Overview

RV Wholesale Superstore (RVWSS) is a longtime client of Artonic. Operating out of Sylvania, Ohio and serving the entire US and Canada, RVWSS offers the best RV brands on the market at wholesale prices. Their website acts as an online store to capture and drive sales of RVs to people all over the country.

Solution

RVWSS has numerous dedicated mini sites for RVs they offer. The purpose of these websites is to capture leads for potential sales and customers, and drive traffic to their website. In April of 2021, RVWSS approached Artonic with the desire to create a new mini site for an RV brand called Arctic Wolf. The existing RV mini sites we’re not mobile or user friendly, did a poor job of advertising the RVs they 're focused on, and were in need of a layout and design update. Because of these factors, Artonic and RVWSS decided to revamp the layout and design of the Arctic Wolf minisite with the intent of using its design as a model when updating the existing mini sites upon project completion.

Goals

  1. 1. Create a low fidelity wireframe of the home page and 10 accompanying product pages, 11 pages total.
  2. 2. Create a click through prototype of the website for client and in house review.
  3. 3. Ensure the mini site would drive users to the main RVWSS by including CTAs and buttons to view existing RV inventory.
  4. 4. Update the form to be more user friendly and inviting to users to boost lead generation.
  5. 5. Develop the mini site based on the low fidelity wireframe I created and the hi fidelity mockups a team member created using PHP, HTML, and SCSS.CSS code.

Wireframing and Prototyping

I began this project by creating an 11 page low fidelity wireframe of the mini site using content created by a team member and approved by the client. Per the client's request, I branded the site as an Arctic Wolf site while using RVWSS fonts. I laid out the provided content based on my experience working on previous website projects and best practices of modern web design. The product pages would all follow the same outline, so I wireframed them to be identical to feel familiar to users who visited multiple product pages, and to reduce time spent on development by ensuring code could be reused during the development process.

Development

Once the wireframe and prototype had been approved both internally and by the client, I began work on developing the project. I used PHP, HTML, and SCSS code to develop the pages so that each section was its own individual component. Wherever possible I reused sections of code to reduce time in the development process. If sections had a similar layout but slight differences, I used the ‘&--class’ selector to add styling elements that matched that class name (ex. ‘class class--class2). I set my SCSS files up in a way that each individual SCSS file was imported into a main SCSS file. I used Prepros to re-compile a CSS file each time a change was made to any existing SCSS file that was being imported in the main SCSS file. Development of the site concluded in June of 2021.

Interested in working together?

View ResumeContact