Screenshot of different layouts for service.stand8.io

Framer Development

Marketing Site

I built Stand 8's marketing site, improving existing designs and expanding our capabilities so we could rapidly deploy new content to win new clients.

Screenshot of different layouts for service.stand8.io

Framer Development

Marketing Site

I built Stand 8's marketing site, improving existing designs and expanding our capabilities so we could rapidly deploy new content to win new clients.

Project Overview

We needed a better website for our team.

Stand 8's existing website was difficult to manage in Contentful and Hubspot. We didn't have a developer and there was no way to quickly update content or designs.

Ultimately, this was hurting our ability to bring in new business with updated, SEO optimized content and engaging landing pages.

After building PoC's in Webflow and Framer, I got buy-in on the latter.

The result was a marketing site that gave us more control, agility, and creativity to drive business growth.

Responsibilities

Framer Development

UX Design

Accessibility

Form Design

Interaction Design

UX + Copy Writing

Responsibilities

Framer Development

UX Design

Accessibility

Form Design

Interaction Design

UX + Copy Writing

Tools

Figma

Framer

Formspark

MS Clarity

SEMRush

Webflow

Team

Junior Designer

Design Engineer

Marketing Manager

Marketing Specialist

SEO Analyst

The Problem(S)

Lack of developer support

Limited design flexibility

Complicated CMS

No preview, publish, localization

Thousands if dev is needed

Lost marketing opportunity cost

Falling into technical debt

In the absence of a developer, our company website had fallen into technical debt. The code updates needed to keep the site running smoothly were not maintained. Furthermore, the design lacked consistency and needed a design refresh after 3 years.

The most painful aspect of this setup was entering content. The CMS could have 3 or 4 nested components in a single section. Creating 1 CMS page could easily take 30 minutes and we couldn't preview changes.

Design changes were costly and time consuming, and the marketing team couldn't update content or build landing pages fast enough to keep up with our growing list of service offerings.

These limitations hurt our ability to bring in new business.

The Problem(S)

Lack of developer support

Limited design flexibility

Complicated CMS

No preview, publish, localization

Thousands if dev is needed

Lost marketing opportunity cost

Falling into technical debt

In the absence of a developer, our company website had fallen into technical debt. The code updates needed to keep the site running smoothly were not maintained. Furthermore, the design lacked consistency and needed a design refresh after 3 years.

The most painful aspect of this setup was entering content. The CMS could have 3 or 4 nested components in a single section. Creating 1 CMS page could easily take 30 minutes and we couldn't preview changes.

Design changes were costly and time consuming, and the marketing team couldn't update content or build landing pages fast enough to keep up with our growing list of service offerings.

These limitations hurt our ability to bring in new business.

Difficult to enter content in Contenful CMS

Difficult to enter content in Contenful CMS

Difficult to enter content in Contenful CMS

Screenshot of design and deployment process.

Complexity and cost of simple changes

Screenshot of design and deployment process.

Complexity and cost of simple changes

Screenshot of design and deployment process.

Complexity and cost of simple changes

Difficult to enter content in Contenful CMS

Screenshot of design and deployment process.

Complexity and cost of simple changes

Screenshot of navigation menu.

Vague global nav with no services listed

Screenshot of navigation menu.

Difficult to enter content in Contenful CMS

Screenshot of navigation menu.

Vague global nav with no services listed

High saturation colors creating visual buzz.

Saturated colors creating visual buzz

High saturation colors creating visual buzz.

Difficult to enter content in Contenful CMS

High saturation colors creating visual buzz.

Saturated colors creating visual buzz

Gif of mismatched colors for interactive and noninteractive states.

Mixed colors for interactive states

Gif of mismatched colors for interactive and noninteractive states.

Difficult to enter content in Contenful CMS

Gif of mismatched colors for interactive and noninteractive states.

Mixed colors for interactive states

Screenshot of navigation menu.

Vague global nav with no services listed

High saturation colors creating visual buzz.

Saturated colors creating visual buzz

Gif of mismatched colors for interactive and noninteractive states.

Mixed colors for interactive states

Research

Different requirements. Different solution.

Different requirements. Different solution.

After exploring Webflow and Framer it became clear that Framer was the better choice for our team. It was faster, required less training, and offered the majority of features we needed for far less than Contentful or Webflow.

After exploring Webflow and Framer it became clear that Framer was the better choice for our team. It was faster, required less training, and offered the majority of features we needed for far less than Contentful or Webflow.

Webflow has all the functionality to rebuild the site in low code.

Webflow has all the functionality to rebuild the site in low code.

