What started as a call to discuss different web platforms, turned into a collaborative design and development project between Coalition Technologies and Roland Sands. The company is named after Roland Sands, a Long Beach, California native, motorcycle racer, and designer of custom high-performance motorcycles.
At the time, they were using a custom web CMS in partnership with their parent company, Motorsport Aftermarket Group. However, they were notified that they would need to migrate to a platform of their own, and so they reached out to CT. After numerous scoping calls with myself and the development team, we prepared a scope of work and agreement and got to work in order to meet their transition deadline.
There are always a lot of logistics to account for with data migration, and this project was no exception. Beyond that, one of the main requirements was a "Shop Your Bike" part finder, which needed a customized approach beyond what BigCommerce was capable of out-of-the-box. This was especially important for users as Roland Sands Design has a complex information architecture, and it can be hard to find the exact year, make, and model for specific parts.
Fortunately, SearchSpring was a good fit as a site search and site merchandising partner to meet this need.
One design pattern that I really love about this website is the way that Roland Sands Design seamlessly blends content and commerce within their blog, with a "Shop My Bike" approach. I'll take a look at one of their latest posts for the RSD X FOX Bagger to showcase this.
As you can see, the post features some great imagery and video content outlining the features and adjustments to the bike. For users who are potentially interested in replicating something similar, they can view a grid of images of the parts, the associated cost, and add to cart right from the blog page. Upon click, the user is also taken to the product detail page to learn more.
In order to simplify the process for the Roland Sands Design team and minimize the amount of development expertise needed post-launch, Shogun was used for this functionality as well as on other areas of the site like the video gallery.
With my UX/UI helmet on, I wanted to challenge myself with a redesign of an existing design pattern on the website. Roland Sands Design led the charge on the UI for the most part for this project, as they have a team of talented designers in house as a resource which helped cut down on project cost. Myself and the CT team made recommendations from an eCommerce, SEO, and BigCommerce standpoint which was our core area of expertise as an agency.
As I had mentioned previously, the information architecture is rather complex for this website, which was one of the main drivers for the use of a "Year, Make, Model" search function. For eCom websites with a lot of SKU's, it is pretty common to see a Mega Menu utilized on Desktop. However, in this instance, I feel that the menu is a little too mega...
I think part of the reason that the current Mega Menu feels so jarring to me is that Roland Sands Design has such great imagery and video content throughout the site, and so a wall of text links feels a bit out of place. To help with the user experience and make the menu design feel more cohesive, I decided to utilize an image grid to break up the subcategories. For this example, I've used the "Parts" parent category.
Before I designed this in Figma, I wanted to make sure I was designing a feasible solution that wasn't going to make things more challenging for the user as they navigate. One concern I had was that these subcategories (Harley-Davidson, BMW, etc.) wouldn't have their own page and would instead only allow the user to navigate to the tertiary category beneath that. Fortunately that isn't the case as you can see with this example for Harley-Davidson: https://rolandsands.com/harley-davidson/
The other concern I had was how challenging it would be for the user to navigate to the tertiary category (beneath Harley-Davidson for example) from the subcategory page. That concern was also alleviated, as beneath the "Year, Make, Model" search are filters for each tertiary category immediately available in the left sidebar.
With both of those concerns alleviated, I went forward with the design in Figma. I didn't have much trouble finding the logo and icon illustrations for the top header, and after a little research with the Inspect tool I realized that the menu categories were using Rift Bold, 20 px.
After getting the background "Skate Deck" image and chevron arrows in place, I created the black rectangle with a 70% opacity to replicate the mega menu overlay. Instead of using the text for menu items, however, I created the rectangle image grid with a white border and red category text in Montserrat similar to the original. I then sourced the imagery primarily from the category pages which I noted were typically in black and white. For any images that weren't available I pulled them from a product page, and reduced the saturation to mimic the black and white style as well. As a final touch, I added a black fill layer to the images, varying from 50-80% opacity depending on the darkness of the image, in order to make the red text stand out more prominently against the black.
Overall, I think that this is an improvement to the UX and UI, but it would require user testing to validate. It would likely also require Roland Sands Design to consolidate some of their subcategories/tertiary categories so that they are a little more streamlined and will work well with the grid concept. Perhaps a card sorting exercise is in order!
