Case Study: Re-Designing Website User Experience and Making it Marketing Ready
My first task as Marketing Manager at Evron Computer Systems Corp. was to re-design their website to bring it to current standards. After 2.5 months I handed over a fully re-developed site built on Wordpress that was not just a refresh, but a site ready for digital marketing. The new site kickstarted Evron’s marketing digital transformation.
Problem
The site I was given to work with was created with an old HTML format using outdated software that was limited in its abilities. While the design was outdated, the UX was suffering from a severe case of disorganization. Information was scattered across the site under over 30 different sub-menu items, case studies and blogs were stuffed on the side of different pages, site engagement was limited to direct e-mail or phone, and it’s SEO would be almost impossible to improve in its state due to both design and deliverability problems. Although there is a lot of useful information, the lack of clarity and organization causes information overload for the viewer. On top of this, the site was not mobile optimized which is unfortunate as analytics showed that the site received a significant number of hits from mobile.
The most glaringly obvious problem was the design of the site. It looked old, it was boring, and it didn’t lend itself to easy updates or changes for marketing purposes. In meetings, I described the site as one that looks to similar to an MS Word documentThere were too many colours, the logo was being resized in different ways, the font was not unique– in short it was uninteresting, chunky, and lacked a brand identity.
We want conversions! And this site was just not optimal for such a task! According to Accenture, 57% of people are already in the late stages of the buying process when they contact a sales representative. In industrial and manufacturing industries, a space Evron does a lot of work in, this influence of digital is even higher. The site’s problem was more than a digital one, it was impeding on our ability to meet the customer in their preferred space– online.
Process
The process initially began with a request to simply convert the above site to a Wordpress site. This would hopefully combat the mobile responsiveness issue, update the look a little bit, and put it on a system that can be much more easily edited. As someone coming from a marketing background, I proposed a second option– a complete overhaul of the site and to create one from scratch. With the support of a group of other team members, we were able to win out.
I started by creating a Style Guide and creating a moodboard of sites in a similar business. I did this so the site would be made on a concrete brand style of colours and guidelines, and would have a singular look.
After this, I drew out some rough wireframes of what I would want certain pages to look like. Since most pages are product pages, they should all follow the same template. Critical to introduce in the wireframes were buttons and other modes of linkage to make sure we are maximizing our Page Authority Score. Once I had the wireframes, I made a mock up on Sketch and used Craft to add hotspots to get a general idea of the site flow. Re-organization of the site was important to this step: reducing the number of sub-menu items, finding a place for all the pdf’s, figuring out menu and footer menu layouts, etc. I eventually added colours to determine where colour and images should be added.
Below are a few of the early wireframes designed in Sketch (before padding and dimensions considerations were made). Click to enlarge.
Once I created a final mock-up with hotspots, I brought it to a group of employees who were interested in being of help in the re-design process and performed some basic UI/UX testing. I gave them the file and asked them gave them a set of tasks to complete; find a specific product page, look for our IT service offerings, find a specific case study, send us a message. I watched them as they progressed to see how long each step took and then discussed with the individuals after about the experience. These findings helped me develop a 2.0 of the site. Due to time constraints, this process was by no means a lengthy one and was not done again.
With the feedback and re-designs in hand, I set off on creating the website in Wordpress. Since I already had detailed mock-ups, translating this to a site was straightforward. Once I had the site built, I began creating a layer on top that would serve our digital marketing needs (#2 on my list as Marketing Manager!). I added background code to the site to allow for Google Analytics and Twitter Analytics to complete tracking efficiently. I created a separate menu page for our Blog, which is where we could place all the wonderful case studies, white papers, e-books, and tips we already had (and were to come). Yoast SEO was brought into the mix to help with site discoverability. I ensured that alt tags were added, image sizes were optimized, metadata was added, and search snippets/headlines/slugs were created for maximum impact and maximum online presence.
I then integrated the site with Hubspot. I won’t bore you with the details of the CRM being used before, but it was old and difficult to use for streamlined marketing (and didn’t have the capability to integrate with our site). Hubspot would enable us to quickly create e-mail campaigns, track/organize contacts, comply with CASL rules, and make our site optimized for marketing overall. Through this service, I attached a Live Chat to the website along with some customized forms so information could be recorded in the CRM and sent to the appropriate parties. At the end of the day, we did all this work to increase conversions! So putting in the effort to make conversions simple and easy to handle was imperative.
Result
I’ll let the live website do the talking! It was a smash hit with our customers and our team. Here are some quantifiable results from the first 30 days of the new site going live:
Website visits increased by: 4575% (seriously! an average of 40 visits a week to almost 2000)
Bounce rate dropped by: 15%
Conversions increased by: 300%
We became mobile responsive :)
Time it takes to post a new blog: Seconds
Social Media Integration Status: Integrated and Tracking
With a new site doing some sales heavy lifting, I had to provide training to the sales team to understand the site’s role and increasing role of the digital space in a customer’s sales journey. We had to adjust sales targets, processes, and now are at a phase where I am helping sales and consulting with their online presence.