Webflow has all the functionality to rebuild the site in low code.

Webflow has all the functionality to rebuild the site in low code.

Framer has similar functionality with better copy and paste properties.

Framer has similar functionality with better copy and paste properties.

Framer has similar functionality with better copy and paste properties.

Framer has similar functionality with better copy and paste properties.

Full comparison report

Full comparison report

Full comparison report

Full comparison report

After building test sites in Webflow and Framer, we chose Framer because of the ease of use and incredible speed to deployment.

There were still several things to figure out but the value proposition of spending a few hundred dollars on new designs versus thousands was too good to pass up.

This less expensive, more powerful solution meant that the marketing team could focus on updating content and engaging new clients.

Design Process

A systematic approach for consistency

Not having control of our website led to inconsistent styles across different pages. Ultimately, our site didn't accurately reflect our brand or services.

To address this I established a style guide for consistent colors, typography, and components. This cut down on clutter in the designs and gave our marketing site a consistent professional look.

The style guide was also extensible to social posts, presentations, and RFP bids for the solutions team.

Screen capture of style guide.

Style guide for text size, color, and spacing. We applied this style guide to all branded material.

Screen capture of style guide.

Style guide for text size, color, and spacing. We applied this style guide to all branded material.

Screen capture of style guide.

Style guide for text size, color, and spacing. We applied this style guide to all branded material.

Screen capture of style guide.

Style guide for text size, color, and spacing. We applied this style guide to all branded material.

Solution

Design consistency and speed at low cost.

After streamlining styles and updating page types and content, we launched our marketing site in Framer. It delivered the leanest version of what our team needed.

It was fast, responsive, and relatively easy for non-technical team members to use. We could now update content, build responsive landing pages, and add whole service areas at a fraction of the time and cost of traditional development.

This significantly cut costs and expanded our marketing team's capabilities to run comprehensive campaigns.

Key Successes

Easy Content Entry/Deployment

Form Design

Lead Magnet Pages

Localization

Responsive Landing Pages

Semantic Design System

Key Challenges

Canonical URL's

Form Design

Localization

Version Control

After streamlining styles and updating page types and content, we launched our marketing site in Framer. It delivered the leanest version of what our team needed.

It was fast, responsive, and relatively easy for non-technical team members to use. We could now update content, build responsive landing pages, and add whole service areas at a fraction of the time and cost of traditional development.

This significantly cut costs and expanded our marketing team's capabilities to run comprehensive campaigns.

Key Successes

Easy Content Entry/Deployment

Form Design

Lead Magnet Pages

Localization

Responsive Landing Pages

Semantic Design System

Key Challenges

Canonical URL's

Form Design

Localization

Version Control

The live version of our markerting site.

The live version of our markerting site.

The live version of our markerting site.

The live version of our markerting site.

Screenshot of Framer CMS

The Framer CMS was much easier to use.

Screenshot of Framer CMS

The Framer CMS was much easier to use.

Screenshot of Framer CMS

The Framer CMS was much easier to use.

Screenshot of Framer CMS

The Framer CMS was much easier to use.

This is a landing page we were able to design and develop in 24 hours.

This is a landing page we were able to design and develop in 24 hours.

This is a landing page we were able to design and develop in 24 hours.

This is a landing page we were able to design and develop in 24 hours.

Localization was also possible support our office in Japan.

Localization was also possible support our office in Japan.

Localization was also possible support our office in Japan.

Localization was also possible support our office in Japan.

The proof of deployment

Our marketing site in Framer was a huge success. We could now edit and build pages at a fraction of the cost of traditional development.

This allowed us to focus on writing content, launching campaigns, and executing our marketing strategy instead of being stuck with error messages every time we tried to deploy.

This was a huge boost for our marketing team who felt empowered, and great ROI for the company as we could execute marketing campaigns faster at a lower cost.

Results

Complete design control

Straightforward CMS

Preview and publish available

Saved thousands in dev costs

Maximized sales opportunities

Complete design control

Straightforward CMS

Preview and publish available

Saved thousands in dev costs

Maximized sales opportunities

The proof of deployment

Our marketing site in Framer was a huge success. We could now edit and build pages at a fraction of the cost of traditional development.

This allowed us to focus on writing content, launching campaigns, and executing our marketing strategy instead of being stuck with error messages every time we tried to deploy.

This was a huge boost for our marketing team who felt empowered, and great ROI for the company as we could execute marketing campaigns faster at a lower cost.

Results

Complete design control

Straightforward CMS

Preview and publish available

Saved thousands in dev costs

Maximized sales opportunities

Up Next