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.
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
Complexity and cost of simple changes
Complexity and cost of simple changes
Complexity and cost of simple changes
Difficult to enter content in Contenful CMS
Complexity and cost of simple changes
Vague global nav with no services listed
Difficult to enter content in Contenful CMS
Vague global nav with no services listed
Saturated colors creating visual buzz
Difficult to enter content in Contenful CMS
Saturated colors creating visual buzz
Mixed colors for interactive states
Difficult to enter content in Contenful CMS
Mixed colors for interactive states
Vague global nav with no services listed
Saturated colors creating visual buzz
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.
Style guide for text size, color, and spacing. We applied this style guide to all branded material.
Style guide for text size, color, and spacing. We applied this style guide to all branded material.
Style guide for text size, color, and spacing. We applied this style guide to all branded material.
Style guide for text size, color, and spacing. We applied this style guide to all branded material.
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
Excessive line length at 110 characters Excessive line length at 110 characters
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
We looked for inspiration from other managed services sites.
Then iterated on new layouts and updated component for different pages.
Our layouts for top level navigation and CMS pages
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.
The Framer CMS was much easier to use.
The Framer CMS was much easier to use.
The Framer CMS was much easier to use.
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
