SaaS Website

An influencer marketing company needed a better way to organize and manage their site. This design is a solution that integrates a CMS linked UI elements through Webflow.


I designed this with the director of marketing at HYPR.

Client
HYPR Brands
Date
10/09/2019
Based In
New York, NY
Scroll Down

Table of Contents

The Challenge

This SaaS marketing company needed a better way to manage their website. They launch reports and blog posts on a weekly cadence and the current system of creating, uploading & publishing this content is inconvenient & not user friendly. The lack of a central template means that editors need to have some ability with a hosting portal, a tool like Wordpress & understand how to publish this content effectively. Page structure management also suffers from the same issues and a complete lack of usable architecture.

My Role

My role here was to provide design expertise and help find a solution that could accomplish the goal of having a straightforward website structure, a CMS for blog posts and reports & a way for non experts to easily engage with the blog writing process.

Existing Site

The existing site had some basic organizational issues. What should've been individual pages were structured as drop down menus with the contextual content only existing inside that menu or in the footer of the site. There was no real way to access the platform page, resources page, or the blog. The only access existed as individual content options in the drop down menus. Blog posts were inconsistently designed and hard to sort through. Above all, the website had optimization issues that led to it having a poor PageInsights score.

Home

The old home page presents a lot of great points but it doesn't make clear what the next steps are for a visitor. The navigation structure of Platform, Resources, and About Us present a straightforward picture but as we'll see later on they are half steps. Free Trial and Book a Demo are clashing elements and present no clear call to action.

Platform

Resources

Blog

Information Architecture

The crux of this information architecture exercise was limited to creating a sitemap to clarify focus and creating a scalable CMS template since this project didn't really require an entire overhaul. The CMS was quite easy as Webflow handled the macro organization so I could focus on template & editor access optimization.

Sitemap

The first step I took was to create a sitemap that would clarify the structure of the website. Creating this took a lot of the guess work out of the process and really set up areas of focus that didn't exist previously.

Content management system

The focus for me here was to create a scalable CMS template for both the resources pages and the blog posts. I was able to create a single source CMS since they are nearly identical in content structure.

Hero section

The focus for me here was to create a scalable CMS template for both the resources pages and the blog posts. I was able to create a single source CMS since they are nearly identical in content structure.

Content section

This section is highlighting more information about the content of the article / case study metrics along with a quick call to action.

CTA section

This section tries to convert visitors to leads via a HubSpot form that lets visitors download the case study.  

Metrics banner

This banner is providing more metric & details to push the visitor to check out the case study.

Platform CTA

This CTA is strategically placed to keep the visitor on the site and improve engagement

Final Design

The final design shown below is a culmination of a couple months of work with the director of marketing for this company. I believe that it successfully addressed all the business needs and has improved the overall stature of this SaaS platform.

Takeaways

This website is a success based on its performance metrics and marketing leads conversion rates. However, the big takeaway for me is that client satisfaction is tantamount. The client was really pleased with the thoughtfulness that went into this.

However, there were definitely some challenges as this was my first time using Webflow CMS. Migrating all the old blog posts and fitting them to the new template required some patience and learning on my end.

36 pt

PageSpeed rating increase

60%

increase in visitor engagement

27%

increase in time spent on website

40%

in marketing qualified lead generation.

Next

Sooper Exchange

UI design & handoff