When Squarespace Just Won’t Cut It
Why Marketers Choose Custom Websites Over SaaS Platforms
Most websites (despite how they’re designed) have the same type of layout: primary navigation, a body area, a footer, headings, paragraphs, images. And, unlike 10 years ago, you don’t have to be an expert coder to design your own website. CMS’s (Content Management Systems) like Joomla! and Wordpress, allow you to create your own website easily. Using an administrative interface with tools like WYSIWYG’s and image fields–the same basic interfaces you work with on a daily basis with social media–you can create, on your own, a unique website with high-level content.
But a pretty standard layout.
We call this the “Wordpress Effect” because most websites–when you get down to the user experience–generally look the same (half of the internet’s websites are built on Wordpress according to Builtwith data).
This is why organizations still opt for developing a custom website–the UX ceiling. You can’t design your own custom user experience without directly customizing your content management system itself. Which means with a SaaS website platform like Squarespace, that only allows you to interact with the website’s code through the interface their team has built for you, you’re going to hit a customization ceiling.
Developing a Custom Website For Your Users And Your Team
There are a few reasons why websites aren’t custom built anymore, but the most common is ease of use. It’s likely that we have all–at some point–struggled with a website whose administrative interface makes very little sense, and uploading a single blog post can take half a day. Any major edits or adjustments to the website have to be made by the developer who built it for you–the only one who knows your system. It’s incredibly frustrating.
Fortunately, website technology has evolved. Open source platforms–like Drupal and Wordpress–offer administrators the opportunity to manage their website from a familiar interface, but also have the ability to directly access the platform’s code and customize their website for a unique UX.
Here are some of our team’s favorite website UX’s:
BIGSOUND Buzz pulls data from social media to determine the most popular musical artists. Additionally, it streams music from Spotify. All together, it provides a fun, unique user interface through which users can interact with music statistics.
A favorite among our team, AllTrails UX allows users to find hiking trails within their location. An interactive map shows the routes of those trails across the local terrain, and the trail’s web page is filled with reviews and ratings from other hikers.
Diamondback uses a customizer for their Andean bicycle model that allows users to customize features like crank length, gear size, base bars, and other details and see those changes update the product image.
How were these custom user experiences designed? Let’s break down Diamondback’s Andean customizer.
How to Design A Custom User Experience
Diamondback contacted our team early in 2016 to help them create a website that could support a more unique UX. In this particular example, the UX supporting the shopping experience around their bike, the Andean.
Diamondback’s Andean triathlon bike is characterized by an innovative design that can be highly customized to suit each rider. Triathletes can customize their exact pad stack and reach for the forward bars based on exact measurements of their arm and leg length and then based on a complex algorithm developed by the bike designers.
Before it was launched, Diamondback wanted to create an online shopping experience that could support the Andean bike’s level of customization. A typical web product detail page wasn’t going to work. In addition, the bike, with all of its custom components and specifications, needed to be added to a cart as a single bill of materials.
The first step of designing this UX was to create an interactive walkthrough of the experience, which our front-end developer did using the tool Axure. When there are literally 10’s of thousands of combinations, it’s important to get the grouping and steps in the customization flow just right. Once the front-end experience had been nailed down, our developers started building the technology to support it.
The customizer is dependent on four key pieces of tech working together.
The eCommerce Store: Magento is holding hundreds of underlying simple SKU’s for every component. Magento is key for listing available parts, pricing, quantity, and images. It also then receives the final Bill of Materials (BOM), and processes eCommerce orders through to the Diamondback ERP system. (For more information on our work with Magento eCommerce platforms, click here).
The Framework: Angular.js works as a communication layer between the front-end UX, where customers are clicking various selections, and the data coming in from Magento. The “factory” that handles all of the communication and data passing between systems is custom built.
The Front-end UX–What Your Users Use: This is where customers experience the customizer. In Diamondback’s case, their customizer is built in a Drupal page, although it could fit in most CMS’s. This was built based on graphic design provided by Diamondback, which referenced the Axure wireframes that were initially reviewed. (For more information on site building with Drupal, click here).
The Image: Scene7 provides the on-the-fly image compositing. This is an Adobe technology that takes specifically named layers of photoshop files and will re-composite them instantly. A URL is constructed dynamically from a user’s selections, and passed to Scene7, then the image of those components in place is shown as the product image. (For more information on integrating Scene7 with your website, click here).
When You Need a Custom Website
If you want to create a unique, branded website UX for your users, you’re going to require a custom website. The benefit of doing so now, rather than 10 years ago is that it’s actually a lot easier than it used to be. You don’t have to trade ease of management for a complex, beautiful website.