Complete Website Design In Under Three Weeks with Webflow
At Hello Heart, we help people with high blood pressure track, understand and improve their health. We are a B2B2C startup, meaning our clients are Fortune 500 companies — the largest employers in the United States — whom we help save on healthcare costs while helping their employees improve their health.
Four years ago, our WordPress website included a blog where we published interesting posts about high blood pressure for our consumer target market.
When we became a B2B2C company, we used the same blog to publish news and post updates about our company, including open roles. This turned out to not be the best platform to do this. Our offering has evolved over time, and it was hard for us to update our website to reflect the changes over time. And, working on WordPress with a custom-built theme, we relied on our R&D team to maintain the website. Meaning, we took their time away from actually building and improving our products.
It was time for an overhaul.
The Challenge
We were clear on what we wanted the new website to be:
- It must highlight our business and reflect our new brand as a B2B2C startup. The content must primarily be directed at potential leads and clients, with a few pages reserved for end-users who want to research before joining.
- It must be easy to update on an ongoing basis, particularly the following pages: Careers (for open positions), News (company news and articles published about us in the press). We should be able to update these without relying on R&D.
- It must maintain our SEO rank with the new site.
- Preferably, hosted externally (not on our servers) to avoid ongoing maintenance.
The Search
My first instinct was to turn to WordPress. I started going over their themes and tried quite a few of them, but soon realized that despite my prior experience with HTML, CSS, and JS, I still needed a developer to create a fully customized website. Overall, I did not find WordPress easy enough to handle on my own.
I considered using some other platforms, in talking with some SEO and WordPress experts, they all agreed to “stay away” from platforms that allow you to simply drag-and-drop. They all gave their blessing to WordPress (obviously) and Webflow.
Eager to figure out which platform would be the easiest for us to work with, I decided to give Webflow a chance. It took me 30 seconds to create an account and about an hour later, I had a fully functioning, customized header and footer. I was even able to mimic a section of a page from another website I was looking at as inspiration. A few more hours of experimenting and watching Webflow’s friendly explainers, I was sure I could create a customized website that would fit our needs.
The next step was to experiment with Webflow’s CMS feature. I wanted to make sure we would be able to keep updating the website over time. In about 30 minutes, I was able to create a not-yet-designed-but-fully-working Careers page. Nice.
Then, I wanted to make sure we had the right tools to maintain our existing website’s SEO ranking. After a bit more learning and experimenting, I was able to easily figure out all the 301 redirect options, DNS changes, etc. Done.
The Project
We deliberately designed all the pages inside Webflow. We iterated quickly and went page by page, section by section. In Webflow, you design a section for desktop, then use their built-in breakpoints to design the pages for tablets, then to landscape for mobile devices, then to portrait. Going section by section for all devices helped us make sure we did not design and implement things that would become a mess later on.
When we were still getting familiar with Webflows capabilities, we collected a document with the desired content (not at all designed). By the time we started designing, we had the actual content on hand.
Once a page was done, we held a design review with the relevant people while continuing to work on the other pages.
It took my team approximately two weeks to build our new website, from design, content to full launch. I’d say the process was approximately 95% smooth and easy due to the following:
- Webflow’s amazingly helpful support articles, forums, and super responsive reps (via email).
- Our previous experience with writing HTML, CSS, and JS helped whenever we needed to solve a bit more complicated issues.
- Migrating from Wordpress to Webflow was pretty easy, though it did require some R&D work to be able to export the content from Wordpress, but it was pretty short work on their side.
- SEO-related actions and settings (like adding metadata) are easily discoverable for each page in Webflow’s Pages panel.
- Integration with external services (adding the Facebook Pixel, Google Tag Manager, etc.) is easy through the project’s settings.
- We built some great interactions and animations (like bar charts buildups) with the built-in, basic but powerful animations option.
- Hosting was easy to define. We just moved the DNS directly to Webflow’s URL instead of the previous one. Same goes for 301 redirects. If you are revamping an existing website and want to maintain your URLs and help Google and other search engines recognize the new URL of the previous changes, it can be easily done using Webflow’s Settings panel.
Limitations
As with any project, there were a few hiccups:
- The Designer interface can only be used on a single computer at a time (at least with the plan we are on), so we had to log out of our account when we needed to pass issues to a more experienced HTML+CSS dev.
- Webflow’s CMS allows you to add, edit, archive and delete entries into the website’s database(s), but as far as I know, for now, it does not allow end-users to create new entries — only using the Designer and Editor and the Webflow’s interface.
- Only one email address can receive form submissions from a Webflow site.
- All editors have permission to edit all the website’s content (pages) and CMS entries. There is no option for separate permissions for each CMS, for example.
Just how well did it go?
Right before launching our website, I had a meeting with a few of the people in charge of our messaging. They had an in-depth discussion about the messaging on our pages, and once they decided on each phrasing change, I did those changes on the spot and published it to the web. They were amazed by how quick and easy it was and couldn’t believe the changes were already there.
The team can now update the website’s content on their own, without the need of a developer or a designer. That is, in my opinion, the magic of Webflow: it separates the website design and development from content editing and provides easy-to-use interfaces that literally everyone can use.
If you have a basic knowledge of HTML, CSS, and JS and you are after a platform that allows you to quickly create a website from scratch, I highly recommend using Webflow. I actually declared “I’m in love with Webflow” quite a few times during this whole process.
