Tasked with taking over all digital ecosystems and managing a team of 6 we needed to uplevel the brand to better align with the new product offerings and course correct the product architecture. Likewise this is a business that relies on marketing to deliver leads and get users converting on pages. The site initially had a 2% conversion rate and a 75% bounce rate. We needed to fix all of that.
We didn't have a good way to work in our systems as design reviews and tools were split between creative cloud, sketch and some other tools. To make things easier I moved the team to Figma as I've been working in it for several years.
While there was some skepticism at first in the end the whole team really jumped in and learned it quickly.
User Profiles
Design System
Design systems play a pivotal role in elevating the quality of products, streamlining workflows, fostering collaboration, and, most importantly, cohesive user experiences. As the digital landscape continues to evolve, investing in a well-crafted design system has become an indispensable practice for any organization striving to succeed in the competitive market and build long-lasting relationships with its users.
I also want to mention that design systems aren't just for apps and Saas tools. Design systems are a better way to think about your branding guides, your usage of collateral, assets, you name it. When you leverage some of the great tools that are out there the design system can be the cleanest way to align various departments regardless if they have design experience.
Color Pallete
The original color story was much larger and didn't have any defined set of rules or guardrails to prevent people and things going rogue. We settled on much more simplified palette that used our own naming convention Filepine (basically dark teal) as the baseline color.
New Iconography
We wanted to come up with some unique elements for the brand and our incredible design Grace Callister came up with these which really hit the notes of our vine story and using our Filepine color elements to tell a beautiful story.
Various Components using atomic design principles
We built out our component library to have a good amount of flexibility in the CMS. We wanted to have a collection of usable elements for our storytelling on the website that would allow anyone to grab a component and apply that to a design. Likewise we wanted to leverage various aspects for other collateral, data sheets, pdfs, even videos. The team really liked the usage of Figma in almost every capacity.
Storytelling elements
Any worthwhile site needs to tell a story and create a way to help solve customer problems. But doing that in way that makes it easy for anyone in marketing, product, and sales to build pages and content can be a challenge because with any CMS you have constraints. But using our design system and our smaller molecules makes it pretty straightforward to create. We created over 40 different components that will continue to scale as the site grows larger.
Cards
We have various styles and types but all of them are built under one main parent so we can use a variety of different types based on usage.
Side by Sides
One of our baseline components used throughout the site to provide snackable information that allows a user to quickly scan the feature or benefit to see if it's applicable to their needs.
Call to Actions
The old site had no engagement points or ways to share assets with lightweight gates and lead capture mechanisms. We leveraged old assets and created numerous new ones to help with conversion.
FAQ's
In today's competitive SEO world any way that you grab a snippet is worthwhile we implemented these throughout the site.
Final Results
We grew organic traffic by 30% YoY and sitewide conversion jumped by 2%. Generating a 40% increase in MQLs.
Bounce rate decreased by 55% as well and time on site and avg. pages per user session.
