Adventure Van Roof Rack - Website Configurator (Part 3)

This will be a continuation of a project that students worked on over the last three terms. The project is coming together nicely. The foundation is in a good place and now time to polish it into a working app that we can deploy on our live website.  There are lots of functionality, logic, UI/UX that needs to be added or improved along with troubleshooting bugs and testing QA. The last group has great documentation to get you up to speed.

At Orion Van Gear we specialize in making innovative premium roof racks and exterior accessories for adventure vans. Check out our website here: https://orionvangear.com/ We are based in McMinnville, Oregon, and make all our products right here in Oregon. One of our CAD engineers was an OSU alumni. We are a fast-paced company with a passion for adventure and the outdoors. Our Mercedes Sprinter Stealth+ roof rack consists of multiple extruded aluminum crossbars (the # varies depending on the length of the van). We designed the rack to be fully adjustable so our customers can slide the crossbars forward or backward or remove/add extra crossbars depending on their roof layout. Most vans have a combination of roof fans, air conditioners, solar panels, and hatches, and this design allows them to build the rack around these items. We recently released six patent-pending modular roof deck panels that can be added to this rack that allow for a walkable deck space, more storage, or mounting for walkable solar panels. We are looking for your help to finish our “roof rack configurator” that allows a customer to design their roof rack. They Select the wheelbase/model of their van and then all the items that they already have installed (from the most popular fan models, ACs, etc) and then place them on the configurator where they are located on their van. Once those items are placed they will be able to see and try the different combinations of solar panels, and roof deck panels that will work with their layout.  Here is where the last team left off:

Project Continuance:

Current release problems/workarounds: 

  • Checkout/Purchase is not implemented: One critical issue is that users are unable to complete the checkout and purchase items in the cart. It's essential to test and incorporate this functionality. By doing so, Orion Van Gear aims to enhance the user experience, leveraging the configurator application to streamline the checkout process.
  •  Index page is not streamlined: The index page (where users select pre-installed components) contains options which are unnecessary, such as selecting ladders and solar panels. These should be stripped from the page and reduce the page to only the necessary options to reduce clutter. 
  • Configurator drag-and-drop is only partially implemented: Currently, users are able to drag products onto the van and move them around although sometimes a product will disappear or become unresponsive. We suspect this has something to do with how the configurator responds to a conflict with the product cutout and the van’s roof rib exclusion zones.

Possible next phase priorities:

  • Complete index page 
    • Fix layout measurement selection. The instructions for how and why to define measurements are not clear. Sometimes when these fields are automatically updated the preview text is overlapping the numbers. 
  • Complete drag-and-drop
    • Inspect the way the configurator deals with product cutouts (the area under the product that needs to be cut out of the van’s rooftop for ventilation, etc). 
  • Finish updating product metafields with Orion’s data 
    • Orion will need to add a “single crossbar” product. Currently, the crossbars seem to come in only two packs.
  •  Finish adding placeholder images to metafields. 

    A continuous dialogue with stakeholders and an agile adaptation to changing requisites will be the cornerstone of the project's success.

Objectives


The ultimate goal is a working online configurator.

  • UI/ UX improvements
  • The system analyzes end configuration and verifies fitment works 
  • Test and fix bugs
  • Clean up GUI
  • Finalize and implement on live website
  • Party!

More info once joined do to NDA.

Motivations


Currently, for each customer that wants a rack with deck panels or multiple solar panel options, we need to get pictures and measurements of their van in relation to what accessories they already have installed. Then we create a proposed mockup using photoshop end them try to verify that the measurements and crossbar placements are correct within our CAD models. It is a long back-and-forth process that creates a lot of frustration for the customer, takes A TON of our time, and ultimately adds a lot of friction to a process that should be much more fun and interactive. After all, our customers are adding a sweet functional roof rack to their adventure van!  This would be unlike anything we have seen in this space and open the door to many projects in the future. 

Qualifications


Minimum Qualifications:

GraphQL

Preferred Qualifications:

Shopify’s Oxygen platform, React-based, Hydrogen storefront, GraphQL


Details


Project Partner:

Matt Hardy

NDA/IPA:

NDA Required

Number Groups:

2

Project Status:

Accepting Applicants

Website:
www.orionvangear.com
Keywords:
JavascriptWeb ApplicationsWebsiteMobile DevelopmentSoftware EngineeringProblem SolvingConfiguratorRoof Rackorion van gear
Card Image Capstone