Web Design | April, 2018

Saratech Inc.

Corporate Website Redesign

Case Study

My Role

UX Designer,
Web Designer / Web Developer

Tools

WordPress, Sublime Text,
Adobe XD, Photoshop, Illustrator

Timeframe

6 Weeks

Saratech Inc. needed to redesign the layout on their corporate website with a more modern, mobile responsive, SEO optimized build and update the content so that it accurately reflected the range of services they offer.

Problem

Saratech Inc. was using a website that was not mobile responsive, not optimized for SEO and the content was no longer relevant. It was created years before I came onboard using a WordPress theme, however the theme developer had discontinued support, and web components were breaking daily. The website needed to be rebuilt before it crashed completely.

Solution

Using a modern WordPress theme, I developed an updated, full-width layout design that is mobile responsive, SEO optimized and has a much more user friendly layout and navigation structure. It also accurately reflects the various Engineering services offered by the company.

The final website design can be seen above. Please note, the live website has been redesigned once again since I left the company in 2019. I did start with mockups but I do not have images of those available.

The most challenging aspect of this redesign was the timeframe and the fact that I had just been hired on at the company. All of my redesign kickoff meetings with each of the respective BUs were also my first personal introduction to all of the Directors.

As a result, I was hesitant to make recommendations for sweeping changes to the website - I was also very aware of the timeline (which was only a few weeks) to get everything done before the existing website literally crashed.

I was also not able to follow the Design Thinking Process due to extremely short timeline.

Salesforce Form Integration:

In addition to the responsive layout and SEO optimization, one of the biggest features of the new website was integrating the web forms with Saratech's existing Salesforce database. I achieved this by using a WordPress plugin called "Brilliant Web-to-Lead for Salesforce".

This plugin provides a GUI to map hidden web form fields to the corresponding field in Salesforce. This allows you to do some very useful things such as:

Auto create a new lead in Salesforce or update an existing one based on form input
Record which page the form was submitted from so sales staff know which product the customer was interested in when they follow up

To complete this integration, I used another plugin called "WP Contact Slider" to add forms on each page that contained product information on the website. As shown in the first image below, the form can be accessed by clicking on a floating tab in the browser window. This opens a form which has the specific hidden fields in each input area mapped to the corresponding data records in Salesforce (bottom image below).

If the user has an existing Salesforce record, it will be updated on form submission. If not, a new SF record will be created and populated with data from the form.

This was one of the features of the new website that stakeholders stated was most helpful. As a sales company, it was very valuable for them to gain more information about what their customers were interested in and helped boost overall sales.

Youtube Channel Integration:

Another request from stakeholders was to integrate the company's YouTube channel onto the website to boost credibility with customers and the industry.

I achieved this using a plugin called "Embed Plus for YouTube". This increased watch time and subscribers significantly by linking website visitors with the company's video content.

Conclusion

This was a challenging project to take on with an extremely limited timeframe and as a new employee just learning the ropes in a company. I'm very proud of how the site I built came out and that I was able to meet all of the expectations of the stakeholders while helping to increase sales for the company.