This HubSpot CMS Development and website redesign project for Mindfields was submitted for HubSpot Impact awards in 2018.
A team of 4 from Znbound was involved in delivering on this project for this RPA consulting company.
What is Mindfields?
Founded more than a decade ago, Mindfields is a Robot Process Automation and Artificial Intelligence advisory firm that provides strategy consulting services to CXO level executives. They work with companies across verticals on emerging and disruptive technologies. Their consultants leverage proprietary tools and innovative methodologies to design and implement RPA and AI solutions, provide training and workshops and do research for clients. With the experience of automating 450+ processes, they are an indomitable force in the niche of Robotics Process Automation. Accolades have been showered upon them by leading research firms like Gartner, HfS Research and Deloitte.
The Challenge
While Mindfields is a thought leader in the Robotics Automation space their current website was not being optimized to its highest potential. Which is when Mindfields contacted Znbound to redesign their highest converting website pages. Sounds pretty straightforward?
As HubSpot power users, Mindfields entire website was to be improved using the best UI and UX Practices of HubSpot COS. The Case Study, Blog, Careers, Home and services pages were redesigned, since those mattered to traffic and consequently to their core business.
There were a few challenges that required our immediate attention.
- Slow website - Website build was slow owing to technical issues, thus providing good improvement scope.
- Right information - Showcasing right information in the right manner.
- Inadequate content - Relevant thought-leadership to boost user experience and through a content library.
The Solution
Armed with the acceptance of these challenges both Znbound and Mindfields teamed up to execute the project using agile project management methods. Mindfields had initially come to us for a redesign project but over the course of our association with them, we were able to impress upon them the importance of technical SEO. Despite having futuristic, and comprehensive content the page speed was taking their website down. We were able to minify their resources and optimize their pages to overcome these issues.
Process Orientation
At Znbound we are constantly ensuring that we create and follow processes. This website redesign project was no different. We realized that a revamped website doesn't mean throwing out the old one. That's the equivalent of throwing the baby out with the bath water! So, we decided to follow a simple 5-step design process:
- Research and brainstorming
- Wireframing
- Design
- Development
- Testing
Understanding the Requirements
We started with a kick-ass kickoff meeting to understand their current website’s functionality and who their target persona is. As an Inbound Marketing agency, we are constantly trying to orient our client’s assets to their target persona - user and buyer. Once we took their valuable input it was time to conduct an audit of their current website and conduct research on best practices. It started with a review of what their current design was, what it lacked, and how it fits in their business.
User-Friendly Design and Development
Their website needed a design refresh in balance, contrast, typography, consistency which were all causing the user to be distracted inadvertently. So, we had to redesign these pages according to design principles but in a way that they don't look way too much different from the current website. Previously, these pages were not user-friendly but were still getting good traffic. So we had to do an in-depth customer analysis and design an interface for smooth user experience. As the company is growing rapidly, we also had to design easily editable modules that were expandable and require zero developer interference. This is where HubSpot COS really helped and we were able to make the Mindfields website truly future proof.
Multiple Functionalities
As thought leaders in their space, Mindfields has multiple content assets that are exhaustive. It was integral to make it easy for users to look through the various resources provided by the company without getting lost. Here we realized that it was necessary to have multiple filter functionalities within various categories, types and topics all at the same time. If it sounds confusing, it was, because it truly was!
Developer Libraries
For the HubSpot COS work for Mindfields, the following libraries were used to create visual and UX impact.
Fancybox3
According to their website fancybox.net , it is a tool that offers a nice and elegant way to add zooming functionality for images, HTML content and multi-media for web pages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. It appears as a popup box when clicked. Have you noticed some of the videos that pop up when clicked. That is fancybox for you.
Tippy.js
It is a HubSpot friendly library that provides a higher-order component. It uses React DOM to render tooltip content. Therefore, you can fully use it in your HubSpot COS development projects easily. It appears as a tooltip when we hover the mouse.
Owl carousel
Use Owl Carousel to add an image slideshow and a content slider to any page. And by editing its CSS we can customize its style.
EasePack
This is an animation library made in JS, with which we can show the animation of "joint particles" in the background of any page or any section. Its animation shows when the mouse moves to the section.
MixItUp
This is a Library with which we can filter the content. There are many functions available in this:
• Pagination
• Dropdown filter
• Short by
• Search
• Checkbox filter
• Clear filter
The New Look
We enjoyed transforming Mindfield's website design and thereby, user experience. If you have also conducted a website redesign project with concrete results, we would love to take some notes. Please send them our way.
