In this blog series we will be discussing tips and tricks we learned while creating our new website. We used Webflow, since we liked the flexibility and customisability of the platform.
In this first post, we will talk about our reasoning, how we let the product speak for itself, did customer research and created a bunch of mockups before we even opened our Webflow account. Let's take a look!
Why We Wanted a New Website
For some context as we enter this series: why did we want to change our website?
We already had a nice website that had no bugs and was sturdy and looked good.
Well, there were several reasons, of which the main two were:
- it was a custom build
- it did no longer reflect Marker.io accurately
Since it was a custom build, it was difficult to make quick changes. The marketing team had to ask one of the developers for help every time we wanted to add a page or change a visual.
We wanted to give the ownership of the website back to the marketing team and free the time of the developers.
Plus, reevaluating your product-market fit and ideal customers is always important. Nothing is static, so why should your website be? In a SaaS business, where there are constantly new updates, slow changes are far from ideal.
So we started looking into other platforms to use. Our designer Emile-Victor has been following Webflow for a while, so we looked at it, and found it to be a great fit!
Webflow is an easy to use platform that makes it easy for anyone to create custom websites in a completely visual canvas with no code. We really enjoyed building our new website with Webflow!
How To Put Your Message at the Core of Your Design
When you start thinking about what you want your website to convey, you need to ask yourself: if the product could speak for itself, what would it say?
We used a framework from April Dunford's *Obviously Awesome* to identify the story we wanted to tell.
In this framework, we noticed that the focus is on what the customers think and say about the product, not about what we think about the product.
Since the product cannot literally speak for itself, you have to ask the customer!
Customer research is one of the most important things you can do to create a better website.
How To Get Your Customers To Join
Of course, not all customers are going to have feelings that are so positive they want to be your ambassadors. You have find them in order to get the best insights.
Figure out the criteria that highlight your best customers!
Take your time to really identify what criteria truly matter:
- time they have been customers
- amount of times they have used your tool
- the amount of money they have spent
- good customer support experiences
- ...
After figuring out the criteria that were relevant for us, we compiled a shortlist of about 100 customers, and sent them personalised emails.
We also added a preview of a new feature as a small incentive for them to call with us.
The response was overwhelming!
In the end, we did 25 customer interviews with clients who generously gave us their time and insights. And we loved it!
They told us their unique and detailed perspective without us having to prompt them. (Of course we prepped questions in advance but we barely needed to ask them). Our clients talked freely and happily about how we helped them and what they liked and wanted to see added.
They helped us understand the true value of our tool for our diverse customer base.
Their quotes can now be found all over the website.
We cannot recommend doing customer interviews as customer research enough. It takes a hot minute to execute, but it is worth it.
How To Translate Customer Insights Into Design
If you decide to put your message is at the core of your redesign, you might want to stay away from flashy visuals and busy designs.
For us, we wanted to make abundantly clear that the product just works.
We went minimalist, with a focus on the client insights. You can find inspiration anywhere, just be sure to make it your own and not copy others.
- We took inspiration from our partners and integrations. It is a fun way to choose colours that are recognisable and pay tribute to our partnerships.
- Another source of inspiration were other SaaS tools. We looked at many websites and highlighted the things we enjoyed to give our own spin to.
For example: Descript. Their branding is bold, simple yet colourful, and copy-focused. We liked those elements and incorporated them into our own website.
How To Start Making Mockups
Before you start creating things, have a sit-down meeting where you go through the essentials and the initial ideas.
This is never wasted time! Especially compared to making a bunch of mockups and realising you and your team members all have different things in mind.
We found that using about a day to map out thoughts, ideas and expectations really helped in the process. So actually, we spent less time on the actual mockups because we already understood a shared vision.
Once you get started on actually creating, this is our top advice: use the strengths of your individual team members!
Everyone has their own individual perspectives and skills, so they will pay attention to different details. And all details are important.
The best way to do that is not being scared to use several tools to collect these insights.
It might be a little bit more work to then transfer all mockups into your final website, but it is worth it. Trust us.
For example:
- Designers are more comfortable in tools like Figma where they can show their ideas in a visual manner
- Marketeers might just want to use a tool like Whimsical to map the page out roughly and then focus on the flow and copy
Another tip is not to take on too many pages at the start. Find the key pages that either have most important information or will become a template.
We quickly defined our key pages:
- homepage
- feature page
- an integration partner page (as a future template)
Once you get your first mockups in and go into your feedback rounds, don't be afraid to actually give it!
Sometimes friction is not a bad thing.
As long as you are not being intentionally cruel and focus on being constructive, friction is great. Friction is a tool for growing. Friction is an opportunity for better teamwork.
Now you have all your key pages mocked-up, you can move on to building your website in Webflow.
To Wrap Things Up
So to summarise:
- Let your product speak for itself: what are the key features?
- Ask your best customers for help
- Create a design style that supports that message
- Use the strengths of your team members
- Make multiple mockups but only after having a dedicated sit down meeting to discuss vision
- Only make mockups of your key pages at first
- Don't be afraid to give actual feedback
If you have all this down, we can start building the actual website in Webflow. Let's go to the next part! →
