With a new year, comes a new look - Welcome to the brand new Roam.ai website! After a couple of months of early mornings, late nights, liters of coffee, and take-out Chinese food, we’re proud to present our new website for 2023 and beyond. Check out our new product and solution pages, revamped docs, the about us page, the team page, and of course, the blog page.
Along with announcing our new Roam website, we thought it was a good idea to talk about the process of building one. And yes, this is one of those rare blogs that doesn’t talk about using ChatGPT to solve all issues under the Sun. I know we’re guilty of it too, but my LinkedIn newsfeed is just full of it. With that said, I do wish that ChatGPT wrote Prince Harry’s new book because golly does that sound like an awfully tough read. Never let that guy near a keyboard again (the poor ghost writer).
Anyway, building a website was a new experience for some of us at Roam but that made it all the more fun, and we thought it would be interesting to give readers an idea of how a young Amsterdam startup goes about building its own website from scratch.
From scratch
A new website was something on the 2022 agenda from the beginning, but unforeseen circumstances saw us at the tail end of the year without one. I’m fuzzy on the details, so excuse me if this comes off too nonchalant, but during a meeting in November one of our team members said “why don’t we try to build this ourselves? How hard can it be?”. With the tech team fully focused on product development, we were trying to find a way around this. Turns out our Account Executive, Louis, learned basic HTML code during the Covid pandemic as a student. That’s a good start. Then Joe, our CTO, recommended we check out Webflow, a software service that helps build and host websites. Low and behold our Product Designer, Hitesh, had worked on Webflow before as well:
After an afternoon on the Webflow platform, it was evident that with Louis and Hitesh at the helm we could actually get this done. Now all we had to do was actually start the process of building a website.
It’s a process
Having established that we had the capabilities to build a website we were met with the next challenge: the look and content. Since our founding in 2017, we have evolved as a company but we’ve also developed a brand along the way. Therefore, we needed to figure out how we could uphold that brand while delivering a new online presence.
If it were solely up to me on how things would look, this website would be a train wreck. A precise location SDK, geofencing solutions, Nearby API, beacon technology, and last-mile delivery? Content like that wouldn’t have made the cut as I would have been too busy figuring out how we could add Bloons Tower Defense on the homepage. It would have closely resembled a wish.com version of the 1996 Space Jam website.
Enter the beautiful world of collaborative thinking. That’s why we have meetings, Slack huddles, feedback sessions, brainstorm sessions, "Louis, why isn’t it possible to add Bloons Tower Defense" sessions, etc. The in-person meetings (see picture) were a great way to get things done quickly, but with a team in two locations, and a time difference to think about, this wasn’t always possible.
Slack huddles were a daily thing with Louis and Hitesh figuring out the design, me working on content, and Hugo giving advice, ideas and feedback on all fronts. Even with the time difference, Hitesh was delivering visuals like they were Ford model T’s, and despite our often chaotic way of describing what we’re looking for, he always delivered.
Content was a subject of change almost daily as we tried honing our tone of voice while coming up with creative subheadings, informative body texts, utilizing keywords that are essential for SEO, and overall keeping the language informative but not too tech-heavy. It’s fun to have clever/creative slogans and phrases but if it’s not informing the website visitor about what we do, and why they are on the website, then it’s not contributing much. Visitors need to know that we provide precise location solutions for their mobile apps. That includes not just location tracking, but things such as geotargeting. Hence, we created product pages that include our Geofencing API, Nearby API, Insights API, Trips API, and Location SDK. Tagged onto that, we created solution pages that feature last-mile delivery, ride-hailing, retail, fitness, and user-tracking. Ultimately the goal with these pages is to give visitors a more informative and clear description of what we provide, and how we can help.
But content goes further than this. From meta-descriptions, to Open Graph titles, we really had to focus on the details to make sure the website was fully complete when it was launched. Luckily, with a platform like Webflow, sweating out the small stuff like title tags and urls was an easier time than expected. This gave us a good opportunity to focus on developing our SEO and seeing where we can improve from the previous website.
The How-to
We’ve talked about the experience of building the website but it's time for the “how to” part. The problem is, when it comes to the details of the matter I wasn’t the guy knee deep into Webflow. So I asked Louis for help.
This is how that conversation started:
Me: “Hey man, you’ve done a good job, could you explain to me how-”
Louis:
He really said that. Without hesitation, that’s how he responded. He said that, and then he took a phone call:
After his call he decided to write it out for me.
Step-by-step guide
Here’s a step by step guide that will help you build the best website possible, and save a lot of time in the process:
1. Sitemap
The first step to creating a website is creating a sitemap. A sitemap is nothing more than a map for your website (thank you Monsieur Obvious). It outlines every page on your website and under which (if any) other pages they nest under. This serves as a great first step because it aligns the whole team as to how many pages you will have, and is essentially the same as starting an essay with a bullet-point outline. Here’s an example of a sitemap:
2. Initial design
Once we had a clear overview of how many pages we had to design and what the overall structure of the website was going to be, we started knockin’ em out one by one. We sat together to think about the basic outline of the page, and the general content. For example, for the solutions pages we would write “landing header section, 4 benefits section, zig zag sections with all 4 benefits, customer success story…”. This again gave us more information to work with once we would eventually start designing the website on Webflow.
3. Webflow University
Obviously experience with HTML and CSS helps a lot. But the advantage of using a platform like Webflow is that it’s code free! The platform allows you to fully design, edit, and style your website without a lick of code. To help you figure out how their platform works they have “webflow university” which is completely free. It’s a great place to start, or to go back to if you get stuck along the way.
4. Templates
Here we get to the first time-saving tip, and it’s a big one. When you make your website on Webflow, you have the liberty to make the website from scratch and do everything yourself. Or, you can use Webflow’s templates, which will save you a lot of time. Whether it’s the navbar, feature sections, customer success stories, or blog sections, you’re sure to find your match. Of course you’ll have to edit the templates to fit your brand colors and overall design language, but you’ll save a ton of time, and you’ll get a head start on display optimization.
5. Classes & Components
Components and classes help you save time when you make edits to your website to ensure you don’t have to go page by page. If you give elements a class, the styling will be matched but the content will not. If you make something a component both the styling and the content will remain the same (useful for a navbar or a footer, for example, as they should be the same throughout the whole website).
6. Design everything on the desktop breakpoint
This is a very important point! When designing a website you have different “breakpoints” which are pre-set screen sizes that match certain devices (say Macbook Air 11”, iPad pro 10”, …). On Webflow, if you design on the main “desktop” breakpoint, anything you do will trickle up to bigger breakpoints and down to smaller ones. However, if you would design everything on the bigger breakpoint, it will not trickle down to the smaller breakpoints. Does that make sense? Basically: design everything on the main “desktop” breakpoint so that when you get to display optimization you already have a head start.
7. Display optimization
While we’re on the topic, display optimization ensures your website looks good on a laptop but also a smartphone, tablet, or external monitor. If you have used templates and designed everything on the main breakpoint you’ll already have a head start. That being said you’ll still need to go over each breakpoint and make sure everything looks good.
The main tip here is that your website does not have to look identical on each breakpoint. This means that you can (and sometimes should) hide, resize, or change certain elements depending on how they look on smaller or bigger screens. For example on our website, the image on the landing page of a solutions or products page is hidden for smaller devices.
8. SEO
I could spend a lot of time writing this section but there are so many resources online that I'll stick to the basics. Respect the Headings ordered, so using H1 for page title, H2 for section header, etc. Make sure images have descriptions attached to them. Fill in the title tag and meta description sections in the page settings. Identify and use keywords in the content of your website. Marc spent a good chunk of time on this, coming up with meta-descriptions and title tags. We’re lucky he did because he forgot about Bloons Tower Defense (to everyone’s relief).
Want to know how Roam provides location solutions?
Thank you for reading! If you want to learn more about our new website and what we do at Roam then check out our product and solution pages.